Кросбраузерная Вставка Flash-анимации


Содержание

Вставка flash в HTML

Задача

Вставить flash-объект в HTML страницу, придерживаясь следующих требований:

  • кроссбраузерность — работоcпособность во всех современных браузерах;
  • альтернативный контент — если не установлен flash или установленная устаревшая версия, выводим альтернативное изображение и ссылку для инсталляции свежей версии flash;
  • максимальная простота и гибкость использования метода;
  • SEO и юзабилити дружественность;
  • чистота кода — меньше кода, проще работать с шаблонами;
  • соответствие стандартам.

Решение с использованием javascript библиотеки SWFObject 1

Блок, в который будет вставлен flash, имеет альтернативный контент — это будет отображено при не установленном flash, либо при устаревшей версии. Для примера выведем альтернативную картинку и ссылку для установки свежей версии flash:

Демонстрация вставки одного flash-объекта. Для вставки нескольких flash-объектов используем необходимое количество контейнеров и вызовов функции вставки:

Заметки

  • недостаток метода — у пользователей у которых установлен flash, но отключен javascript, увидят только альтернативное содержимое
  • использование параметра wmode может привести к некотрым ошибкам работы flash (например, при wmode=»transparent» нельзя ввести кириллические символы в поля ввода), используйте его только когда это действительно необходимо + хорошо потом тестируйте функциональность flash-объекта
  • в предыдущей версии метода использовалось значение transparent параметра wmode, от него пришлось отказаться, т.к. обработка прозрачности ведет к снижению производительности браузера
  • Скачать библиотеку SWFObject (9.5Kb)
  • проект SWFObject (есть документация, описание api)
  • хорошая статья по вставке flash в HTML

Решение с использованием javascript библиотеки SWFObject 2

Еще один вариант динамической вставки объекта реализуется вызовом функции embedSWF.

Для этого подключаем библиотеку, скачать которую можно на странице проекта SWFObject в Google Code:

Как и в предыдущем варианте, создаем HTML контейнер для flash с альтернативным содержимым:

При динамической вставке пишем скрипт, который вызывает функцию swfobject.embedSWF и передает ей параметры вставки flash-объекта. Это может выглядеть, например, так (демонстрационный пример взят из официальной документации):

Параметры и атрибуты вставки flash на страницу

Так как скрипт будет вставлять на страницу конструкцию object с вложенными param, необходимо передать ему параметры этой конструкции. Они делятся на три группы:

  1. параметры непосредственно скрипта;
  2. список элементов params вложенных в object.
  3. атрибуты элемента object;

Список параметров непосредственно скрипта

Это собственно аргументы функции swfobject.embedSWF()

Имя параметра Тип параметра Описание параметра
swfUrl String, обязательный URL SWF файла
id String, обязательный id HTML элемента (содержащего альтернативный контент) который должен быть заменен на Flash контент
width String, обязательный ширина SWF
height String, обязательный высота SWF
version String, обязательный версия Flash плеера необходимого для данного SWF (формат: «major.minor.release»)
expressInstallSwfurl String, необязательный задает URL для express install SWF и активирует Adobe express install. Обратите внимание, что express install срабатывает только один раз (при первом выполнении), требует Flash плеер версии 6.0.65 или старше на Win или Mac платформах. Минимально возможный размер SWF для его работы 310x137px.
flashvars Object, необязательный переменные передаваемые Flash в виде пар имя:значение
params Object, необязательный элементы params вложенные в object в виде пар имя:значение
attributes Object, необязательный атрибуты элемента object в виде пар имя:значение
callbackFn JavaScript функция, необязательный может быть использована для определения функции обратного вызова, оповещая об успешном или неуспешном внедрении файла SWF

Параметры перечисляются через запятую. Необязательные параметры можно пропускать, заменяя значением false. При этом замыкающие false можно не указывать. Например вместо:

params

Это те атрибуты, которые в нашем примере выглядят вот так:

Каждая пара имя:значение «развернется» скриптом в отдельный тег param. Таблицу этих параметров можно посмотреть в статье Параметры для вставки объектов.

Для управления прозрачностью, часто применяется параметр wmode, для управления качеством — quality.

attributes

Это те атрибуты, которые в нашем примере выглядят вот так:

Каждый из них станет атрибутом тега object, динамически вставленного на страницу. Их перечень также приведен в статье Параметры для вставки объектов.

Для flashvars, params и attributes существует сокращенный вариант записи, в одну строку, без создания дополнительных переменных, например так:

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

Тут всего-навсего написано: «Флешку из файла myContent.swf вставить в HTML элемент c ».

Немного громоздко, но совсем не страшно, не правда ли?

Напоследок еще один пример вставки флеша. Чуть более сложный и приближенный к реальности.

Вставка Flash-анимации

Добавим Flash-анимацию на страницу (для этого необходимо знать его размер в пикселях). Для этого поставим курсор, в место, куда хотим вставить анимацию и щелкнем кнопку «Flash».

Добавим Flash-анимацию на страницу (для этого необходимо знать его размер в пикселях). Для этого поставим курсор, в место, куда хотим вставить анимацию и щелкнем кнопку «Flash».

Откроется окно проводника, в котором необходимо указать путь к вашему Flash-файлу.

Откроется окно проводника, в котором необходимо указать путь к вашему Flash-файлу.

Выберем Flash-файл (расширение *.swf) и нажмем на кнопку «Открыть».

Выберем Flash-файл (расширение *.swf) и нажмем на кнопку «Открыть».

Откроется окно «Свойства Flash», в котором мы можем просмотреть наш Flash-файл.

Откроется окно «Свойства Flash», в котором мы можем просмотреть наш Flash-файл.

В полях «Ширина» и «Высота» установим размеры анимации.

В полях «Ширина» и «Высота» установим размеры анимации.

И щелкнем на кнопку «ОК». Анимация вставилась на страницу. В режиме редактирования Flash можно просмотреть только в таком виде, но после конвертации в HTML мы его увидим.

И щелкнем на кнопку «ОК». Анимация вставилась на страницу. В режиме редактирования Flash можно просмотреть только в таком виде, но после конвертации в HTML мы его увидим.

Исходники Flash


Программный снег (As3)

Снег, сделанный с помощью action script, совсем не такой, как настоящий. Он тёплый, нежный и совсем не прогнозируется синоптиками:)

Сделать собственный программный снег очень просто.

Новогодний фейерверк во флеше с помощью As3

Используя программную анимацию, можно сделать очень красивый фейерверк для новогодней флеш-открытки или баннера. Но, в отличие от настоящего, мы сбережём массу кислорода и это совершенно безопасно!)

Создание прелоадера (загрузчика) для флеш-ролика на As3

Важной частью любого flash-ролика солидных размеров является качественно сделанный прелоадер. Это та часть флешки, которую пользователь видит в первую очередь и поэтому ей стоит уделить немало внимания. В то же время мы не хотим, чтобы прелоадер весил больше за сам ролик, так что важно не перестараться. Стоит заметить, что в качестве прелоадера можно взять не только шкалу прогресса, к которой мы уже все привыкли, а любую качественную, но не тяжёлую, анимацию и, дописав заветное слово, «loading. » превратить её в оригинальный прелоадер.

Часы обратного отсчета во флеше

Праздники – это всегда радость и веселье. Все с нетерпением ждут момента, когда рядом соберутся родные и любящие люди. Вот и мы посчитаем дни, часы, минуты и даже секунды до Нового года! А флеш нам в этом поможет. Такие часы можно повесить у себя на сайте.

Input text во флеше

Чтобы двигаться дальше по уроку, необходимо зарегистрироваться в следующей swf-ке. Пожалуйста, введите своё имя и нажмите Enter.

Не ожидали?) На самом деле, это результат к которому мы будем стремиться в данном уроке.

Работа с текстом. Текстовые переменные во флеше

Иногда возникает потребность хранить значения переменных в файле, чтобы быстро, без fla-проекта изменить их. Особенно это актуально для текстовых переменных. Например, эту технологию можно использовать, чтобы изменить локализацию (язык) маленьких проектов, таких как баннеры, к примеру. Просто создать несколько текстовых файликов и использовать их по необходимости.

Нам понадобятся 3 динамических текстовых поля. Вот так они будут выглядеть в нашем случае стилизированные под кнопки, размещены на темной подложке:

Плавная анимация кнопки при наведении курсора в as3. Кнопка звука.

Аниматорам очень часто приходится работать со звуком. Некоторые из них, даже, в первую очередь подбирают мелодию, а потом под неё уже делают анимацию. Для флеш-баннеров и анимационных открыток очень важным приобретением будет кнопка, которая включает или выключает звук. Для этого нам понадобятся две кнопки – одна на включение и вторая, соответственно, на отключение. Возьмём вот такие кнопочки с плавной анимацией:

Рандомный выбор объекта

Итак, мы уже немного познакомились с функцией random и оценили её значимость для аниматора. То, что достигается тяжёлым трудом с использованием классической анимации, сводится к нескольким строкам кода. Даже больше! С использованием as3 мы никогда не получим повтора! Конечно, использование random не ограничивается анимированием глаз и других частей тела. С этой функцией можно сделать ещё много чего интересного. Например, покрасить машины в разные цвета. Не верите? Смотрите сами!

Программный scale, rotate и левитация

В этот праздник ужасов (кто не помнит – 31 октября мир празднует Хэллоуин:) хотелось бы поделиться ужасно красивым эффектом, незаменимым для аниматора. Речь идёт об использовании синуса для анимации. Он, как и рандом, позволяет сделать множество интересных вещей.

Итак, возьмем уже готовую графику, и сделаем программную анимацию, используя этот нехитрый прием.

Как вставить Flash анимацию на HTML страницу(flashObject)

Этот урок покажет, как вставить Flash анимацию (SWF) на HTML страницу.

  • Скачайте отсюда http://blog.deconcept.com/flashobject/ пакет скриптов FlashObject
  • Распакуйте файлы из закаченного zip-архива
  • Загрузите файл flashobject.js в директорию скриптов Вашего сайта
  • В html страницу следующий код:

Это альтернативный текст, который увидят посетители в том случае, если у них нет установленного flash плеера

Теперь вставляем SWF фильм:

Вам нужно отредактировать вторую строку:

  • swf – путь к файлу и имя swf файла.
  • >For better explanation, you may check the following link to learn how to revert last changes in WordPress by using revisions option. Below you may find an example of Revisions section:
    » >revision ». Например, можно обозначить: «6.0.65». Или просто назвать основную версию «6».
  • background color — цвет фона Flash фильма в шестнадцатиричном формате.

Animate.css — набор кроссбраузерных CSS3 анимаций

Библиотека включает в себя 56 анимаций, сгруппированных по типу эффекта, включает в себя «вход» и «выход» из анимирования элемента, а так же простой конструктор, который даёт возможность включить в файл только нужные эффекты.

Основное использование

1. Для того что бы начать пользоваться анимацией, нам нужно подключить файл animate.min.css, разместив соответствующий код между тегов .

2. Для того что бы анимировать элемент, нам нужно будет подключить два класса. Один из них основной — .animated, который подключает саму анимацию, второй же определяет, какой именно тип будет использоваться. Ниже приведен полный список всех анимаций, которые можно использовать:

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

Как должен выглядеть пример кода элемента с анимацией? Все очень просто. Возьмем для примера тег h1 и присвоим ему наши два класса. Будет это выглядеть следующим образом.

Класс bounceIn можно заменить на любой другой вариант из списка который был предоставлен выше. Использовать естественно можно не только к тегам, но и к блокам

При подключении библиотеки jQuery, возможности использования animate.min.css переходят на новый уровень. Ищем элементы по селектору .animated, для которых при наведении мы будем добавлять класс анимации — bounceIn.

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

Flash примеры анимации. Автоматическая анимация трансформации объекта. Что же такое анимация

В первом уроке базового мини-курса «Основы анимации в Actionscript 3.0» вы узнаете о том:

  1. Что такое анимация
  2. Как добиться иллюзии движения с помощью кадров
  3. О возможностях покадровой анимации
  4. Об особенностях и преимуществах программной анимации

Adobe Flash , по сути, является своеобразной машиной для анимации. Уже в своих самых первых версиях он создавал ее с помощью концепции Tween . Она представляет из себя следующее:

  • на шкале времени создаются два ключевых кадра с разным содержанием (изменяются положения объектов, их форма, цвет и т.д.);
  • все промежуточные (переходные) кадры Flash создает самостоятельно (рис. 1).

Вот как это выглядит в программе Adobe Flash CS6 .

Но, этот урок и курс в целом не только о Tween, а о мощном языке, который встроен во Flash и называется ActionScript . Изучая его, вы узнаете много полезного и практичного, особенно в таких разделах как имитация физических явлений реального мира и математические вычисления . Очевидно, что подобные знания дадут вам полный контроль при создании интерактивных приложений, чего вы никогда не смогли бы добиться только с помощью Tween.

Но прежде чем мы перейдем к конкретным приемам, техникам и формулам, которые помогут вам анимировать объекты с помощью ActionScript, давайте более детально разберем саму идею анимации, ее некоторые базовые техники и то, как они в ней используются, а также как сделать ее более интересной, а главное динамической.

Что же такое анимация?

Итак, чем же, по сути, является анимация? Определение этого понятия можно найти во многих словарях. Вот, например, одно из них, которое дает Wikipedia:

В переводе на обыденный язык анимация означает движение . Если же несколько расширить это определение, то можно сказать, что анимация — это изменение во времени . В особенности это касается визуальных (видимых) изменений. Движение же — это изменение положения во времени . В один момент времени объект находился в одном месте, а через минуту в другом. Теоретически, он также находился и в промежуточных точках между начальной и конечной по мере движения времени.

Но объект не обязательно должен менять свое положение для того чтобы считаться анимированным. Он может просто изменить свою внешнюю форму. В 90-х годах (страшно сказать, прошлого века!) были популярны компьютерные программы, которые делали морфинг .


К примеру, у вас есть две картинки: девушка и тигр. Программа создает плавный переход/анимацию между ними (морфинг).

При создании этого флеш-ролика использовалась программа Sqirlz Morph 2.1

При морфинге объект также может изменять свой размер или местоположение. Например, таким образом можно создавать иллюзию растущего дерева, вращающегося мяча или изменение цвета у объекта.

Привязка анимации ко времени — это важная концепция.

Без видимого движения или изменения анимации нет, а, следовательно, отсутствует и ощущение времени у зрителя!

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

В такой ситуации трудно сказать, что перед вами: обычное фото или видео-клип. По мере просмотра вы, вдруг, замечаете небольшие изменения в кадре: легкое движение, изменение потока света или перемещение тени. Даже такие небольшие изменения явно сообщают вам о том, что время идет и, если вы продолжите наблюдать, то, возможно, изменится что-нибудь еще. Если в течение следующего промежутка времени никаких изменений нет, то вам снова будет казаться, что вы смотрите на фотографию. Следовательно, отсутствие времени в кадре означает, что картинка будет неизменна.

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

Все помнят картину Леонардо да Винчи «Мона Лиза» — шедевр живописи, одну из самых известных картин в мировой истории искусств.

Можно с большой долей вероятности предположить, что обычный человек заскучает уже после нескольких минут осмотра и очень скоро начнет искать следующий объект для «изучения». Но, начните показывать ему последний голливудский блокбастер и он не заметит как пролетит пара часов. Вот в чем сила анимации!

Как создается иллюзия движения в покадровой анимации

Давайте на секунду вернемся к определению анимации, с которым мы познакомились выше:

Анимация — это технические приёмы создания иллюзии движущихся изображений (движения и/или изменения формы объектов — морфинга) с помощью последовательности неподвижных изображений (кадров), сменяющих друг друга с некоторой частотой.

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

Теоретически, все виды визуальной анимации используют кадры — последовательность картинок или фотографий, быстро показываемых зрителю для того, чтобы имитировать движение или изменение .

То, что вы видите на экране компьютера, телевизора или в кинотеатре основано на кадрах. Все началось еще с первых мультипликационных фильмов, где отдельные картинки рисовались на листах прозрачной пленки и первых фильмов, где такая же техника использовалась при показе серии фотографий.

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

Тогда почему же мы должны называть это иллюзией движения?

Если вы видите девушку, которая идет по улице на экране вашего монитора, это что не является движением? Конечно, это только изображение девушки, а не реальный объект, но это не главная причина по которой мы считаем такое движение иллюзией.

Помните, я говорил об объекте, который в один момент времени находится в одном месте, а через минуту уже в другом? Я при этом сказал, что он движется в реальном пространстве. Вот только такой род движения мы и можем называть реальным. Объекты двигаются в пространстве плавно, а не скачками, как это происходит во всех видах покадровой анимации . В них объект не движется от одного места к другому; он исчезает, а затем появляется в другом месте в следующем кадре. Чем быстрее он двигается, тем длиннее такие прыжки.

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

Если бы я показал вам несколько ее фотографий в процессе движения, то вы все равно сказали бы, что это лишь серия фотографий.

Если бы я показал вам некоторое количество фотографий довольно быстро, то это не изменило бы того факта, что они по-прежнему являются фотографиями, но вы бы начали их воспринимать по-другому.

Ваш мозг стал бы видеть их как движущуюся девушку. По сути, подобное представление ни чем не отличается от первых двух фотографий, т.е. реальное движение в них отсутствует, но в определенный момент мозг сдается и покупается на эту иллюзию . Естественно, что в индустрии производства фильмов этот эффект был очень хорошо изучен.

После проведенных исследований было установлено, что при скорости показа 24 кадра в секунду , зритель воспринимает их как единую движущуюся картинку. Если показывать медленнее, то изображение начинает раздражающе «скакать» и иллюзия движения разрушается. Если же ускориться до 50 кадров в секунду, то реализма изображению это не добавит (хотя в программной анимации при интерактивном взаимодействии зрителя с картинкой ответ будет более быстрым и движение объектов на больших скоростях более «гладким»).

Концепция кадров делает возможными три вещи:

Очевидно, что вы не можете хранить, передавать и затем показывать реальную девушку идущую по улице, но вы можете хранить ее изображение/фото или их серию, а затем уже передавать их и показывать. Таким образом, у вас есть возможность воспроизводить анимацию почти всегда и везде, при имеющемся доступе к сохраненным фотографиям и возможности их показывать.

Настало время дать более общее определение кадру. До сего момента, говоря о нем, мы имели в виду фотографию, картинку или рисунок. Теперь давайте считать следующим образом: кадр — это запись системы в определенный момент времени .

Этой системой может быть:

  • фотография пейзажа, которую вы сделали из собственного окна;
  • коллекция виртуальных объектов (записью, в таком случае, были бы их формы, размеры, цвета, местоположение и т.д. в определенный момент времени. Таким образом, ваш фильм превратился бы из серии картинок в серию записей описаний картинок. Вместо того чтобы просто показывать картинку, компьютер берет такое описание, создает из него картинку и затем уже показывает);
  • кадры, содержащие определенные программы.

Программирование кадров

Поскольку компьютер может считать «на лету», то у вас есть возможность обойтись без длинного списка описаний для кадров. Вы можете все упростить, описав только первый кадр и установив правила по созданию всех последующих кадров . Теперь компьютер не просто создает картинку из описания, а:

  • сначала создает описание,
  • затем генерирует картинку на основе этого описания
  • и в конце показывает эту картинку.

Только представьте себе какое количество места вы могли бы сэкономить, используя такой подход! Картинки всегда занимают приличный объем дискового пространства и пропускной способности сетей. А 24 картинки в секунду могут стать просто «неподъемными». Если вам удастся свести все к одному описанию и определению правил, у вас появляется возможность уменьшить размер файла в сотни раз.

В 90 случаях из 100 даже самая объемная программа с правилами того, как объекты должны двигаться и взаимодействовать занимает меньше места, чем одна картинка среднего размера. Поэтому, один из первых эффектов, который был отмечен при изучении программной анимации — это ее экономичность с точки зрения размера файла .

Определенно существует компромисс. Если ваша система начинает разрастаться, а правила становятся все сложнее и сложнее, то компьютер должен тратить все больше ресурсов для обработки каждой последующей сцены, а затем еще и значительное время для вывода их на экран.

Если вы стараетесь поддерживать определенную частоту кадров, то она порой не оставляет времени вашему процессору (миллисекунды) все это «переварить». Поэтому если компьютер не может просчитать сцену вовремя, то качество воспроизведения (частота кадров) будет страдать. С другой стороны, обычная анимация, основанная на картинке, мало заботится о том, что находится на сцене и насколько эта картинка сложна. Она просто вовремя показывает следующую картинку и все.

Преимущества программной анимации

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

Вы, наверняка, смотрели фильм «Терминатор 2: Судный день». В конце фильма, каждый раз Терминатор исчезает в плавильном котле с фразой «I’ll be back». Он делает это в кинотеатрах, по телевизору и на DVD. Даже нажимая на кнопку «Стоп» или «Пауза», вы не в состоянии его остановить. И это потому, что обычный фильм — это не более чем последовательность картинок . В конце этого фильма они (картинки) показывают исчезающего в пекле Терминатора и это все на что они способны.

Теперь давайте перейдем от Терминатора к обычному флеш-сайту. В конце 90-х, когда Flash стремительно набирал свою популярность, только ленивый не хотел использовать его возможности у себя на сайте:

  • двигающиеся, появляющиеся и исчезающие формы;
  • сопроводжающая музыка;
  • внезапно выскакивающий призыв к чему-нибудь;
  • появляющееся пятно света или тени.

Тогда подобные вещи были в новинку, поэтому и хотелось воскликнуть: «Круто!» Справедливости ради, нужно сказать, что не все из подобных сайтов были действительно крутыми. Вспоминая сегодня то, что я видел тогда, можно сказать, что только два или три из них, действительно, врезались в память.

По длительности анимация на них была не более минуты. Этого хватало только на то, чтобы я просмотрел их раза три подряд. Они что были плохими? Нет, просто после нескольких просмотров внимание слабело, потому что смотреть уже было больше нечего, как в фильме о Терминаторе. И здесь можно говорить об определенном парадоксе — в фильмах такого рода анимация не меняется, каждый кадр, от первого до последнего заранее предопределен.

Вернемся к программной анимации. Она не обязательно должна быть динамической. Вы можете создать объект и с помощью кода, определить его местоположение на сцене и затем заставить его перемещаться вдоль нее. В такой ситуации, каждый раз при запуске такого клипа, будет работать тот же код, вызывая то же движение. И, очевидно, что динамики здесь нет.

А что, если взять тот же объект и с помощью кода, случайным образом определить местоположение этого объекта, направление его движения и скорость? В такой ситуации, после запуска ролика каждый раз, мы будем видеть нечто отличное от предыдущего.

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

А вот и четвертый. Во время фильма, зритель, с помощью мыши или клавиатуры, по своему желанию, мог бы изменять некоторые факторы? Это позволило бы ему взаимодействовать с объектами на сцене. Такой фильм был бы уже далеко не таким каким мы его привыкли видеть, правда? Можно было бы, даже, спасти Терминатора!

Виртуальная реальность

Возможно, что наиболее интересный аспект динамической анимации — это применение к созданным в ней объектам законов математики и физики реального мира . Вы можете не только заставить такой объект двигаться в случайном направлении, но и имитировать воздействие на него гравитации. В результате он начнет падать. Когда падение закончится, он ударится о землю и отскочит, но на высоту не равную той, с которой начал падать. В конце концов, он перестанет скакать и останется лежать на «земле».

После этого вы могли бы разрешить пользователю взаимодействовать с ним:

  • «взять» его мышью
  • или перемещать с помощью клавиатуры.

После того, как пользователь начнет взаимодействовать с ним таким способом, у него возникнет полное ощущение, что это реальный физический объект.

Вы можете в этом убедиться сами, поиграв с красным мячом ниже.


Создавая подобную анимацию, вы заставляете пользователя чувствовать, что он не просто смотрит на то, как движутся кадры, а что он находится в некоем пространстве, созданном вами . Как долго он будет там находиться? Да ровно столько пока ему будет интересно. Чем больше вы ему дадите возможностей для взаимодействия, тем дольше он будет там оставаться, а потом еще и возвращаться многократно.

Итоги

В этом вступительном уроке мы обсудили:

  • основы анимации;
  • отличия покадровой и программной анимации;
  • основные преимущества динамической анимации.

Это концептуальные, базовые знания, на основе которых будет строиться весь последующий материал бесплатного мини-курса «Основы анимации в Actionscript 3.0 ».

В следующих уроках я собираюсь рассказать о некоторых инструментах, которые вы сможете применять в своей работе. Наиболее очевидное использование всей той информации, которая будет обсуждаться в этом курсе — это создание игр. Ясно, что именно они требуют наибольшего взаимодействия с пользователем, где от него требуется решать определенные задачи и достигать поставленные цели.

Но информация этого курса может быть с успехом использована для вашей профессиональной работы как веб-дизайнера. Например, для создания интересного меню на сайте, баннерной рекламы или приложений (программ) для системы образования.

А какой вид анимации вызывает больший интерес лично у Вас? Напишите об этом, оставив комментарий ниже. Также если у Вас появились вопросы во время изучения этого урока, то задавайте, не стесняйтесь, я с удовольствием на них отвечу.

До встречи в следующем уроке!

Пожалуйста, включите JavaScript, чтобы увидеть комментарии.

Известно, что веб-сайты с Flash -содержимым считаются в веб-сообществе отдельной статьёй, неограниченные возможности их анимации и восхитительные эскизы превращают их разработку в особый вид искусства. Веб-сайты на Flash-основе можно разделить на две группы: с двумерной и трёхмерной Flash-конструкцией.

В данную подборку вошли 50 веб-сайтов трёхмерной Flash-анимации , действительно выделившиеся на общем фоне, привлёкшие к себе небывалое внимание и получившие награды! Перед вами не просто очередной список – эти веб-сайты подскажут вам массу идей, ведь каждый из них – шедевр!

Этот сайт настолько бесподобен, что трудно описать словами! Очень красивая заставка, вслед за которой вам открываются шикарные образцы трёхмерной анимации на просто отличной веб-странице.

Классный веб-сайт с красивыми трёхмерными объектами и анимированными фрагментами. Каждую страницу украшают собственные трёхмерные «изюминки».

Восхитительный шедевр! Огромное трёхмерное пространство, на котором посредством анимации происходит действие игры. Отлично выполнены трёхмерные микшированные переходы для каждой страницы.

Простой, но очень красивый веб-сайт с трёхмерным меню и такими же переходами.

Симпатичный веб-сайт с великолепными трёхмерными воздушными шарами и потрясающей анимацией. Есть у него и ещё кое-что особенное – при отсутствии любых действий со стороны пользователя в течение некоторого времени, у человека-мотора кончается горючее, и он падает с неба – всё это в виде любопытного анимированного фрагмента. Этот сайт был отмечен наградой FWA как «лучший сайт дня».

Это ещё что? А это Coca Cola! Веб-сайт очень оригинальной конструкции, состоящий из множества отдельных под-сайтов, каждый из которых отличается от остальных своими оформлением, эскизом и анимацией.

Прекрасно выстроенный веб-сайт. Отличное трёхмерное подводное пространство. Веб-сайт отмечен наградой FWA как «лучший сайт дня».

Очень элегантный веб-сайт с трёхмерной графикой и анимацией. Трёхмерные переходы тоже потрясающие.

Бесподобное трёхмерное меню. Данное трёхмерное портфолио является отменным образцом стиля под названием «минимализм».

Хорошо выстроенный трёхмерный веб-сайт. Он не просто состоит из трёхмерных элементов, но и в целом, как бы, образует трёхмерное пространство, к тому же, почти все анимированные фрагменты тоже трёхмерные. Хорошая работа.

Прекрасный трёхмерный веб-сайт с отличными эффектами передачи объёма. Просто чудо. Веб-сайт отмечен наградой FWA как «лучший сайт дня».

Интересный веб-сайт на Flash-основе с восхитительной Flash-заставкой и массой трёхмерных элементов.

Прекрасно выстроенное красивое трёхмерное пространство и анимированные фрагменты. Состоит из множества отдельных трёхмерных планов, каждый из которых, как бы, отображает действие, происходящее в свой отрезок времени.

Прекрасный мультяшный веб-сайт. Трёхмерная планета в центре страницы, которую можно вращать с помощью перемещений мыши.

Красивый веб-сайт. Всё вокруг трёхмерное и очень чутко реагирующее на перемещения мыши.

Красивый и простой веб-сайт с трёхмерным объектом в середине страницы.

Прекрасно выстроенный веб-сайт. С отличной трёхмерной анимацией и межстраничными переходами. Здорово и то, что каждая страница управляется перемещениями мыши. Веб-сайт отмечен наградой FWA как «лучший сайт дня».

Веб-сайт социальной сети, где можно создать свой собственный неповторимый трёхмерный портрет. Замечательная идея, отлично воплощённая средствами трёхмерной обработки.

Симпатичная трёхмерная фото-галерея с прекрасно воспроизведённым отражением. Строго и просто.

Веб-сайт хорош на загляденье! Включите веб-камеру, и увидите, как все трёхмерные объекты повторяют ваши движения. А если у вас её нет, то веб-сайт просто будет реагировать на перемещения мыши.

Мультипликационный в оформлении, трёхмерный веб-сайт с мини-играми и всякой всячиной для детей. Очень тонкая работа, замечательное исполнение!

Образцовая работа! Прекрасное трёхмерное меню и анимированные фрагменты. Даже 4 варианта объёмного отображения меню на ваш выбор.

Безусловно классный веб-сайт с потрясающим отображением трёхмерности. Не менее шикарные трёхмерные отражения и эффекты, и, в довершение всего, мини-игра, спрятанная в глубине веб-сайта.

Простой в оформлении веб-сайт с трёхмерным меню навигации в виде планеты. Хороший пример применения библиотеки Papervision3D.

Отличное исполнение. Полностью трёхмерная конструкция. С одной страницы на другую переходишь, как из комнаты в комнату. Трёхмерная анимация высокого качества.

Совсем простенький веб-сайт с весьма примечательным трёхмерным меню в виде библиотеки. При выборе одного из его пунктов, включается также классная анимация.

Очень интересный корпоративный веб-сайт с трёхмерной анимацией. Эскиз тоже сногсшибательный. Отличная работа.

Любопытный веб-сайт со множеством трёхмерных объектов, которые можно вращать.

Строгий и простой в оформлении веб-сайт с трёхмерной анимацией, прелесть!

Отличный трёхмерный веб-сайт с классной Flash-заставкой, одно из наиболее интересных трёхмерных решений которого — возможность посетителя самостоятельно перемещаться внутри здания.

Компактный веб-сайт с трёхмерными эффектами, который смотрится восхитительно. Веб-сайт отмечен наградой FWA как «лучший сайт дня».

Веб-сайт на Flash-основе, меню которого снабжено очень интересным трёхмерным эффектом. Красивые трёхмерные переходы.

Строгий и простой в оформлении трёхмерный веб-сайт. Очень грамотно сконструированный. Веб-сайт отмечен наградой FWA как «лучший сайт дня».

Подобие трёхмерной фильмотеки с красивыми трёхмерными переходами. Все анимированные фрагменты воспроизводятся очень плавно. Отличная работа.

Простой и строгий в оформлении трёхмерный веб-сайт.

Любопытный способ нанесения рисунков – помещайте их в центр звёздного неба! Шикарное трёхмерное пространство. Может послужить и милым маленьким подарком вашей подруге/другу (в смысле, ваш рисунок на нём) – ей/ему точно понравится. Веб-сайт отмечен наградой FWA как «лучший сайт дня».

Симпатичный веб-сайт с очень впечатляющим трёхмерным меню навигации. Просто нажмите кнопку «Просмотр» («Browse») справа на странице, и увидите трёхмерное меню навигации.

Если Вы начинающий веб мастер и решили оживить страницы своего сайта при помощи Flash (флэш) анимации или готовых Flash роликов, то информация на этой странице для Вас.

Flash (в переводе с английского « вспышка ») технология начала своё развитие с 1996 г и на сегодняшний день даже начинающий веб мастер знаком с такими терминами как:

А целые Flash-сайты, включающие в себя чаты, гостевые книги, голосования и форумы стали появляться в сети всё чаще и чаще.
С появлением Flash анимации создание сайтов приобрело новое направление.
Сайт, сделанный при помощи флэш технологий, сильно отличается от своих HTML собратьев. Первое, что всегда привлекает внимание пользователя — это всевозможные движущееся, сверкающие, мигающие, переливающееся элементы страницы.

Что нужно для просмотра FLASH

Где взять исходники для создания сайта.

Создание и редактирование флешек.

Для создания flash роликов необходимо выбрать для себя программу с помощью, которой Вы будете работать с флеш.
На сегодня безусловным лидером среди является продукт компании Macromedia Adobe Flash Professional CS3 . Flash CS3 — это промышленный стандарт для разработки интерактивных мультимедийных программ под любые платформы. Flash можно применить для создания игр, веб-сайтов, CD-презентаций, баннеров и мультфильмов.


Для вставки Flash-фильмов в HTML-страницу в ручную используются одновременно два тега — и . Тэг вставляется внутрь тэга . Такая конструкция является следствием того, что часть браузеров не поддерживает технологию ActiveX и тег .

Пример вставки Flash-фильма в HTML-страницу:

Если сравнить эти два кода, то не сложно заметить, что Dreamweaver (только CS3) добавляет javascript. Он решает проблему запуска активного содержимого SWF-файла для браузера «Опера». А именно, чтобы флеш ролик активировался без дополнительного клика по флэшки. Файл, который генерирует программа, так и называется: AC_RunActiveContent.js располагается в папке Scripts.

Расположить DIV поверх Flash.

И для тега : wmode=»opaque» И не забыть прописать в передаваемых параметрах функции AC_FL_RunContent(): «wmode»,»opaque»

Окончательный код кроссбраузерной вставки Flash в HTML страницу.

Работает во всех современных браузерах без дополнительного клика для активации.

В необходимо подключить файл «AC_RunActiveContent.js »
(и не забывайте отправить на сервер)

Параметры:

srс — путь к загружаемому фильму (только для )

movie — путь к загружаемому фильму (только для )

classid – идентификатор ActiveX (только для )

width – ширина Flash-фильма в пикселах

height — высота Flash-фильма в пикселах

codebase – URL, по которому браузер будет пытаться загрузить Flash-дополнение, если оно не установлено у посетителя (для )

pluginspage – URL, по которому браузер будет пытаться загрузить Flash-дополнение, если оно не установлено у посетителя (для )

play – определяет, начинать ли проигрывание фильма сразу после загрузки или нет. Может принимать значение true или falsh

loop – определяет, будет ли фильм проигрываться в бесконечном цикле. Может принимать значение true или falsh

quality – качество отображения фильма. Может принимать значения: best, high, medium, autohigh, autolow, low. Значение best соответствует максимальному качеству.

bgcolor – цвет фона

scale – определяет параметры масштабирования фильма, если размеры в свойствах width и height заданы в процентах.

Принимает значения:
— showall – растягивает фильм для заполнения заданной для него области с сохранением пропорции фильма (используется по умолчанию). Если пропорции фильма и определенной для него области не совпадают, то при отображении могут появиться рамки по сторонам фильма
— noborder – полностью занимает выделенную под фильм область. Не уместившиеся части фильма обрезаются при сохранении пропорций.
— noscale — фильм не масштабируется
— exactfit – масштабирует фильм по размерам заданной области. Пропорции не сохраняются.

base – основной URL, который используется при относительной переадресации, если фильм состоит из нескольких фильмов, хранящихся в разных каталогах

menu – тип контекстного меню, появляющегося при нажатии правой кнопки мыши в области фильма. Может принимать значение true или falsh. Значение true отображает полное меню.

wmode – определяет параметры прозрачности.

Принимает значения:
— window – отображается в собственном прямоугольном окне, используется по умолчанию
— opaque – фильм помещается на задний план страницы
— transparent – устанавливает прозрачный фон фильма (для )

swliveconnect – применяется для разрешения передачи данных между JavaScript и Flash-фильмом (для ). Значение true разрешает передачу данных, false (по умолчанию) – запрещает.

Оптимизация Flash сайтов

Красивая, анимационная шапка, баннер или логотип — вполне могут украсить Ваш профессиональный сайт.
Но с точки зрения оптимизации, создание сайта полностью на основе Flash является большой ошибкой. Такой сайт обречен на отсутствие хорошего рейтинга в поисковых системах. Это происходит потому, что поисковики практически не понимают Flash!
Поисковые системы воспринимают и анализируют на странице Вашего сайта заголовки, текст и ссылки. Если всё это «спрятано» в swf формат, поисковики не в состоянии распознать есть ли внутри файла тексты или ссылки. Просто нет данных для правильного ранжирования такой страницы!

Для решения этой проблемы существует несколько способов:

HTML с элементами Flash — Если ваши страницы имеют индексируемые заголовки, контент страницы и навигационные элементы, в меру ограниченное использование Flash на страницах сайта не должно повлиять на рейтинги и выдачу сайта поисковыми системами.

Фреймы — Попробуйте расположить Flash во фрейме , а индексируемый текст вне фреймов. Пока обе части будут иметь одинаковый контент, у поисковых систем не должно возникнуть проблем с индексацией.

Разделите сайты — создайте Flash-сайт для пользователей и отдельный HTML-сайт для поисковых систем . Далее используйте файл robots.txt, чтобы заблокировать Flash-сайт от индексации поисковиками.

АНИМАЦИЯ ВО FLASH (Часть 1)

В предыдущей главе мы рассматривали программу Flash только как графический векторный редактор. Однако главное назначение Flash состоит в создании анимационной графики, т. е. мультфильмов. Анимация в Flash может содержать звуковое сопровождение и интерактивные элементы. Таким образом, речь идет не просто о графике, а о создании мультимедийных продуктов. С помощью Flash можно создавать интересные приложения, в частности, Web-страницы.
Результаты работы Flash (файлы, анимации, Web-страницы) принято называть мультфильмами, клипами, видеофрагментами, роликами и анимациями (общий термин — movie). Обычно клипами называют мультфильмы, входящие в состав других мультфильмов. Процесс создания мультфильма состоит в следующем. Сначала создается исходный или так называемый авторский файл с расширением fla. Этот файл можно редактировать и просматривать в среде программы Flash. Затем он преобразуется в SWF-файл, который уже можно просмотреть в Flash-проигрывателе и Web-браузере. Кроме того, можно экспортировать результаты вашей работы в файлы других широко распространенных форматов: MOV, анимационный GIF, JPEG и ряд других.

Внимание! При описании инструментов Flash, если специально не оговорено, имеется в виду версия 5.0. Особенности Flash MX мы будем оговаривать особо.

В предыдущей главе мы уже отмечали основные отличия Flash 5.0 от Flash MX. Напомним лишь одно из них, являющееся важнейшим. В Flash 5.0 свойства объекта рассредоточены по нескольким палитрам или по нескольким вкладкам одной палитры. Открыть или закрыть эти палитры можно с помощью меню Window>Panels (Окно>Палитры). В Flash MX сокращено количество палитр. В меню Window нет подменю Panels , в котором можно выбрать панель (палитру), чтобы открыть или закрыть ее. Палитры в Flash MX открываются и закрываются непосредственно с помощью меню Window . Обратите внимание на то, что все свойства текущего (т. е. выделенного) элемента на рабочем поле в Flash MX отображаются на одной палитре Properties (Свойства), которая по умолчанию расположена внизу. Содержание этой палитры зависит от текущего объекта (т. е. выделенного в данный момент). Иначе говоря, содержание палитры свойств контекстно зависимо.

Для первого знакомства с анимационными возможностями Flash создадим простой мультфильм: кружок, который перемещается по экрану слева направо. Сначала мы покажем, как это делается в Flash 5.0, а затем — в Flash MX. Прежде
всего нам понадобятся инструменты («Овал») и («Выделение»). Выполните в Flash 5.0 следующие шаги:

Теперь можно открыть созданный HTML-файл в браузере. Впрочем, это можно сделать даже из Flash, выбрав команду File>Publish Preview>HTML (Файл>Предварительный просмотр пyбликaции>HTML) или нажав клавишу . При этом Flash воспользуется браузером, установленным по умолчанию. Вот и все! Далее мы рассмотрим вопросы создания анимации более подробно.
Все описанное выше в точности соответстует Flash 5.O. Если вы используете Flash MX, то следует учесть, что горячая клавиша не создает ключевой кадр, а все параметры текущего (выделенного объекта) сосредоточены в одной палитре, которая называется Properties (Свойства). Flash MX, вообще говоря, удобнее, чем Flash 5.0, однако жаль, что горячая клавиша исчезла.
Теперь рассмотрим создание анимации в Flash MX. На рабочем поле рисуем круг. Выделяем его и группируем в одно целое его контур и заливку. Это можно сделать с помощью команды Modify>Group (Модифицировать>Группировать). Далее, щелкните правой кнопкой мыши на конечном кадре и в контекстном меню выберите команду Insert Keyframe (Вставить ключевой кадр). Перетащите круг на новое место. Щелкните левой кнопкой на первом кадре. При этом круг окажется в исходном положении. Теперь обращаемся к палитре Properties, содержащей в данный момент параметры первого кадра. В раскрывающемся списке Tween выбираем значение Motion (Движение). При этом на временной шкале между первым и последним ключевыми кадрами появится стрелка, что говорит об успешном создании анимации. Для воспроизведения мультфильма нажмите клавишу .

Рис. 551. Создание анимации в Flash MX

Если на временной шкале вместо стрелки появилась штриховая линия, то это означает, что вы допустили какую-то ошибку. При этом на палитре свойств появляется кнопка с изображением треугольника и восклицательного знака. Щелчок на ней откроет панель с сообщением об ошибке. Неудача при создании анимации чаще всего обусловлена следующими двумя причинами: либо вы пытаетесь анимировать несгруппированные объекты (в случае круга это контур и заливка), либо в данном слое находятся несколько сгруппированных объектов.
Кроме способа, рассмотренного выше, в Flash MX можно создать анимацию посредством команды Create Motion Tween (Создать анимацию движения). В этом случае щелкните правой кнопкой мыши на первом кадре и в контекстном меню выберите команду Create Motion Tween . При этом изображение круга будет преобразовано в символ типа Graphic . Щелкните правой кнопкой мыши на последнем кадре и в контекстном меню выберите команду Insert Frame (Вставить кадр). Между первым и последним кадрами появится штриховая линия. Теперь нужно переместить круг на новое место. В результате последний кадр автоматически станет ключевым, а штриховая линия будет заменена стрелкой. Создание анимации завершено.
Как нетрудно заметить, способы создания анимации в Flash 5.0 и Flash MX очень похожи и просты. Попробуйте их применить несколько раз, и они хорошо запомнятся.

Основные понятия анимации

Под термином анимация понимается последовательность сменяющихся изображений (кадров), в результате просмотра которой возникает иллюзия движения (плавного изменения формы и/или положения изображения). В Macromedia Flash реализовано два способа анимации:

  • Покадровая анимация. Этот способ состоит в том, чтобы достаточно быстро пролистать заранее нарисованные кадры. В данном случае иллюзия движения возникает за счет выбора подходящих скорости перелистывания и степени похожести соседних кадров. Рассматриваемый способ аналогичен способу, применяемому при создании анимационных GIF-файлов (см. главу 3).
  • Интерполяционная анимация . Этот способ заключается в том, чтобы создать несколько опорных (ключевых) кадров, а затем на их основе «вычислить» промежуточные кадры (tweening animation). Данный способ аналогичен рисованию гладкой линии, проходящей через указанные точки. Например, допустим, что требуется переместить какую-нибудь фигуру из левой части экрана в правую с помощью 25 кадров. В случае первого, покадрового, способа анимации нам придется нарисовать все двадцать пять кадров, и в каждом последующем кадре чуть-чуть сдвигать фигуру вправо. А если нужно сделать так, чтобы фигура, двигаясь вправо, постепенно исчезала или меняла форму? Очевидно, делать вручную каждый кадр в этом случае будет слишком утомительным занятием. Вот для таких ситуаций и предусмотрен второй способ анимации. В простейшем случае вам понадобится задать только два ключевых кадра: начальный и конечный. По умолчанию Flash рассчитывает промежуточные кадры по линейному закону, но можно задать и экспоненциальный закон.

Сначала рассмотрим основные элементы, используемые при работе с Flash: временную шкалу (timeline) , кадры (frames) , символы (symbols) и слои (layers).

Временная шкала — основной инструмент при работе с анимацией в Flash. На ней отображается информация о слоях и о том, какие кадры являются ключевыми, а какие промежуточными (генерируемыми Flash). С помощью временной шкалы можно понять, какие кадры содержат действия или метки. Она позволяет перемещать ключевые кадры и отдельные фрагменты анимации. Этот инструмент хорошо продуман и очень удобен, вы быстро научитесь работать с ним.

Рис. 552. Временная шкала в Flash 5.0

В Flash MX временная шкала несколько модифицирована. Например, появилась возможность создания папок, содержащих слои. Это средство организации структуры мультфильма мы уже рассматривали в предыдущей главе. В правом верхнем углу временной шкалы находится кнопка меню форматов кадров. От выбора формата кадров зависит внешний вид временной шкалы. В отличие от Flash 5.0, теперь в кадрах можно отобразить уменьшенные копии изображений.

Рис. 553. Временная шкала в Flash MX

Перечислим основные элементы временной шкалы.

  • Маркер — выделенный красным цветом прямоугольник, указывающий на текущий кадр, содержимое которого отображается в рабочей области. Ячейки прямоугольной сетки (шкалы кадров) соответствуют кадрам. При щелчке на какой-либо ячейке маркер автоматически перемещается на нее, а в рабочей области отображается содержимое соответствующего кадра.
  • Слои. Слева от линейки кадров находится список слоев. Под ним расположены кнопки, позволяющие добавлять и удалять слои. При желании каждый слой можно сделать невидимым или запретить его редактирование.
  • Шкала кадров — поле, где можно добавлять и удалять простые и ключевые кадры. Если вызвать контекстное меню, щелкнув правой кнопкой мыши на каком-либо кадре, вы увидите перечень действий, которые можно совершить. На шкале кадров отображается следующая информация:
    • ключевые кадры помечаются черными кружками;
    • кадры, с которыми связаны действия, помечаются буквой «а» над кружком;
    • на помеченные кадры указывают красный флажок и название метки.
  • Цвет также говорит о типе кадров. Кадры, которые в точности повторяют ключевой кадр (keyframe), окрашиваются в серый цвет. Сиреневая или зеленая подсветка говорит о том, что кадры сгенерированы Flash. Белый цвет указывает на пустые кадры.
  • Кнопки управления тенями позволяют отображать соседние кадры как бы через кальку, чтобы видеть различия между соседними кадрами. Иначе говоря, они позволяют создать шлейф для движущегося изображения. Можно задавать количество отображаемых соседних кадров.

Анимация состоит из последовательности кадров. Кадр может быть как создан вручную, так и сгенерирован Flash. Это относится к кадрам одного слоя. Так как сцены Flash (что это такое, описано ниже в этой главе) состоят обычно из нескольких слоев, то итоговые «многослойные» кадры могут содержать как сгенерированные, так и «самодельные» кадры.
В компьютерной анимации существует понятие ключевые кадры (keyframes) — это кадры, которые Flash не изменяет в процессе создания анимации, но использует в качестве опорных при генерации промежуточных кадров.
Существует два типа промежуточных кадров:


  • Кадры, построенные на основе изменения формы (shape tweening).
  • Кадры, построенные на основе изменения символов (motion tweening). Наиболее часто они используются при создании анимации движения по рабочему полю.

Следует упомянуть и о пустых кадрах, которые ничего не содержат.

На временной шкале последовательность неизменяющихся кадров имеет серый цвет, последовательность кадров motion tweening — сиреневый, последовательность кадров shape tweening — зеленый, пустые кадры — белый. Ключевые кадры обозначаются черной точкой.
Элементарные операции над кадрами:

  • вставить пустой ключевой кадр: команда Insert>Blank keyframe ( );
  • вставить ключевой кадр, повторяющий содержание предыдущего: команда Insert>Keyframe ( , только в Flash 5.0);
  • очистить ключевой кадр: команда Insert>CIear keyframe ( + );
  • вставить обычный кадр: команда Insert>Frame ( );
  • удалить кадр: команда Insert>Remove Frames ( + ).

Символ — одно из ключевых понятий в Flash. Мы уже говорили о нем в предыдущей главе. Символом может быть простейшая фигура, объединение нескольких фигур и даже целая анимация (movie). Например, можно создать символы «колесо», «кузов» и «фара», а потом все это объединить в символ «автомобиль». Затем можно создать сцену, в которой этот «автомобиль» будет «ехать». Вы можете сделать колесо анимационным символом, чтобы ощущалось его вращение. Дверь автомобиля можно сделать символом типа «кнопка», чтобы она открывалась при щелчке на ней. При этом в любой момент вы можете изменить содержание и тип символа. Другими словами, символ это — объект. Вроде бы термин «объект» более привычен, но в Flash используется именно «символ» (поэтому символы текста во избежание путаницы мы будем называть знаками ).
Символы могут быть вложенными друг в друга вне зависимости от типа, что является самым главным их достоинством. Символы можно создавать как «с нуля» (команда Insert>New Symbol (Вставить>Новый символ) или клавиши + ), так и используя текущее выделение в рабочей области, преобразовав его в символ (команда Insert>Convert to Symbol или клавиша ). Второй прием используется гораздо чаше, чем первый, т. к. отпадает необходимость позиционировать выделение и подгонять его размер.
Для управления символами используются так называемые библиотеки (Library), о которых мы расскажем ниже. Все, что вы нарисовали или импортировали в рабочую область, можно преобразовать (конвертировать) в символ. Этот символ сразу же попадет в библиотеку текущего (создаваемого или редактируемого) мультфильма. Символы из библиотеки могут быть перенесены на сцену или в другой мультфильм. При этом то, что вы перенесли, фигурирует уже не как символ, а как экземпляр (instance) символа. Вы можете редактировать символ, и тогда результат ваших модификаций распространится на все его экземпляры. Можно редактировать экземпляр символа, не затрагивая сам символ. Модифицированный экземпляр символа можно превратить в самостоятельный символ. Окно библиотеки раскрывается командой Window>Library (Окно>Библиотека) или нажатием клавиш + . Рекомендуется разобраться с ней самостойтельно.
Существует три типа символов: графический (Graphic) , кнопка (Button) и анимация (мультфильм, клип) (Movie Clip). Команда Insert>New Symbol открывает окно, в котором следует указать тип создаваемого символа. Рассмотрим типы символов более подробно.

Рис. 555. Диалоговое окно, в котором указываются имя и тип создаваемого символа

    Символы этого типа мы уже упоминали в предыдущей главе. Поведение графических символов описывается посредством временной шкалы основного фильма. С символами этого типа не могут быть связаны интерактивные средства управления и звуковое сопровождение. Практически все, что можно сделать посредством графического символа, можно сделать и с помощью символа типа Movie Clip (см. ниже).
    Напомним, что изображения можно создавать не только вручную с помощью инструментов рисования, но и импортировать из графических файлов.

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

  • Up — указатель мыши не находится над кнопкой;
  • Over — указатель мышки находится над кнопкой;
  • Down — указатель мыши находится над кнопкой и при этом нажата кнопка
    мыши;
  • Hit — кадр для определения активной области кнопки, реагирующей на щелчок; его содержимое невидимо и может быть как меньше, так и больше видимого изображения кнопки. Если вы не опишете этот кадр, для него будет использоваться изображение кнопки из кадра Up.

Заметим, что в предыдущей главе мы рисовали изображение кнопки, но не создавали символ кнопки.
Чтобы создать кнопку, выполните команду Insert>New Symbol или нажмите клавиши + . В раскрывшемся диалоговом окне введите имя символа и выберите его тип (Behavior (поведение)) Button . Flash переключится в режим редактирования символа. При этом на временной шкале отобразятся четыре кадра: Up, Over, Down и Hit.
Первый кадр — Up. Теперь надо создать изображение для кнопки, используя инструменты для рисования, импорт графики или вставку экземпляра другого символа. При этом можно применять символы типа Graphic (Графический) и Movie Clip (Анимация), но не Button (Кнопка). Используйте Movie Clip , если хотите, чтобы кнопка была анимированной. Созданное изображение для кнопки будет вставлено в кадр Up , который автоматически станет ключевым.
Далее, щелкните на временной шкале кадра Over и сделайте его ключевым (Insert>Keyframe или клавиша ). Содержимое предыдущего кадра (Up) будет автоматически скопировано в кадр Over. Повторите это для кадров Down и Hit. Теперь вы можете отредактировать изображение кнопки для каждого из четырех кадров. Например, можно изменить цвет и/или надпись на кнопке, что придаст динамичность кнопке: она будет менять внешний вид в зависимости от положения указателя и состояния кнопки мыши. На рисунках, как пример, показаны изображения кнопки для различных кадров.
Если необходимо воспроизводить звук, зависящий от состояний кнопки, выделите соответствующий кадр на временной шкале и выполните команду Modify>Frame (Модифицировать>Кадр), чтобы раскрылась панель Frame, на которой есть вкладка Sound (Звук). В этой вкладке можно установить необходимые параметры.
Завершив создание символа кнопки, перейдите в режим редактирования мультфильма (команда Edit>Edit Movie ) и перетащите символ кнопки из окна библиотеки в рабочую область, чтобы создать экземпляр этого символа в вашем мультфильме (сцене).

Все, что мы сделали, является лишь визуальным объектом. Однако кнопки, как известно, служат элементами управления. Мы хотим, чтобы, например, при щелчке на кнопке что-то происходило. Другими словами, кнопку необходимо наделить функциональностью. Для этого щелкните правой кнопкой мыши на изображении кнопки и в раскрывшемся меню выберите команду Actions (Действия). В результате рас кроется панель Object Actions , показанная на рисунке. На вкладке Object Actions этой панели в левом списке можно выбрать действие. В правом поле записываются инструкции сценария на языке ActionScript. Вы можете выбирать действия и значения их параметров (поля ввода и/или переключатели), наблюдая, что пишет Flash в правом поле, либо вручную писать сценарий. На рисунке показан пример, в котором в качестве действия выбрана функция getURL(adpec) , вызывающая документ (файл), расположенный по указан ному адресу. Причем это действие произойдет в случае нажатия кнопки (при щелчке левой кнопкой мыши на изображении кнопки) — за это отвечает функция on (press)

Рис. 560 . Панель создания и редактирования действий, связанных с объектом

Подробнее о панели действий и, в частности, о функциональности кнопок будет рассказано ниже в этой главе.
Обратите внимание на то, что действия следует назначать экземпляру символа Button в мультфильме, а не кадрам кнопки на временной шкале. Другими словами, вы размещаете экземпляр кнопки на рабочей области и затем назначаете ему действия.
В общей библиотеке символов Flash, открываемой командой Window>Common Libraries , имеются уже готовые кнопки. Вы можете открыть эту библиотеку и перетащить из нее в рабочую область понравившийся символ столько раз, сколько его экземпляров потребуется в мультфильме. При этом символ сразу же попадете частную библиотеку вашего мультфильма. Вы можете модифицировать как символ, так и его экземпляры. Например, если нужно создать ряд кнопок в одинаковом стиле, но с различными надписями, то следует модифицировать экземпляры, для чего выделите на рабочей области экземпляр кнопки и выполните команду Modify>Instance (Модифицировать>Экземпляр).
В Flash MX модификация кадров, экземпляров символов и самих символов производится с помощью палитры Properties (Свойства).
Если вам нужна простая прямоугольная кнопка без особых художественных изысков, то в Flash MX можно воспользоваться уже готовым компонентом PushButton (Кнопка) из палитры Components (Компоненты). Экземпляры этого компонента можно редактировать. Об этом мы рассказывали в предыдущей главе.

Рис. 561. Два экземпляра кнопки, различающиеся надписями. Library — Moviel — окно библиотеки символов нашего мультфильма (в данный момент в ней содержится лишь один символ Push Bar); Library — Buttons.fla — окно библиотеки кнопок из общих библиотек (Common Libraries)

Анимация (Movie Clip)

Анимация — самый интересный тип символа. В этом символе может быть любое количество кадров. В языке сценариев ActionScript данный символ воспринимается как объект типа Movie Clip . Каждый символ этого типа (клип) имеет собственную временную шкалу, которая воспроизводится независимо от временной шкалы основного мультфильма. С другой стороны, клип может содержать другие клипы и элементы интерактивного управления.
Мы уже рассматривали создание простого мультфильма выше в этой главе. Более подробный рассказ — в следующем разделе. Здесь отметим, что большая общность понятия символа типа Movie clip требует определенного опыта, чтобы использовать его в полной мере. Во многих случаях вся анимация (весь мультфильм) состоит из одного клипа.

С понятием библиотеки мы уже встречались и в предыдущей, и в этой главе. Теперь рассмотрим его подробнее. Библиотека символов позволяет разработчику использовать в новом мультфильмы символы, созданные ранее в других мультфильмах. Это дает возможность накапливать наработанный материал и организовывать коллективную работу.

В Flash имеются следующие типы библиотек:

  • Библиотека мультфильма (Library)
  • Обшая библиотека (Common Library)
  • Постоянная библиотека (Permanent Library)
  • Разделяемая библиотека (Shared Library)

В Flash MX, в отличие от Flash 5.0, разделяемые библиотеки бывают двух видов:

  • Run-time — разделяемая библиотека времени выполнения;
  • Author-time — разделяемая библиотека времени разработки.

В Flash 5.0 единственный тип разделяемой библиотеки есть библиотека Run-time.
С точки зрения пользовательского интерфейса работа с библиотеками различного типа организована одинаково, ее содержимое можно просмотреть в специальном диалоговом окне.
Библиотека мультфильма — библиотека символов, связанная с конкретным мультфильмом. Она создается автоматически, как только вы создадите первый символ. Этот символ сразу же попадет в библиотеку. Пустую библиотеку можно создать, выполнив команду Window>Library (Окно>Библиотека). Библиотека, коль скоро она создана, существует столько времени, сколько существует мультфильм. Можно удалить все ее содержимое, но удалить собственно библиотеку нельзя. В заголовке окна библиотеки выводится название мультфильма (имя файла). Символы билиотеки могут быть использованы в любом другом мультфильме. Для этого достаточно открыть новый файл, не закрывая файл, библиотекой которого вы хотите воспользоваться. При этом окно библиотеки файла-источника должно быть открыто.
Общая библиотека — встроенная библиотека Flash. В отличие от библиотеки мультфильма, ее содержимое нельзя изменить. Общая библиотека состоит из нескольких библиотек, таких как Buttons (Кнопки), Learning Interactions (Интерактивное обучение) и др. Общая библиотека Flash MX включает, кроме прочего, еще и раздел Developer Assets (Ресурсы разработчика), который содержит компоненты пользовательского интерфейса (см. главу 8).
Элементы общей библиотеки можно использовать в своих мультфильмах и в имеющемся виде, и в качестве начальных заготовок для последующей модификации.
Постоянная библиотека — библиотека, создаваемая пользователем и доступная из любого мультфильма. Для создания постоянной библиотеки выполните следующее:

  1. Создайте Flash-файл (новый мультфильм, т. е. файл с расширением fla) с библиотекой, содержащей символы, которые вы хотите включить в постоянную библиотеку.
  2. Сохраните созданный Flash-файл в папке Libraries, которая находится среди других папок пакета Flash.

После создания новая библиотека появится в меню Window>Common Libraries (Окно>Общие библиотеки).
Разделяемая библиотека позволяет использовать содержащиеся в ней символы в нескольких мультфильмах без копирования этих символов в частные библиотеки мультфильмов. Элементы разделяемой библиотеки называются ресурсами (asset). Разделяемая библиотека используется как внешний файл и не содержится внутри мультфильма.
Применение разделяемых библиотек полезно в следующих случаях:

  • при совместном использовании символов шрифтов на различных страницах сайта;
  • при использовании одного и того же звукового сопровождения на различных страницах сайта;
  • при использовании различных элементов, которые должны отвечать некоторому единому стилю дизайна.

Чтобы создать библиотеку разделяемой, следует определить ее ресурсы (входящие в нее символы), разрешить экспорт разделяемых символов, указать URL-адрес сайта, на котором будет размещена библиотека, экспортировать Flash-файл в SWF-формат и разместить его на Web-сайте.
После создания разделяемой библиотеки необходимо указать, какие из ее символов могут быть экспортированы в другие мультфильмы. Для этого в окне библиотеки выберите нужный символ и щелкните на нем правой кнопкой мыши. В контекстном меню выберите команду Linkage (Связывание). В результате откроется окно, которое в Flash 5.0 называется Symbol Linkage Properties (Свойства связывания символа), а в Flash MX — просто Linkage Properties (Свойства связывания). В разных версиях Flash эти окна несколько отличаются, но суть одна.
В поле Identifier (Идентификатор) вводится имя символа (без пробелов), с которым он будет экспортирован в фильм-совладелец.
В Flash 5.0 вы можете выбрать экспорт символа или импорт его. В последнем случае требуется указать URL-адрес мультфильма-источника, т. е. SWF-файла с разделемой библиотекой. Это же можно сделать и в Flash MX, но там есть и дополнительные возможности. В частности, чтобы экспортируемый символ мог использоваться сразу же с первого кадра мультфильма-совладельца, установите флажок Export in first frame . Если экспортируемый символ следует сделать доступным в сценарии на языке ActionScript, то установите флажок Export for ActionScript.

Рис. 562. Окно свойств связывания символа в Flash 5.0

Рис. 563. Окно свойств связывания в Flash MX

Чтобы использовать символы из разделяемой библиотеки в мультфильме-совладельце, откройте библиотеку этого мультфильма и в раскрывающемся меню библиотеки выберите команду New Symbol (Новый символ). В результате откроется окно Create New Symbol (Создание нового символа). В Flash 5.0 в этом окне можно задать только имя и тип символа. Поэтому после появления нового символа в билиотеке требуется открыть окно Symbol Linkage Properties , рассмотренное выше. В Flash MX окно Create New Symbol сразу содержит все параметры символа.

Рис. 564. Окно Create New Symbol в Flash MX

Выше мы рассмотрели работу с разделяемыми библиотеками вида Run-time. Напомним, что в Flash 5.0 это единственный вид разделяемой библиотеки. В Flash MX, кроме того, есть еще один вид разделяемых библиотек — Author-time. Здесь мы не будем подробно его рассматривать. Отметим лишь, что применение библиотек Author-time позволяет заменять содержимое символов в редактируемом Flash-файле.

Рассмотрим способы и примеры создания анимации.

Покадровая анимация полностью составляется из ключевых кадров. Здесь вы сами определяете как содержимое каждого кадра, так и его экспозицию (т. е. сколько таких статических кадров будет занимать изображение). Данный способ изначально применялся при создании обычных рисованных мультфильмов. На временной шкале покадровая анимация выглядит следующим образом:

Рис. 565. Покадровая анимация состоит только из ключевых кадров. Одно и то же изображение может занимать несколько таких кадров

Это единственный способ организовать смену абсолютно независимых изображений — так называемое слайд-шоу . Как правило, так создается обычный баннер.

Рис. 566. Четыре последовательных кадра из мультфильма, в котором вырастает цветок

Однако покадровую анимацию сложно модифицировать. Если эта анимация является связанной, то приходится модифицировать практически все кадры. Кроме того, покадровая анимация занимает достаточно большой объем, так как нужно хранить информацию о каждом кадре.
Заметим, что анимационные GIF-файлы, широко применяемые в Web-дизайне, создаются в Flash методом покадровой анимации. Вы можете создать несколько ключевых кадров (если необходимо, то используйте несколько слоев), а затем преобразуйте свое произведение в GIF-файл с параметром Animated с помощью операции публикации. Более подробно об этом рассказано в последнем разделе данной главы.

При таком способе анимации Flash автоматически создает промежуточные кадры, которые встраиваются между ключевыми кадрами, заданными вами. Это означает, что вы в одном кадре рисуете объект, потом в другом кадре производите его изменения. Созданные кадры являются ключевыми. Затем вы просите Flash рассчитать кадры, которые должны занять место между двумя ключевыми кадрами. В результате вы получаете анимацию.
Скорость и плавность анимации зависят от количества кадров, которые вы отводите под движение, а также от скорости прокрутки вашего Flash-мультфильма (movie). Скорость прокрутки мультфильма можно установить в Flash 5.0 командой Modify>Movie или клавишами + , а в Flash MX — командой Modify>Document . Параметр Frame Rate задает количество кадров, показываемых в секунду. Для высококачественной анимации скорость должна быть не меньше 25-30 кадров/с. По умолчанию скорость равна 12 кадров/с. При создании мультфильмов она обычно подбирается экспериментально, в зависимости от динамичности вашего произведения, требуемого качества, ограничений на объем файла и т. п.
Плавность и длительность задаются количеством кадров, отведенных на всю анимацию (ее фрагмент). Например, если скорость вашего мультфильма составляет 30 кадров/с, и вам нужно, чтобы совершалось перемещение объекта из одного угла картинки в другой за 2,5 с, то на движение потребуется отвести 75 кадров. В Flash есть два варианта построения промежуточных изображений:

  • Shape tweening — построение анимации на основе изменения формы;
  • Motion tweening — построение анимации на основе изменения символов.

Первый вариант используется в случаях, когда нужно обеспечить лишь плавное изменение формы объекта. Второй используется чаше всего из-за своей универсальности.

Анимация на основе изменения формы (Shape tweening)

Допустим, нужно, чтобы квадрат плавно превратился в круг, или изображение кошки плавно превратилось в изображение собаки. В таких случаях используется shape tweening (изменение формы, трансформация). При этом вы задаете два ключевых кадра на некотором расстоянии друг от друга. В рассматриваемом варианте анимации есть жесткое ограничение: анимация должна занимать отдельный слой и быть единой нарисованной фигурой (не должно быть групп или символов). После того как вы создали два ключевых кадра, сделайте активным первый из них (просто перейдите на него щелчком кнопкой мыши) и выберите в палитре Frame (вызываемой командой Windows>Panels>Frame или нажатием клавиш + ) в списке Tweening строку Shape (Форма), как показано на рисунке.

Рис. 567. Указываем вариант анимации Shape tweening

Кадры на временной шкале должны окраситься в зеленоватый цвет, а от первого кадра ко второму должна протянуться стрелка. В результате вы получите ряд промежуточных кадров, которые будут отражать переход от первой фигуры ко второй. Чтобы показать содержимое соседних кадров, нужно включить режим отображения теней. На следующем рисунке показана анимация, при которой круг плавно превращается в полумесяц.


Рис. 568. Круг плавно переходит в полумесяц. Здесь первый ключевой кадр содержит круг, а последний, 10-й кадр, — полумесяц. На рисунке показаны все кадры мультфильма

Рассмотрим параметры преобразования shape tweening. При выборе этого варианта в палитре Frame появились параметры Easing и Blend и поле ввода метки кадра Label .

  • Параметр Easing задает обратное экспоненциальное ускорение. Величина этого параметра может изменяться от -100 до +100. Это означает, что если вы зададите отрицательную величину в поле Easing , то движение будет происходить с положительным ускорением (скорость будет увеличиваться). И наоборот, если значение Easing положительное, анимация замедляется.

Рис. 569. Анимация с ускорением (Easing Анимация с замедлением (fusing > 0)

  • Параметр Blend (Переход) определяет алгоритм перехода: Distributive (Размытый) и Angular (Угловатый). Первый старается максимально смягчить, сгладить переход от одной фигуры к другой. Второй же пытается сохранить пропорции углов и отрезки прямых линий. Рекомендуется поэкспериментировать с этим параметром, чтобы понять, в каких случаях какое значение параметра лучше использовать.

Последний инструмент в анимации типа shape tweening — контрольные точки (shape hints), с помощью которых вы помогаете Flash правильно осуществить переход. Без них не обойтись при работе со сложными формами. Пользоваться контрольными точками очень легко. В первом ключевом кадре (с которого начинается анимация) вы добавляете контрольную точку (команда Modify>lransform>Add shape hint или клавиши + + ). На сцене появится маленькая красная точка, обозначенная буквой латинского алфавита. Вы прикрепляете ее к той части изображения, которая двигается не так, как вы хотели. Затем вы переходите на второй ключевой кадр и прикрепляете эту же точку к части, в которую должна перейти помеченная часть в начальном кадре. Эта точка будет уже зеленого цвета, а на начальном кадре она станет желтой. Таким образом, вы можете отличать начальные и конечные контрольные точки (на одном кадре могут присутствовать и те, и другие). Удалить все точки можно с помощью команды ModifyTransform>Remove All Hints . Удалить же единственную точку можно, щелкнув на ней правой кнопкой мыши и в появившемся контекстном меню выбрав команду Remove Hint . Поскольку контрольные точки обозначаются буквами латинского алфавита, их может быть не больше 27.
На следующих двух рисунках вы можете заметить разницу между кадрами, созданными без использования контрольных точек, и кадрами, созданными с использованием таковых.

Рис. 571. Shape tweening без использования контрольных точек

Рис. 572. Shape tweening с использованием контрольных точек

При использовании анимации на основе изменения формы (shape tweening) могут модифицироваться следующие параметры фигуры:

  • Форма
  • Расположение
  • Размер (любые пропорции)
  • Угол поворота

Если вам нужно отключить shape tweening, то в палитре Frame выберите в списке Tweening значение None .

Анимация на основе изменения символов (Motion tweening)

Как уже отмечалось выше, наиболее часто используется вариант анимации motion tweening (анимация движения). В этом случае анимация строится на основе модификации символов, т. е. объектом анимации является символ. Как и в анимации shape tweening, для каждого объекта в каждый момент времени требуется один слой. В этом слое должен находиться один символ, с которым и будут происходить все изменения.
Вот какие параметры символа могут модифицироваться при использовании motion tweening:

  • размер (как пропорционально, так и непропорционально — отдельно высота и ширина)
  • наклон
  • расположение
  • угол поворота
  • цветовые эффекты

Включить motion tweening можно несколькими способами, а отключить — только одним. Для того чтобы включить motion tweening, нужно сделать активным начальный кадр перехода, а затем, нажав правую кнопку мыши, в контекстном меню выбрать команду Create motion tween , либо выбрать команду Insert>Create motion tween ). Универсальный способ включения/выключения motion tweening- в палитре Frame выбрать значение в списке Tweening .

  • Easing — задает обратное экспоненциальное ускорение; работает так же, как и в shape tweening;
  • Rotate — позволяет управлять вращением:
    • Auto — заставляет Flash автоматически пытаться определить количество витков;
    • CW — задает вращение по часовой стрелке;
    • CCW — задает вращение против часовой стрелки; при этом в ставшем доступном поле справа можно ввести количество оборотов (можно использовать только целые значения или отключить вращение, выбрав в списке Rotate значение None ).
  • Options — дополнительные параметры:
    • Orient to path — поворачивает символ в соответствии с направляющей линией;
    • Snap — привязывает символ к направляющей линии;
    • В случаях, когда количество кадров основной сцены не кратно количеству кадров символа, флажок Synchronize (Синхронизировать) позволяет синхронизировать эти две анимации.

Движение объекта можно организовать с помощью направляющего слоя. В направляющем слое рисуется траектория, по которой должен дв»игаться объект, затем к ней привязывается сам объект, а направляющий слой вместе с траекторией делается невидимым. В общем случае в качестве объекта может выступать символ типа Movie clip , т. е. некоторый мультфильм, или даже группа объектов различных типов. Рассмотрим простой пример, в котором по произвольной кривой перемещается изображение стрелки.
В слое, который назовем Стрелка , нарисуем объект в виде стрелки и преобразуем его в символ типа Graphic . В более общем случае в качестве объекта может выступать символ типа Movie Clip , т. е. некоторый мультфильм или даже группа объектов различных типов.

Рис. 574. Объект в виде стрелки, который должен двигаться

Далее, щелкнем правой кнопкой мыши на имени слоя Стрелка и в контекстном меню выберем команду Add Motion Guide (Добавить направляющую движения). В результате в списке слоев появится новый слой Guide: Стрелка с характерным значком слева от его имени. Это и есть направляющий слой (guide layer). Слой, находящийся в списке непосредственно под ним, является направляемым (guided). В направляющем слое нарисуем траекторию движения. Для этого можно использовать любой инструмент рисования линий, например, «Карандаш» (Pencil) . Главное, чтобы траектория была линией (контуром), а не областью заливки.
Выделим наш объект в виде стрелки и переместим его на начало траектории. При перемещении в центре изображения объекта появится кружок, который должен попасть на линию траектории и как бы зацепиться за нее. Этим мы привязываем объект к траектории.
На временной шкале выберем кадр, соответствующий окончанию движения по траектории (в нашем примере это 30-й кадр). Сделаем его ключевым. Это нужно сделать сначала в направляющем слое, а затем — в направляемом.
Убедимся, что активным является направляемый слой (в нашем примере это слой Стрелка). Перетащим объект на конец траектории, а затем вернемся к первому кадру в этом же слое. Создадим анимацию (команда Insert Motion Tween ). В общих чертах организация движения по направляющей траектории завершена.

Рис. 575. В направляющем слое рисуется траектория движения

Рис. 576. Задание параметров движения по траектории

Рис. 577. Движение объекта с его ориентацией вдоль траектории

Чтобы траектория движения была невидимой, достаточно сделать невидимым направляющий слой. Если вы хотите, чтобы объект ориентировался вдоль траектории, установите для первого кадра слоя с объектом свойство Orient to Path . Ускорение или замедление движения по траектории определяется параметром Easing .
Если направляющий слой уже существует, то любой слой можно сделать направляемым. Для этого достаточно либо просто перетащить его имя в списке слоев непосредственно под имя направляющего слоя, либо создать новый слой, расположенный ниже направляющего, и установить тип этого слоя Normal .

Содержимое слоя можно рассматривать через отверстие, скрыв все остальное. Для этого служит так называемый слой-маска — особый тип слоя, содержащий собственно маску. Маска (отверстие или окно просмотра) может быть создана на основе объектов различных типов: области заливки, текстового поля, экземпляра графического символа и даже мультфильма. Маску можно заставить изменять свою форму или перемещаться. Однако нельзя применять слои-маски внутри кнопок.
Маска представляет собой слой, в котором любая область заливки интерпретируется как отверстие, через которое виден нижележащий слой. При этом цвет заливки, градиент и контур игнорируются. По умолчанию слой-маска закрывает (маскирует) только тот слой, который лежит непосредственно под ним.
Рассмотрим создание простой маски на основе области заливки. Создадим сначала маскируемый слой. Назовем его Фон. Мы импортировали в него растровую картинку из пакета Photoshop 7.O. Далее, создадим слой-маску. Для этого достаточно щелкнуть на кнопке со знаком «+» внизу списка слоев. Назовем его Маска. В этом слое нарисуем какую-нибудь фигуру и зальем ее каким-нибудь цветом, т. е. создадим область заливки. Мы нарисовали овал, а затем трансформировали его с помощью инструмента Subselect (белая стрелка). Теперь укажем, что данный слой является слоем-маской. Для этого достаточно щелкнуть правой кнопкой мыши на его имени и в контекстном меню выбрать команду Mask (Маска). При этом слева от имени слоя-маски и маскируемого слоя появятся характерные значки, и оба слоя будут заблокированы (справа от их имен появятся изображения замков). Маскирование вступит в силу, ивы увидите на рабочей области лишь участок фона, который накрывается фигурой слоя-маски.
Чтобы перейти в режим редактирования маски и увидеть как фон, так и просмотровое окно маски, разблокируйте слой-маску (щелкните на соответствующем изображении замка) В режиме редактирования можно изменить форму, расположение и даже количество просмотровых окон маски.
В общем случае можно маскировать несколько слоев, а не только тот, который находится непосредственно под слоем-маской. Если необходимо сделать какой-либо слой маскируемым, то его прежде всего следует расположить ниже слоя-маски, а затем в свойствах этого слоя установить переключатель Masked (Маскируемый). Наоборот, чтобы вывести слой из-под маски, установите этот переключатель Normal.
Итак, мы рассмотрели простейший способ создания маски. Зачем нужны маски? Маска в статическом виде является инструментом для создания коллажей.
Здесь мы не будем останавливаться на том, в каких случаях и зачем может потребоваться скрывать что-то из уже имеющегося, чтобы оставшееся предстало в интересном или нужном нам виде.

Рис. 578. Маска в режиме редактирования. Чтобы увидеть действие маски, установите блокировку слоя-маски (замок)

Рис. 579. Вид сцены при включенном режиме маскирования: слой-маска заблокирован (замок). Фон виден только через просмотровое окно маски

Наиболее интересные и полезные эффекты применения масок получаются при их анимировании: просмотровые окна масок могут изменять свою форму и перемещаться на фоне маскируемых слоев. Именно поэтому они и находят широкое применение в мультфильмах. Раскрывающиеся меню, рябь на воде, метаморфозы облаков, движение губ при разговоре — все это можно сделать с помощью аними-рованных масок.
Теперь рассмотрим создание анимированных масок. По существу, анимиро-ванная маска — это маска, просмотровое окно которой либо изменяет свою форму, либо перемещается в рабочей области. Вы можете создать несколько просмотровых окон, но все они должны быть сгруппированы в единый объект с помощью команды Modify>Groupe (Модифицировать>Группировать).
Для простоты создадим просмотровое окно овальной формы и заставим его перемещаться на фоне маскируемого слоя. Как создать маску, мы показали выше. Повторите эту процедуру в качестве упражнения.
Для слоя-маски создадим анимацию движения. Сначала сделаем перемещение просмотрового окна в слое-маске. В нашем примере в качестве последнего выбран 20-й кадр (он является ключевым). В слое-маске перемещаем фигуру просмотрового окна на новое место. Возвращаемся к первому кадру и выполняем команду Insert>Create Motion Tween (Вставить>Создать анимацию движения). В результате между первым и последним кадрами появится стрелка. Чтобы анимация получилась, советуем вам сначала выделить фигуру просмотрового окна, а затем применить к ней команду группировки Modify>Groupe . Мы уже отмечали это обстоятельство при рассмотрении направляющих слоев. Если что-то не так, между первым и последним кадрами вместо стрелки появляется штриховая линия. Затем в маскируемом слое вставьте кадр на 20-ю позицию. Это может быть обычный, не обязательно ключевой, кадр. Заблокируйте слои и нажмите клавишу , чтобы увидеть маску в действии.

Рис. 581. Временная шкала при создании перемещающейся маски и вид рабочего поля в режиме редактирования (слои разблокированы)

В Flash MX создание анимации несколько отличается от того, как это делается в Flash 5.O. Эти отличия мы уже рассматривали в разделе «Пробная анимация» данной главы. Их суть заключается в выборе подходящих значений свойств кадра в палитре Properties (Свойства).
Просмотровое окно маски может изменять форму. Для этого вместо motion tweening (Анимация движения) следует использовать shape tweening (Анимация формы). Для этого в свойствах первого кадра следует выбрать в раскрывающемся списке Tweening значение Shape (Форма). Значение Distributive (Размытый) параметра Blend (Переход) позволяет получить более сглаженные промежуточные кадры; значение Angular (Угловатый) этого же параметра позволяет сохранить в промежуточных кадрах углы и отрезки прямых линий.
Особенность анимации на основе изменения формы состоит в том, что к трансформируемому объекту не следует применять операцию группировки, как это делается при создании анимации движения. Наилучший визуальный эффект при трансформации достигается, если трансформируется только один объект. Если необходимо трансформировать несколько объектов, то расположите их в одном слое.
В Flash MX анимация типа трансформации производится аналогичным образом. Особенность заключается в том, что свойства первого кадра устанавливаются в палитре Properties (Свойства).
Интересные визуальные эффекты получаются, когда под маской находятся несколько фоновых слоев. Рассмотрим случай, когда требуется лучом фонарика осветить какое-нибудь темное изображение. В нашем примере это растровая картинка — фрагмент интерьера сельского дома. Очевидно, что в слое-маске можно использовать круглое просмотровое окно, которое будет имитировать световое пятно. Далее, нам потребуются два слоя, содержащие идентичные изображения, отличающиеся друг от друга только тем, что одно из них светлее другого. Эти изображения можно получить из одного и того же файла путем коррекции яркости и контрастности в каком-нибудь растровом графическом редакторе, например, в Photoshop. Светлое изображение поместим в слой непосредственно под слоем-маской, а темное изображение — в слое, расположенном еще ниже. Картинки в этих двух слоях должны быть расположены так, чтобы одна полностью накрывала другую. Маскируемым будет слой со светлым изображением.

Рис. 582. Картинки в разных слоях должны быть совмещены так, чтобы более светлая накрывала темную

Слой-маска будет содержать перемещающееся круглое просмотровое окно. В режиме просмотра этот круг будет перемещаться по темному изображению, ос-зетляя тот его участок, над которым находится. Таким образом, создается визу-шьный эффект перемещения луча от фонарика.

Рис. 583. Использование маски для создания эффекта перемещения луча от фонарика

Заметим, что управлять движением просмотрового окна маски можно с помощью сценариев, написанных на языке ActionScript. Без сценариев не обойтись при создании, например, раскрывающихся меню.
Другой способ создания анимаций на основе масок состоит в том, что окно маски остается неподвижным, а элементы маскируемого слоя перемещаются. Таким образом можно создать, например, эффект изменения пейзажа за окном движущегося поезда, или бегущие титры. Если, скажем, создать группу из нескольких просмотровых окон (несколько областей заливки, сгруппированных в один объект), то при соответствующем выборе маскируемого изображения и фона можно создать иллюзию движущихся и изменяющихся по форме облаков или морских волн. Наконец, можно перемещать одновременно как объекты маскируемого слоя, так и просмотровые окна.
Рассмотрим пример, в котором маска неподвижна, а картинка в маскируемом слое перемещается. На исходной картинке, которая является фоном всей композиции, изображены дюна и облачное небо. Мы хотим, чтобы облака перемещались. С этой целью мы поместили в маскируемый слой растянутое по ширине исходное изображение, а просмотровое окно маски сделали так, чтобы оно совпадало с участком неба на исходной картинке. Растянутое изображение в маскируемом слое перемещается по горизонтали. При этом в окно маски попадает только небо, а дюна маскируется. Ширина растянутого изображения должна быть такой, чтобы к окончанию движения его левый край совпадал елевым краем фоновой картинки. Конечно, в качестве перемещающегося изображения можно было бы взять только полосу с облаками, но наш способ оказался в данном случае более быстрым: мы просто скопировали исходную картинку в маскируемый слой и применили к ней команду Scale.

Рис. 584. Создание эффекта плывущих облаков на основе неподвижного просмотрового окна маски и перемещающегося маскируемого слоя

Motion tweening позволяет использовать различные цветовые эффекты применительно ко всему символу. Эта возможность отсутствует у shape tweening.
В Flash 5.0, для того чтобы применить эффект к символу, нужно выделить этот символ и на палитре эффектов, открываемой командой Windows>Panels>Effects , выбрать нужный эффект (см. рисунки).

Рис. 587. Точная установка всех составляющих цвета (Advanced)

Рис. 588. Установка прозрачности (Alpha)

В Flash MX аналогичные эффекты выбираются в раскрывающемся списке Color (Цвет) в палитре Properties (Свойства).

Рис. 589. Установка эффектов в палитре Properties в Flash MX

Ряд примеров создания анимации мы уже рассматривали выше, например, в разделах «Пробная анимация», «Направляющие слои» и «Слои-маски». Здесь мы приведем дополнительные примеры.

Рассмотрим, как на основе одного символа «Рыба» можно сделать «Аквариум» с множеством различных рыбок. Для этого воспользуемся библиотекой символов, поставляемой вместе с пакетом Flash 5.0 (команда Window>Common Libraries>Movie Clips ). Выберем в ней символ Fish Movie Clip (Мультфильм «Рыба»). Это — не просто картинка, а мультфильм, т. е. рыба перемещается в некоторой области. Перенесем экземпляр этого символа на рабочую область редактора. Теперь выделим его и отредактируем. Например, изменим размеры и немного повернем, как показано на следующем рисунке. Можно изменить цвет и произвести другие трансформации.

Рис. 590. Экземпляр символа из библиотеки можно модифицировать

Повторим эту операцию несколько раз, т. е. создадим несколько экземпляров символа «Рыба». Каждый экземпляр должен «плавать» в своем отдельном слое. Далее, создадим еще один слой, зальем его голубым цветом и нарисуем водоросли. В результате получится примерно то, что показано на следующем рисунке.

Рис. 591. В рабочей области расположены несколько экземпляров символа «Рыба», различающихся размерами, цветом и начальным положением. «Водоросли» нарисованы вручную в слое Фон

Flash позволяет делать довольно натуралистичные мультфильмы со сложной и высококачественной анимацией. При этом используется растровая графика. Из исходного графического изображения вырезаются отдельные фрагменты, которые затем модифицируются и превращаются в клипы. Эти клипы используются при создании более сложной композиции и т. д. На следующем рисунке показан кадр мультфильма, созданного на основе растровой графики.

Рис. 592. Кадр мультфильма, созданного путем композиции фрагментов растровой графики

Вращение планет вокруг Солнца

Рассмотрим теперь вращение трех планет — Меркурия, Венеры и Земли — вокруг Солнца. Этот весьма поучительный и красивый пример описан Александром Рыбниковым на сайте http://zona5.al.ru. Подробно, шаг за шагом, опишем процесс создания мультфильма.
Шаг 1. Создадим новый файл. Выполним команду Modify>Movie и в открывшемся диалоговом окне укажем физические размеры области в пикселах. Не будем себя ограничивать, Flash-мультфильмы хорошо смотрятся в полноэкранном варианте, поэтому зададим размеры кадра 800×600. По умолчанию скорость смены кадров мультфильма устанавливается 12 кадров/с. В данном случае разумно это число увеличить до 16, так как иначе изображение заметно «дергается».
Шаг 2. Нарисуем сначала Космос. Для этого просто очертим рабочую область прямоугольником и зальем его черным цветом.
ШагЗ. Теперь в центре нашей Вселенной необходимо поместить Солнце. Постарайтесь изобразить его более или менее правдоподобно, то есть нарисовать не просто некий красный круг, а еще и нанести на него слегка несимметричный градиент, что должно придать вашему произведению некоторую объемность, а затем окружить Солнце светящимся ореолом, что прибавит правдоподобности. Всего вышеперечисленного можно достичь как средствами самого редактора Flash, так и импортировать уже готовую картинку из любого растрового графического редактора. Но второй способ в нашем случае крайне нецелесообразен, поскольку Солнце является достаточно крупным объектом, и если оно будет представлено в виде растрового изображения, то значительно увеличится объем выходного файла. Рассмотрим, как нарисовать Солнце средствами Flash.
Нарисуем круг, для заливки в раскрывающемся списке с образцами цветов выберем любой градиент. С помощью команды Window>Panels>Fill (Окно>Па-литры>3аливка) откроем диалоговое окно, которое позволит задать значения цветов градиента. Пусть Солнце будет залито ярко-желтым цветом, плавно переходящим в ярко-красный. Ореол сделаем аналогичным образом, подложив круг большего размера, окрашенный градиентом из красного цвета в черный. Важно, чтобы Солнце находилось точно в центре, т. е. координаты центра должны быть (400,300).
Шаг 4. Настало время рисовать три планеты. Важно заметить, что они достаточно маленькие, поэтому в данном случае можно импортировать растровое изображение в формате прозрачного GIF (точнее, рисунок с прозрачным фоном). Такое изображение должно занимать не более 500 байт дискового пространства. Импортирование осуществляется следующим образом.
Сначала надо создать новый слой командой Insert>Layer (Вставить>Слой). Для каждой из планет потребуется отдельный слой, поэтому слои имеет смысл назвать именами планет. Далее в этом слое необходимо создать новый символ (команда Insert>Symbol (Вставить>Символ)). В меню File выберем команду Import и импортируем нужное GIF-изображение.
Шаг 5. После этого созданный символ требуется поместить в соответствующий слой. Для этого откроем библиотеку символов (команда Window>Library (Окно> Библиотека)) и перетащим оттуда символ с изображением планеты в рабочую область (сцену).
Шаг 6. Отметим, что планеты должны впоследствии вращаться вокруг Солнца.- центра сцены. Поэтому надо вновь вернуться к редактированию символа (2 раза щелкнуть на планете) и указать в диалоговом окне Info (команда Window>Info ) удаленность его от центра. Выбрана удаленность по горизонтальной оси (все эти значения отрицательные, т. е. изначально планеты располагаются слева от Солнца):


  • для Земли: — 250 пикселов;
  • для Венеры:- 180 пикселов;
  • для Меркурия: — 120 пикселов.

Стационарная картинка готова! Она должна быть как можно более похожа на следующий рисунок:

Рис. 593. Стационарная сцена: Солнце и три планеты, расположенные слева от него

Шаг 7. Теперь заставим наши планеты вращаться против часовой стрелки вокруг Солнца. Известно, что те планеты, которые располагаются ближе к Солнцу, вращаются быстрее. Попытаемся количество кадров мультфильма рассчитать таким образом, чтобы Земля за один цикл совершала один оборот, Венера — два, а Меркурий — три. Оптимальным числом кадров, кратным двум, трем и четырем, является число 120. Было бы некрасиво, если бы все планеты в какой-то момент времени становились в ряд. Поэтому зададим начальный угол расположения планет:

  • для Земли — 150°;
  • для Венеры — 120°;
  • для Меркурия — 0°.

Эти данные можно задавать и изменять в диалоговом окне Info .
Шаг 8. Теперь создадим первый ключевой кадр для любой из планет, например, для Земли. Для этого щелкнем на первом кадре соответствующего слоя правой кнопкой мыши и в открывшемся меню выберем команду Create Motion Tween . Затем скопируем данный кадр в буфер обмена (Сору) и вставим его (Paste) на место кадра с номером 60. Затем повернем Землю на угол 180 , т. е. укажем значение угла в окне Transform равным -30 (см. рисунок). Следующим ключевым кадром будет 90-й (поворот еше на 90°) и последний ключевой кадр — 120-й (полный оборот Земли вокруг Солнца завершен).

Рис. 594. Разработка анимации в мультфильме с Солнцем и планетами

Шаг 9. Аналогичным образом мы можем задать движение Венеры и Меркурия. Чтобы задать движение Венеры, потребуется вдвое больше опорных кадров, для Меркурия — втрое. При этом можно копировать сразу несколько кадров. Поэтому в диалоговом окне достаточно задать углы только для одного оборота каждой из планет.
Шаг 10. Остается только опубликовать полученную сцену (команда File>Publish ) и насладиться полученным эффектом.
Объем SWF-файла оказался меньше 10 Кбайт. Даже не анимированный GIF-или JPG-файл занял бы намного больше места на диске. А наш мультфильм продолжительностью 7,5 с имеет объем всего лишь 10 Кбайт!

Звук в мультфильмах

К мультфильму можно добавить звуковое сопровождение. Для этого необходимо сначала импортировать звуковой файл в одном из следующих форматов: WAV, AIFF или МРЗ. Импорт осуществляется с помощью команды File>Import (Файл>Импорт).
Звуковое сопровождение может украсить ваш мультфильм. Однако многие пользователи нередко предпочитают отключить звук. Поэтому неплохо бы, разрабатывая озвученный мультфильм, предусмотреть в нем кнопку для выключения звука. Этой кнопке следует назначить действие Stop All Sounds (Прекратить все звуки) (подобные действия, назначаемые объектам, еще называют Action или сценарий). Звуковой файл имеет следующие параметры, которые влияют как на качество звука, так и на объем файла:

  • Частота дискретизации (Sample rate). Количество выборок из звукового сигнала, производимых в одну секунду. Обычно эта величина не превышает 22 кГц, что соответствует полосе частот 11 кГц (по теореме Котельникова ширина полосы воспроизводимых частот равна половине частоты дискретизации).
  • Битовое разрешение (Bit resolution). Количество бит (двоичных разрядов), используемых для дискретизации звукового сигнала по уровню. 16-битные файлы характеризуются меньшим фоновым шумом, но для уменьшения объема файла в Flash-мультфильмах обычно используют 8-битный звук.
  • Каналы (Channels). Звук может быть одно- и двухканальный (моно и стерео). Для Flash-мультфильмов обычно достаточным является монозвук, требующий примерно вдвое меньше памяти, чем стереозвук.

При разработке мультфильма вы можете использовать высококачественные звуковые файлы, а затем, при публикации в файл SWF-формата, установить нужные параметры звука.
Чтобы импортировать звуковой файл в мультфильм, выполните команду File>Import и в открывшемся диалоговом окне Import выберите файл звукового формата, который хотите импортировать. Затем щелкните на кнопке Open (Открыть). В результате выбранный звуковой файл попадет в библиотеку мультфильма.
После импортирования звукового файла в мультфильм его нужно разместить и задать параметры. Выполните следующее:

  1. Создайте новый слой для звукового файла.
  2. Выделите на этом слое нужный ключевой кадр, откройте библиотеку (Window>Library) и перетащите звуковой файл на рабочее поле. При этом звуковой файл будет распространен на все кадры до следующего ключевого кадра, если такой имеется.
  3. В Flash 5.0 выполните команду Wmdow>Panels>Sound (Окно>Палитры>Звук). Откроется палитра Sound (Звук). В Flash MX обратитесь к палитре Properties (Свойства). В раскрывающемся списке Sound выберите нужные звуки. В этом списке указаны все импортированные звуковые файлы. Сведения о файле приведены ниже списка, под названием файла: частота дискретизации в кГц, каналы, битовое разрешение, длительность звучания и размер файла.
  4. В раскрывающемся списке Effect (Эффект) при желании выберите звуковой эффект. По умолчанию используется значение None (Нет). Например, эффект Fade In (Нарастание) воспроизводит звук с постепенным увеличением громкости.
  5. В раскрывающемся списке Sync (Синхронизация) выберите одно из следующих значений:
    • Event (Событие). Начинает воспроизведение звука с первого ключевого кадра и продолжает до окончания файла, даже если мультфильм уже закончился. Это значение используется по умолчанию.
    • Start (Начать). Начинает воспроизведение звука с первого ключевого кадра. Однако если ключевой кадр воспроизводится снова при продолжающемся звучании, Flash начинает проигрывать звук заново. Это значение обычно используется при озвучивании кнопок.
    • Stop (Остановить). Останавливает воспроизведение звука.
    • Stream (Поток). Синхронизирует звук с анимацией. При этом Flash укорачивает или удлиняет анимацию, чтобы она совпала со звуком. Воспроизведение звука прекращается при воспроизведении последнего кадра, содержащего звук. Для указания места окончания звучания можно добавить заключительный ключевой кадр перед добавлением звука.
  6. В поле Loop (Цикл) задайте число циклов повторения воспроизведения звука. Если известны длительность звукового файла, количество циклов анимации и частота воспроизведения кадров, можно рассчитать, сколько циклов воспроизведения звука потребуется при воспроизведении вашей анимации. Например, если анимация содержит 48 кадров, а их частота воспроизведения равна 12 кадров/с, то длительность мультфильма составляет 4 с; если длительность звукового файла равна 2 с, то количество циклов воспроизведения звука равно 2. На практике, чтобы не заниматься вычислениями, обычно указывают заведомо большее количество циклов.
  7. После добавления звукового файла, чтобы просмотреть результаты, нажмите клавишу или выполните команду Control>Play (Управление> Воспроизвести).

После размещения звукового файла в мультфильме его можно отредактировать. Например, вы можете удалить ненужные фрагменты звука, изменить его громкость. Для этого в палитре Sound щелкните на кнопке Edit (Редактировать). В результате откроется окно Edit Envelope (Редактировать огибающую).
Между панелями левого и правого звуковых каналов находится линейка с ползунками, с помощью которых можно установить начало и конец звукового файла. Перемещая левый ползунок вправо, удаляем начальный фрагмент файла. Аналогично, сдвигая правый ползунок, удаляем конечный фрагмент звукового файла.
На панелях левого и правого каналов отображаются огибающие линии, которые приблизительно указывают направление изменения громкости звука. В местах, где это происходит, устанавливаются квадратные маркеры огибающей. Чтобы увеличить громкость звука, перетащите маркер вверх, для уменьшения громкости — вниз. Огибающей линии можно придать причудливую форму. Для этого следует сначала щелчками на огибающей установить дополнительные маркеры, а затем перетащить их в нужные места.
По окончании редактирования звукового файла щелкните на кнопке ОК , чтобы закрыть окно Edit Envelope .

Рис. 595. Окно Edit Envelope

Следует иметь в виду, что добавление звука может существенно увеличить объем файла мультфильма. Поэтому следует принять меры для сжатия звуковой информации. Если уменьшить частоту дискретизации, то это может ухудшить качество звука. Можно использовать не двухканальный, а одноканальный звук. Для задания свойств звука в Flash предусмотрены два способа:

  • Для определения свойств всех звуковых файлов мультфильма используйте вкладку Flash диалогового окна Publish Settings (Параметры публикации), открываемого командой File>Publish (Файл>Публикация). Этот способ хорош, если мультфильм содержит один или несколько похожих звуков.
  • Для задания свойств отдельных звуковых файлов используйте диалоговое окно Sound Properties (Свойства звука). Для этого сначала откройте библиотеку мультфильма (Window>Library) и дважды щелкните на значке звукового файла, свойства которого хотите изменить. В верхней части диалогового окна отображаются сведения о звуковом файле. Новые значения параметров можно выбрать в раскрывающихся списках группы Export Settings (Параметры экспорта). При этом в нижней части диалогового окна отображается новый размер файла в килобайтах и процентах от исходного размера. Вы можете использовать формат сжатия (compression) MP3 как наилучший из имеющихся в Flash.

Можно назначить звуки различным состояниям символа-кнопки. Звуки сохраняются внутри этого символа и поэтому воспроизводятся во всех его экземплярах. Чтобы добавить звук к кнопке, нужно выполнить следующее:

  1. На временной диаграмме кнопки добавить слой, в котором вы будете размещать звуки.
  2. В звуковом слое создайте ключевой кадр, соответствующий состоянию кнопки, которое вы хотите озвучить.
  3. Выделите этот ключевой кадр и установите параметры звука.

Композиция мультфильма — сцены и клипы

Мультфильм может иметь сложную структуру (композицию). Так, отдельные элементы одного мультфильма сами могут быть мультфильмами. В рассмотренном выше примере с аквариумом рыбы представляли собой различные экземпляры символа типа Movie Clip , т. е. были мультфильмами. Каждый мультфильм имеет собственную временную шкалу, которая управляет его воспроизведением. Если мультфильм входит составной частью в другой мультфильм, то чтобы подчеркнуть это обстоятельство, его называют клипом. В свою очередь, клип может содержать другие клипы.
Для управления множеством элементов клипа их обычно распределяют по слоям. Многослойную структуру используют при создании практически любого более или менее сложного объекта, будь то просто рисунок или целая анимация.
Кроме декомпозиции мультфильма (клипа) на слои, можно разделить его на временные отрезки, т. е. на сцены . Затем эти сцены можно располагать в произвольном порядке. Основания для разбиения мультфильма на сцены могут быть следующие:

  • количество кадров мультфильма слишком велико. Например, временная шкала не видна на экране;
  • в некоторый момент времени изменяется состав графических изображений (смена декораций и персонажей);
  • фрагмент мультфильма повторяется несколько раз или может быть использован в других мультфильмах.

При создании нового мультфильма (File>New) по умолчанию создается только одна сцена с именем Scene 1 . При этом любая разрабатываемая анимация становится частью этой сцены. Чтобы добавить сцену, выполните команду Insert>Scene (Вставить>Сцена). При этом рабочее поле очистится и над временной шкалой слева появится другое название — Scene 2.

Если ваш мультфильм содержит несколько сцен и клипов, то для отображения на рабочем поле нужных сцены и клипа воспользуйтесь соответствующими кнопками меню. Они расположены над (в Flash 5.0) или под (в Flash MX) временной шкалой справа.
Для задания параметров сцены выполните команду Window>Panels>Scene (Окно>Палитры>Сцена). В Flash MX эта команда короче: Window>Scene (Окно>Сцена). На открывшейся палитре Scene отобразится список всех сцен данного мультфильма. Порядок сцен в списке важен, поскольку именно в таком порядке они будут воспроизводиться. Чтобы его изменить, просто перетащите название сцены в списке в новое положение. Для изменения названия сцены дважды щелкните на нем, введите новое название и нажмите клавишу .

Рис. 597. Палитра Scene. В нижней части палитры расположены три кнопки для дублирования, добавления и удаления сцены

Для просмотра сцены можно щелкнуть на ее названии в списке палитры Scene, хотя для этого есть и другие средства, например, кнопка меню, расположенная над временной шкалой.

Кросбраузерная Вставка Flash-анимации

Флеш исходники (файлы FLA) – рабочие файлы flash анимации. Посмотреть флеш эффект и бесплатно скачать исходник можно на страницах ссылок.

Анимация воды
Анимация огня
Анимация снега
Анимация глобуса
Пламя свечи
Текст эффекты
Мувики — готовые анимационные ролики из флеш открыток с исходниками.

Хромакей — готовые озвученные анимации для видеомонтажа.

Исходник флеш (flash) в формате FLA позволяет ускоренными темпами изучать основы флеш анимации и экономить время, создавая новую анимацию на основе исходника или с использованием исходника. Например, открываете исходник готового эффекта или мувиклипа и создаете однотонный фон сцены требуемого цвета.
Посмотреть флеш анимацию.
Скачать исходник флеш анимации.

Затем в видео редакторе на фон видео ролика накладываете видео с исходника и получаете видео ролик, к которому останется добавить звук и тексты.

Примеры использования исходников во флеш и видео открытках.

Чем еще полезны исходники Flash? Тем, что во флеш роликах содержатся не менее одного анимированного клипа. Исходники флеш анимации или мувиклипы можно коллекционировать и использовать в будущем, значительно сэкономив время при создании любой флеш, гиф или видео анимации.

Имея в архиве набор исходников флеш и применяя их с добавлением музыкального оформления в одной анимированной открытке, Вы можете очень быстро создать неповторимый подарок в формате флеш или видео своим близким на любой праздник.

Флеш исходники открываются программами (Flash редакторами), предназначенными для редактирования этих файлов, создания Flash анимации и сохранения результатов работы:

— в формате FLA – исходник (рабочий файл) для продолжения работы над анимацией и дальнейшего ее редактирования или использования для восстановления утерянного готового флеш ролика;

— в формате SWF – готовый файл флеш анимации. Флеш ролики можно просматривать в размере сцены анимации или во весь экран без потери качества изображения.

Для воспроизведения флеш роликов необходимо наличие на компьютере самостоятельного флеш проигрывателя (Flash Player) или приложения в однои из браузеров (Internet Explorer, Mozilla Firefox, Opera, Yandex).

Флеш исходники в формате FLA нужно не только скачивать, но и сохранять свои, так как они являются резервом для воссоздания конечного (скомпилированного) Flash файла в формате SWF.

Как скачать и сохранить Flash-анимацию (формата SWF) с любого сайта себе на компьютер

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

Способов скачать и сохранить flash-анимацию себе на компьютер очень много в Интернете. Чаще всего нужно залесть в код сайта и найти в нем ссылку на флеш-файл. Потом скачать.

Но есть способы поинтереснее и проще.

Сервис Save2GO

Хочу представить вашему вниманию максимально простой способ скачать flash-анимацию и сохранить ее себе на компьютер с использованием онлайн сервиса.

Save2GO – онлайн сервис, с помощью которого можно скачать медиафайлы с сайтов: flash-анимацию (файлы в формате .swf), видео в формате flv и прочее.

Пользоваться данным сервисом очень просто, как в принципе, с аналогичными сервисами для скачивания видео с социальных сетей.

Чтобы скачать флеш ролик .swf нужно выполнить 3 простых шага:

Шаг 1. Скопировать URL-ссылку страницы, где есть флеш-анимация, которую вы собираете скачать себе на компьютер. Например, на странице LifevInet.ru: http://lifevinet.ru/inetservices/pozdravlenie-s-novim-godom.html есть flash-анимация, которую можно скачать в качестве тренировки.

Шаг 2. Вставляем скопированную URL-ссылку в специальное поле сервиса Save2GO. Нажимаем на кнопку «Сохранить с сайта».


Шаг 3. Получаем в качестве результата список флеш файлов в формате .swf. Нажимаем по ссылке, и начинается процесс скачивания файлы на компьютер, который всем знаком.

Вот таким образом можно без особого труда и знаний html-кода скачать flash-файл (в формате swf) себе на компьютер и пользоваться им в режиме офлайн или же разместит себе на сайт.

Скачать флеш-анимацию (SWF) через браузер Mozilla Firefox

Flash-анимацию (SWF) можно легко скачать через браузер Mozilla Firefox. У кого его нет, соответственно, скачиваем и устанавливаем. Отрываем через браузер Мазила страницу сайта, где расположена флеш-анимация, которую вы хотите скачать, и в любом месте этой страницы нажимаем правую кнопку мышки, вызвав контекстное меню. Выбираем пункт меню – Информация о странице.

Если вы щелкните правой кнопкой мыши на самом видеоролике, вы не увидите опцию Информация о странице.

В окне Информация о странице выберите вкладку Мультимедиа. Отобразится список мультимедийных объектов, которые присутствуют на данной странице. В этом списке нужно найти строку с расширением .SWF. Это и будет flash-файл. Выделяем эту строку (щелкнув по ней указателем мыши) и нажимаем на кнопку Сохранить как.

Скачиваем Flash анимацию себе на компьютер.

Скачать Flash-анимацию (SWF) через браузер Google Chrome

Также флеш-анимацию или игру можно скачать через браузер Google Chrome. У кого его нет, соответственно, скачиваем и устанавливаем. Открываем через браузер Хром страницу сайта, где расположен флеш-ролик и щелкам правой кнопкой мышки на страницы сайта, вызвав контекстное меню. Выбираем пункт – Просмотр кода страницы.

Также можно воспользоваться горячими клавишами – Ctrl+U.

Далее нужно найти строку в коде с расширением .SWF. Для этого вызываем строку поиска (Ctrl+F) и вводим в нее .swf и находим, таким образом, нужную нам строчку кода.

Она будем выглядеть следующим образом:

Вот ее надо скопировать в буфер обмена. Выделите все содержимое кода внутри кавычек, при этом не копируйте сами кавычки и нажимаем Ctrl + C — копировать.

После чего вставляем скопированный код (строку) в конец основного URL-адреса сайта, вот таким образом: lifevinet.ru/images/blogimage/2014/12/santa-time-machine.swf и нажимаем Enter. Начнется автоматическое скачивание файла на компьютер. Если автоматического скачивания не произошло, то сохраните его самостоятельно, нажав Сохранить страницу как.

Данный принцип действует в браузерах Google Chrome, Mozilla Firefox, Opera и другие.

Если есть еще способы по скачиванию flash-файлов, пишите в комментариях в качестве дополнения к данной статье.

20 бесплатных шаблонов на Flash с исходными файлами

Flash считается одних из самых важных элементов в вооружении любого веб-дизайнера. Дизайнер должен быть достаточно близко знаком с технологией и методами использования и применения. Сегодня мы предлагаем вам подборку из 20 впечатляющих и полезных бесплатных шаблонов на Flash с возможностью скачивания исходных файлов. Наслаждайтесь!

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

DreamTemplate — одна из крупнейших в мире коллекций премиум шаблонов для са .

9 впечатляющих веб-сайтов на javascript

14 полезных и бесплатных шаблонов логотипов в PSD

50 отменных, но бесплатных рамочных PSD-шаблонов для веб-браузеров

30 бесплатных шаблонов визитных карточек

30 превосходных бесплатных шаблонов для WordPress

Коллекция бесплатных креативных шаблонов визиток

20 лучших сайтов для скачивания бесплатных шаблонов

25 красивых бесплатных кнопок для веб-дизайнеров с исходными PSD-файлами

36 (новейших) броских бесплатных CSS-шаблонов

  • 26.10 | 18:00 —

Топ UX тренды для банкинга в 2020 году

Армированный скотч — назначение и характеристики

2009—2014 © CoolWebmasters.Com — онлайн-журнал для профессиональных веб-дизайнеров и разработчиков. Все права защищены.
Наш онлайн-журнал предоставляет самую свежую и актуальную информацию для профессиональных веб-дизайнеров и разработчиков в виде переводов статей и новостей, полученных с зарубежных информационных ресурсов. Дизайн и разработка сайта — лаборатория D.L.E. Templates.Com

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на наш сайт!

Мы сами вдохновляемся материалами, которые предлагаем вам на обозрение, будь то интересные руководства или полезные и впечатляющие подборки (дизайнов, шаблонов, сниппетов и т.д.), и мы всегда сохраняем ссылки на источники, и сообщаем авторов изображений, использованных в подборках или руководствах. Зачастую, ссылка на источник не ведёт напрямую к автору шедевра, но мы ведь не волшебники, чтобы угадывать, кто является автором.

Если кто-то захочет использовать какие-либо изображения, графические элементы, исходники, которые мы здесь предоставляем, то единственное требование, выставленное к перепосту, заключается в сохранении ссылки на источник, а также соблюдение условий лицензионного соглашения (если таковое имеется). Если кто-то желает модифицировать тот или иной продукт, изменить его, подкорректировать, то этому энтузиасту придется самостоятельно искать настоящего автора материала.

Fla исходники война рабочие файлы. Окончательный код кроссбраузерной вставки Flash в HTML страницу

Эта страница специально подготовлена для желающих скачать flash исходники, необходимые для создания различных видов анимации и флеш открыток. Коллекции файлов распределены по тематикам, свойствам, назначению, интерактивности. Сборники сделаны небольшими по объему для удобства прямого и бесплатного скачивания с сайта.

В подборках коллекций для скачивания файлы расположены парами — рабочий исходник flash и готовая анимация в формате SWF. Это сделано для удобства пользования и экономии Вашего времени, несмотря на то, что это несколько увеличивает время скачивания сборников.

В предлагаемых примерах для просмотра Вы можете ознакомиться с безграничными возможностями использования простых эффектов, мувиклипов или просто хорошей идей.

Например, имеется хороший клип костра (размер 366КБ) или живого огня. Вставляем его в камин и комната ожила (размер файла составил 378КБ). Посмотрите примеры готовых flash файлов, пройдя по ссылкам и обратите внимание на их размеры — это очень важно для пересылки по email поздравительных анимированных окрыток своим друзьям и знакомым.

Флэш исходники эффекты_FLA_SWF скачать
Flash исходники с эффектами, как правило, основаны на использовании скриптов (Action Script), которые значительно уменьшают общий размер файла и имеют поистине безграничные возможности. В архиве с файлами FLA вложена папка с многочисленными скриптами движения, которые помогут Вам создать свои, неповторимые анимации, муви-клипы и открытки. Дополнительно можете скачать различные способы создания снегопада , ряби и движения воды , изменения цвета фото при движении мыши и несколько эффектов оригинального стирания переднего фона — эффект ластика . Кому понравится эта коллекция, рекомендую скачать архив Mouse Trail, так как именно в нем применяется наибольшее количество эффектов.

В данной подборке flash исходников собраны в форматах FLA/SWF эффекты с огнем, горящие свечи, различные варианты создания фейрверков, нескольких видов линз, бликов, звездного неба и оригинальных слайд шоу. Исходники flash подобраны таким образjм, чтобы способы создания эффектов не повторялись.

Mouse Trail (мышиный хвост или движение объекта за мышью) Скачать
Mouse Trail выделяются в эффектах, как совершенно самостоятельное направление анимации. Эти эффекты основаны на использовании Action Script и предусматривают активное взаимодействие человека, просматривающего анимацию. Открытки, сделанные на основе эффекта mouse trail очень нравятся детям. Использование указанных исходников придает большую привлекательность и настроение при создании анимации и поздравительных открыток. В сборнике исходников имеются эффекты следования за и от мыши, реагирования на клик.

Использование Аction Script интересно еще и тем, что сам по себе мувик, записанный программно, большого интереса может не представлять. Иногда кажется, что единственное его достоинство — малый вес файла, а сам эффект сложно применить к созданию флеш открытки. Но, поразмыслив и подобрав фото или открытку с добавлением звукового эффекта можно быстро получить очень интересное поздравление в виде веселой flash открытки . Если у Вас есть желание скачать исходник эффекта и готовой открытки, то можно сделать это, перейдя по этой ссылке .

Данные флэш исходники используются в качестве муви-клипов при создании анимации или Flash открыток. В исходнике Flash можете изменять скорость анимации (скорость вращения), фон, геометрические размеры. Архивировать рекомендую в папку муви-клипов.

Отдельным рядом во флэш стоит анимация движения, которая может быть задана во многими способами — от простой покадровой анимации до использования скрипта. Сооветственно, вес файла напрямую зависит от используемого способа создания движения. Наиболее прогрессивным способом создания движения является применение языка программирования, позволяющего создавать анимационные картинки с наименьшим объемом файла. Для примера и начала создания архива файлов скачайте небольшую подборку исходников флэш с различными способами создания анимации движения .

Оригинальная возможность — создать поздравление в виде книги, которую можно листать с помощью курсора мыши (несколько разных вариантов создания книг), а с помощью созданной флэш-панорамы можно отправить по email панорамный вид вашего дома и его окрестностей, обзора вашей квартиры или прекрасного пейзажа с обзором на 360 градусов. Просмотр выполняется движением мыши. Нет повторяющихся вариантов исходников для создания панорамы.

Небольшая подборка флэш исходников стрелочных и цифровых часов, калькуляторов и календарей, которые могут быть установлены на рабочем столе и, при необходимости, использованы по назначению — очень удобно. Имеют малые размеры с большими возможностями. Варианты не повторяются. Кроме того, их использование в поздравительных открытках — очень востребованное и частое явление. Различное написание скриптов в исходниках позволит Вам еще на шаг продвинуться в изучении Flash анимации.

В сборник входят открытки — полуфабрикаты, в которые нужно только добавить нужные слова, фотографию или фоновую открытку в качестве заднего фона. В большинстве заготовок звуковое оформление уже присутствует. Анимацию, открывающуюся во весь экран, можно свернуть нажатием кнопки ESС. В виду большого объема исходников flash примеров открыток вставлено немного, но они могут послужить хорошим примером создания собственных вариантов поздравлений на основе изучения рабочих файлов.

В архиве собраны эффекты, с помощью которых можно создавать короткие слайд-шоу, выполнять различные действия над фотографиями или создавать необычные фото. Такие слайд-шоу отличаются от обычных своими не стандартными приемами и очень малыми размерами, что позволяет быстро отправить их по email своему адресату.

Кнопки играют особую роль не только в анимации. Без них было бы невозможно создать не только компьютерные игры, но даже простое взаимодействие человека с компьютером. Во flash анимации кнопки делают поздравительные открытки и любой вид анимации интерактивными, то есть работающими во взаимодействии с действиями человека, что придает особую прелесть анимации. Скачать небольшую подборку исходников флэш с различными кнопками можно по выделенной ссылке. Готовые кнопки можно доработать в соответствии с поставленной целью или создать свою кнопку на основе какого-либо примера.

Ни одно поздравление не обходится без надписей различного значения и вида. Для выполнения надписей в анимации часто используются текстовые, цветовые или скроллинговые эффекты. Последние очень часто применяются для представления титров в начале или конце фильма. В анимированных открытках могут использоваться все известные текстовые эффекты как в самостоятельной анимации, так и в интерактивной. Исходники flash текстовых эффектов представлены в обозначенных ниже подборках, которые Вы можете бесплатно скачать по прямой ссылке.

Если, после скачивания какого-либо файла, у вас появятся вопросы, то прошу перейти на страницу Обратная связь. Желаю всем успехов в деле освоения процесса создания собственных Flash открыток — на радость Вашим близким и знакомым, а также Flash анимации — на радость всему Миру.

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

Если вы желаете обучиться некоторой технике создания анимации в Adobe Flash , то существует огромное количество сайтов с обучающими статьями. Кроме самих статей, на сайтах также представляется возможность скачивать исходные *.fla-файлы именно тех образцов, которые описываются в статьях, для того, чтобы вы могли изучить использованную технику изнутри.


Как по мне, то проще всего понять и изучить тот или иной способ создания дизайна, если подробно рассмотреть то, как это делают другие. Например, если вы не можете понять, как создать эффект размытия во Flash, вы можете скачать образец с одной из статей и подробно изучить тот способ, по принципу которого этот эффект выполнен в образце. А еще лучше, если бы вы открыли этот файл на своем компьютере и шаг за шагом постарались воспроизвести то же самое.

Давайте проведем обзор нескольких самых полезных сайтов по изучению Adobe Flash:

На сайте опубликовано огромное количество обучений по Flash. Они даже расфасованы по различным категориям: электронные открытки, заставки, баннеры, векторная анимация, вращающиеся фигуры, аниме, игры, кроме того полноценные приложения гостевых книг, чатов, календарей и многого другого, реализованного посредством Flash. Все обучения предоставляются с возможностью скачать образец в формате *.fla.

Данный сайт насчитывает сотни полезных статей по изучению Adobe Flash, начиная от стандартных анимационных вещей и вплоть до реализации полноценных веб-сайтов и flash-приложений. Среди популярных обучающий статей можно встретить создание эффекта стрельбы, Flash-интро для веб-сайтов, выполнение различных действий посредством actionscript, спрайты персонажей Super Mario и многое другое. Со всеми статьями прилагается скачиваемый *.fla-файл, который вы можете изучить и даже поэкспериментировать на свое усмотрение.

Кроме предоставляемых шаблонов оформления, Entheos также предлагает большую сборку обучающих статей по Adobe Flash. Статьи, в основном, базируются на изучении основ Flash-анимации, а также ActionScript. Вы можете посетить этот сайт для изучения основ Flash и создания различных интересных эффектов. Но учтите, что для просмотра сайта, вам понадобится установленный Flash Player (не ниже 7-й версии), а также Flash MX 2004, чтобы иметь возможность открывать скачанные с сайта *.fla-образцы.

Данный сайт предлагает вашему вниманию более 800 обучающих статей, начиная от основ Flash и вплоть до выполнения сложнейших функций с применением actionscript. Кроме самых распространенных статей, вы сможете найти обучения по созданию изменяющихся при наведении кнопок, редактирование, добавление и удаление событий на временной шкале, и эффекты матрицы.

На этом сайте вы сможете найти различные обучающие статьи по Flash, а также некоторые отрезки actionscript. Новые статьи добавляются каждую неделю. Не сомневайтесь в том, стоит ли добавлять данный веб-сайт в закладки.

6. Internet Cross

Очередной сайт с обучающими статьями по Adobr Flash, на котором вы также можете скачать образцы изучаемых файлов. Отличный сайт, если вы хотите обучиться основным функциям и эффектам, которые можно создать во Flash. *.fla-образцы, которые вы можете скачать на сайте, также включают в себя готовые шаблоны для создания фигур, часов, полей ввода паролей, подгрузки jpg-изображений и так далее…

7. Flash Advisor

Flash Advisor, начиная с 2002 года, считается выделенным ресурсом с документациями по Flash. Кроме отличных обучающих статей, ресурс предоставляет множество *.fla-образцов шаблонов веб-сайтов, которые вы можете изучить и отредактировать. Кроме основных распространенных статей, сайт также предлагает вам обучения по созданию полноценной динамичной фото-галереи, эффект дымящегося текста, подвижное меню и многое другое…

Коллекция обучающих статей, которые сопровождают приложенные *.fla-файлы, доступные для бесплатного скачивания. Статьи, предлагаемые на данном сайте, вмещают как основу, так и продвинутый уровень. Среди самых популярных скачиваемых статей можно найти обучения по созданию полноценных сайтов на flash, эффект воды, анимации футуристических городов, и многие другие особые эффекты.

9. The Flash Blog

На сайте можно найти практически все, что связано с Adobe Flash. Автором сайта является Ли Браймлоу, он же представителем продукции Adobe, фокусирующейся на сообществах Flash, Flex и AIR. Сайт насчитывает сотни полезных обучающих статей как для людей с базовыми знаниями Flash, так и для продвинутых специалистов в области Flash-разработки.

10. Layers Magazine

Здесь можно найти огромное количество обучающих статей по Flash. Среди разнообразных статей можно встретить обучение по созданию классического 3D-эффекта, аудио визуализации, эффект исчезновения, вращение и многое другое, выполненное посредством Flash. Большая часть статей дополнена *.fla-образцами, что позволяет вам подробнее изучить урок. Кроме того, некоторые уроки предоставляются даже в видео-файле, поэтому вам следует установить бесплатный Flash-плеер на своем компьютере.

ДРУГИЕ ИСТОЧНИКИ FLASH:

12. Flash Fridge

13. Flash Game Design

Вторник, 20 Января 2015 г. 10:33 + в цитатник

Сделала для вас некоторое количество fla исходников для Adobe Flash CS6 на тему «Happy Valentine»s Day». Думаю, пригодятся для создания флеш открыток, часиков, бродилок, плееров и так далее. В основном это композиции из сердечек и звёздочек. Есть композиция с ангелочком. Практически все исходники могут быть использованы как для AS2, так и для AS3, поскольку не содержат скриптов (сделаны исключительно в покадровой анимации).
Цифровые часики и исходник и «сердечки вниз скрипт AS2» могут быть использованы только для AS2. В названии этих исходников это помечено.

Как можно использовать эти исходники для создания флешек.
Например, создадим открытку с часиками.

Для этого открываем программу Adobe Flash CS6 и создаём новый Flash-файл ActionScript 2.0, желательно выбирать тёмный фон. Сохраняем наш fla и даём ему название, например «открытка».

Импортируем в Библиотеку любой фон или фоновую картинку PNG
(я выбрала вот такую)

Перетаскиваем картинку из Библиотеки на Рабочий стол и инструментом «Свободное преобразование» устанавливаем размеры картинки согласно размерам фона.

Затем, решаете какие эффекты из исходников или полностью исходники вы бы хотели применить в этой открытке.

Я решила добавить к сердечку исходник «губки» и глазки от ангелочка из исходника «ангелочек со стрелой».
Для того, чтобы использовать указанные исходники, открываем их в нашей программе Adobe Flash CS6.

Исходники откроются на новых вкладках.

Переключаемся на исходник «губки», щелкнув по одноимённой вкладке. Откроется исходник на Рабочем столе.
Инструментом выбора «Стрелка» щелкаем по губкам, выделив их. Щелкаем по выделению и вызываем контекстное меню. В контекстном меню выбираем пункт «Копировать».

Переключаемся на вкладку «открытка» и создаем выше фонового слоя новый слой. Даём ему название «губки». При выделенном слое «губки», щелкаем на Рабочем поле вне фоновой картинки и, вызвав контекстное меню, выбираем пункт «Вставить»

Фрагмент ролика «губки»вставится в нашу открытку на слой «губки». Инструментом «Свободное преобразование» уменьшаем и немного повернём, при необходимости, вставленный ролик. Помещаем его в нужное место на нашей открытке.
Тестируем полученный результат

Управление — Тестировать ролик
Вот, примерно, такой результат можно будет наблюдать.

Далее переключаемся на вкладку «ангелочек со стрелой».
На Рабочем поле мы видим композицию с ангелочком. Нас же интересует сам ангелочек, так как мы хотим скопировать из него Фрагмент ролика с мигающими глазками. Для этого дважды щелкаем по ангелочку и попадаем в режим редактирования Фрагмента ролика — sprite 34. Примечание: в данных исходниках Фрагменты ролика именуются «sprite» (спрайтами). Спрайт 34 представляет собой Фрагмент ролика с анимацией ангелочка. Но нам же, как я уже отмечала, нужен сам ангелочек. Следовательно щелкаем по нему ещё дважды. И вот, теперь попадаем в режим редактирования sprite 24, где послойно расположены все составляющие части ангелочка — ручки, ножки, стрела и нужные нам глазки. Также, заодно, можно скопировать и брови ангелочка.
Выбираем инструмент выделения «Стрелка» и, на Рабочем столе, в режиме редактирования sprite 24, с зажатой клавишей Shift, щелкаем сначала по бровям ангелочка, а затем и по глазкам. Таким образом у нас выделяться и глазки и брови. Не отпуская клавиши Shift, скопируем их.

И снова вернёмся на вкладку «открытка». Здесь выше слоя «губки» создадим новый слой «глазки». Вставим на него скопированные в исходнике с ангелочком брови и глазки. При необходимости, не снимая выделения с вставленных Фрагментов роликов, увеличим их размер, а затем поместим в нужное место.

Протестируйте полученный результат и если всё устраивает, то можно работать с открыткой дальше.

Ещё, я из исходника «ангелочек со стрелой» позаимствовала надпись «Happy Valentine»s Day». Для этого, в режиме редактирования Фрагмента ролика «sprite 34», выделила последние кадры надписи и сердечка над надписью. С зажатой клавишей Shift выделила их и не отпуская клавиши Shift скопировала эти элементы. После этого перенесла всё на создаваемую открытку.

Ещё добавляем сердечек и часики. Для этого открываем исходники «цифровые часики красные скрипт AS2» и «розовые сердечки».

Так же переходим на вкладку с исходником «розовые сердечки». Выделяем и копируем Фрагмент ролика с сердечками расположенный на Рабочем столе.

Переходим на вкладку с исходником «открытка» и, создав новый слой «сердечки», вставляем скопированное на созданный слой. Слой «сердечки» перемещаем в самый низ под фоновую картинку. Сердечки размещаем в нужном месте. Если необходимо, то уменьшаем размер Фрагмента ролика с сердечками.

Для симметрии сделаем дубль и разместим эту копию на новом слое «сердечки1» Отразим скопированный Фрагмента ролика с сердечками слева направо и расположим симметрично первому Фрагмента ролика с сердечками

Осталось вставить электронные часики.
Открываем вкладку с исходником часиков, выделяем их на Рабочем столе и копируем.

Возвращаемся на вкладку с исходником «открытка» и создаём выше всех слоёв новый слой — «цифровые часики». На этот слой вставляем скопированный Фрагмент ролика с цифровыми часиками.
Поскольку в данных исходниках применяемые к элементам имена и обозначения элементов зачастую бывают одинаковыми, то при копировании может возникнуть Конфликт Библиотеки, тогда программа выдаст следующее оповещение

В этом случае необходимо выбрать пункт
«Поместить повторяющиеся элементы в папку» и нажать ОК.

Часики вставятся на Рабочий стол. Останется только поместить их в нужное место, если необходимо, то уменьшить размер и протестировать полученный флеш ролик. Если всё будет устраивать, то экспортировать во флеш файл.

Файл — Экспорт — Экспортировать ролик.

Таким же образом вы можете взять из любого исходника любой понравившейся вам Фрагмент ролика (sprite) или Векторную форму (shape) и добавить в свой проект.
В самой верхней флешке, например, я использовала готовый фон, исходник «сердечко калейдоскоп», блеск из исходника «сердечко в блёстках», для кнопки плеера — сердечко из исходника «сердечко бьётся». Экспериментируйте, фантазируйте и у вас получатся красивые флеш открытки к празднику Всех влюблённых.

FLA исходники для Adobe Flash CS6 «Happy Valentine»s Day».

Сделала для вас некоторое количество fla исходников для Adobe Flash CS6 на тему «Happy Valentine»s Day». Думаю, пригодятся для создания флеш открыток, часиков, бродилок, плееров и так далее. В основном это композиции из сердечек и звёздочек. Есть композиция с ангелочком. Практически все исходники могут быть использованы как для AS2, так и для AS3, поскольку не содержат скриптов (сделаны исключительно в покадровой анимации).
Цифровые часики и исходник и «сердечки вниз скрипт AS2» могут быть использованы только для AS2. В названии этих исходников это помечено.

Как можно использовать эти исходники для создания флешек.
Например, создадим открытку с часиками.

Для этого открываем программу Adobe Flash CS6 и создаём новый Flash-файл ActionScript 2.0, желательно выбирать тёмный фон. Сохраняем наш fla и даём ему название, например «открытка».

Импортируем в Библиотеку любой фон или фоновую картинку PNG
(я выбрала вот такую)

Перетаскиваем картинку из Библиотеки на Рабочий стол и инструментом «Свободное преобразование» устанавливаем размеры картинки согласно размерам фона.

Затем, решаете какие эффекты из исходников или полностью исходники вы бы хотели применить в этой открытке.

Я решила добавить к сердечку исходник «губки» и глазки от ангелочка из исходника «ангелочек со стрелой».
Для того, чтобы использовать указанные исходники, открываем их в нашей программе Adobe Flash CS6.

Исходники откроются на новых вкладках.

Переключаемся на исходник «губки», щелкнув по одноимённой вкладке. Откроется исходник на Рабочем столе.
Инструментом выбора «Стрелка» щелкаем по губкам, выделив их. Щелкаем по выделению и вызываем контекстное меню. В контекстном меню выбираем пункт «Копировать».

Переключаемся на вкладку «открытка» и создаем выше фонового слоя новый слой. Даём ему название «губки». При выделенном слое «губки», щелкаем на Рабочем поле вне фоновой картинки и, вызвав контекстное меню, выбираем пункт «Вставить»

Фрагмент ролика «губки»вставится в нашу открытку на слой «губки». Инструментом «Свободное преобразование» уменьшаем и немного повернём, при необходимости, вставленный ролик. Помещаем его в нужное место на нашей открытке.
Тестируем полученный результат

Управление — Тестировать ролик
Вот, примерно, такой результат можно будет наблюдать.

Далее переключаемся на вкладку «ангелочек со стрелой».
На Рабочем поле мы видим композицию с ангелочком. Нас же интересует сам ангелочек, так как мы хотим скопировать из него Фрагмент ролика с мигающими глазками. Для этого дважды щелкаем по ангелочку и попадаем в режим редактирования Фрагмента ролика — sprite 34. Примечание: в данных исходниках Фрагменты ролика именуются «sprite» (спрайтами). Спрайт 34 представляет собой Фрагмент ролика с анимацией ангелочка. Но нам же, как я уже отмечала, нужен сам ангелочек. Следовательно щелкаем по нему ещё дважды. И вот, теперь попадаем в режим редактирования sprite 24, где послойно расположены все составляющие части ангелочка — ручки, ножки, стрела и нужные нам глазки. Также, заодно, можно скопировать и брови ангелочка.
Выбираем инструмент выделения «Стрелка» и, на Рабочем столе, в режиме редактирования sprite 24, с зажатой клавишей Shift, щелкаем сначала по бровям ангелочка, а затем и по глазкам. Таким образом у нас выделяться и глазки и брови. Не отпуская клавиши Shift, скопируем их.

И снова вернёмся на вкладку «открытка». Здесь выше слоя «губки» создадим новый слой «глазки». Вставим на него скопированные в исходнике с ангелочком брови и глазки. При необходимости, не снимая выделения с вставленных Фрагментов роликов, увеличим их размер, а затем поместим в нужное место.

Протестируйте полученный результат и если всё устраивает, то можно работать с открыткой дальше.

Ещё, я из исходника «ангелочек со стрелой» позаимствовала надпись «Happy Valentine»s Day». Для этого, в режиме редактирования Фрагмента ролика «sprite 34», выделила последние кадры надписи и сердечка над надписью. С зажатой клавишей Shift выделила их и не отпуская клавиши Shift скопировала эти элементы. После этого перенесла всё на создаваемую открытку.

Ещё добавляем сердечек и часики. Для этого открываем исходники «цифровые часики красные скрипт AS2» и «розовые сердечки».

Так же переходим на вкладку с исходником «розовые сердечки». Выделяем и копируем Фрагмент ролика с сердечками расположенный на Рабочем столе.

Переходим на вкладку с исходником «открытка» и, создав новый слой «сердечки», вставляем скопированное на созданный слой. Слой «сердечки» перемещаем в самый низ под фоновую картинку. Сердечки размещаем в нужном месте. Если необходимо, то уменьшаем размер Фрагмента ролика с сердечками.

Для симметрии сделаем дубль и разместим эту копию на новом слое «сердечки1» Отразим скопированный Фрагмента ролика с сердечками слева направо и расположим симметрично первому Фрагмента ролика с сердечками

Осталось вставить электронные часики.
Открываем вкладку с исходником часиков, выделяем их на Рабочем столе и копируем.

Возвращаемся на вкладку с исходником «открытка» и создаём выше всех слоёв новый слой — «цифровые часики». На этот слой вставляем скопированный Фрагмент ролика с цифровыми часиками.
Поскольку в данных исходниках применяемые к элементам имена и обозначения элементов зачастую бывают одинаковыми, то при копировании может возникнуть Конфликт Библиотеки, тогда программа выдаст следующее оповещение

В этом случае необходимо выбрать пункт
«Поместить повторяющиеся элементы в папку» и нажать ОК.

Часики вставятся на Рабочий стол. Останется только поместить их в нужное место, если необходимо, то уменьшить размер и протестировать полученный флеш ролик. Если всё будет устраивать, то экспортировать во флеш файл.

Файл — Экспорт — Экспортировать ролик.

Таким же образом вы можете взять из любого исходника любой понравившейся вам Фрагмент ролика (sprite) или Векторную форму (shape) и добавить в свой проект.
В самой верхней флешке, например, я использовала готовый фон, исходник «сердечко калейдоскоп», блеск из исходника «сердечко в блёстках», для кнопки плеера — сердечко из исходника «сердечко бьётся». Экспериментируйте, фантазируйте и у вас получатся красивые флеш открытки к празднику Всех влюблённых.

Илон Маск рекомендует:  convert_cyr_string - Преобразует строку из одной кириллической кодировки в другую
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL