Перш, ніж приступити до створення кліпу нам потрібно підготувати необхідний графічний матеріал. Трішки полазивши мережею, я знайшов ось такого симпатичного «крокуючого» чоловічка у чотирьох позах. Він ідеально підійде для нашого уроку. Тому я викладаю для вас всі чотири файли. Можете копіювати їх прямо звідси.
Сьогодні ми навчимо цього чоловічка ходити!
- Відкрийте флеш і створіть новий Flash File (Action Script 2.0). Власне, версія AS (Action Script) поки що не має для нас жодного значення, оскільки ми працюємо тільки з графікою. Але для простоти нехай буде більш рання версія.
- Налаштуйте сцену. Для цього відразу ж після відкриття Flash праворуч у колонці панелі управління (дивіться попередню статтю для того, щоб розібратися з інтерфейсом) встановіть розмір сцени відповідно до розміру підготовлених графічних файлів (у моєму випадку 84 x 102). Оскільки кадрів у нашому випадку буде лише чотири – швидкість відтворення (FPS або Frames per second) повинна бути достатньо низькою. Думаю, 6 кадрів на секунду більш, ніж достатньо.
- Імпортуйте необхідні графічні файли в бібліотеку. Перейдіть в меню File -> Import -> Import to Library, виберіть необхідні файли (можна одразу чотири) і натисність «ОК».
- Натисніть F11 і перейдіть на закладку бібліотеки, в якій вже відображаються всі необхідні файли
- Переконайтесь, що в інструментах у вас вибрано Selection Tool і перетягніть перший файл з бібліотеки на сцену таким чином, щоб кадр точно співпав зі сценою.
- Розмістіть курсор на другому кадрі шкали часу (timeline) і, натиснувши клавішу F7 (того самого можна досягнути клікнувши правою клавішою миші на порожньому кадрі і вибравши опцію Insert blank keyframe) створіть там порожній ключовий кадр.
- Перетягніть на сцену наступний файл з бібліотеки.
- Повторюйте кроки 4 і 5 поки всі чотири зображення не будуть розміщені на сцені. В результаті у вас повинно вийти чотири кадри з одним зображенням на кожному.
- Тепер можете зберегти і опублікувати файл. В меню File -> Save As ви можете зберегти вихідний файл у форматі *.fla (цей формат відкривається флешем). Для того, щоб створити файл для програвання виберіть меню File -> Export -> Export Movie і оберіть бажаний формат. Стандартним форматом для флеш-програвача вважається *.swf. Саме його найзручніше використовувати у вебі. Більшість флеш-банерів також мають цей формат. Нарешті, обравши у меню опцію Publish ви створите не лише файл *.swf, але й html-код для розміщення на сайті.
- Натисніть комбінацію клавіш Ctrl+Enter або виберіть в меню Contol -> Test Movie – і насолоджуйтесь результатом.
В мене вийшло щось отаке:
Якщо маєте бажання, можете погратися з налаштуваннями, прискорюючи зображення або заставляючи його рухатися (для цього варто змістити зображення у кожному кадрі).
Можете навіть зробити сцену більшою і заставити чоловічка покрокувати по ній.
Щоб не виникало ніяких труднощів, викладаю вихідний код другого кліпу. Подивіться, яким чином реалізовано рух чоловічка і як зміщується зображення стосовно сцени.
(Завантажити fla-файл Lesson001-1)
Якщо ви зрозуміли принцип покадрової анімації – можете поексперементувати і з іншими зображеннями, а можливо – навіть намалювати щось своє. Буду радий бачити посилання на ваші роботи у коментарях. Ну і звісно ж, по змозі, спробую відповісти на ваші запитання.
Сподіваюся, цей перший урок вам сподобався. Поки що я пояснюю все дуже детально, щоб навіть людина, яка зайшла у флеш вперше, могла розібратися і повторити всі вказівки.
В наступних уроках я буду вважати, що ви засвоїли матеріал із попередніх. Бо надалі нас чекає найцікавіше – те, без чого Flash не став би флешем – використання Tweened-анімації.
P.S.: як бачите, я дещо переоцінив свої сили щодо частої публікації. Все-таки робота і блоги беруть своє. Тому зі всіх сил намагатимусь публікувати тут щось хоча б двічі на тиждень. І до нових зустрічей!
Лютий 24, 2009 о 13:30
Головне, щоб флеш твій був куплений. Бо в файли, створені тобою програма вписує унікальний ідентифікатор твоєї інсталяції