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

Технология Flash

Мультимедийная основа, была разработана компанией Macromedia . Но после ее поглощения (слияния ) все права на технологию перешли новому владельцу — компании Adobe Systems .

Область современного применения Adobe Flash :

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

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

• Реализация мультимедийных возможностей – для прослушивания аудио и воспроизведения видео на сайтах часто используют медиа плееры, созданные на основе Flash . Их разработка включает в себя использование одного из скриптовых языков (чаще JavaScript ):

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

Основы и инструментарий для разработки Flash

Для создания флеш анимации чаще всего используется традиционный инструментарий от Adobe :

• Adobe Flash Professional – программа для создания интерактивной анимации (аниматор );
• Adobe Flash Builder – среда для создания интерфейса веб-приложений;
• Adobe Flash Player – интегрируемый в браузер плеер для воспроизведения Flash .

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

Данная технология позволяет отображать любой тип графики (растровую, векторную, 3D ). А также поддерживает потоковую ретрансляцию аудио и видео данных. Специально для мобильных устройств была разработана облегченная версия Flash Lite .

Основным стандартом для флэш-файлов является расширение SWF . Аббревиатура расшифровывается как Small Web Format . Видео, записанное в Flash , имеет файловые расширения FLV , F4V .

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

Размер файла флэш приложения одинаков для всех пользователей независимо от технических характеристик экрана (разрешения ).

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

К недостаткам технологии можно отнести следующие моменты:

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

Обзор стороннего программного обеспечения для создания Flash

В качестве опытного образца приложения, на котором мы будем демонстрировать основы создания Flash , был взят Sothink SWF Quicker . По мнению многих профессионалов, программа является наиболее понятной и простой для изучения.

Кроме создания и редактирования флэш редактор «умеет » работать со всеми остальными видами веб-анимации (GIF , HTML и другие стандарты):

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

Для того чтобы понять, как сделать флеш анимацию в этом приложении, воспользуемся встроенными шаблонами. Диалоговое окно «New From Template » появляется сразу после запуска программы. Кроме того его можно вызвать через пункт главного меню «File ». Среди предлагаемых вариантов мы выбрали создание баннера:

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

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

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

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

Использование сцен

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

Что такое сцена

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

Панель Scene

Доступ к списку содержащихся в фильме сцен осуществляется с помощью панели Scene (Сце

на), которая открывается при вызове команды Window > Design Panels > Scene (Окно > Панели разработки > Сцена). Данная панель по зволяет просматривать список имеющихся сцен

и устанавливать порядок их воспроизведения в фильме - он определяется порядком располо жения сцен в списке. Кроме того, используя панель Scene (Сцена), можно дублировать, добавлять, удалять и перемещать сцены в пределах списка.

Меню Options (Настройки) панели Scene (Сцена) содержит только три команды: Maximize Panel (Сделать размер панели максимальным), Close Panel (Закрыть панель) и Help (Справка).

Панель Scene

Панель Edit

Панель Edit (Правка) расположена над временной шкалой, ниже главного меню программы. Для открытия панели применяется команда Window > Toolbars > Edit (Окно > Панели инструментов > Панель правки). Вы уже использовали эту панель при работе с окном Symbol Editor (Редактор символов) для выхода из режима редактирования символа (см. главу 6). В данном разделе речь пойдет о функциональных возможностях панели Edit (Правка), касающихся работы со сценами.

Панель Edit (Правка) содержит имя текущей сцены (на рисунке текущей является сцена Scene 2). Переключиться на другую сцену можно с помощью кнопки Edit Scene (Правка сцены), расположенной в правой части панели Edit (Правка), при этом в строке будет выведено имя выбранной сцены. О функциональных свойствах кнопки Edit Scene (Правка сцены) рассказывается в разделе "Переключение между сценами".

Меню кнопки Edit Scene

Создание сцен и манипулирование ими

Как уже говорилось, панель Scene (Сцена), которая открывается с помощью команды Window > Design Panels > Scene (Окно > Панели разработки > Сцена), предназначена для работы со сценами. В этом разделе вы узнаете, как с помощью данной панели можно добавлять, дублировать, переименовывать сцены, а также изменять их порядок.

Добавление сцены

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

Убедитесь, что необходимый документ открыт. Выбрав команду Window > Design Panels > Scene (Окно > Панели разработки > Сцена), откройте панель Scene(Сцена).

Щелкните на кнопке Add Scene (Добавить сцену), которая расположена в пра вом нижнем углу панели, либо вызовите команду Scene (Сцена) меню Insert(Вставить). После этих действий в окне панели Scene (Сцена) появится имя новой сцены. По умолчанию каждой новой сцене присваивается имя с порядковым номером, который на единицу больше, чем в имени сцены, выбранной на данный момент (например, Scene 1, Scene 2 и т. д.). Имя размещается в списке соответствующим образом.

Выберите новую сцену на панели Scene (Сцена) и создайте ее содержимое. При создании новой сцены Flash переключается на нее автоматически.

Перечень сцен на панели Scene

Удаление сцены

Удалить сцену можно таким образом.

Откройте панель Scene (Сцена), вызвав команду Window > Design Panels > Scene(Окно > Панели разработки > Сцена). Выберите сцену, которую хотите удалить.

Щелкните на кнопке Delete Scene (Удалить сцену), расположенной в правом нижнем углу панели. Для подтверждения удаления сцены щелкните на кнопке ОК в открывшемся диалоговом окне.

Дублирование сцены

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

Откройте панель Scene, активизировав команду Window > Design Panels > Scene (Окно > Панели разработки > Сцена), и выберите сцену, дубликат которой вы хотите создать.

Щелкните на кнопке Duplicate Scene (Дубли ровать сцену), расположенной в правом ниж нем углу панели Scene (Сцена).

В окне панели Scene (Сцена) появится имя дубликата сцены. Обратите вни мание, что оно состоит из названия исход ной сцены и слова сору (копия).

Дубликат сцены

Переименование сцен

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

Откройте панель Scene (Сцена), выбрав команду Window > Design Panels > Scene (Окно > Панели разработки > Сцена), и дважды щелкните на имени сцены, которое вы хотите изменить. При этом появится возможность редактировать имя сцены.

Введите новое имя и нажмите клавишу Returt/Enter либо дважды щелкните за предела ми панели Scene (Сцена).

Переименование сцены на панели Scene

Изменение порядка размещения сцен

Порядок размещения имен сцен на панели Scene (Сцена) определяет последовательность воспроизведения сцен в фильме. Имена сцен на данной панели можно перемещать, устанавливая порядок воспроизведения сцен независимо от последовательности, в которой они были созданы.

Откройте панель Scene (Сцена), выбрав команду Window > Design Panels > Scene (Окно > Панели разработки > Сцена).

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

Перемещение сцены на панели Scene

Переключение между сценами

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

Панель Scene (Сцена). Чтобы перейти к нужной сцене фильма, щелкните на имени сцены на панели Scene (Сцена). Напомним, что имя выбранной сцены выводится на панели Edit (Правка).

Кнопка Edit Scene (Правка сцены). При щелчке на этой кнопке, находящейся в правой части панели Edit (Правка), вы получаете доступ к меню с именами всех сцен, имеющихся в фильме. Для перехода к нужной сцене выберите соответствующий пункт меню.

Панель Movie Explorer (Обозреватель фильма). Данная панель, которую можно открыть с помощью команды Window > Other Panels > Movie Explorer (Окно > Другие панели > Обозреватель фильма), служит для отображения иерархической структуры фильма (см. главу 8) и позволяет осуществлять поиск сцен, симво лов и экземпляров символов, а также производить замену текста и шрифтов.

Сцены представлены на панели Movie Explorer (Обозреватель фильма) как иерархические элементы высшего порядка. Для перехода к определенной сцене найдите ее имя на панели Movie Explorer (Обозреватель фильма) и щелкните на нем. По умолчанию на этой панели выводится содержимое только выбранной сцены. Чтобы одновременно просматривать содержимое всех сцен, активизируйте в меню Options (Настройки) данной панели команду Show All Scenes (Показывать все сцены).

Панель Movie Explorer со списком сцен

Тестирование сцен

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

Для тестирования отдельной сцены отметьте ее на панели Scene (Сцена) и нажмите клавишу Return/Enter либо после выбора сцены откройте меню Control(Управление) и активизируйте команду Test Scene (Тестирование сцены).

Для тестирования фильма вызовите команду Test Movie (Тестирование фильма) меню Control (Управление) либо используйте комбинацию клавиш Cmd/Ctrl+Return/Enter. При этом откроется новое окно, в котором все сцены фильма будут воспроизводиться в последовательности, определенной на панели Scene(Сцена).

Воспроизвести все сцены фильма можно также, выбрав команду Play All Scenes (Воспроизвести все сцены) меню Control (Управление).

Управление сценами с помощью сценариев ActionScript

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

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

gotoAndStopO - при вызове данного действия происходит переход к определенной сцене и кадру и останавливается воспроизведение фильма.

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

play О - это действие позволяет продолжить воспроизведение фильма после остановки.

stop О - с помощью данного действия можно остановить воспроизведение фильма.

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

Шаги

Часть 1

Покадровая флеш-анимация

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

• По умолчанию Flash воспроизводит 24 кадра в секунду (FPS). Это означает, что за одну секунду будут показаны 24 кадра, но не все из них должны быть обязательно разными. Вы можете изменить этот параметр (если хотите) на 12 кадров в секунду, но при 24 кадрах в секунду анимация будет воспроизводиться более «гладко».

1. Установите Flash Professional. Есть множество программ для создания флеш-анимации, но наиболее мощной является Adobe Flash Professional CC. Вы можете бесплатно установить пробную версию этой программы или использовать другой продукт (если вы не хотите регистрироваться на Adobe Creative Cloud). Далее в этой статье описывается работа с Flash Professional.

   Так как покадровая анимация требует наличия нескольких изображений (которые немного отличаются друг от друга), то вам нужно создать эти изображения вручную. Для этого воспользуйтесь Adobe Flash Professional или нарисуйте изображения в любом графическом редакторе.

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

2. Создайте первый кадр. При первом запуске Adobe Flash Professional вы увидите пустой холст (слой) и пустую временную шкалу. По мере добавления кадров временная шкала будет заполняться автоматически. Вы можете работать со слоями так же, как вы делаете это в Photoshop.

   • Прежде чем добавить изображение, создайте базовый фон вашей анимации. Переименуйте «Слой 1» в «Фон», а затем закрепите его. Создайте второй слой и назовите его как угодно. Это будет слой, на котором вы будете создавать анимацию.
   • Добавьте рисунок на холст первого кадра. Вы можете импортировать рисунок с вашего компьютера, или вы можете использовать инструменты для рисования, чтобы создать рисунок непосредственно в программе.
   • Первый кадр – это «ключевой» кадр. Ключевой кадр – это кадр, который включает изображение и образует основу («костяк») анимации. Вы будете создавать новый ключевой кадр каждый раз при изменении изображения.
   • Ключевые кадры на временной шкале обозначаются черной точкой.
   • Вы не нужен ключевой кадр в каждом последующем кадре. Создавайте ключевой кадр через каждые четыре-пять кадров, чтобы сделать хорошую анимацию.

3. Преобразуйте изображение в символ. В этом случае вы сможете добавить изображение в кадр несколько раз. Это особенно полезно, если вам нужно быстро добавить несколько однотипных картинок в один кадр (например, рыбки в аквариуме).

   • Выделите рисунок. Щелкните правой кнопкой мыши по рисунку и выберите «Convert to Symbol» (Преобразовать в символ). Изображение будет добавлено в библиотеку, что упростит его использование в будущем.
   • Удалите рисунок. Не волнуйтесь - вы сможете добавлять его в кадр простым перетаскиванием из библиотеки. Так вы можете добавить в кадр один и тот же рисунок несколько раз.

4. Добавьте пустые кадры. Если ваш первый ключевой кадр готов, вставьте пустые кадры, а затем приступайте к созданию второго ключевого кадра. Нажмите F5 (четыре или пять раз), чтобы добавить пустые кадры после первого ключевого кадра.

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

   • Чтобы создать ключевой кадр, используя содержимое предыдущего ключевого кадра, нажмите F6. Чтобы создать пустой ключевой кадр, щелкните правой кнопкой мыши по последнему кадру на временной шкале и выберите «Insert Blank Keyframe» (Вставить пустой ключевой кадр).
   • После того как вы создали второй ключевой кадр, вам нужно внести изменения в его изображение, чтобы анимация «ожила». Если вы пользовались инструментами для рисования Adobe Flash Professional, выберите инструмент «Transform» (Преобразование), чтобы выделить элемент вашего рисунка (например, руку персонажа) и изменить его.
   • Если в каждый ключевой кадр вы вставляете новое изображение, убедитесь, что оно находится в нужном месте (согласно логической последовательности кадров).

5. Повторите процесс. После создания двух ключевых кадров повторите процесс – добавьте несколько пустых кадров между каждыми ключевыми кадрами и убедитесь, что анимация будет проигрываться «гладко».

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

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

   • Выберите кадр, в котором рисунок будет преображаться.
   • Откройте панель свойств рисунка. Для этого нажмите F3.
   • Измените значения параметров в окне свойств рисунка. Например, вы можете изменить оттенок или цвет, добавить фильтры, изменить размер.
   • Вы также можете использовать инструмент «Free Transform» (Свободное преобразование), чтобы менять рисунок так, как вам угодно.

7. Добавьте заключительные штрихи. Проверьте созданную анимацию, нажав Ctrl + Enter. Убедитесь, что рисунок (персонаж) правильно меняется и что анимация воспроизводится с правильной скоростью. Если анимация воспроизводится слишком быстро, уменьшите значение FPS или увеличьте продолжительность твина.

   • По умолчанию FPS равен 24, поэтому попробуйте уменьшить это значение до 12. Измените значение FPS на панели свойств. Однако при FPS = 12 анимация может воспроизводиться недостаточно плавно.
   • Чтобы изменить продолжительность твина, выберите слой, содержащий твин, и при помощи ползунка измените продолжительность твина. Если вы хотите удвоить продолжительность твина, передвиньте ползунок на 48 кадров. Не забудьте вставить фон в пустые кадры, чтобы фон не исчез посередине анимации. Для этого выберите фоновый слой, щелкните по последнему кадру анимации (на временной шкале), а затем нажмите F5.

Часть 3

Добавление звуковых эффектов и музыки

1. Запишите или скачайте звуковые эффекты и музыку. Вы можете добавить в анимацию звуковые эффекты, чтобы сделать ее более эффектной. Музыка сделает анимацию более захватывающей и может превратить хорошую анимацию в великолепную. Flash поддерживает различные форматы аудиофайлов, в том числе AAC, MP3, WAV, и AU. Выберите формат, который гарантирует высокое качество звука при минимальном размере файла.

   • Формат MP3 гарантирует высокое качество звука при минимальном размере файла. Файлы формата WAV имеют большой размер.

2. Импортируйте аудиофайлы в библиотеку, чтобы иметь возможность быстро добавлять звуки и музыку в анимацию. Нажмите «File» (Файл) – «Import» (Импортировать) – «Import to Library» (Импортировать в библиотеку). Найдите аудиофайл на вашем компьютере. Убедитесь, что аудиофайл имеет легко запоминающееся имя, чтобы вы могли быстро найти его.

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

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

Всех приветствую!
Итак, по просьбе пишу урок о простейшей анимации во флеше. Начинаем, как говорится, с малого. Потом обещаю добавить еще (по pop-up, если так и не напишут).

Открываем Flash MX.
Перед нами - наша рабочая сцена, меню, панель инструментов итд. Внизу есть такое вот окошко: Properties (Свойства). Там основные настройки вашего мульта (рис.1).
Нас там интересует FRAME RATE - скорость прокрутки вашего мульта. Иначе 12 fps означает, что за одну секунду будет проигрываться 12 кадров (frame) вашего мульта. Эта скорость стандартная и, в принципе, то, что надо. Если вам надо замедлить ваш мульт - уменьшаете, надо сделать быстрее - увеличиваете эту цифру.

Теперь перейдем к самой анимации.
Во флеше есть два основных способа: shape tweening и motion tweening.
Рассмотрим первый. Shape - (англ.) форма. Вы уже понимаете, что тут речь пойдет именно об изменении формы. Создаем некую форму, например синий квадрат. Вверху, в строке времени (timeline) у нас на первом кадре появится кружочек на сером фоне - мы создали ключевой кадр (keyframe). Теперь создадим такой же кадр в 10-м кадре. Это можно сделать двумя способами: наводим мышку на 10 кадр, делаем клик (кадр стает синим) и в меню последовательно выбираем: Insert->keyframe; иначе можно: наводим на 10 кадр, кликаем, нажимаем F6. В строке времени все 10 кадров серые. Красная линия показывает на каком именно кадре мы находимся. (рис.2)

Переходим в 10 кадр. Выделяем наш квадратик (мышкой или нажатием ctrl+A,- данное сочетание клавиш выделяет все, что у нас находится в рабочей области). Перемещаем наш квадрат куда-нибудь в сторону (проследите, что вы в 10-м кадре!) и меняем цвет на, например желтый. Теперь переходим обратно в первый кадр. В строке Properties имеется выбор Tween, где по умолчанию стоит атрибут "none". То есть никакой анимации. Изменяем его на "shape". В строке времени наши кадры приобретают салатовый цвет со стрелочкой. Когда все сделано нажимаем "enter". КРАСОТА! Квадратик двигается, да еще и цвет меняет! Снова переходим в 10 кадр. Выделяем все (ctrl+A). И нажимаем клавишу delete (то есть удаляем). На месте квадратика рисуем какой-нить красненький кружочек. Снова переходим в первый кадр и нажимаем enter. Квадрат теперь стает кружком и красным. Вы уже поняли, что вам не надо прорисовывать каждый кадр - это за вас сделает flash! Хотя если вам нужна особая точность, или что-то - можете прорисовывать. тогда файл вырастет в размерах. Если вам нужен более плавный переход от квадратика к тому же, например, кружку - сделайте этот процесс не на 10, а, скажем, на 25 кадров. Если вам нужно более замысловатые движения и перемещения - для этого существуют слои-маски, но о них как-нибудь в следующий раз. Рисунок 3 показывает, как на линии времени выглядит ваша анимация. Теперь вы умеете рисовать простейший мувик с изменением формы!

Теперь рассмотрим второй способ задания анимация: motion tweening (перевод что-то типа: построения промежуточной анимации движения). Здесь будет чуточку посложнее. Снова открываем новый файл флеша.
Чем отличаются shape и motion? Тем, что во втором случае мы будем работать не над формами, а над готовыми объектами, т.е. символами. Символ - это так сказать, простейшая единица анимации во флеше. Это более распространенный способ рисования. Повторяем все снова - в первом кадре рисуем синенький квадратик. выделяем его и нажимаем F8 (или выполняем последовательно: Insert->convert to symbol). Перед нами появляется диалоговое окно (рис. 4).

Что же это такое? Во флеше есть три типа символов: мувик (moovie clip) - это некая дополнительная анимация внутри символа. то есть, этот символ содержит в себе какую-нибудь анимацию и т.д. имеет точно такую строку времени, как и основная сцена; кнопка (button) - элемент, который реагирует на нажатие, присутствие мышки над ним итд. Короче, кнопка и есть; и третий элемент, самый статичный - graphic. То есть просто графика, некое изображение. Мы будем работать с последним. Как-то его называем, нажимаем "ОК". На квадратике появляется кружочек - иначе, центр нашего символа (центр тоже можно задать в том диалоговом окне). Все наши символы заносятся в библиотеку. Оттуда мы их можем редактировать, вставлять куда надо и куда не надо, удалять, добавлять. Чтобы посмотреть на свою библиотеку нажмите F11 или выполните действия: Window -> Library. В 10-м кадре создадим ключевой кадр (F6). Теперь можем переместить куда-то наш квадрат. Затем сделаем его невидимым: для этого выделим его в 10-м кадре. На панели propperties в разделе color зададим alpha (прозрачность). Поставим ему атрибут в процентах: 0. Вернемся на 1-й кадр. Выполним все те же действия, что и для shape tweening, только вместо shape отметим motion. Кадры во временной строке станут фиолетовыми и через них протянется стрелочка, как это показано на рис. 5. Нажмем enter.

У нас получится эффект "квадрат летит в пустоту". Поздравляю! Вы знаете, как делать примитивную графику во флеше!
Еще одна важная особенность - на каждую анимацию у нас должен быть выделен отдельный слой (Layer). Если вам надо добавить еще один слой воспользуйтесь командой: Insert->Layer.
И совсем чуть-чуть о строке времени.
Как вы уже поняли - салатовое со стрелочкой - shape tweening, фиолетовое со стрелочкой - motion tweening. Салатовое или фиолетовое с линиями - вы задали анимацию, но эту анимацию создать невозможно, - вы сделали что-то не правильно. Серый цвет - все кадры с такой закраской являются точной копией предыдущего ключевого кадра (keyframe). Белая окраска линии означает, что в этих кадрах ничего нет. Черный кружочек - ключевой кадр. Белый кружочек - пустой ключевой кадр (blank keyframe). Ну, вроде все. (рис. 6)

На этом пока что все. Этот тот минимум, с которым можно работать. Далее изучите добавление звука, контроль над звуком, и вперед - писать Масяню. :) Обещаю, что обязательно вскоре напишу еще один урок - по продвинутой анимации во флеше. Про то, как сделать "падение пера", про маски, про контроль над изменением формы в shape tweening"е. Потом еще чего-то напишу.
Если это кому-то все-таки помогло - скажите спасибо всему сайту FLASHER.RU. Это лучшее, чего в сети имеется.
Рад был и рад есть! Если вопросы - прошу на форум или: [email protected]
(с)from St.Dimitryi aka Nirva to Flasher.ru
http://flasher.ru

Работа с кадрами в нескольких слоях
Настройки раздела кадров

Начало работы

Первый кадр слоя отмечен пустым кружком. Это обозначает, что как кадр 1, так и слой "Layer 1" пустые - на слое нет вставленных объектов. Вставим любой объект на слой "Layer 1". Например, импортируем растровое изображение (см. Импорт ) и вставим его на слой "Layer 1". Изображение показано слева. Можно просмотреть созданную мультипликацию, нажав клавишу Enter . Обычно фоновый слой блокируется, чтобы предотвратить его изменение - ставится значок замка. Пример 4 : Вы можете добавить или удалить простые кадры. Удаление кадров : Для удаления кадра его нужно выделить, в контекстном меню выбрать Remove Frames . Для выделения нескольких кадров удерживайте клавишу Ctrl . Например, нам нужно уменьшить число кадров для фона на 5 кадров. Выделим 5 кадров и удалим их - вместо 30-ти кадров остается 25. Добавление кадров : Например, нам нужно на слое "Фон" добавить несколько кадров. Для этого можно щелкнуть по кадру 30 и, когда рядом с курсором появляется маленький прямоугольник, просто перетащить кадр 30 вправо по шкале времени. Или можно щелкнуть на любом кадре между 1-м и 30-м и в контекстном меню выбрать Добавить кадр (Insert Frame). Последнее обновление: декабрь 2014 г.