Анимации для web. GIF-анимации с помощью Corel Draw, Flash technology

Содержание

Слайд 2

Анимированные GIF-файлы можно добавлять в проект и это важный предмет в

Анимированные GIF-файлы можно добавлять в проект и это важный предмет в

онлайн-рекламе, где один создает баннеры различных типов. Рассмотрим как создаются GIF анимации с помощью CorelDRAW. Для начала, запустим CorelDRAW, создавая какой-то текст на текстурированном фоне. Для упрощения создания файла, есть возможность использовать несколько страниц в CorelDRAW. В этом случае изменится только текст. Для этой анимации мы создадим мастер-размер 728х90 пикселей, которые мы будем поддерживать на протяжении всей анимации. Обратите внимание на количество страниц в левом нижнем углу скриншота.
Слайд 3

Вот последовательность изображений, которые мы будем использовать для анимации.


Вот последовательность изображений, которые мы будем использовать для анимации.

Слайд 4

Следующий шаг-перейти к каждой странице и убедитесь, что все элементы выделены

Следующий шаг-перейти к каждой странице и убедитесь, что все элементы выделены

(клавиши Ctrl+А). Оттуда перейдите к файлу: Export (Ctrl+Е). В списке в нижней части диалогового окна, убедитесь, что включено Selected only. В качестве всплывающего типа, выбираем формат PNG и нажимаем Export.
Примечание: сохранить каждое изображение в последовательности. т. е. frame1.png, frame2.png . Все эти изображения должны быть сохранены в той же папке
Слайд 5

Слайд 6

Появляется диалоговое окно Convert to Bitmap. Необходимо проследить: -Убедиться, что размеры

Появляется диалоговое окно Convert to Bitmap. Необходимо проследить:
-Убедиться, что размеры соответствуют

размеру вашей анимации, в данном случае с разрешением 728х90 и 96 пикселей/дюйм
-Включить флажок Maintain Aspect ratiо
-Включить флажок Anti-aliasing
-Установить цветовой режим цвета RGB 24-бит
Примечание: не сохраняйте палеты 8-битных файлов. Это не будет работать в анимации. Начните с 24-битных файлов, а затем сохранить их в качестве анимированного GIF-файла. Теперь, когда мы сохранили изображения, как растровые файлы, то теперь нужно запустить приложение PHOTO-PAINT, которое является редактором растровых изображений.
Слайд 7

Чтобы начать, нажмите на File: Open. Выберите папку, где хранится файл

Чтобы начать, нажмите на File: Open. Выберите папку, где хранится файл

и дважды щелкните по нему. Когда он откроется в PHOTO-PAINT, перейти в Movie: Create from document в строке меню. Появится изображение - первый кадр.
Слайд 8

Появляется Movie docker в правой части рабочей области. Обратите внимание, что


Появляется Movie docker в правой части рабочей области. Обратите внимание, что

в правой части изображения, для времени устанавливается значение 200мс.Теперь добавим кадры для анимации, поступающие прямо из образа файлов, не открывая их в первую очередь. Для этого переходим в Главное меню и нажимаем в Movie: Insert from file.
Слайд 9

После этого появится диалоговое Open an Image. Выберите файл (frame2. png) и нажмите кнопку Open.


После этого появится диалоговое Open an Image. Выберите файл (frame2.

png) и нажмите кнопку Open.
Слайд 10

Появляется диалоговое окно "Insert File", который определяет позицию кадра в анимации.

Появляется диалоговое окно "Insert File", который определяет позицию кадра в анимации.

Здесь необходимо указать параметры по умолчанию, которыми являются:
Insert: After
Frame: 1
Нажмите кнопку OK, чтобы принять.
Слайд 11

Продолжайте использовать этот процесс, пока не загрузятся все кадры. Чтобы получить

Продолжайте использовать этот процесс, пока не загрузятся все кадры. Чтобы получить

анимацию, нажмите на кнопку Play button в верхней части окна Movie. Анимация будет воспроизводиться в активной области окна с последовательной частотой кадров 200 мс. После некоторых экспериментов, меняется частота кадров до:
frame1: 2500 мс
frame2: 200мс
frame3: 200мс
frame4: 200мс
В окне Movie docker 13 кадров. Это потому, что загружены кадры два через четыре, четыре раза, чтобы создать эффект мерцания в анимации. Теперь пришло время, чтобы сохранить.
Слайд 12

Для этого нажмите на File: Save as. Выберите папку, в которой

Для этого нажмите на File: Save as. Выберите папку, в которой

вы хотите сохранить файл. В списке Save as выберите GIF Animation. В поле Sort type box выберите Animation. Нажмите на кнопку Save.
Слайд 13

В диалоговом окне Convert to Palleted, примите параметры по умолчанию и

В диалоговом окне Convert to Palleted, примите параметры по умолчанию и

нажмите на ОК (можно уменьшить здесь Количество цветов, если ваша последовательность использует всего несколько цветов, что позволит уменьшить размер файла). 
Слайд 14

В диалоговом окне GIF 89 Animation Options дает Вам большой контроль

В диалоговом окне GIF 89 Animation Options дает Вам большой контроль

над анимацией. Первое, что нужно сделать, это активировать вкладку Frame Settings и и используйте следующие параметры:
Прозрачность(Transparency): не позволяют использовать глобальные (использует ту же цветовую палитру для всех кадров)
задержка кадра(Frame Delay): на первом фрейме, 250/100 сек, для периодов от двух до четырех, 20/100 доли секунды (эти были установлены на предыдущем этапе и не должны быть изменены здесь).Оставьте все остальные настройки по умолчанию. 
Слайд 15

Далее перейдите на вкладку File Settings и используйте следующие параметры: Page

Далее перейдите на вкладку File Settings и используйте следующие параметры:
Page

Size: Automatic
Color Options - Convert To: 256
Frame Repetition: Loop Frames enabled.
Set Stop After to: 5 Repetitions
Тест анимации с помощью кнопки Preview. Если это Вас устраивает, нажмите кнопку ОК.
Слайд 16

Создание анимированного GIF во Flash Программа Adobe Flash, позволяет делать анимированные

Создание анимированного GIF во Flash
Программа Adobe Flash, позволяет делать анимированные GIF

— программа имеет свои плюсы и минусы. Некоторые недавние тенденции указывают на то, что Flash устарела, но многие клиенты по прежнему предпочитают покупать анимированные Flash-баннеры. Это может оказаться проблематичным, потому что сайт не поддерживает Flash (исключение- в фазе передачи) — так дизайнерам нужно загрузить GIF-файлы для контента.
1. Get your files together
Open Adobe Flash > File > New
Then click on Templates > Advertising > 300×250 Medium Rectangle > OK
Слайд 17

Flash имеет Pen tool, поэтому есть возможность рисовать персонажей во Flash

Flash имеет Pen tool, поэтому есть возможность рисовать персонажей во Flash

и анимировать их, но можно импортировать существующий файл PNG и оживить его. Мы собираемся работать с 2 элементами: фоном и рыбой.
Слайд 18

Для двух выделенных файлов: File > Import > Import to Library > Open

Для двух выделенных файлов: File > Import > Import to Library

> Open
Слайд 19

Оба файла появится в Library Window; здесь PNG файл был преобразован

Оба файла появится в Library Window; здесь PNG файл был преобразован

в символ (который необходимо перетащить на холст).
Теперь имеются файлы с которыми необходимо работать, перетащите из Library Window на холст и скорректируйте размер и размещение по мере необходимости — убедитесь, что они размещены на отдельных слоях.
Слайд 20

Слайд 21

2. Создать анимацию Теперь решите, как долго вы хотите, чтобы Ваша

2. Создать анимацию
Теперь решите, как долго вы хотите, чтобы Ваша анимация

держалась. Устанавливаем время-5 секунд, или 120 кадров. Убедитесь, что фоновый слой является видимым для всей анимации, выбираем его, затем правой кнопкой мыши с отметкой 120 в timeline и выбраем “Insert Frame” из выпадающего меню. Теперь, выберите элемент, который вы хотите анимировать (рыба), перейдите на шкалу времени(timeline), щелкните правой кнопкой мыши на кадр позже на монтажном столе и выберите “Insert Keyframe” из полученного выпадающего меню.
Слайд 22

Перетащите элемент в то место которое нужно.

Перетащите элемент в то место которое нужно.

Слайд 23

Щелкните правой кнопкой мыши на любой кадр между двумя слоями, и

Щелкните правой кнопкой мыши на любой кадр между двумя слоями, и

выберите “Create Classic Tween” из полученного выпадающего меню. Проигрывая получившуюся анимацию можно увидеть, что г-жа Золотая рыбка плавно двигается от начальной точки до новой позиции.
Слайд 24

Рыбы умирают, если перестают двигаться, заставим ее плавать вверх и вниз

Рыбы умирают, если перестают двигаться, заставим ее плавать вверх и вниз

несколько раз, чтобы сделать анимацию. Будем повторять то, что мы только что сделали еще 2 раза через каждые 30 кадров: Right click > Insert Keyframe > Right click > Create Classic Tween. Если вы хотите скорректировать сроки, этапы анимации, просто перетащите круг черной точки по краям кадра (появится маленький белый квадрат, когда вы успешно выбрали один). Нажмите клавишу Enter или кнопку “Play” для воспроизведения анимации.
Слайд 25

4. Тестирование и редактирование анимации Click the Control tab > Test

4. Тестирование и редактирование анимации
Click the Control tab > Test Movie

> Test и можете смотреть свой кинематографический шедевр воспроизведенный в всплывающем окне!
5. Export в GIF формат
File > Publish Settings > Click the GIF checkbox > Change palette type to “Adaptive” > Max Colors “99999” > Publish
Слайд 26

Слайд 27

Если вы просто экспортировали в GIF без настройки “Publish Settings” получите

Если вы просто экспортировали в GIF без настройки “Publish Settings” получите

в конечном итоге очень зернистый, неровный GIF. Это не сделает GIF супер высокой с точки зрения разрешения, потребует много действий для улучшения. Оно не будет идеальным, но это будет идеально подходить для подачи на контент GIF баннера для чисто представительских целей.
Когда вы откроете файл на вашем компьютере, он будет выглядеть примерно так :