Лабораторные работы «СОЗДАНИЕ FLASH-РОЛИКА»

Лабораторная работа 1

Запустив Macromedia Flash, в меню File -> New создаем новый файл, будущий Flash-ролик, которому даем название Спутник, что будет соответствовать цели нашего ролика.

Перед началом создания ролика, необходимо выставить нужные настройки фильма:

1. Frame Rate –это частота кадров до 25fps, для сложной графики необходимо уменьшать частоту кадров до 8fps.
2. Dimensions –здесь указывается ширина (width) и высота (height) кадра в пикселях, по умолчанию это значение равно 550?400, именно таким будет размер кадров фильма в браузере.
3. Match –здесь так же можно указать размеры кадра при помощи кнопок Printer и Contents. Чтобы узнать размеры кадра по размеру изображения в этом кадре, следует нажать кнопку Contents(содержимое). Если же надо сделать размер кадра соответственно параметрам печати нужно нажать кнопку Printer(печать).в секунду, для большинства компьютеров, с учётом скорости загрузки с web-сайта, оптимальным значением, принятым по умолчанию является 12fps. Если же фильм простой и он будет просматриваться на очень быстром компьютере, то это значение можно увеличить
4. Background color – цвет фона кадров, по умолчанию это белый.
5. Ruler units –единицы измерения линейки, которые отображают размеры кадра на сцене. Выбираются из списка те единицы, которые нам нужны. По умолчанию линейки выключены, а включить их можно при помощи команды меню View->Rulers .
Для применения выставленных параметров, нужно нажать кнопку Save Default.

2. СИМВОЛЫ И РАБОТА С НИМИ

Символы - одно из ключевых понятий во Flash. Символом может быть, как простейшая геометрия или их объединение, так и целая анимация (movie). Это позволяет использовать символы, как мощный механизм создания абстракций во Flash.

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

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

Существует три вида символов: анимация (movie clip), кнопка (button) и изображение (graphic):
· Изображение (graphic), представляет собой символ, состоящий из единственного кадра. Отсюда следует его статичное название. Если символ действительно представляет собой статичный (не анимирующийся) объект, лучше сделать его изображением (graphic).
· Кнопка (button). Во Flash есть специально приспособленный под функции кнопки вид символа. В нем имеется 4 кадра: Up, Over, Down, Hit, которые содержат следующие состояния кнопок:

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

· Анимация (movie clip). Это самый "полноценный" тип символа. В нем может быть любое количество кадров. Символ этого типа может восприниматься как объект типа Movie в ActionScript (это встроенный язык Flash).

Символы могут быть вложенными вне зависимости от типа. Это является самым главным их достоинством. Например, можно сделать кнопку, которая начнет двигаться, когда над ней будет "пролетать" курсор мыши, просто поместив в кадр Over символ - анимацию. Или на изображение поместить бегущую кошку. Все остальное - дело вашей фантазии. Символы можно создавать как "с нуля" (Insert->New Symbol, Ctrl+F8), так и используя текущее выделение, поместив его сразу в символ (Insert->Convert to Symbol, F8). Второй прием используется гораздо чаще, чем первое, т.к. в этом случае отпадает надобность его позиционировать и изнасть под нужный размер. Для управления символами используется так называемая библиотека (Library).

Теперь создаем эталон спутника. Для этого нам потребуется зайти в меню Insert->New Symbol, после чего у нас появится окно –Symbol Properties, в котором нам нужно будет указать Name(имя) и Behavior(поведение) создаваемого символа. Назовем его Спутник, а второе свойство оставим нетронутым.

После этого закрываем это окно, и программа входит в режим редактирования эталона - Спутник.
Спутник мы решили изобразить в виде небольшого шара, и для этого нам понадобится воспользоваться инструментом Oval и выставить для этого инструмента Properties (свойства): Fill color (цвет заливки), и Stroke color
(контура). Для того чтобы наш спутник выглядел более реально, воспользуемся в Fill color, градиентной заливкой (она обычно используется для имитации 3D-объектов).

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

Далее в окне Info изменим размер нашего эталона на меньший, в данном случае это 30x30.

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

3. РАБОТА С ГРАФИЧЕСКИМИ ОБЪЕКТАМИ

Теперь создаем графический объект – планету и эллиптическую орбиту, в режиме редактирования сцены.
Для этого с начала, в зависимости от размера монитора, нужно изменить масштаб, применённый к сцене, это можно сделать либо посредством вкладки меню View->Magnification->нужный масштаб, либо при помощи ниспадающего меню в нижнем левом углу окна нашего фильма.

Планету мы решили представить так же в виде круга, но уже большего размера, чем спутник, и без контура и залить градиентной заливкой.
После того, как мы создали объект планеты, выделив его, изменяем размер и цвет его заливки с серого на синий. Это можно сделать с помощью пункта меню Window->Panels->Fill, а далее в окне Fill и одноимённой вкладке убедимся, что выставлен именно Radial Gradient(радиальный градиент), что будет больше имитировать планету. После чего изменим порог градиента, при помощи маркеров градиента.

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

4. СЛОИ И АНИМАЦИЯ С ДВИЖЕНИЕМ (MOTION TWEENING)

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

После того, как мы создали эллиптическую орбиту, которая расположена по центру нашей планеты, планета разделилась на сектора. Это произошло из-за того, что в технологии-Flash объекты делятся на сектора в точках их пересечения. Данная особенность сначала может показаться неудобной, но в последствии при создании более сложных роликов просто необходима. Нам же для избежания такого разделения планеты и орбиты на сектора нужно всего лишь сделать двойной щелчок на нужном объекте, а потом воспользоваться пунктом меню Modify->Group (или комбинацией клавиш Ctrl+G). Команда Group позволяет сгруппировывать объекты или объекты в одно целое. Для отмены этой команды надо сделать разгруппировку Modify->Ungroup (или комбинацией клавиш Ctrl+Shift+G).

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

Выполнив группировку, выделим орбиту и планету одновременно (стрелкой мыши кликая на объектах, держа нажатой клавишу Shift), и выровним их по центру, открыв для этого окно выравнивания комбинацией клавиш Ctrl+K или выбрав пункт меню Window->Panels->Align. В этом окне можно увидеть множество различных выравниваний, но нам понадобятся лишь два из них: Align Horizontal Center и Align Vertical Center.

Выровняв свои объекты, снимем выделение с планеты, оставив его на орбите, и на панели инструментов в разделе Options нажав на кнопку Rotate –(Вращение) или же выбрав пункт меню Modify->Transform->Rotate после чего у нас по контуру прямоугольника появляются маркеры. Маркеры - по углам для вращения, по центру для наклона. Теперь, используя маркеры по углам, повернем орбиту примерно на 450, что сделает её более правдоподобной.

Теперь разгруппируем орбиту и удалим верхнюю её часть, которая находится в области планеты:

5. МАСШТАБИРОВАНИЕ

Чтобы сделать движение спутника по орбите, следует сделать так, чтобы спутник заходя за Планету исчезал, а когда появлялся, увеличивался в размерах по мере его расположения на орбите. Но так как при анимации в плеере цикл движений повторяется непрерывно, следует сделать некую приостановку между циклами так, чтобы спутник на некоторое время задержался за планетой, прежде чем снова появится вначале орбиты. И так во временную шкалу добавим в начало каждого слоя ещё по 4 кадра. Для этого нужно переместить проигрывающую головку в начало шкалы времени и 4 раза нажать на кнопку F5. Таким образом, проигрывающая головка переместилась на отметку 5. Теперь выделив слой Спутник, переведем проигрывающую головку на отметку 5 и нажмем F6, таким образом содержимое нового кадра получает копию содержимого ближнего кадра слева, т.е 1-го ключевого. Тоже самое делаем с последним кадром, т.е. ставим проигрывающую головку за 5 кадров до последнего и нажимаем F6. Теперь возвращаемся к первому кадру и в окне Info выставляем размер спутника 0?0, тоже самое проделываем с последним кадром. Вот что у нас должно было получиться :

Так же можно сделать ещё несколько ключевых кадров для того, чтобы, например, спутник по мере приближения к центру орбиты постепенно увеличивался, а потом снова уменьшался. Мы сделали это следующим образом: установили проигрывающую головку в ту отметку, где спутник находится почти по центру орбиты и планеты, и вставили новый ключевой кадр, на котором спутник изменяет свой размер с 34 на 60. Потом через 4 кадра вставляли ключевые кадры, сначала справа, уменьшая размер спутника с 60 до 55, потом 55 до 50 и т.д. до тех пор, пока не дошли до 34, а потом так же в обратную сторону. Вот так:

6. АНИМАЦИЯ ФОРЯ (SHAPE TWEENING)

На этом шаге мы займемся анимацией форя, для того чтобы создать впечатление вращения планеты вокруг своей оси. В этом случае сама планета передвигаться не будет, а будет изменяться лишь её форма, цвет, расположение или размер.
Начинаем с блокировки всех слоёв, кроме слоя Планеты, для того чтобы случайно не повредить их. Выделив планету, открываем окно Frame (Ctrl+F) и в одноимённой вкладке выставляем вид анимации форя: Shape Tweening.

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

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

--масштабирование градиента

--поворот градиента

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

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

7. ОЗВУЧИВАНИЕ ФИЛЬМА.

На этом шаге мы займемся озвучиванием нашего анимационного фильма.

Для того, чтобы во время вращения спутника по орбите и планеты вокруг своей оси, нам необходимо сначала создать новый слой, на котором будет расположен звуковой фрагмент, воспроизводимый при проигрывании ролика. Новый слой мы назовем Звук, и расположим его в самом верху. Теперь для того, чтобы включить в свой фильм звук, нам необходимо воспользоваться библиотекой звуков или импортировать свой собственный файл. Программа Flash позволяет импортировать файлы следующих форматов: MP3 (MPEG-1 Audio Layer 3), WAV (Windows Wave), AIFF или AIF (Audio Interchange File Format), Quick Time (к сожалению, аудиофайлы Quick Time с расширением .QTA или .MOV, нельзя непосредственно импортировать в программу Flash. Однако, эти аудиофайлы можно подготовить для импортирования во Flash, сохранив их в формате WAV или AIFF. Для этого следует установить на компьютере программу Quick Time Pro 4.0 или выше, её можно найти на Web-узле Apple по адресу www.apple.com ) Так как наш анимационный фильм предназначен для Web, то необходимо к нему подобрать что-то привлекательное и современное. Мы предпочли импортировать файл Moby –“Imy heart” формата mp3, что как нам кажется, идеально подходит для данного ролика.

Теперь мы займемся его интеграцией в фильм. Но сначала, проверим, есть ли в библиотеке фильма только что импортированный файл. Для этого выберем пункт меню Window ->Library, после этого у нас откроется окно со всеми экземплярами, в том числе и с импортированным музыкальным файлом, где можно будет прослушать и просмотреть всё содержимое библиотеки создаваемого фильма. Далее выбрав из пункта меню Window ->Panels ->Sound, появится окно, в котором мы приступим к внедрению нашего музыкального файла в ролик.

· Sound – в этом ниспадающем меню будут показываться все музыкальные файлы, которые содержатся в библиотеке нашего фильма. В данном случае будет две строки, None-музыка будет отсутствовать, и MOBY “In my Heart”, мы выбираем второе.
· Effect – это способы обработки звука программы Flash.
o None –отсутствие
o Left Channel/Right Channel (Левый канал/ Правый) –воспроизводится только левый или правый канал для стереозвука.
o Fade Left to Right/ Fade Right to Left (Затухание с переходом звука слева направо/ или справа налево) –этот эффект понижает уровень звука одного канала и увеличивает для другого, создавая эффект панорамирования.
o Fade In/ Fade Out (Нарастание/ Затухание) –эффект Fade In (нарастание) постепенно повышает уровень от нуля до максимума в начале звукового клипа, а Fade Out соответственно наоборот. По умолчанию этот эффект составляет в процентном соотношении 25% от общей продолжительности звукового клипа.
o Custom (Пользовательский) –при изменении уровней или маркеров огибающей на экране вручную программа Flash автоматически изменяет значение меню Effect на параметр Custom.
Здесь мы выберем None.
· Sync (от Synchronization — синхронизация) – здесь можно выбрать способ синхронизации звука т.е. его соответствия картинке:
o Event - звук синхронизируется посредством привязки его к определенным событиям фильма; звук, управляемый событием, воспроизводится с момента перехода к соответствующему ключевому кадру, и продолжается независимо от временной шкалы, даже если фильм будет остановлен (если, конечно, звук достаточно продолжителен);
o Start — вариант аналогичен предыдущему, за исключением того, что при очередном наступлении заданного события начинается воспроизведение нового экземпляра звука, даже если воспроизведение предыдущего еще не закончено;
o Stop — эта опция схожа с опцией Start, за исключением того, что воспроизведение выделенного звука останавливается при наступлении события синхронизации Stop. Эту опцию так же можно использовать для остановки воспроизведения определённого звука.
o Stream — потоковый звук; Flash обеспечивает «насильственную» синхронизацию анимации и потокового звука: например, если кадры анимации не успевают воспроизводиться на Web-странице с той же скоростью, что и потоковый звук, Flash-плеер пропускает некоторые кадры; воспроизведение потокового звука всегда прекращается при завершении анимации; кроме того, потоковый звук никогда не продолжается дольше, чем воспроизводятся связанные с ним кадры анимации.
Здесь мы выбираем Stop, так как считаем, что для нашего ролика лучше всего это подходит.
· Loops (Циклы) –здесь можно установить длительность звучания; она определяется, как число повторений звука; это число следует ввести в поле; например, если 3-секундный звук должен быть слышен в течение 30 секунд, следует ввести в поле Loops число 10.
Зададим значение 100, т.к. ролик рассчитан на Интернет.

Теперь проверим, что у нас получилось, но уже не с помощью контроллера, а с помощью пункта меню Control ->Test Movie или комбинацией кнопок Ctrl+Enter.

8. ПУБЛИКАЦИЯ ФИЛЬМА

Теперь мы займемся публикацией фильма. Сначала мы выставим нужные нам параметры публикации, для этого воспользуемся пунктом меню File->Publish Settings или комбинацией кнопок клавиатуры Ctrl+Shift+F12, после чего на экране появится следующее окно:

Оно содержит три вкладки Formats, Flash, HTML. В первой вкладке указаны типы файлов, которые можно получить после публикации. Мы выберем: .swf, .html, .gif, .exe. Мы можем снять галочку в строке Use default names, что позволит сменить имена генерирующихся файлов во время публикации, но нам это неважно поэтому мы оставим её без изменений.

Теперь перейдем к следующей вкладке – Flash.

· Load Order (порядок загрузки). Этот параметр определяет то, каким образом программа Flash будет отображать первый кадр фильма при его загрузке в приложение или проигрыватель.
o Bottom Up (снизу вверх) –слои загружаются в возрастающем порядке: сначала самый нижний слой, затем последующий.
o Top Down (сверху вниз) –слои загружаются в порядке убывания.
· Generate size report (Создать отчёт). При установлении этого флажка команда Publish (публиковать) экспортирует файл .txt для просмотра в текстовом приложении.
· Omit Trace actions (отменить действия трассирования). При выборе этого параметра проигрыватель Flash игнорирует любые действия трассировки языка ActionScript.
· Protect from import (Защита от операции импортирования). Этот параметр гарантирует меры безопасности для .SWF-файла в Internet. При установке этого флажка .SWF-файл нельзя импортировать обратно в авторскую среду редактирования Flash 5 или изменить его каким-либо образом.
· Debugging Permitted (Разрешить отладку). Если этот флажок установлен, вы можете получить доступ к панели Debugger (отладчик) в среде отладки фильма или из Web-браузера, который использует встраиваемый дополнительный модуль Flash Debug Player или соответствующий элемент управления ActiveX.
· Password (Пароль). Если вы установили флажок Debugging Permitted (Разрешить отладку), то в этом поле можете ввести пароль для получения доступа к панели Debugger (Отладчик).
· JPEG Quality (Качество JPEG). Этот ползунок и расположенное рядом текстовое поле определяют уровень сжатия JPEG, который принадлежит к растровому изображению в фильме Flash.
· Audio Stream (Аудиопоток). Этот параметр отображает схему текущего сжатия для потокового сжатия. С помощью кнопки Set можно выставить параметры.
· Audio Event (Аудиособытие). Этот параметр такой же, как и предыдущий, но для звуков с синхронизацией типа Event (событие).
· Override sound settings (Перезаписать параметры звука). Если необходимо применить параметры Audio Event и Audio Stream
соответственно для всех потоковых звуков и звуковых событий и отменить любую уникальную схему сжатия, заданную для конкретного звука в библиотеке Flash, нужно установить этот флажок.
· Version (Версия). Здесь можно выбрать версию программы Flash для сохраняемого SWF-файла. Лучше выставить версию ниже, чтобы можно было смотреть данный фильм во всех версиях, иначе, если просмотреть этот файл, например, в версии 5, а он будет сохранён в версии MX, то возникнут некие проблемы.

В этой вкладке оставим всё без изменений, так же как и в следующей вкладке HTML.
Теперь выберем пункт меню File ->Publish или Ctrl+F12, после чего произойдёт публикация фильма, и появятся новые файлы с выбранными нами расширениями, т.е. .swf, .html, .gif, .exe.