Внутрішній сервер оновлень Adobe Flash Player. Електронна школа macromedia flash mx iii курс: основи програмування в macromedia flash mx модуль iv: команда with. програма «правилка»мова actionscript
Щоб дані з веб-сервера були доступні для SWF-файлів з інших доменів, на сервері можна створити файл політики. Файл політики- це XML-файл, поміщений у спеціальне розташування на сервері.
Файли політики визначають доступ до низки ресурсів, включаючи:
отримання даних растрових зображень, аудіо та відео;
завантаження XML та текстових файлів;
імпорт SWF-файлів з інших ізольованих програмних середовищ у домен безпеки файлу, що завантажує;
доступ до підключень до сокетів та XML-сокетів.
Об'єкти ActionScript створюють підключення до сервера двох типів: підключення до сервера на основі документів та підключення до сокетів. Такі об'єкти ActionScript, як Loader, Sound, URLLoader та URLStream, створюють підключення до сервера на основі документів та завантажують файл із URL-адреси. Об'єкти Socket та XMLSocket створюють підключення до сокетів, які працюють із потоковою передачею даних, а не із завантаженими документами.
Оскільки програвач Flash Playerпідтримує два типи підключень до сервера, існує два типи файлів політики: файли політики URL-адрес і файли політики сокетів.
Для підключень на основі документів потрібні файли політики URL-адрес. За допомогою цих файлів сервер вказує, що його дані та документи доступні для SWF-файлів, розміщених на певних доменах або будь-яких доменах.
Для підключень до сокетів потрібні файли політики сокетів, які забезпечують пряме мережне підключеннядо TCP-сокетів нижнього рівня за допомогою класів Socket та XMLSocket.
Файли політики повинні передаватися програвачу Flash Player з використанням того ж протоколу, який збирається використовувати підключення, що встановлюється. Наприклад, коли файл політики розміщується на сервері HTTP, файли SWF з інших доменів можуть завантажувати дані з цього сервера за допомогою протоколу HTTP. Однак, якщо на цей сервер не додати файл політики сокетів, то SWF-файли з інших доменів не зможуть підключитися до сервера через сокети. Іншими словами, спосіб отримання файлу політики повинен відповідати способу підключення.
Далі у цьому розділі наводиться короткий описвикористання файлів політики та синтаксису стосовно SWF-файлів, опублікованих для програвача Flash Player 10. (Для попередніх версій Flash Player файлиполітики реалізуються дещо інакше, оскільки в міру виходу нових версій покращувалася система безпеки програвача Flash Player.) Додаткові відомості про файли політики див. .com/go/devnet_security_ua .
Код, що виконується в ізольованому програмному середовищі AIR, не потрібний файл політики для доступу до даних через URL або сокет. Код у додатку AIR, що виконується за межами ізольованої програмного середовищапрограми, потрібно файл політики.
SWF-файл може перевіряти файл політики під іншим ім'ям або в іншому місці. Для цього потрібно викликати метод Security.loadPolicyFile(). Однак, якщо в основному файлі політики не вказано, що в даному місці може бути файл політики, то виклик методу loadPolicyFile() не дасть результатів, навіть якщо там буде файл політики. Метод loadPolicyFile() слід викликати до того, як намагатись виконувати мережеві операції, для яких потрібен файл політики. Програвач Flash Player автоматично ставить запити на підключення до мережі після відповідних запитів на отримання файлу політики. Наприклад, метод Security.loadPolicyFile() можна викликати безпосередньо перед початком мережної операції.
Перевіряючи основний файл політики, програвач Flash Player очікує на відповідь сервера протягом трьох секунд. Якщо відповіді не отримано, Flash Player робить висновок, що основного файлу політики не існує. Однак для виклику методу loadPolicyFile() немає тайм-ауту за замовчуванням; програвач Flash Player передбачає, що файл, що викликається, існує і чекає завантаження протягом невизначеного часу. Тому, щоб гарантовано завантажити основний файл політики, необхідно викликати метод loadPolicyFile().
Незважаючи на те, що метод називається Security.loadPolicyFile() (завантажити ФайлПолітик), файл політики завантажується тільки після відправки мережного запиту, для якого потрібен файл політики. Виклик методу loadPolicyFile() просто повідомляє програвачу Flash Player, у якому місці слід шукати файл політики, коли він знадобиться.
Не можна отримати повідомлення про відправку або виконання запиту файлу політики, це просто не потрібно. Програвач Flash Player перевіряє файли політики в асинхронному режимі і автоматично чекає на встановлення підключення, доки перевірка не буде успішно виконана.
У наступних розділах містяться відомості, які стосуються лише файлів політики URL-адрес. Додаткові відомості про файли політики сокетів див. у розділі «Підключення до сокетів».
Область дії файлу політики URL-адрес
Файл політики URL-адрес застосовується лише до каталогу, з якого він завантажений, та до його дочірніх каталогів. Файл політики в кореневому каталозі застосовується до всього сервера. Файл політики, завантажений з підкаталогу, застосовується лише до цього каталогу та його підкаталогів.
Файл політики визначає доступ лише до сервера, де він знаходиться. Наприклад, файл політики, що знаходиться за адресою https://www.adobe.com:8080/crossdomain.xml, застосовується лише до дзвінків на завантаження даних із сервера www.adobe.com за протоколом HTTPS через порт 8080.
Вказівка прав доступу до файлу політики URL-адрес
Файл політики містить один тег
однією зірочкою, що відповідає всім доменам та всім IP-адресам;
зірочкою із суфіксом, що відповідає лише доменам із зазначеним суфіксом.
У наступному прикладі показано файл політики URL-адрес, який дозволяє доступ SWF-файлам з доменів *.example.com, www.friendOfExample.com та 192.0.34.166.
Якщо вказується IP-адреса, доступ надається лише SWF-файлам, завантаженим з цієї IP-адреси з використанням IP-синтаксису (наприклад, http://65.57.83.12/flashmovie.swf). При наданні доступу до SWF-файлів не використовується синтаксис доменних імен. Програвач Flash Player не має дозволу DNS.
Можна дозволити доступ документам з будь-якого домену, як показано в наведеному нижче прикладі.
Кожен тег
Присвоєння атрибуту secure значення false може послабити захист, що забезпечується протоколом HTTPS. Зокрема, false відкриває захищений вміст для несанкціонованого доступу або спуфінгу. Компанія Adobe рекомендує не задавати атрибуту secure значення false.
Якщо дані, що завантажуються, знаходяться на HTTPS-сервері, а SWF-файл, що їх завантажує, - на HTTP-сервері, компанія Adobe рекомендує перемістити завантажуючий SWF-файл на HTTPS-сервер. Завдяки цьому всі копії конфіденційних даних будуть захищені HTTPS. Однак, якщо ви вирішите залишити завантажуючий SWF-файл на НТТР-сервері, додайте атрибут secure="false" у тег
Також для надання доступу можна використовувати тег allow-http-request-headers-from. Цей елемент надає клієнтові, який містить вміст з іншого домену, дозвіл надсилати вашому домену заголовки, визначені користувачем. Тег
Якщо тег allow-http-request-headers-from додається до основного файлу політики, він застосовується до всіх каталогів хоста. В іншому випадку він застосовується лише до каталогу та підкаталогів, на які поширюється файл політики, що містить тег.
Завантаження даних із сервера або підключення до сокету виконується в асинхронному режимі. Програвач Flash Player просто очікує завершення завантаження файлу політики, перш ніж запустити основну операцію. Однак виймання пікселів із зображень або отримання семплів звуку виконується в синхронному режимі. Перш ніж можна буде отримати дані, має завершитися завантаження файлу політики. Завантажуючи мультимедійні дані, потрібно отримати файл політики.
Якщо використовується метод Loader.load() , вкажіть властивість checkPolicyFile параметра context , який є об'єктом LoaderContext.
Якщо зображення вбудовується в текстове поле за допомогою тега , задайте атрибуту checkPolicyFile тега
значення "true", як показано нижче.
Якщо використовується метод Sound.load() , вкажіть властивість checkPolicyFile параметра context , який є об'єктом SoundLoaderContext.
Якщо використовується NetStream, установіть властивість checkPolicyFile об'єкта NetStream.
Якщо вибрано один із цих параметрів, програвач Flash Player спочатку перевіряє файли політики, вже завантажені для цього домену. Потім він шукає файл політики сервера в розташування за промовчанням, перевіряючи теги
Здавалося б, у чому проблема – робимо доменну політику, запихаємо MSI пакет і радіємо… Але не тут було! Структура підприємства сильно розподілено, тобто. у віддалені точки з каналом ~ 1мбіт на 20 комп'ютерів пропхати політиками навіть 15мб вже проблема - вранці співробітники включають комп'ютер і по півгодини чекають завантаження, поки все скачається і поставиться (або просто відвалиться по таймууту). Не кажучи вже про те, що комп'ютери в подібних офісах мають неприємну властивість періодично з домену випадати.
Потрібно було інше рішення, яке працюватиме незалежно від політик, ніяк не напружувати користувача, мінімально використовувати канал (хоч би щоб качали не всі одночасно). Варіанти зі скриптами з очевидних причин також не підійшли.
Виручив, як завжди, Google: виявилося, що можна підняти внутрішній сервер оновлення і налаштувати на нього вбудований засіб оновлення FP. При цьому на клієнти потрібно буде лише розповсюдити файл налаштувань. Деталі під катом.
Налаштування сервера оновлень
1. Отримуємо ліцензійну угодуДля розповсюдження програмного забезпечення Adobe вимагає отримання ліцензійної угоди. Не порушуватимемо умови використання та отримаємо ліцензію (благо, це зовсім не складно): FlashPlayer: Adobe Runtimes / Reader Distribution License Agreement . Ліцензія видається терміном на рік. Після закінчення можна надіслати запит ще раз.
2. Піднімаємо веб-сервер
Платформа ролі не грає, в моєму випадку крутиться N-ним сайтом на IIS під Win2012. Ресурсів воно практично не жере навіть при тому, що вже 3000 комп'ютерів налаштовані на цей сервер.
Налаштування сервера:
- Доступ за портами 80, 443 (http, https відповідно).
Перший потрібен, власне, для скачування, по другому FP ходитиме за XML актуальною версією. - Валідний сертифікат https.
Я виписував сертифікат на основі кореневого корпоративного, який є за замовчуванням на всіх машинах. - Лістинг директорій.
Не перевіряв роботу без нього – у документації просять, я вирішив зробити як написано.
Для наочності назвемо сервер FlashPlayerUpdate.domain.local.
3. Завантажуємо ресурси та викладаємо на сервер
У корені веб-сервера створюємо дерево директорій: /pub/flashplayer/update/current/sau/.
Дерево директорій на моєму сервері:
Якщо ви запросили ліцензію на першому кроці, то у відповідь має прийти лист із посиланням, звідки скачувати FlashPlayer - проходимо цим самим посиланням. Якщо не прийшло, або не запитували, то йдемо сюди: https://www.adobe.com/products/flashplayer/distribution3.html та завантажуємо архів за посиланням Download Background Update Resources":
Extended Support Release або Public Release
Тут необхідно зробити ремарку. На сторінці два варіанти завантажень: стандартний (Public) і Extended Support Release. У моєму випадку важлива стабільність роботи і не потрібні нові фічі, тому було обрано ESR. При цьому я додав собі кілька геморою: паблік версію можна безпосередньо викачувати скриптом з сайту Macromedia. Як викачувати ESR, я так і не нагуглив, тож у моєму випадку оновлення контенту на внутрішньому сервері відбувається в ручному режимі.
Наприкінці статті доклав 2 скрипти PowerShell: для автоматичного оновлення(тільки для стандартної версії; легко портується на bash), для перевірки оновлень та оповіщення по e-mail (для будь-якої версії, зокрема ESR).
Завантажений архів розпакувати на папку /pub/flashplayer/update/current/sau/ на сервері.
4. Поширюємо на клієнта конфігураційний файл
Залежно від розрядності системи:
- 32-bit: C:\Windows\ System32\Macromed\Flash\mms.cfg
- 64-bit: C:\Windows\ SysWOW64\Macromed\Flash\mms.cfg
У файлі включаємо тихе автооновлення, прописуємо інтервал оновлень (днями), шлях до нашого серверу, і про всяк випадок логування, щоб простіше було діагностувати проблеми, якщо вони виникнуть:
AutoUpdateDisable=0 SilentAutoUpdateEnable=1 AutoUpdateInterval=2 SilentAutoUpdateServerDomain=FlashPlayerUpdate.domain.local SilentAutoUpdateVerboseLogging=1
Якщо все було зроблено правильно, то Flash Player на клієнтських машинах повинен почати оновлюватися за розкладом (згідно з наведеним файлом вище - раз на 2 дні). Зазвичай сервіс оновлення Adobeзапускається раз на годину для перевірки умов оновлення - у цей час Updater має побачити файл конфігурації, переналаштувати оновлення згідно з прописаними налаштуваннями і сходити на новий сервер перевірити версію.
Тобто приблизно через годину після поширення файлу конфігурації можна дивитися логи на сервері щодо запитів на перевірку версії.
Автоматизація
Як класичний представник айтішного братства, я терпіти не можу рутинну ручну роботу і просто ну ніяк не міг не автоматизувати процес перевірки та викачування нової версії. Однак, як зазначено вище, поки я не знайшов способу викачувати версії ESR із сайту Macromedia, тому скриптом лише перевіряю оновлення. Пропозиції вітаються.Скрипт для автоматичного скачування оновлень
Лише для публічної версії!Логіка роботи: скрипт у тупу скачує файли оновлення безпосередньо з Macromedia для версій 11,15,16,17,18,19 (якщо якусь версію вже прибрали з сайту - скрипт просто валиться, що не зміг скачати і пропустить) і кладе з заміною на сервер оновлень. Жодних перевірок версій. На етапі тестування я використав цей скрипт: запускав через шедулер на сервері ночами.
За бажання можна схрестити цей і наступний скрипт і отримати повну автоматизацію з перевіркою версій, оповіщеннями і скачуванням тільки за наявності оновлень.
Параметри скрипту:
- *FPRoot- шлях до кореневої папки сервера оновлень. Локальний, чи мережевий. Звичайно, у користувача, від якого буде запущено скрипт, мають бути права на запис до цієї папки.
- FPDownloadRoot- Шлях на сайті Macromedia. Заданий за замовчуванням, але можна змінити за потреби.
- DownloadProxy http:// proxy.domain.local.
- ProxyCreds
- UserAgent
- Force
Приклад використання:
Powershell.exe -command "& ".\FPUpdater.ps1" -FPRoot "\\FlashPlayerUpdate\pub\flashplayer\update\current\sau" -DownloadProxy "http://proxy.domain.local" -ProxyCreds "DOMAIN\UserName " -UserAgent "Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko""
Усі параметри можна захардкодити в скрипт, якщо лякають довгі рядки запуску.
Скрипт для перевірки оновлення та оповіщення по e-mail
Перевірка оновлень йде за стандартною версією, але оскільки вони оновлюються одночасно (security-фікси ніхто не скасовував), то прокатить і для ESR. Для роботи скрипта потрібно створити в корені веб-сервера (поруч із папкою pub) файл CurrentPublic, в який вписати поточну публічну версію для ActiveX(Для перевірки використовується саме версія ActiveX).Логіка роботи: скрипт порівнює версію, отриману з файлу CurrentPublic з сервера з версією на сервері Macromedia. Версію на сервері дивиться за логікою автообновлялки: спочатку шукає в XML поточний мажорний білд, йде в папку з мажорним і там дивиться повний білд.
Параметри скрипту:
- *FPIntServerRoot- Адреса нашого сервера. Наприклад: FlashPlayerUpdate.domain.local
- FPDownloadRoot- Шлях на сайті macromedia. Заданий за замовчуванням, але можна змінити за потреби.
- ESR- перевіряти ESR версію (без цього прапора перевірятиме публічну).
- DownloadProxy- проксі-сервер, якщо використовується в компанії. Писати повністю: http:// proxy.domain.local.
- ProxyCreds- Ім'я користувача для авторизації на проксі.
- UserAgent- для зміни юзерагенту, з яким PowerShell піде качати. Наприклад, у нас на проксі обмеження за UserAgent-ами, я ходжу з агентом Internet Explorer.
- Force- Вимкнути перевірку сертифікатів командлета Invoke-Webrequest (точніше, змусити довіряти всім сертифікатам).
- *MailTo- e-mail адреси, на які надходитимуть повідомлення.
- *MailFrom- від кого надходитимуть повідомлення. Наприклад: [email protected]
- SmtpServer- smtp-сервер, через який буде надсилатися повідомлення.
Приклад використання:
.\FPCheckUpdate.ps1 -FPIntServerRoot "fp-update.domain.local" -ESR -Proxy "http://proxy.domain.local" -UserAgent InternetExplorer -Force -MailTo " [email protected]","[email protected]" -MailFrom " [email protected]"-SmtpServer "smtp.company.com"
Використані ресурси
UPD
Трохи запізнілий апдейт від 17.06.16.З моменту написання статті Adobe встигли 2 рази змінити порядок доступу до сторінки завантаження FlashPlayer"а. У результаті тепер щоб отримати доступ до сторінки для скачування, потрібно спочатку авторизуватися в Adobe ID. Тобто варіант з парсингом сторінки на предмет версії ESR більше не прокочує.
Морочитися з авторизацією, отриманням-надсиланням cookie через PowerShell поки не став. У результаті переробив скрипт для перевірки ESR на сторінку distribution3, яка може зникнути будь-якої миті. Поки що так, далі буде видно.
Я ще на початку року ставив питання на форумі Adobe щодо перевірки оновлень версії ESR. Обіцяють щось придумати, але поки що віз і нині там.
UPD2
Днями на сторінці розповсюдження Flash Player (посилання на яку ви отримали, отримавши ліцензію на розповсюдження) з'явилася така інформація:УВАГА! Важливі зміни з Extended Support Release
Спочатку випуск Extended Support Release створювався з метою звести до мінімуму час, який витрачають ІТ-адміністратори на сертифікування кожного нового випуску Flash Player: Extended Support Release обмежував зміни, що вносяться до випуску, до змін у системі безпеки та виправлень критичних функціональних неполадок. На той момент функціональних змін у кожному випуску Flash Player було набагато більше, ніж змін у системі безпеки. Однак зараз ситуація змінилася: кількість запобіжних і заходів безпеки у відповідь набагато перевищує функціональні зміни. На практиці Extended Support Release більше не захищає ІТ-організації від величезної кількості змін, що вносяться до стандартних випусків Flash Player, а лише знижує функціональні ризики. У зв'язку з цим було ухвалено рішення припинити випуск Extended Support Release та сконцентруватися на розробці лише стандартних випусків. Додати теги
Якщо ви вже освоїли кілька графічних редакторів, що дозволяють створювати чудові, але статичні зображення, вам необхідно спробувати створювати анімовану графіку. Можна піти простим шляхом та створювати анімовані картинки у форматі gif. Це дозволяє робити багато сучасних графічних редакторів, таких як Photoshop, Corel Photo-paint та багато інших. Крім того, для анімації статичних зображеньможна використовувати спеціалізовані програми-аніматори, такі як Gif Animator або Macromedia Foreworks.
Їх дуже багато, і перераховувати їх не потрібно. Ці програми-аніматори поєднують одну властивість. Для створення ефекту анімації в цих програмах створюється послідовність кадрів, що складаються із спеціально для цього створених, у будь-якому графічному редакторі, окремих gif-зображень, що з'являються через задані проміжки часу Ця система працює аналогічно звичайній кіноплівці. Її недолік очевидний. Навіть найпростіші кадри (фрейми), що включають gif-зображення невеликого розміру, мають об'єм 2-3 Kb. При частоті показу 10 кадрів за секунду кожна секунда такого gif-ролика займатиме щонайменше 20-30 Kb. Тому створити щось визначне за такого жорсткого обмеження часу і дискового простору дуже важко. Зазвичай анімовані gif-файли працюють циклічно – у безперервному режимі. Використання звичайних відеокліпів на сторінках веб-сайтів також утруднено через велику кількість файлів і пов'язані з цим труднощі при завантаженні.
Але ці проблеми можна подолати за допомогою програмного забезпечення, створеного компанією Macromedia Inc. Цією компанією кілька років тому було розроблено новий графічний формат Flash (з англ. - Спалах). Нещодавно на російському ринкуз'явилася остання версія програми - Macromedia Flash MX 6.0 Ця програма дозволяє створювати дуже динамічні яскраві анімовані яскраві зображення, що займають дуже малі обсяги дискового простору. Крім того, використовуючи можливості мови Action Script, фільми, створені у форматі Flash, можна вбудовувати різні дії, імпортувати звуки, що відкриває безмежні можливості для творчості. За допомогою Macromedia Flash MX 6.0 можна створювати рекламні банери, інтро для головних сторінок сайтів, просто анімовані картинки для web-сайтів, дуже красиві анімовані кнопки для web-сторінок та різних інтерфейсів, презентації та фотоальбоми (на CD-ROM або звичайній дискеті), навіть повноекранні невеликі мультфільми і навіть досить складні ігри. Але багато початківців, не знаючи принципів роботи програми і не працювали з ранніми версіями Macromedia Flash, освоюють її з великими труднощами.
Почнемо з того, що зараз переважно на ринок надходить англомовна версія програми. Але паралельно із цим в Інтернеті з'явилися непогані русифікатори. Один з них можна завантажити з або . Розмір файлу цього русифікатора трохи більше 100 Kb, тому його завантаження займе зовсім небагато часу. Патч стиснутий у форматі ZIP, тому, перш ніж його завантажувати, необхідно подбати про те, щоб у вас було встановлено будь-який архіватор, що дозволяє розпакувати ZIP-файли. Для початківця найбільш зручними є такі програми, як, наприклад, Zip Folders, що дозволяють працювати зі стислими в ZIP-форматі папками і файлами як зі звичайними. Завантаживши та розпакувавши файл русифікатора, ви виявите в його папці два файли: Readme, в якому дуже тлумачно описано, як встановити русифікатор, і файл Patch_Flash. Виділивши клацанням миші, скопіюйте Patch_Flash. Потім за допомогою провідника відкрийте папку Flash MX, де у вас вже має бути встановлена програма Macromedia Flash MX, і вставте в цю папку файл Patch_Flash, запустіть його подвійним клацанняммиші. Patch_Flash створить у папці програми Flash MX русифікований додаток Flash.exe розміром близько 11 Mb, існуючий англомовний додаток при цьому буде перейменований на Flash Backup.exe, і при бажанні, ви завжди зможете скористатися ним, запускаючи його з папки Flash MX, т.к . з головного меню запускатиметься русифікований варіант програми. Тепер усі меню в програмі Macromedia Flash MX 6.0 будуть докладно (правда, правильність перекладу деяких команд у меню викликає сумнів) переведені на російську мову, і недосвідченому користувачеві набагато легше її освоїти. Недолік цього русифікатора полягає в тому, що Довідка (Help) та коментарі до команд на панелі Action Script залишаються на англійською. Але це можна виправити, на сайті можна знайти дуже хороший підручник з Macromedia Flash MX 6.0, що представляє собою якісний переклад Helpa і доповнений авторами. Крім того, для самостійного перекладу можна скористатися будь-якою програмою-перекладачем, наприклад, Promt. Там же можна знайти безліч докладних і зрозумілих рекомендацій щодо створення різних flash-роликів та використання для цього команд Action Script та готові зразки ( вихідні файли) різних flash-кліпів. В Інтернеті є кілька десятків російськомовних веб-ресурсів з аналогічним змістом. Знайти їх легко з будь-якого пошукового порталу, зробивши відповідний запит.
Отже, що ж є програма Macromedia Flash MX 6.0? Запустивши її, можна виявити, що її інтерфейс дуже простий, зрозумілий та зручний. за зовнішньому виглядувін не сильно відрізняється від інших текстових та графічних редакторів і не набагато складніший, ніж у Microsoft Word, яким вміють користуватися багато користувачів-початківців. У верхній частині вікна програми розташований звичайний рядок головного меню та стандартна панель з кнопками "Відкрити", "Створити" і т.д., нижче - панель "Тимчасова діаграма", тобто. діаграми часу. На ній необхідно зупинитися докладніше. У лівій частині панелі "Тимчасової діаграми" можна побачити піктограму із зображенням аркуша паперу з найменуванням - "Шар", праворуч від якого розташовується лінійка, розділена рівними поділками. Так от, ця розділена на рівні ділянки лінійка є аналогом кіноплівки, що складається з окремих кадрів. Кожен розділ цієї лінійки і є кадр створюваного вами кліпу. У нижній лівій частині "Тимчасової діаграми" є кнопка "Вставити фрейм", з її допомогою можна додавати скільки завгодно нових шарів - кіноплівок, які будуть розташовуватися одна над іншою, причому, показ цих шарів йтиме одночасно, так, якби ви склали кілька звичайних кіноплівок кілька шарів і вставили їх для одночасного перегляду в проектор. Шари можна видаляти відповідною кнопкою або переміщати мишкою вище або нижче відносно один одного. У лівій частині вікна програми розташована панель інструментів. Одного погляду достатньо, щоб визначити призначення кнопок цієї панелі, це пензель, гумка, пряма лінія та ін. Зрозуміло, що всі ці інструменти призначені для малювання та створення текстів та написів. Нижче панелі "Тимчасової діаграми" розташована робоча область, в якій ми і створюватимемо відеоролик. У нижній частині програми Macromedia Flash MX 6.0 під робочою областю є панель "властивості", в якій відображаються властивості об'єкта, з яким ви працюєте. Наприклад, якщо ви клацнете мишкою в будь-якому місці робочої області, у вікні панелі "властивості" ви побачите параметри робочої області, такі як колір фону робочої області та розміри робочої області, які можна змінювати на свій розсуд, натиснувши відповідну кнопку, тут же можна встановити частоту показу кадрів (Фрейм рейт). За замовчуванням, частота показу становить 12 кадрів в секунду, що цілком достатньо для більшості відеокліпів, що створюються. Але цей показник можна змінювати на вашу думку. Але треба пам'ятати, що навіть якщо ви встановите частоту показу 24 кадри на секунду, на комп'ютерах з невеликим обсягом оперативної пам'ятіі слабким процесором важко досягти кінематографічної якості картинки. Об'єкти у створеному вами відеокліпі можуть рухатися повільно або уривчасто. Особливо це явище помітне при створенні великих за розміром flash-файлів з використанням великої кількості растрових зображень, насичених дрібними деталями, або якщо ви зловживатимете ефектами руху, обертання, зміни кольору та прозорості об'єктів, що може призвести навіть до "зависання" комп'ютера.
Програма Macromedia Flash MX 6.0 працює з двома видами форматів графічних зображень. Растрові зображення імпортуються в Macromedia Flash MX 6.0 і складаються з кольорових квадратних точок - пікселів, які розміщені в координатній сітці. Зображення найпоширеніших графічних форматів- bmp, jpeg, gif та багатьох інших мають растрову структуру. При збільшенні масштабу таких зображень кожен квадратик збільшується в розмірах разом із збільшенням картинки. Він стає помітним неозброєним оком, зображення та контури об'єктів втрачають чіткість. При сильному збільшенні розміру растрової картинки зображення просто розбивається на кольорові квадратики. За допомогою інструментів, що є в Macromedia Flash MX 6.0 (їх вибір невеликий, і будемо сподіватися, що в наступних версіях програми цей недолік буде виправлений), можна створювати досить складні та якісні зображення, виконані в векторної графіки. На відміну від растрової, у векторній графіці використовується інший метод побудови зображень. Векторна графіка описує об'єкт спрямованими кривими, що є контурами зображеного об'єкта, які мають колірні значення і координати. Зображення задається точками, якими проходять лінії (вектори), утворюючи контури елементів зображення. Колір об'єкта визначається кольором контуру та ув'язнених у ньому областей. Редагуючи векторний об'єкт, ви змінюєте властивості, у тому числі складається зображення, тобто. ви змінюєте координати точок, що створюють контури об'єкта, і колір області, що містить ці контури. Можна пересувати об'єкт, змінювати його розміри, форму та колір, причому ці зміни ніяк не вплинуть на якість зображення. Тобто, при збільшенні або зменшенні об'єкта просто змінюються координати точок, що задають його контури, а колір об'єкта та якість лінії, що окреслює контури, не змінюється. Якість зображень, виконаних у векторній графіці, не залежить від оптичної роздільної здатності, і тому векторні об'єкти можна відтворювати на пристроях з різною оптичною роздільною здатністю без втрати якості зображення. У програмі Macromedia Flash MX 6.0 можна фотографічні растрові зображення легко перетворювати на векторні, за допомогою команди "Тресувати малюнок" у меню "Змінити". Векторне зображення складається з областей заданої форми, кожна з яких забарвлена своїм кольором. Тому, якщо ви захочете тресувати якесь фотографічне (растрове) зображення, насичене дрібними деталями, вам або доведеться пожертвувати якістю зображення, або отримати векторний малюнок, що складається з величезної кількості дрібних областей і займає солідний об'єм дискового простору. Далі я напишу, як можна вийти із цього положення. Але якщо створюваний вами flash-ролик не розміщуватиметься на web-сторінці, і великий розмірфайлу вас не лякає, із таким векторним зображенням можна зробити дуже цікаві ефекти. Наприклад, ваш портрет, розділившись на безліч дрібних фрагментів, що повільно переміщаються по екрану і змінюють при русі форму, розміри і колір, перетвориться на абсолютно несподіваний об'єкт, наприклад, частину пейзажу або будь-який напис. Як у растрових, так і у векторних зображень є свої переваги та недоліки, тому, комбінуючи графіку обох форматів, можна досягати разючих результатів.
Готовий flash-ролик можна відтворити декількома способами, у браузерах, у яких Flash Player встановлений під час встановлення самого браузера (Flash Player входить до інсталяційний пакетбраузера), наприклад, Netscape Navigator або Internet Explo-rer, за допомогою засобів Flash ActiveX в Microsoft Office, Microsoft Internet Explorer для Windows, або інакше, під керуванням ActiveXв автономному додатку Flash Player, яке працює як модуль, що підключається (plugin) Flash Player. Крім того, Macromedia Flash MX 6.0 дозволяє зберігати flash-ролики у вигляді абсолютно самостійної програми з розширенням.exe, і для його відтворення не потрібен Flash Player або будь-який інший засіб перегляду. Я думаю, що цих відомостей вже достатньо для того, щоб спробувати створити невеликий flash-ролик, познайомитися з можливостями програми Macromedia Flash MX 6.0 і почати її детальніше вивчати.
Почнемо з найпростішого – запустимо Macromedia Flash MX 6.0. У панелі "Властивості" натиснемо кнопку "Розмір", і в меню встановимо розмір робочої області нашого ролика, наприклад 200х200 пікселів. Потім на панелі властивостей виберемо колір фону робочої області. Тепер можна встановити тривалість створюваного вами фільму. За умовчанням частота показу кадрів (фрейм рейт) становить 12 кадрів в секунду. Т. е., якщо ви хочете створити п'ятисекундний ролик, вам необхідно задіяти 5х12 = 60 кадрів. Як ми вже знаємо, часова діаграма поділена на окремі кадри, прямо над нею є лінійка, на якій, з кроком у 5 кадрів, зазначені їхні номери. Macromedia Flash MX 6.0 дозволяє анімувати об'єкти, тобто відображати процес їх переміщення та/або зміни форми, розміру, кольору та прозорості та кута повороту. У Macromedia Flash MX 6.0 існують два типи анімації: покрокова (frame-by-frame) та кадрована. Для покрокової анімації кожен кадр необхідно створити окремо, це буде робота, аналогічна анімації в gif-аніматорах, і таких файлів буде дуже великий, т.к. для кожного кадру доведеться створити свою картинку. Для кадрованої анімації використовують перший і останній (ключові) кадри, а зміст проміжних кадрів Macromedia Flash MX 6.0 створить автоматично, відповідно до заданих вами параметрів команд. Крім того, можна створити анімацію за допомогою команди Set Property (Задати властивості) в Action Script.
Отже, почнемо створювати фільм. Виділимо клацанням миші перший кадр у часовій діаграмі, за умовчанням він ключовий і позначений кружечком. Ключовим кадр називається тому, що зміни, які мають відбуватися під час відеокліпу, задаються саме ключовими кадрами. Потім в панелі інструментів виберемо потрібний пензель, його розміри, і встановимо колір, вибравши його на панелі, розташованій у нижній частині панелі інструментів. У робочій області, наприклад, у її нижньому лівому кутку, намалюємо якийсь простий малюнок або просто поставимо крапку. Потім клацанням миші виділимо шістдесятий кадр на часовій діаграмі і перетворимо його на ключовий кадр (кадр), натиснувши клавішу F6 або команду "Ключовий кадр" з меню "Вставити". Ми побачимо, що на ділянці тимчасової діаграми, між 1-м та 60-м ключовими кадрами, буде суцільна ділянка, що складається з проміжних кадрів. У кадрах, розташованих на цій ділянці, програма Macromedia Flash MX 6.0 створюватиме проміжні кадри автоматично, без вашої участі, відповідно до того, яку команду ви їй задасте. Виділіть шістдесятий (ключовий) кадр. Виберіть інструмент "Стрілка" на панелі інструментів. З його допомогою перетягніть намальований об'єкт з лівого нижнього кута робочої області в інше місце, наприклад, у правий верхній кут. Початкове і кінцеве положення намальованого об'єкта може бути не тільки всередині, але і за межами робочої області, залежно від того, яку траєкторію руху ви вирішили задати об'єкту. У той час, коли буде виділено намальований вами об'єкт, в панелі "Властивості" будуть представлені властивості цього об'єкта (йому можна присвоїти назву, змінити колір тощо). Потім виділіть мишкою ділянку тимчасової діаграми, з 1-го по 60-й кадр. На панелі "Властивості" з'являться властивості цієї ділянки. У меню (списку) "Закрутка" на панелі "Властивості" виберіть команду "фігур". Слід пам'ятати, що ця команда може використовуватися тільки для об'єктів, намальованих інструментами, розташованими в панелі інструментів, або векторних зображень, отриманих командою "Тресувати малюнок" у меню "Змінити", з імпортованих растрових зображень. Ми побачимо, що 1-й та 60-й ключові кадри тепер з'єднані стрілкою і вся ділянка тимчасової діаграми пофарбована у світло-зелений колір. Якщо замість стрілки, що з'єднує ключові кадри, буде пунктирна лінія, то на цій ділянці тимчасової діаграми задана неправильна команда. Тепер натисканням клавіш Ctrl+Enter ви можете переглянути результат виконаної роботи. Ми побачимо, що об'єкт плавно протягом 5 секунд переміщається з одного положення до іншого. Освоївши створення такого простого ролика, ви можете поекспериментувати з ним, щоб зрозуміти можливості Macromedia Flash MX 6.0.
Необхідно пам'ятати, що редагувати об'єкти можна лише у ключових кадрах, проміжні кадри (не ключові) не редагуються. Але якщо в процесі вашої творчої роботи з'явилася така необхідність, ви можете виділити будь-який проміжний кадр у часовій діаграмі і перетворити його на ключову клавішу F6, щоб відредагувати. Виділіть 1 ключовий кадр (кадр). Інструментом "Стрілка" клацніть на намальованому об'єкті, тепер, вибравши інший колір або градієнтну заливкуна панелі, можна змінити колір об'єкта в першому ключовому кадрі. Крім того, вибравши кнопку "Вільна трансформація", "Субвиділення" або взявши "Ластик", ви можете змінити розміри та форму об'єкта до невпізнання. Можна виділити об'єкт, видалити його клавішею Delete та намалювати замість нього інший. Аналогічно можна змінити і об'єкт, розташований у шістдесятому ключовому кадрі. Виділяючи проміжні кадри у часовій діаграмі клацанням миші чи рухаючись у ній з допомогою кнопок "<" и ">", ми можемо подивитися в покадровому режимі, як Macromedia Flash MX 6.0 змінює форму і положення намальованого об'єкта в проміжку між ключовими кадрами. Причому розмір файлу в такому режимі буде мати дуже маленький об'єм. Спробуйте виділити один з проміжних кадрів, наприклад 20-й , і натисканням F6 зробити його ключовим, тепер і в 20 кадрі можна редагувати об'єкт.Для малювання об'єктів, крім кисті, на панелі інструментів є - лінія, овал, прямокутник і олівець.З їх допомогою можна зробити досить привабливі малюнки.
Тепер спробуйте зробити фільм із використанням напису. Для цього можна створити новий flash-документ, а можна трохи ускладнити завдання та створити новий шару "Тимчасової діаграмі", кнопкою "Вставити кадр". У "Тимчасовій діаграмі" з'явиться новий шар з першим ключовим кадром і за тривалістю дорівнює попередньому, існуючому шару (60 кадрів). Назвемо його "Напис". Виділимо у часовій діаграмі 1 ключовий кадр нового шару. На панелі інструментів натиснемо кнопку "Текст", на панелі "Властивості" встановимо необхідний шрифт, його колір і розмір. У будь-якому місці робочої області намалюємо курсором прямокутну область напису та напишемо будь-яке слово. Якщо вам необхідно, щоб текст переміщався з одного місця робочої області (або її меж) в інше протягом 3 секунд, вам необхідно вставити другий ключовий кадр у 36-му кадрі шару "Напис" кнопкою F6. Причому ви можете встановити початок цієї події не з першого кадру тимчасової діаграми, а з будь-якого іншого, перетворивши цей кадр на ключовий. Просто, якщо ви хочете, щоб дія тривала 3 секунди, другий ключовий кадр треба встановити через 36 кадрів після першого. У другому ключовому кадрі інструментом "Стрілка" перемістимо написане вами слово в інше місце робочої області або за її межі. Виділіть ділянку тимчасової діаграми "Напис" від першого (ключового) до 36-го (ключового) кадру. У панелі властивостей, у меню (списку) "Закрутка", виберемо рядок "Рух". Не намагайтеся застосувати команду "Фігур" для анімації напису, вона працює лише з намальованими та імпортованими векторними малюнками. У тому ж вікні є меню "поворот", якщо ви виберете рядок "Ні", напис просто плавно переміщатиметься з одного положення в інше. Якщо в меню "Поворот" ви виберете "CW", напис переміщатиметься з одного положення до іншого, обертаючись за годинниковою стрілкою, при виборі "CCW" обертання буде проти годинникової стрілки. Там же можна встановити число оборотів, яке зробить напис під час руху з одного положення до іншого, і змістити центр, навколо якого обертається об'єкт. Перегляньте результат, натиснувши Ctrl+Enter. Якщо ви хочете, щоб напис, або імпортований малюнок змінювали по ходу фільму колір та прозорість, необхідно освоїти ще одну команду.
Створіть ще один шар у "Тимчасовій діаграмі" і назвіть його "Напис 1". У першому ключовому кадрі створіть напис. Тепер натисніть клавішу F8 або виберіть "Конвертувати на символ" з меню "Вставити". У вікні "Convert to Simbol" вкажіть "Малюнок". Вставте другий ключовий кадр, наприклад, у 60-й кадр. Виділіть напис у 60-му ключовому кадрі, клацнувши по ньому мишкою. На панелі "Властивості" ви побачите меню (список) "Колір". Якщо ви хочете, щоб ваш напис плавно ставав прозорим, виберіть зі списку команду "Alpha" і за допомогою розташованого поруч двигуна встановіть рівень прозорості. Якщо ви хочете, щоб ваш напис плавно змінював колір, у меню "Колір" виберіть зі списку "Tint" і за допомогою палітри, розташованої поруч, виберіть потрібний колір. Тепер виділимо ділянку тимчасової діаграми в шарі "Напис 1" і в панелі "властивості", в меню "Закрутка" виберемо зі списку "Рух", а в списку "Поворот" - "ні" або поворот за годинниковою (CW), або проти годинникова стрілка (CCW).
Під час перегляду відеокліпу події будуть розгортатися на фоні робочої області, рівномірно забарвленої у вибраний вами колір. Для того, щоб задані вами події проходили на тлі будь-якого красивого ландшафту або будь-якої іншої фотографії або малюнка, його необхідно імпортувати в Macromedia Flash MX 6.0. Створіть будь-яке зображення або фотографію з розмірами 200х200 пікселів, що відповідає розміру вашої робочої області в будь-якому графічному редакторі, наприклад Photoshop. Збережіть цю картинку у форматі gif або jpeg, у будь-якій папці, наприклад, у папці "Мої документи". Бажано, щоб розмір файлу створеної вами картинки був невеликим, якщо ви захочете розмістити створений відеокліп на сторінках вашого сайту. Тепер перейдіть до Macromedia Flash MX 6.0. Створіть новий шар кнопкою "Вставити кадр", розташованою внизу лівої частини панелі "Тимчасова діаграма". Назвіть його "Фон" і перетягніть мишкою вниз так, щоб він розташовувався під раніше створеними шарами. Відкрийте "Файл" у головному меню та виберіть "Імпортувати". За допомогою вікна "Імпортування" (звичайне віконце огляду) відкрийте папку ("Мої документи"), де ви зберігаєте створену вами картинку з фоном, виберіть файл цієї картинки, виділівши його клацанням миші, і натисніть кнопку "Відкрити". Ці маніпуляції призведуть до того, що картинка опиниться в робочій області Macromedia Flash MX 6.0 у шарі "Фон". Вирівнювати її положення, щоб її краї збіглися з межами робочої області, вручну не дуже зручно. Для цього краще використовувати кнопки "Розподілити центр по вертикалі" та "Розподілити центр по горизонталі", розташовані у вікні "Вирівнювання". Тепер можна переглянути отриманий результат, натиснувши Ctrl+Enter.
Тепер, коли ви знаєте, як імпортувати малюнки в Macromedia Flash MX 6.0 та як змусити переміщатися об'єкти, можна перейти до наступного кроку в освоєнні програми. Отже, ми можемо розташовувати події у відеокліпі паралельно і послідовно, відповідно і буде протікати показ фільму. Якщо у фільмі буде багато подій і вони будуть розташовуватися послідовно, і тривалість кожної події буде велика, тимчасова діаграма стане дуже довгою, з нею буде дуже незручно працювати, при редагуванні вам доведеться постійно переміщатися тимчасовою діаграмою, щоб знайти потрібну ділянку. Щоб виключити такі незручності, у часовій діаграмі передбачена можливість створення папок, у яких можна групувати шари. Зробити це дуже просто: у нижньому лівому кутку панелі тимчасової діаграми, натисніть кнопку "Insert Layer Folder" ("Вставити папку шарів") і перетягніть мишею вибрані вами шари фільму. Але цей спосіб дозволяє розмістити компактніше паралельні шари відеоролика. Якщо фільм, який ви створюєте, матиме велику тривалість, а отже, тимчасова діаграма буде дуже довгою, його можна розділити на кілька послідовних сцен. Створений нами ролик має тривалість 60 кадрів (5 секунд) і займає майже всю видиму частину часової діаграми, тому наступну частину фільму ми створюватимемо в іншій сцені. У меню "Вставити" виберіть "Сцена". Після цього ви побачите, що з'явилася чиста робоча область та часова діаграма. Для зручності роботи, кожній сцені можна дати зручну для вас назву. Для переходу зі сцени в сцену можна використовувати кнопку "Змінити документ", що відкриває список створених вами сцен. Кнопка розташовується у нижньому правому кутку тимчасової діаграми. Кількість сцен, на які розбивається фільм, необмежена, я зазвичай роблю сцени не довші за 65-70 кадрів, це якраз видима частина панелі тимчасової діаграми. Але все залежить від вашого смаку та бажання. При відтворенні відеофільму сцени відтворюватимуться послідовно, в тому порядку, в якому ви їх розташуєте.
Тепер спробуйте створити сцену, яка часто використовується сучасними flash-дизайнерами. Відтворення цієї сцени створює ефект відеокамери, що рухається, знімає який-небудь інтер'єр, ландшафт або будь-яке інше велике зображення. Імпортуйте в Macromedia Flash MX 6.0 якесь зображення в форматі jpeg . Назвіть цей шар "Пейзаж". Розмір нашої робочої області 200х200 пікселів. Бажано, щоб розмір картинки, що імпортується, перевищував розміри робочої області хоча б в 1,5-2 рази, наприклад, візьміть картинку з розмірами 350х400 пікселів. Виділіть клацанням миші 50-й кадр тимчасової діаграми, і, натиснувши клавішу F6, перетворіть його на ключовий. Потім за допомогою кнопки "Додати шар руху", розташованої в часовій діаграмі, створіть шар. Шар руху відрізняється від звичайного тим, що при відтворенні готового фільму об'єкти, розташовані в шарі руху, не буде видно. Для того щоб нам не заважала працювати далі імпортована картинка, її слід на якийсь час приховати та блокувати за допомогою відповідних кнопок, розташованих у лівій верхній частині панелі тимчасової діаграми. Натиснувши відповідну кнопку на панелі інструментів, намалюйте у робочій області прямокутник з розмірами 200х200 пікселів, і вирівняйте його так, щоб краї його збігалися з межами робочої області. Для зручності роботи слід малювати прямокутник без заливки, тобто прозорий. Потім зніміть блокування та приховування з шару з картинкою та встановіть блокування на "Шар руху". Це потрібно для того, щоб під час маніпуляцій з імпортованою картинкою не виділявся прямокутник, намальований у шарі руху. Ви побачите, що намальований прямокутник знаходиться на тлі імпортованого зображення. Виділіть мишею 10-й кадр у шарі "Пейзаж" і за допомогою клавіші F6 вставте ключовий кадр. Потім перетягніть картинку в будь-яке місце, але так, щоб намальований прямокутник, що позначає межі робочої області, обов'язково повністю знаходився в межах імпортованого зображення. Виділимо 20-й кадр, клавішею F6 зробимо його ключовим, і знову перетягнемо картинку в інше місце, не забуваючи про те, що прямокутник не повинен вийти за її межі. Те саме зробимо у 30-му та 40-му кадрах. Потім виділіть у шарі "пейзаж" ділянку тимчасової діаграми з першого по п'ятдесятий кадри. На панелі "Властивості" у списку "Закрутка" виберіть "Рух". Ви побачите, що у шарі пейзаж тимчасова діаграма набула світло-бузкового кольору і ключові кадри з'єднані стрілками. Перегляньте отриманий результат, натиснувши Ctrl+Enter. Поекспериментуйте, змінюючи положення зображення у ключових кадрах. Якщо ви задоволені результатом, "Шар руху" можна просто видалити. У цій сцені ми використовували велике за розмірами зображення, при таких великих геометричних розмірах розмір файлу зображення також великий. Для створення не менш ефектної, але меншої за розміром сцени можна застосувати картинку та меншого розміру. Такий прийом я підглянув у великому рекламному банері, показаному на Yahoo.
Створіть нову сцену з меню "Вставити". Імпортуйте в Macromedia Flash MX 6.0 gif або jpeg картинку з розмірами 150-250х150-250 пікселів. Назвіть шар "Малюнок". Виділіть 50-й кадр у цьому шарі та зробіть його ключовою клавішею F6. Тепер створіть новий шар кнопкою "Вставити кадр" та назвіть його "Екран". Цей шар повинен бути обов'язково над шаром "Малюнок". Довжина його часової діаграми буде також 50 кадрів. Виділіть у шарі "Екран" перший ключовий кадр і намалюйте прямокутник будь-якого кольору розмірами 200х200 пікселів, вирівняйте так, щоб його краї збігалися з межами робочої області. Змініть колір заливки в нижній частині панелі інструментів і намалюйте невеликий овал або прямокутник (краще із закругленими краями), розмірами приблизно 80х80 пікселів. невеликій відстанівід робочої сфери. Цей невеликий прямокутник (або овал) перетягніть мишею на поверхню квадрата, що закриває робочу область, і встановіть будь-де, краще ближче до середини (а втім, це ваша справа). Якщо тепер ми виділимо цей прямокутник або овал клацанням миші і видалимо клавішею "Delete", на його місці опиниться отвір, що повторює форму віддаленої фігури. Через цей отвір ми побачимо переміщення імпортованого малюнка. Тому, взявши пензель (та інші інструменти) і трохи попрацювавши, можна перетворити отвір, наприклад, на екран телевізора, дисплей комп'ютера і т.д. Встановіть блокування шару "Екран" відповідною кнопкою, розташованою в лівій частині панелі тимчасової діаграми. Це потрібно для того, щоб нам було зручно переміщати мишею картинку у шарі "Малюнок". Тепер перейдіть у шар "Малюнок", виділіть у його часовій діаграмі 10 (або будь-який інший на початку часової діаграми) кадр і зробіть його ключовим натисканням клавіші F6. Перетягніть картинку в будь-яке місце, так щоб її краї заходили всередину отвори в "екрані". Вставте через деякі проміжки ще 2-3 ключові кадри, не забуваючи в кожному з них переміщати мишею (втім, можна і клавішами стрілок) малюнок у різні положення. Виділіть ділянку тимчасової діаграми з 1-го по 50-й кадр шару "Малюнок", і в панелі "властивості" зі списку "Закрутка" виберіть "Рух". Тепер можна створити ще один шар, назвати його "Прикраси", перетягнути його в часовій діаграмі так, щоб він став над попередніми, намалювати в ньому щось, або зробити пару написів (це для краси) і натиснувши клавіші Ctrl+Enter, переглянути результат нашої роботи.
Тепер потрібно ознайомитися з можливостями Action Script. Виділіть будь-який ключовий кадр у кінці тимчасової діаграми, наприклад 50-й кадр у шарі "Малюнок". Натисніть клавішу F9 або виберіть "Дії" в меню "Вікно". Після цього з'явиться панель Action Script з написом угорі - "Дії - кадр". У лівій частині панелі є вікно зі списком дій. Виберіть Actions зі списку, виберіть Movie Control, а потім подвійним клацанням миші або перетягуванням у вікно панелі, розташоване праворуч, дія "Stop". Тепер перегляньте отриманий результат натисканням Ctrl+Enter. Ми побачимо, що показ створеного нами фільму припиняється на останньому кадрі.
Створіть шар "Кнопка", перетягніть його над попередніми шарами і намалюйте прямокутник у робочій області. Виділіть перший ключовий кадр і натисніть F8, у вікні Convert to Simbol виберіть "Кнопка" і назвіть її "Вимикач". У нижній частині панелі тимчасової діаграми, праворуч, натисніть кнопку "Змінити символ" та виберіть "Вимикач". Ви побачите, як у центрі робочої області з'явився намальований прямокутник, який і буде кнопкою. У часовій діаграмі буде чотири кадри. Виділіть перший ключовий кадр (вгору), зробіть напис "Старт" і розташуйте його на прямокутнику, що зображає кнопку. Потім виділіть другий кадр "Навести" і зробіть його ключовим. Виділіть напис "Старт" та змініть колір за допомогою панелі "Властивості". Виділивши кадр "Вниз", зробіть його ключовим і перетягніть зображення кнопки кілька міліметрів вниз і вправо. Після цього поверніться до останньої сцени за допомогою кнопки "Змінити документ". Виділіть кнопку, зображену в робочій області, клацанням миші. У верхній частині панелі Action Script буде напис - Actions Button. У лівій частині панелі виберіть "Actions", потім "Movie Control", і нарешті, подвійним клацанням миші або перетягуванням у вікно праворуч - дія "Play". Перегляньте результат, натиснувши Ctrl+Enter. Ваш фільм зупинятиметься на останньому кадрі. Там буде намальована вами кнопка. При наведенні курсору колір напису "Старт" буде змінюватися, а при натисканні на кнопку фільм буде демонструватися з початку. Якщо ви хочете озвучити свій фільм, створіть окремий шар, якщо звуків буде багато і вони повинні відтворюватися паралельно, створіть кілька шарів. Виділіть кадр, з якого має починатися відтворення звуку, зробіть його ключовим та імпортуйте його у Macromedia Flash MX 6.0. Слід пам'ятати, що це має бути звукові файлиз розширенням МР3 чи wav, з іншими форматами програма не працює.
Зберегти створений файл можна з меню "Файл", вибравши "Видання" або "Експорт відео". Параметри видання можна також встановити з меню "Файл". Досвідчені flash-дизайнери, прочитавши статтю, можуть сказати, що в ній описані найпримітивніші прийоми роботи, але мета цієї статті - коротко познайомити користувача-початківця з можливостями програми, після чого він зможе приступити до її серйозного вивчення.
|
Досі ми розглядали Flash-фільми, які відтворювалися без втручання глядача від початку до кінця. Однак Flash дозволяє створювати інтерактивні програми, в яких користувач може керувати демонстрацією контенту. У цьому уроці ми почнемо знайомство з елементами мови опису сценаріїв Action Script і розглянемо, як за допомогою цього можна створити інтерактивні програми. Як приклад створимо фотоальбом з елементами інтерактивного інтерфейсу. Але перш ніж приступити до опису Action Script, слід розповісти про ще один вид символів, який ми досі залишали без уваги, - це символи-кнопки. Для створення інтерактивного інтерфейсу вони просто необхідні.
Створення кнопок
Кнопка є чотирикадровим інтерактивним мувікліпом. Коли ми привласнюємо тип «Кнопка», Flash створює для нового символу монтажну лінійку з чотирьох кадрів:
Up-стан - це кадр, що відповідає ситуації, коли кнопка не натиснута і покажчик миші розташований не над кнопкою;
Over-стан кадр, що ілюструє вид кнопки, коли покажчик миші розташований над кнопкою, але кнопка не натиснута;
Down-стан | даний кадр показує вид кнопки при її натисканні;
Hit-стан визначає область, в якій кнопка реагує на клацання миші; цю область у кліпі не видно.
Щоб створити кнопку, виконайте команду Insert => New Symbol (можна набрати клавіші Control+F8). У діалоговому вікні Create New Symbol введіть ім'я символу-кнопки (наприклад, but1) і виберіть тип символу Button («Кнопка»).
Flash перейде в режим редагування символу, надавши кадри Up, Over, Down і Hit. Перший кадр, Up, стає порожнім ключовим кадром. Намалюємо у цьому кадрі ненатиснутий вигляд кнопки (рис. 1).
Мал. 1. UP-кадр кнопки
Виділимо другий кадр, помічений як Over та відповідний стану, коли курсор занесений над кнопкою. Вставимо у цьому кадрі ключовий кадр (за командою Insert => Keyframe), у результаті з'явиться ключовий кадр, що повністю повторює зміст Up-кадра. Змінимо колір кнопки, як показано на рис. 2.
Рис 2. Over-кадр кнопки
Аналогічно додамо наступний кадр (Down-кадр) та намалюємо натиснутий стан кнопки (рис. 3).
Мал. 3. Down-кадр кнопки
У Hit-кадрі поки не нічого малюватимемо, а повернемося до цього кадру трохи пізніше.
Перейдемо до основної сцени, викличемо бібліотеку за командою Window => Library та створимо екземпляр символу кнопки шляхом перетягування його на сцену (рис. 4)
Мал. 4. Створимо екземпляр кнопки, перетягнувши його з бібліотеки
В результаті отримаємо наступний фільм. Як видно з цього фільму, натискання кнопки відбувається не лише тоді, коли ми натискаємо мишею на центральну (робочу) зону кнопки, але й при натисканні на рамку навколо неї. Пов'язано це з тим, якщо Hit-кадр не намальований, то робоча область кнопки буде відповідати Up-кадру.
Для того, щоб натискання кнопки відбувалося тільки в робочій зоні, необхідно в Hit-кадрі визначити цю зону, тобто намалювати кнопку без рамки (див. рис. 5)
Мал. 5. Hit-кадр кнопки
Після того як ми додамо необхідний Hit-кадр, отримаємо наступний фільм, в якому при натисканні на рамку продавлювання кнопки не відбувається.
Щоб зробити кнопку інтерактивною, необхідно пов'язати факт натискання кнопки із виконанням певних команд, тобто описати певний сценарій. Для завдання сценаріїв у Flash існує спеціальна мова Action Script. У цьому уроці ми торкнемося лише незначної частини можливостей цієї мови, а надалі повертатимемося до структури та синтаксису Action Script у міру ускладнення прикладів створення інтерактивних фільмів на Flash.
Поняття про Action Script
Action Script є мовою написання сценарію - набору інструкцій, які керують елементами Flash-фільму. Сценарії Action Script можуть бути вбудовані у фільм або зберігатися у зовнішньому текстовому файлііз розширенням AS.
При вбудовуванні сценарію у фільм його можна впроваджувати у різні частини фільму. Точніше, сценарії Action Script можуть містити ключові кадри, екземпляри кнопок та екземпляри мувікліпів. Відповідно сценарії називаються сценаріями кадру (Frame Action), сценарієм кнопки (Button Action) та сценарієм кліпу (MovieClip Action).
Сценарії Action Script виконуються після настання певних подій, ініційованих користувачем або системою. Механізм, який вказує програмі Flash, який оператор слід виконати під час настання тієї чи іншої події, називається обробником подій.
Action Script має власний синтаксис, багато в чому схожий із синтаксисом JavaScript. Flash MX 2004 підтримує Action Script всіх попередніх версій Flash.
Одним з основних понять Action Script є Actions – команди, які видають інструкції під час виконання SWF-файлу. Наприклад, gotoAndStop() відсилає відтворюючу головку (Рlayhead) на певний кадр або мітку. Від слова Actions і походить назва мови – Action Script (дослівно – сценарій дій). З більшістю понять цієї мови ми ознайомимося на конкретні приклади.
Інтерактивний фотоальбом
Продемонструємо використання кнопок для керування фотоальбомом – створимо набір фотографій та додамо дві кнопки, які будуть гортати фото вперед та назад.
Помістимо на основній монтажній лінійці перше фото і додамо кнопку зі стандартного набору. Для доступу до потрібної папки слід виконати команду Windows=> Control Panels Common Libraries => Buttons (рис. 6).
Мал. 6. Додамо кнопку зі стандартної бібліотеки
В результаті виконання цієї команди з'явиться панель, що містить великий набір намальованих кнопок. різних типів. Виберемо, наприклад, Key Buttons (кнопки, схожі на клавіатурні клавіші), відкриємо відповідну папку, виберемо кнопку key-left (рис. 7) і створимо екземпляр цієї кнопки (шляхом перетягування її на сцену).
Мал. 7. Елементи папки Key Buttons
Зверніть увагу, що коли ви встановлюєте другу кнопку (key-right) на сцені і переміщаєте її, щоб встановити на одному рівні з першою кнопкою, програма підказує ( пунктирну лінію), що дозволяє точно позиціонувати кнопку (рис. 8).
Мал. 8. Автоматичне вирівнювання кнопок на одному рівні
Щоб додати сценарій, необхідно викликати редактор Action Script за командою Window =>Development Panels => Actions або натиснувши клавішу F9. Якщо ви збираєтеся часто писати скрипти, цю клавіатурну команду варто запам'ятати. В результаті з'явиться редактор Action Script (рис. 9).
Мал. 9. Панелі редактора Action Script
Якщо ви експериментуєте, виділяючи різні елементи на сцені, одночасно відстежуючи повідомлення в панелях редактора Action Script, то виявите, що програма підказує, на який елемент можна «вішати» код. Якщо виділити на сцені кадр, то у верхньому лівому куті панелі редактора з'являється напис Actions - Frame, якщо клацнути по кнопці, то з'явиться напис Actions - Button, тобто програма підказує, що код, що вводиться, буде ставитися до сценарію кнопки. А якщо виділити фотографію, то в полі, призначеному для введення скрипту, з'явиться повідомлення: Current selection cannot have actions applied to it (до цього виділеного об'єкта не можна застосувати сценарій).
Ми будемо надавати сценарій кнопці. У останніх версіях ActionScript є можливість писати централізований код, тобто код, який розміщений в одному місці, і така можливість дозволяє краще розумітися на великих програмах. Однак у простих прикладах(які ми і розглядаємо) привласнення сценарію кнопці цілком допустиме.
Отже, для кнопки зі стрілкою вліво нам потрібно формалізувати наступний сценарій: "Якщо кнопка відпускається на деякому кадрі, то з цього кадру необхідно перейти на попередній кадр". Відповідно до синтаксису мови Action Script (рис. 10) це буде виглядати так:
У першому рядку записаний обробник подій кнопки on(), що має формат:
Тепер додамо кілька ключових кадрів так, що в них скопіюються створені в першому кадрі кнопки, і помістимо у створені кадри потрібні фотографії.
Якщо запустити на виконання створений фільм, то кадри безперервно програватимуться один за одним, а отже, насамперед нам потрібно дати команду «Стоп» на першому кадрі. Для цього першому кадру додамо відповідну команду (рис. 11).
Мал. 11. Сценарій, наданий першому кадру
Зверніть увагу: команда надається вже не кнопці, а кадру. Той факт, що кадру присвоєно сценарій, відзначається на основній монтажній лінійці - у позначенні кадру над жирною точкою з'являється маленька літера «a».
В результаті ми отримали наступний фільм.
Якщо у нас у фотоальбомі всього кілька кадрів, то двох кнопок – «Вперед» і «Назад» – цілком достатньо, але якщо набір фотографій великий, то бажано мати ще й кнопки, що відсилають на початок і кінець фільму. У наступному прикладі ми додамо відповідні кнопки: "В перший кадр" та "В останній кадр". Вибрати кнопки відповідної мнемоніки можна зі стандартної бібліотеки кнопок із папки Сircle Вuttons (рис. 12).
На запропонованому прикладі ми ознайомимося з ще однією командою gotoAndStop(), яка дозволяє перейти до потрібного кадру з наступною зупинкою.
Мал. 12. Кнопки із папки Circle Buttons
На кнопку переходу до першого кадру (третя зліва на рис. 13) повісимо код, як показано на рис. 13.
Мал. 13. Сценарій для кнопки "В перший кадр"
У випадку з фотоальбомом з п'яти кадрів до останньої кнопки додамо сценарій переходу «В останній кадр»:
Автоматизоване написання скрипту
Досі ми набирали всі команди вручну, проте панелі редактора ActionScript надають цілий рядсервісів для автоматизованого написання сценарію. Розглянемо ці можливості.
Мал. 14. Засоби автоматизованого написання скрипту
Панель редактора Action Script дозволяє вибирати, перетягувати, перерозподіляти та видаляти команди.
Покажемо, як можна написати той самий скрипт для кнопки "Вперед" в автоматизованому режимі. Вибравши папку Movie Clip Control (верхнє ліве вікно на рис. 14) можна отримати доступ до оброблювача подій on, а далі потрібно або двічі клацнути по відповідному пункту, або перетягнути вираз на поле написання скрипта в режимі Drag and Drop.
Мал. 15. Підказка для завершення виразу
В результаті на робочому полі з'явиться необхідний вираз та підказка виду (рис. 15): вибираєте з меню потрібну команду та вираз завершується автоматично. Як видно з меню, можна вибрати не тільки умову, пов'язану з екранними кнопками - можна також вибрати з меню рис. 15 пункт keyPress “
Мал. 16. Звертання до кнопки клавіатури
Задіємо команду keyPress “
Мал. 17. Команду nextFrame можна знайти у папці Timeline Control
Для кнопки, яка переводить фільм на початок фотоальбому, в якості події можна вибрати з меню натискання клавіші Home, а далі (рис. 18) перетягнути на поле команду gotoAndStop, в результаті чого з'явиться ще одна підказка щодо можливого синтаксису цієї команди.
Стрілки в підказці дозволяють переглянути різні варіантисинтаксису. Програма надає два варіанти (рис. 18 і 19), тобто пропонує задати сцену та кадр або лише кадр. У нашому випадку достатньо вказати лише кадр (Frame). Якщо назва сцени опущена, за промовчанням здійснюється перехід до кадру поточної сцени.
Мал. 18. Підказка щодо можливого синтаксису команди
Мал. 19. Стрілка-трикутник дозволяє переглядати варіанти синтаксису
Після того як ми призначимо всім кнопкам відповідні кнопки клавіатури, отримаємо наступний фільм , де перегортання фотографій відбуватиметься з клавіатури, а натискання мишею на екранні кнопки не буде викликати жодних наслідків.
Чи можна забезпечити сценарій, за якого різні події призводитимуть до тих самих дій? Виявляється, можна - для цього в обробнику подій необхідно перерахувати список найменувань подій. Якщо ви поставите кому у списку подій після першої події, то програма сама запропонує вам меню (рис. 20).
Мал. 20. Під час введення коми у списку подій автоматично з'являється меню додаткових команд
Додамо до першої події (натискання клавіатурної кнопки) друга подія (відпускання екранної кнопки):
on (keyPress " |
Повторимо процедуру для інших кнопок і в результаті отримаємо фотоальбом, в якому перегортання фотографій відбуватиметься як за допомогою миші, так і за допомогою клавіатури (вихідний файл FLA можна отримати за посиланням).
У розглянутому прикладі ми використали перехід за номером кадру, але цей спосіб не завжди зручний: якщо в процесі редагування фільму нумерація кадрів зміниться, то логіка може порушитись. Більш зручно використовувати перехід за міткою кадру. Розглянемо приклад, у якому потрібно як перегортання альбому, а й перехід до різних розділів, тобто складніша навігація.
Нехай альбом складатиметься з малюнків, комп'ютерної графікита фотографій.
Першому кадру розділу «малюнки» дамо мітку Pictures, аналогічно першим кадрам інших розділів надамо мітки graphics і photo.
Створимо шар для розміщення міток та назвемо його Lables. Щоб поставити мітку кадру, у панелі Properties необхідно вибрати тип мітки Name та записати її ім'я. У разі Pictures (рис. 21). Аналогічно розмістимо мітки у кадрах 5 та 10 (рис. 22).
Мал. 21. Приклад присвоєння кадру мітки
Тепер додамо новий шар та назвемо його Actions. У першому ключовому кадрі шару Actions викличемо панель Actions Frame (шляхом натискання кнопки F9) та наберемо команду stop () (див. мал. 22)
Мал. 22. Сценарій першого кадру
Додамо ще один шар під ім'ям Subjects (тематика), в якому дамо назви відповідним кадрам: «Малюнки» (рис. 23), «Графіка» та «Фото».
Мал. 23. Назва для кадрів розділу «Малюнки»
Тепер додамо збоку кнопку меню з аналогічними іменами, які розташуємо на новому шарі під назвою Мenu.
Надрукуємо з лівого краю перший пункт меню «Малюнки» та переведемо його в кнопковий символ. За допомогою інструменту Arrow виділимо текстовий блок«Малюнки» і виконаємо команду Modify => Convert to Symbol (цю команду можна виконати і за допомогою клавіші F8), на панелі Convert to Symbol задаємо тип символу Button і визначимо його ім'я як pictureButton (рис. 24).
Мал. 24. Призначимо кнопці початку розділу малюнків ім'я рictureButton
Створимо чотири кадри для кнопки «Малюнки»: перший представлятиме просто початковий текст(рис. 25), другий - той самий текст тільки синього кольору, третій кадр ми пропустимо (у цьому випадку Down-кадр буде такий самий, як і Over-кадр), а в Hit-кадрі намалюємо прямокутну область, яка визначить область натискання кнопки (рис. 26).
Мал. 25. Up-кадр кнопки pictureButton
Мал. 26. Hit-кадр кнопки pictureButton
Тепер нам потрібно повісити сценарій на новостворену кнопку. Для цього виділимо кнопку в сцені Scene 1 і натиснувши F9, викличемо панель Actions, а потім внесемо код, показаний на рис. 27.
Мал. 27. Сценарій переходу на кадр із міткою