Введення у flash-технології - Створення простих flash-фільмів
Отже, всі налаштування зроблені, можна приступати до створення нашого першого flash-фільму, який, як ми вже помітили раніше, має бути заставкою до нашого персонального сайту. Наскільки він буде художнім та стильним багато в чому залежить від вас та ваших дизайнерських здібностей, ваших ідей та звичайно якості реалізації.
Отже, почнемо. Першим кроком при створенні будь-якого сайту, зокрема і на Flash, є композиція. Враховуючи, що ми хочемо зробити мультимедіа-заставку для нашого персонального сайту, зупинимося на варіанті розміщення головного логотипу в центрі, інтерактивних навігаційних елементів знизу по краях, допоміжного оточення по периметру робочої зони. Як елементи логотипу використовуємо заздалегідь підготовлені фотографії у форматі jpg та анімацію у форматі gif.
Враховуючи, що колір фону HTML-сторінки, куди буде вставлений flash-ролик - чорний, насамперед треба забезпечити плавний перехід від кольору фону flash-ролика (якщо він відмінний від обраного для сторінки) до фону HTML-сторінки. Це можна зробити за допомогою такого інструменту, як градієнт.
Використовуючи інструмент Oval, намалюємо в центрі робочої зони овал, залишивши ліворуч та праворуч по 20 пікселів, заллємо його червоним кольором (налаштувавши інструмент Fill Color). Центруємо отримане зображення за допомогою набору інструментів Align (включена опція ToStage забезпечує центрування всередині робочої зони). Далі, виділивши створений овал клацанням миші, застосовуємо до нього операцію градієнтної заливки, навіщо виділяємо в інспекторі Fill опцію Fill і виберемо тип заливання - Radial Gradient. Далі залишається підібрати лише колірну гаму та насиченість градієнтного переходу.
Отже, ми створили тло для нашої заставки. Тепер потрібно зберегти все в окремому файлі, щоб залишити без змін створений шаблон для інших наших проектів. Необхідно пам'ятати, що контур овалу і сама заливка - це різні об'єкти, тому відразу застосуємо до них операцію угруповання (Modify Group). Оскільки наша заставка буде логотипом нашого сайту, тобто. запускатися за замовчуванням, то надамо їй ім'я index, надалі згенерований файл *.swf і HTML-файл будуть мати це ім'я.
Створивши тло майбутньої заставки, бажано зберегти його в окремому шарі. Зупинимося на цій операції детальніше. Багато в чому потужність технологій Flash полягає саме в розширених можливостях роботи з шарами: накладання одного шару на інший, зміна рівня прозорості шарів по відношенню один до одного, реалізація рухів у різних шарах - все це дозволяє створювати потужні мультимедійні фільми. Для роботи із шарами використовується набір інструментів із панелі хронометричної лінійки.
Вид хронометричних ліній.
Найнижчий шар - це якраз шар із нашим фоном. Давайте його так і назвемо - fon (для цього достатньо два рази натиснути мишею на назві шару і ввести нову назву). При роботі з шаром його можна зробити: 1) невидимим - зміна режиму подвійне клацання миші на піктограмі з оком, 2) закритим для редагування - подвійне клацання миші на замку, 3) контурним - клацання на піктограмі-квадраті. Шар, що редагується в даний момент, відзначений піктограмою-олівцем (див. малюнок).
Ми створили фоновий шар, тепер настав час подумати про те, скільки часу має програватися наш ролик. Раніше при налаштуваннях ми вказали частоту відтворення 10 або 12 кадрів за секунду, тепер треба визначити, скільки секунд ми хочемо переглядати наш ролик (без повторень)і, відповідно, скільки кадрів він має для цього утримувати. Для логотипу час роботи більше 5 секунд вважається недоцільним, тому виберемо п'ять секунд. При частоті 10 кадрів на секунду нам знадобиться 50 кадрів. Відповідно нам необхідно, щоб протягом цих 50 кадрів (кадри показуються на хронометричній лінійці прямокутниками, точкою відзначаються ключові кадри з новими об'єктами) відтворювався хоча б фон, тому розмножимо фоновий малюнок на всі 50 кадрів. Для цього виберемо 50-й кадр у шарі fon, клікнемо на ньому правою кнопкою миші і виберемо пункт Insert Blank KeyFrame (вставити порожній ключовий кадр), при цьому всі кадри з 1-го до 50-го стануть заповнені фоновим малюнком. Цей малюнок зберігається тільки в одному місці, у решті кадрів присутні тільки посилання на нього (такий підхід сильно скорочує обсяг flash-фільму). Створення фонового шару завершено, його потрібно закрити для редагування. Отриманий результат можна переглянути за допомогою спеціального вбудованого візуалізатора, викликавши його з меню: Control - Test Movie.
Щоб користувач міг побачити логотип відразу у всій красі без затримок, необхідно передбачити перевірку на повноту завантаження Flash-фільму і лише потім переходити до візуалізації. Це стандартний алгоритм flash, а такі шари (елементи) називаються завантажувачами. Створимо для цих цілей шар Input, для цього клікнемо мишею на шарі fon і в меню виберемо пункт Insert Layer. Налаштуванням цього шару ми займемося пізніше, а поки його пропустимо.
Створимо наступний шар, який міститиме безпосередньо сам логотип. Тут ви можете потренуватися у своїх художніх навичках, я ж для простоти намалював коло, вписане в ромб, залив об'єкт, що вийшов, лінійним градієнтом і вставив уцентр одну з фотографій, що мені сподобалися.
Вставка графічних растрових об'єктів у flash-фільм здійснюється декількома способами. Найчастіше використовують пункт меню File – Import, після чого відкривається діалогове вікна вибору об'єкта для імпорту (див. малюнок) – це один із найзручніших способів. Створивши всі необхідні об'єкти в шарі logo, можна додати і текст (налаштування опцій тексту здійснюється з використанням інструментів в панелі Character).
Опції настроювання тексту мало чим відрізняються від стандартної панелі MS Word. Налаштуйте шаблон для введення тексту, виберіть інструмент створення тексту з панелі інструментів та напишіть назву вашого логотипу. На цьому створення графічних елементів зображення логотипу закінчено, залишилося їх скомпонувати, відцентрувати та згрупувати.
Вигляд першого кадру Flash фільму.
Вигляд останнього кадру фільму
Анімація готова! Якщо ви бажаєте, щоб вона програвалася в циклі, такий режим передбачений за замовчуванням і можна на цьому зупинитися, якщо ж ви бажаєте, щоб після анімації flash-фільм зупинявся на останньому кадрі (як і належить для логотипу) і чекав дії користувача, то тоді необхідно в останній кадр шару ввести команду Stop.
Для цього двічі клацніть лівою кнопкою миші по останньому кадру. Відкриється вікно Frame Actions, яке є середовищем візуального програмування мовою Actions Script. Введіть команду Stop (у лівій частині вікна), вона відразу відобразиться у правій частині вікна. Після цього можна закрити вікно Frame Actions. Програмування мовою Actions Script, як і програмування будь-якою іншою мовою, є справою не простою (відносно) і не є предметомрозгляду даного початкового вступного курсу, хоча з деякими з його елементів ми познайомимося.
Тепер залишилося лише протестувати створений Flash-фільм за допомогою TestMovie (Control – TestMovie).
Для завершення створення нашого першого flash-ролика нам ще залишилося додати до нього трохи інтерактивності, надавши користувачеві можливість вчинити якісь дії. Для цього ми додамо на наш ролик дві кнопки: Connect та Disconnect. На кнопці Connect користувач переходитиме на початкову сторінку нашого сайту (main.htm), а на кнопці Disconnect, наприклад, на сайт Macromedia.
Щоб додати кнопки, додамо окремий шар і назвемо його buttons. Далі в меню Windows виберемо пункт Common Libraries – Button. У бібліотеці, що відкрилася, кнопок виберемо найбільш сподобалися і шляхом перетягування розмістимо їх у потрібному місці нашого flash-фільму (в принципі, кнопки можна намалювати і самому). Для того, щоб відредагувати кнопки з бібліотеки, необхідно двічі клікнути на її зображенні лівою кнопкою миші і в окремому робочому вікні, що відкрилося, відредагувати необхідні параметри кнопки (колір, написи і т.п.).
Коли кнопки намальовані, вони мають працювати, тобто. залежно від дій користувача викликати ті чи інші події. Для цього їх треба запрограмувати. Програмування кнопок здійснюється за допомогою інспектора Object Actions, виклик якого здійснюється в меню, що з'являється натисканням на зображення кнопки правою кнопкою миші (пункт Actions). Додайте для відповідної кнопки наведений текст і вона буде працювати. У подробиці програмування поки що вникати не будемо.
Вигляд останнього кадру готового flash-ролика.