Внутренний сервер обновления 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.) Дополнительные сведения о файлах политики см. в разделе «Изменения в файлах политики в Flash Player 9» центра разработчиков Flash Player Developer Center по адресу www.adobe.com/go/devnet_security_ru .
Коду, выполняемому в изолированной программной среде приложения 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мб уже проблема - утром сотрудники включают компьютер и по полчаса ждут загрузки, пока всё скачается и поставится (или просто отвалится по таймауту). Не говоря уже о том, что компы в подобных офисах имеют неприятное свойство периодически из домена выпадать.
Нужно было другое решение, которое будет работать независимо от политик, никак не напрягать пользователя, минимально использовать канал (хотя бы чтобы качали не все одновременно). Варианты со скриптами по очевидным причинам тоже не подошли.
Выручил, как обычно, Гугл: оказалось, что можно поднять внутренний сервер обновления и настроить на него встроенное средство обновления 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
Тут нужно сделать ремарку. На страничке 2 варианта загрузок: стандартный (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-файлы работают циклически - в непрерывном режиме. Использование обычных видеоклипов на страницах web-сайтов также затруднено из-за большого размера файлов и связанных с этим трудностями при загрузке.
Но эти проблемы можно преодолеть при помощи программного обеспечения, созданного компанией 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-клипов. В Интернете имеется несколько десятков русскоязычных web-ресурсов с аналогичным содержанием. Найти их очень легко из любого поискового портала, сделав соответствующий запрос.
Итак, что же представляет собой программа 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 => Сontrol 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. Стрелочка-треугольник позволяет просматривать варианты синтаксиса
После того как мы назначим всем кнопкам соответствующие кнопки клавиатуры, получим следующий фильм , где листание фотографий будет происходить с клавиатуры, а нажатие мышью на экранные кнопки не будет вызывать никаких последствий.
Можно ли обеспечить сценарий, при котором разные события будут приводить к одним и тем же действиям? Оказывается, можно - для этого в обработчике событий on необходимо перечислить список наименований событий. Если вы поставите запятую в списке событий после первого события, то программа сама предложит вам меню (рис. 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. Сценарий перехода на кадр с меткой