Методическое пособие Flash - технологии.

1 Принципы Macromedia Flash.

 

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

1.     Использование  обозначений для элементов, которые появляются больше одного раза.

2.     Объединение кадров в действиях перемещения (motion tweens), которые позволяет автоматически просчитать некоторые промежуточные моменты перемещения, для ускорения  разработки проектов.

3.     Объединение кадров в действиях трансформации (shape tweens), которые позволяет автоматически просчитать некоторые промежуточные моменты трансформации объектов, для ускорения  разработки проектов.

4.     Сокращение числа различных типов линий (пунктир, точки и т.п). Линии, нарисованные инструментом карандаш требуют меньше памяти, чем мазки кистью.

5.     Использование слоёв, для разбиения перекрывающихся объектов клипа.

6.     Сокращение  числа различных шрифтов и стилей, путём преобразования их в объекты векторной графики.

7.     Применение звукового формата mp3, как самого высококачественного и экономного музыкального формата.

8.     Использование возможности анимации растровых изображений, или для статических элементов закраски объектов и фона.

9.     Применение сценариев (Actions Script) вплоть до вставка их в отдельные кадры фильма.

10. Возможность сгруппировывать объекты на различных слоях.

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

12. Использование единой палитры web-safe, во  избежание расхождений с цветами броузеров.

13. Применение компонента управления проектом Library, который позволяет быстро найти любой объект и поменять его свойства.

      14. Возможность вставки в текущий проект раннее созданный другой проект.

 

Интерфейс программы Flash. Окно программы Flash.

1.1 Окно программы Flash

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

Рис. 1.1. Рабочий стол программы Flash

 

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

Когда рабочий стол фильма развернут во весь экран, то перейти от фильма к фильму можно, выбрав его название в нижней части меню Windows (Окно).

Слева находятся панель инструментов (Tools). С помощью нее можно выбирать инструменты, а также управлять рабочей областью, модифицировать объекты и выбирать простые цвета. Справа находятся диалоги настройки инструментов, цвета, текста, свойства кадров и объектов. Посередине - рабочая область (кадр), где мы будем творить, а над ней шкала времени (Timeline). В нижней части находится панель (Properties) свойства объекта.

 

1.2 Панель инструментов

Панель инструментов обеспечивает доступ к инструментам, которые применяются для создания и редактирования графических объектов. Панель инструментов разделена на четыре части (рис.1.2).

1.Tools (Инструменты), в которой собраны кнопки выбора конкретного инструмента; эти инструменты разделяются на два вида: инструменты выбора и инструменты рисования; 

2.View (Вид), содержащая средства управления просмотром изображения, имеющегося на столе; в этом поле расположены две кнопки:

- Hand Tool (Рука) - щелчок на кнопке включает режим, при котором рабочую область можно перемещать в любом направлении с помощью мыши, не пользуясь полосами прокрутки;

- Zoom Tool (Масштаб) - щелчок на кнопке включает режим быстрого масштабирования изображения в рабочей области; при включении этого режима в поле Options появляются две дополнительные кнопки, позволяющие выбирать направление масштабирования (увеличение или уменьшение);

3.Colors (Цвета), кнопки которой обеспечивают раздельный выбор цвета контура и заливки объектов;

4.Options (Параметры), на которой представлены элементы установки дополнительных параметров выбранного инструмента; для инструментов, не имеющих дополнительных параметров, поле Options остается пустым.

 

 

Рис. 1.2 Панель инструментов

 

1.3 Временная шкала (Timeline).

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

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

По умолчанию за 1 секунду фильм проигрывает 12 кадров.

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

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

 

 

Рис. 1.3 Временная шкала

 

Видимость слоя (Глаз) позволяет отключать и включать видимость данного слоя

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

 Кадры (Frame). Чтобы перейти из одного кадра в другой  - щелкнуть по соответствующему фрейму  на временной шкале.

Операции с фреймами (кадрами)

1)Вставить пустой ключевой фрейм - Insert/Blank keyframe (F7).

2)Вставить Ключевой фрейм, повторяющий содержание предыдущего - Insert-/Keyframe (F6).

3)Очистить ключевой кадр – Insert/Clear keyframe ( Shift+F6).

4)Вставить обычный фрейм – Insert/Frame (F5).

5)Удалить фрейм – Insert/Remove Frames (Shift+F5).

6)Cкопировать фрейм  - ПКМ/Copy Frames, Ctrl+C.

Слои (Layer)

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

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

Важно знать!

Есть достаточно большое количество приемов, в которых используются слои, но во Flash без них просто нельзя обойтись по одной важной причине: в один момент времени для каждого объекта анимации нужен отдельный слой. Объектом анимации считается фигура (Shape) или символ (Symbol).

 

1.4. Размер кадра и параметры фильма

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

Размеры кадра являются атрибутом фильма. Поэтому все кадры фильма должны быть одного и того же размера.

Однако можно поменять как частоту кадров, так и размер кадра: Modify/Document (или Ctrl+J) (Рис. 1.4.)

1. Параметр Частота кадров (исходный фрейм) определяет скорость, с которой кадры сменяют друг друга.

2. Группа параметров Размеры (градусы) предназначена для изменения размеров кадра.

3. Кнопка Принтер позволяет сделать размеры кадра равными размеру листа, на котором этот кадр может быть напечатан.

4. Кнопка Содержимое подгоняет размет кадра под размер его содержимого.

5. Список Цвет фона позволяет задать фон всех кадров фильма.

6. Кнопка Сохранить для использования по умолчанию позволяет сохранить сделанные установки и использовать их в дальнейшем как принятые по умолчанию.

Рис. 1.4. Свойство фильма

 

1.5. Сохранение и публикация проекта

Создав проект, его необходимо сохранить и сделать публикацию. Сохранив объект (File/Save As…) вы сохраните только исходный файл редактирования во Flash. Он имеет формат расширения *.fla. Открыв файл, сохраненный в этом формате, вы попадаете к своему файлу через программу Flash, т.е. в режим редактирования анимации. Поэтому проект необходимо публиковать: Fail/Publish

В этом случае по умолчанию проект сохраниться в 3 форматах:

1)  *.fla

2) *.html

3) *.swf

В формате *.html проект вставлен в Интернет-страницу.

Формат *.swf – местный формат и самый распространенный. Документ, сохраненный в этом формате запускает Flash-проигрыватель и демонстрирует документ. Если на компьютере неустановлен Flash-проигрыватель, то анимация не воспроизведется. Однако ее можно воспроизвести через Internet Explorer. 

Также можно опубликовать проект и в другие форматы, установив параметры публикации: File/Publish Settings…

Анимация, сохраненная в *.exe – файле не требует Flash-проигрывателя, однако размер файла превышает 368 КБ.

 

1.6. Горячие клавиши

В процессе работы в программе Flash удобнее пользоваться клавиатурными сокращениями:  

F5 – вставка фрейма

F6 – вставка ключевого фрейма

F7 – вставка пустого ключевого фрейма

F8 – конвертирование в символ

Ctrl+F – вызов палитры фреймов

Shift+F6 - очистить ключевой кадр

Shift+F5 - удалить кадр

Ctrl+L – вызов библиотеки символов

Ctrl+Enter – просмотр анимации. Публикация проекта.

Ctrl+B – перевод растрового изображения

 

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

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

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

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

 

3.1. Виды анимации

Существуют 3  вида анимации:

1.     Покадровая анимация

2.     Автоматическая анимация

3.     Анимация трансформации объекта

 

3.1.1. Покадровая анимация

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

Чтобы создать покадровую анимация  движения объекта или символа необходимо:

1.     Создать объект, т.е. нарисовать его.

2.     Вставить ключевой фрейм (ПКМ/Insert Keyframe или нажать клавишу F6)

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

4.     Возвращаемся к 2-му пункту

Создаем незначительное перемещение или деформацию объекта на каждом кадре. Это принцип покадровой анимации.

 

 

3.1.2. Автоматическая анимация

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

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

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

Существует два типа промежуточных кадров - кадры, построенные на основе изменения геометрии (Shape tweening) или кадры, построенные на изменении символов (Motion tweening).

Чтобы создать автоматическую анимацию символа  необходимо:

1.     На первом  фрейме создать объект

2.     Выделить объект и конвертировать его в Movie Clip (Ролик).Для этого необходимо выделить объект и нажать F8 (Insert/Convert to Symbol/Movie Clip - Вставка/Конвертировать в символ/Ролик)

3.     Задать начальные свойства и параметры символа

4.     На временной шкале, через некоторый промежуток времени (т.е через несколько пустых фреймов) вставить ключевой фрейм (Insert/KeyFrame - ПКМ/Вставить ключевой фрейм или F6)

5.     На последнем ключевом фрейме установить изменения в свойствах или параметрах символа.

6.     На любом из фреймов (кроме последнего ключевого) вставить автоматическую анимацию (Выделить фрейм, ПКМ/Create Motion Tween)

7.     Просмотреть получившуюся анимацию (Ctrl+Enter).

 

 

 

3.1.3. Анимация трансформации объекта

Даная анимация основана на изменении формы и цвета объекта.

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

3.1.3.1. Плавное изменение формы и цвета объекта

Пример №6. Плавное изменение формы и цвета объекта

1.     Нарисовать объект на первом фрейме. (Например, синий круг)

2.     На временной шкале, через некоторый промежуток времени (т.е через несколько пустых фреймов) вставить ключевой фрейм (ПКМ/Insert Keyframe или F6) (Например на 15 фрейм)

3.     На 15 фрейме удалить синий круг и вместо него нарисовать красный квадрат.

(Чтобы удалить объект – выделить рамкой инструментом Arrow и нажать Delete)

4. Перейти на первый ключевой фрейм. Открыть палитру Properties(Ctrl+F3) и в ней указать в пункте Tween значение Shape - Форма (Вместо None)

                             

Рис. 3.1.

 

Символы во Flash

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

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

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

Конвертирование – это процесс перехода объекта в символ.

Существует три вида символов (рис. 3.3.):

- Ролик (Анимация)  (Movie clip).

- Кнопка (Button). 

- Графика (Изображение) (Graphic).

 

Рис. 3.3. Свойство символа

 

- Ролик (Анимация)  (Movie clip).

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

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

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

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

Символы можно создавать как "с нуля" (Insert / New Symbol, Ctrl+F8), так и используя текущее выделение, поместив его сразу в символ (Insert / Convert to Symbol, F8). Второй прием используется гораздо чаще, чем первое, т.к. в этом случае отпадает надобность его позиционировать и изменять под нужный размер.

 

3.3. Анимация движения

3.3.1. Прямолинейной движение объекта

Прямолинейной движение объекта – это движение по прямой линии. Например: полет ракеты, движение машины по шоссе, дождь.

Пример №7. Прямолинейное движение объекта

1.     Нарисовать объект на первом фрейме.

2.     Выделить объект и конвертировать в символ Movie Clip (Ролик).

3.     На временной шкале, через некоторый промежуток времени (т.е через несколько пустых фреймов) вставить ключевой фрейм (ПКМ/Insert Keyframe или F6). Например, на 60 фрейм.

4.     На последнем (60 фрейме) ключевом фрейме переместить объект в конечную точку движения.

5.     На любом из фреймов (кроме последнего ключевого) вставить автоматическую анимацию (Выделить фрейм, ПКМ/Create Motion Tween).

6.     Просмотреть получившуюся анимацию (Ctrl+Enter).

 

Важно знать!

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

V = S / t,

где V – скорость объекта, S – расстояние от начальной точки движения до конечной точки, t – время анимации, регулируемое на временной шкале.

Скорость движения символа прямопропорционально расстоянию и обратнопропорционально времени.

Чтобы увеличить скорость движения символа необходимо уменьшить время, т.е. количество кадров на временной шкале или увеличить расстояние от стартовой точки движения до конечной точки.

Чтобы уменьшить скорость движения символа необходимо увеличить время, т.е. добавить количество кадров на временной шкале или уменьшить расстояние от начальной точки движения до конечной точки.

 

4. Вращение объекта вокруг своей оси или выбранной точки

Иногда требуется в процессе анимации, чтобы объект вращался вокруг своей оси. Например, в мультике это может быть «Солнце». Существует два способа сделать это.

Первый способ применяется в том случае, если необходимо, чтобы объект поворачивался не на 180⁰ , а меньше. Например, на 90⁰. Для этого, конечно же, лучше использовать автоматическую анимацию. На последнем ключевом фрейме развернуть объект на определенное количество градусов, используя команду ПКМ/Rotate and Skew.

Второй способ применяется в том случае, если нужно, чтобы объект крутился вокруг своей оси или выбранной точке определенное количество поворотов. (Во Flash это количество поворотов от 1 до 65535). Причем повороты могут быть только полными.

Чтобы объект повернулся вокруг своей оси 5 раз, необходимо создать для него автоматическую анимацию, открыть палитру Properties и в пункте Rotate выбрать значение:

CW – вращение объекта по часовой стрелки.

CСW – вращение объекта против часовой стрелке.

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

По умолчанию вращение символа осуществляется относительно центра, т.е. точка вращения находится в центре символа.

Чтобы поменять центр символа необходимо выделить его инструментом Free Transform и переместите центр (кружок) в нужное место.

 

4.3. Комплексная анимация Ролик-Графика, Ролик-Ролик-…

Чтобы сделать клип независимый во времени от общей анимации, в котором происходит анимация необходимо:

1)      Конвертировать объект в символ Movie (Ролик).

2)      «Зайти» в режим редактирования этого ролика (Два раза щелкнуть по символу).

3)      В нем создать анимацию, которая будет характерна только для этого ролика. 

Чтобы выйти из «внутренней» анимации - два раза щелкните по любой пустой части кадра или вернуться на уровень назад, например из Symbol1 в Scene1.

 

Интерактивная анимация

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

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

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

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

Простейшим (и наиболее часто используемым) элементом управления является кнопка. В качестве примера рассмотрим создание кнопки.

 

5.1. Создание кнопки других элементов интерфейсов

Чтобы создать кнопку ее необходимо нарисовать и конвертировать в Button (Кнопка).

У любой кнопки существует 4 состояния, редактирование которых осуществляется в режиме редактирования кнопки.

Чтобы «зайти» в режим редактирования кнопки – два раза щелкнуть по созданной кнопке (рис 5.1.)

Режимы редактирования кнопки

·         Up - обычное состояние кнопки.

·         Over - когда курсор мышки находится над кнопкой.

·         Down - когда курсор находится над кнопкой и нажата клавиша мыши.

·         Hit – область кнопки (применяется, когда первые три режима отсутствуют, а кнопка нужна).

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

 

Пример №15. Создания функциональной кнопки

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

Алгоритм:

1. Нарисовать общий вид будущей кнопки (овал, с заливкой синего цвета).

2. Выделение рисунка будущей кнопки (рис. 5.2.)

3. Конвертирование объект в символ. F8/Button.

Рис. 5.2. Общий вид кнопки в Scene 1

 

4. Двойной щелчок по нарисованной кнопке - переход в режим редактирования кнопки (рис. 5.3.)

Рис. 5.3. Вид кнопки в режиме редактирования кнопки Up

 

5. Вставка ключевого фрейма кнопки во 2,3,4 фреймы кнопки.

6. Переход в режим редактирования 2-го фрейма кнопки Over (рис.5.4.)

Рис. 5.4. Режим редактирования кнопки Over –

при наведении мышью над кнопкой

 

7. ПКМ/Scale.

8. Увеличение кнопки.

9. Желтая заливка кнопки (рис. 5.5)

Рис.5.5. Смена цвета и размера кнопки в режиме Over

 

10. Переход в режим редактирования 3-го фрейма кнопки Down.

11. ПКМ/Scale.

12. Уменьшение кнопки.

13. Красная заливка кнопки (рис. 5.6).

Рис. 5.6. Режим редактирования кнопки Down –

при нажатии мышью по кнопке

 

14. Переход из режима редактирования кнопки в режим редактирования кадров (щелкнуть на Scene 1).

15. Переход в режим редактирования 1-го фрейма.

16. ПКМ/Action по 1-му фрейму.

17. Команда: Stop () - стоять (рис. 5.7.)

Рис.5.7. Панель Action frame 1

 

18. ПКМ/Action (по кнопке)

19. Команда: gotoAndStop (25) – перейти на 25 фрейм и остановиться (рис. 5.8.)

Рис. 5.8. Программный код для Button1

 

18. Создать пустой кадр на 25 фрейме. Перейдем на 25 кадр и нажмем клавишу F7 (рис. 5.9.)

Рис. 5.9. Временная диаграмма анимации

 

19. На 25 кадре нарисовать кнопку назад.

20. ПКМ/Action (по кнопке). Команда gotoAndStop (1) (рис. 5.9.)

Рис. 5.10. Программный код для Button2

21. File/Save As...

22. File/Publish

 

Программная анимация

Программная анимация – это анимация с применением элементов программирования Action Script

Фильм, созданный с использованием интерактивной анимации позволит пользователю, например, управлять его воспроизведением. Создается интерактивная анимация при помощи элементов встроенного языка ActionScript, при этом используется панель Action (действия). Панель может быть вызвана на экран выбором команды Window/Action (Окно/Действия).

В левой части панели находится перечень действий:

·        Basic Action (Основные действия);

·        Action (Операции);

·        Operators (Операторы);

·        Function (Функции);

·        Properties (Свойства);

·        Objects Объекты).

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

В нижней части содержатся поля для ввода параметров какого-либо действия.

Действие может быть назначено кадру фильма или клипа, экземпляру (символу) кнопки, экземпляру клипа.

 

Пример. Управление проигрыванием анимации

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

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

2.     В слое «кнопка» создайте прямоугольник размером во весь рабочий лист, его цвет неважен, т. к. сделаем его прозрачным: панель Mixer, команда Alpha - 0%. В первом кадре Up (Отпущена) появится ключевой кадр, остальные кадры нам не понадобятся.

3.     В режиме редактирования сцены в слое «кнопка» вызовите контекстное меню, нажав правую кнопку мыши на кнопке, выберете пункт Action. На экране появится панель Action.

4.     В левой части панели выберите категорию Basic Action (Основные действия), из открывшегося списка выберите команду On Mouse Event (События мыши). В правой части появится программный код, а в нижней части - параметры данной команды:

·        Press (Нажатие);

·        Release (Отпускание);

·        Release Outside (Отпускание за пределами);

·        Roll Over (Наведение);

·        Roll Out (Удаление);

·        Drag Over (Возврат);

·        Drag Out (Сдвигание);

·        Key Press (Нажатие клавиши).

5.     Снимите флажок Release и поставьте флажок Key Press, нажмите клавишу «пробел».

6.     Затем в списке Basic Action двойным щелчком мыши выберите команду Stop. Программный код для клавиши «пробел» готов. Поставьте курсор на закрывающейся фигурной скобке программного кода и снова из списка Basic  Action выберите команду On Mouse Event для программирования кнопки «Enter», проделайте аналогичные действия, но вместо команды Stop выберите команду Play.

7.     Закройте панель Action, сохраните фильм и протестируйте его.

 

7.1. Основы Action Script

7.1.1. Объектная модель ActionScript

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

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

Для описания действий над объектами, а также для указания подчиненности объекта обычно применяется так называемая «точечная нотация». Например, чтобы указать, что к кнопке Button_l следует применить метод onPress(), используется конструкция

Button_1. onPress().

Если же требуется указать на принадлежность кнопки Button_1 клипу Сliр_2, то запись может выглядеть так:

Clip_2. Button_1.

Объектная модель, применяемая в ActionScript, во многом аналогична объектным моделям других сценарных языков (например, JavaScript). Вместе с тем, существуют и определенные различия. Основное из них состоит в том, что в ActionScript иерархия объектов строится относительно Flash-плеера, а не относительно HTML-документа, отображаемого в окне Web-броузера.

Например, если HTML-документ содержит форму Form_l, в которой имеется кнопка Input_1, то в JavaScript «подчиненность» кнопки описывается следующим образом:

Documen t. Widow. Form_1. Input_1.

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

Form_1. Input_1.

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

_root. Clip_l.

Ключевое слово _ root используется в качестве имени основного фильма и в данном случае может быть опущено. Если же клип является частью другого, «родительского», клипа, то для указания его подчиненности может использоваться ключевое слово _parent, например:

_parent. Clip_1.

Как было сказано выше, корневым объектом, неявно присутствующим в любом сценарии, является Flash-плеер. На следующем уровне располагаются четыре класса объектов:

·        Movie (Объекты фильма);

·        Core (Объекты ядра);

·        Client/Server (Объекты клиент-серверной среды исполнения);

·        Authoring (Объекты среды разработки).

Объекты класса Movie позволяют представить в сценарии взаимоотношения между элементами фильма (то есть структуру фильма), а также управлять параметрами и поведением элементов фильма. К этому классу относятся, в частности, следующие объекты:

·        Button (Кнопка) — объект, представляющий в сценарии кнопку; для такого объекта может динамически изменяться, например, порядок установки фокуса ввода;

·        MovieClip (Клип) - объект, представляющий в сценарии клип; для него может динамически изменяться, например, число вложенных клипов;

·        Mouse (Мышь) — объект, представляющий в сценарии указатель мыши; он позволяет управлять видимостью и стилем указателя;

·        Key (Клавиатура) — объект, представляющий в сценарии клавиши, используемые для управления фильмом;

·        Color (Цвет) — объект, представляющий в сценарии палитру клипа и, соответственно, позволяющий изменять эту палитру;

·        Sound (Звук) - объект, представляющий -в сценарии звуковой символ, связанный с кнопкой или клипом;

·        Stage (Стол) — объект, предназначенный для управления некоторыми параметрами стола (в частности, масштабом изображения);

·        TextField (Текстовое поле) - объект, представляющий в сценарии динамическое текстовое поле или поле редактирования;

·        TextFormat (Формат текста) - объект, позволяющий управлять из сценария параметрами шрифта текстового поля.

Между объектами классов Button и MovieClip в ActionScript весьма сложно определить отношения подчиненности: они могут изменяться от одного фильма к другому и даже от одной сцены к другой. Например, i одной сцене кнопка может входить в состав клипа, а в другой - клиг может использоваться для «оживления» изображения кнопки, остальные же объекты класса Movie (за исключением, пожалуй, TextField ) можно считать подчиненными по отношению к объектам Button и MovieClip, поскольку могут входить в их состав, но не наоборот.

Замечание!

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

Объекты класса Core предназначены для работы с объектами фильма и носят вспомогательную роль. Их следует использовать в том случае, если стандартных методов оказывается недостаточно для управления (изменения свойств) объектами фильма. В класс Core входят, в частности, следующие объекты:

Math (Математика) - объект, используемый в сценарии для работы с числовыми величинами; в отличие от всех других классов языка ActionScript, объект Math является и единственным экземпляром этого класса; то есть методы данного класса могут применяться непосредственно к объекту Math; например, чтобы получить значение косинуса с помощью метода cos, можно записать: Math.cos(3);

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

String (Строка) - объект, используемый в сценарии для работы со строками;

Date (Дата) - объект, используемый в сценарии для работы с календарными датами и временем.

Объекты класса Client/Server предназначены для работы с документами (Web-страницами), написанными на языке XML. Некоторые из этих объектов обеспечивают загрузку, обработку и пересылку XML-документов, другие - обслуживают соединения через сокеты. Тем самым ActionScript реализует поддержку серверной обработки XML-документов, содержащих Flash-фильмы.

Объект класса Authoring предназначен для управления параметрами среды разработки Flash-фильмов. Для него предусмотрены два основных метода: install и uninstall.