Flash   ООП   PHP   СУБД   WEB   БДИ   ЯиМП   3GL   4GL   5GL   ММТ   ТПОИ   ТП

Лабораторная работа 8 по Adobe Flash

  1. Теоретическая часть
  2. Преимущества технологии Flash
  3. Историческая справка
  4. Панель инструментов
  5. Временная шкала
  6. Кадры
  7. Символы
  8. Покадровая анимация
  9. Анимация с построение промежуточных кадров
  10. Практическая часть

В настоящее время существует несколько технологий создания анимации: анимационный формат GIF, Flash, Java и JavaScript. Преимущества технологии Flash. По сравнению с GIF-анимацией возможности технологии Flash значительно шире. Она представляет собой объектно-ориентированную визуальную 4GL среду Flash, являющуюся оболочкой (надстройкой) над объектно-ориентированным скриптовым языком ActionScript, который компилируется в байт-код внутри Flash-видеоролика и позволяет получать сложные интерактивные сценарии, управляющие процессом демонстрации видео в зависимости от управляющих воздействий со стороны пользователя, сетевых и программных событий.

Теоретическая часть

1. Технология: основные функциональные возможности

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

В настоящее время существует несколько технологий создания анимации: анимационный формат GIF, Flash, Java и JavaScript.

Преимущества технологии Flash

По сравнению с GIF-анимацией, возможности технологии Flash значительно шире.

Технология Flash:

Основное назначение программы Adobe (Macromedia) Flash - разработка интерактивных Web-сайтов.

Историческая справка

Приложение Flash начиналось с маленькой программы, предназначенной для создания векторной графики и анимации, которая называлась Future Splash Animator. В 1997 году компания Macromedia приобрела Future Splash Animator, изменила название на Flash и представила программу как инструмент подготовки графики для World Wide Web. Macromedia Flash выгодно выделяется среди программ подготовки векторной графики для Web тем, что включает в себя все необходимые инструменты: для создания графики, для анимации подготовленных изображений, для разработки интерактивных элементов, для создания кода HTML, необходимого, чтобы поместить фильм Flash на Web-странице и просматривать его с помощью браузера.

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

Покупка Macromedia позволила Adobe еще более усилить свои позиции на рынке графического и мультимедийного программного обеспечения, имея в своей линейке полный спектр программных продуктов, необходимых как профессиональному дизайнеру и web-разработчику, так и начинающему специалисту в данной области. Теперь портфолио Adobe пополнится такими решениями, как Adobe Design Bundle (включает все продукты, входящие в Adobe Creative Suite 2 Premium плюс Macromedia Flash Professional 8), Adobe PDF и Macromedia Flash в одном пакете, Adobe Web Bundle (включает все продукты, входящие в Adobe Creative Suite 2 Premium плюс Macromedia Studio 8), а решение для web-дизайна и разработки Macromedia Studio 8 теперь может работать в единой среде Adobe Creative Suite 2 Premium.

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

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

это "выделение" с помощью него можно выделять прямоугольные области графики и объекты;

  1. это так называемое "суб выделение" при помощи него можно координировать кривые, составляющие фигуру;
  2. "прямая" - позволяет нарисовать прямую линию;
  3. "лассо" - можно захватывать часть изображения;

Инструменты рисования Flash

Рис.1_1 - Инструменты рисования

  1. "pen-tool" - позволяет нарисовать линии по точкам и задать угол;
  2. "текст" - текстовый ввод;
  3. "круг" - рисует окружность, либо овал;
  4. "квадрат" - рисует квадрат либо прямоугольник;
  5. "карандаш" - рисование от руки, карандашом;
  6. "кисть" - рисование кистью;
  7. "трансформация" - вращение, изменение размеров;
  8. "изменение заливки"- позволяет управлять заливкой: направление, радиус;
  9. "чернила" - придает дополнительную толщину;
  10. "заливка" - можно заливать цветами объекты;
  11. "пипетка" - можно выбрать любой цвет из пределов рабочей области;
  12. "ластик" - стирает линии и заливку. Вы можете задать опции ластику так, что он будет стирать:

Временная шкала

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

Временная шкала

Рис.1_2 - Временная шкала

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

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

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

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

Кадры

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

В компьютерной анимации существует понятие - ключевые кадры (Keyframes). Это кадры, которые Flash не вправе изменять в процессе создания анимации. Вы задаете эти ключевые кадры, а промежуточные кадры между ними выстраивает Flash. Существует два типа промежуточных кадров - кадры, построенные на основе изменения геометрии(shape tweening) или кадры, построенные на изменении символов(motion tweening).

Операции с кадрами:

  1. Вставить пустой ключевой кадр - Insert - Teemline -  Blank Keyframe.
  2. Ключевой кадр, повторяющий содержание предыдущего - Insert - Teemline -  Keyframe.
  3. Очистить ключевой кадр - Кликнуть по кадру правой кнопкой мыши,Clear keyframe.
  4. Вставить обычный кадр - Insert - Teemline -  Frame.
  5. Удалить кадр - Кликнуть по кадру правой кнопкой мыши,Remove Frames.

Символы

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

Например, можно сделать символы - колесо, корпус, стекла, антенны. Потом все это объединить в символ - автомобиль.

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

Существует три вида символов: анимация (movie clip), кнопка (button) и изображение (graphic):

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

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

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

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

На временной шкале покадровая анимация выглядит следующим образом:

Рис.1_3 - Покадровая анимация

Достоинства:

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

Недостатки: 

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

Анимация с построение промежуточных кадров

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

Скорость и плавность анимации зависят от количества кадров, которые вы отводите под движение и скорости вашего Flash фильма (movie).

Во Flash существует два варианта построения промежуточных изображений - motion tweening (построение анимации на основе модификации символов) и shape tweening (построение анимации на основе изменения формы).

Практическая часть

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

Упражнение 1. Создадим прыгающий мячик

1 шаг. Выберите File_New, затем Modify_Document и задайте следующие параметры рабочей области: 200px(Width) и 250 px(Height)

2 шаг. Нарисуйте круг в верхней части листа. Залейте круг (см. рис. 2_1 и 2_2).

Рис. 2_1 - Градиент

Получается следующий экземпляр:

Рис. 2_2 - Мячик

3 шаг. Выделите мячик и нажмитеModify_Group. 

4 шаг. Кликните по объекту правой кнопкой мыши, выберите - Convert to Symbol.

5шаг. Сделайте 10 кадр ключевым и с помощью инструмента выделения переместите мячик в нижнюю часть листа.

6 шаг. Сделайте 20 кадр ключевым. Переместите мячик вверх.

7 шаг.Вернитесь на 10 кадр. Выделите мяч и нажмитеModify_Transform_Scale. Сожмите его. 

8 шаг. Добавим движение. Кликните два раза на 10 кадре и установите на вкладкеProperties под рабочей областью значениеTweening_Motion. Проверьте наличие флажкаScale.

9 шаг. Кликните два раза на 1 кадре и установитеTweening_Motion. Уберите флажокScale.

10 шаг. Просмотрите движениеControl_Play. Сохраните работу.

Примечание

При выборе стандартной команды Save меню File проект сохраняется формате fla и открывается в этой же программе с возможностью редактирования.

Для размещения файла на страницах Интернет или просмотре в программеAdobe Flash Player, мультик необходимо экспортировать в видеоформатswf.

А для просмотра мультика без специальных средств необходимо сначалаэкспортировать его в форматswf, а затем переформатировать его средствами программы FlashPlayer (устанавливается вместе сAdobe (Macromedia)Flash) и запускается через менюПуск. В главном меню программы, после открытия файла в форматеswf, необходимо выбрать командуCreate Projector и указать место и имя файла в форматеexe.

Упражнение 2. Изобразим движение лягушки

1 шаг. ВыберитеFile_New и задайте свои параметры рабочей области.

2 шаг. Импортируйте файл с изображением лягушки. Для этого выберите команду File_Import_Import to Stage.В диалоговом окнеImport выберите формат файла (*.wmf) и выделите файл с именемLyagushka.

3 шаг. Применим командуModify_Break Apart. Она делит изображение на области, которые можно изменять независимо друг от друга с помощью инструментов рисования и закрашивания. Раскрасьте рисунок.

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

5 шаг. В пункте менюInsert(или из контекстного меню 10-го кадра) выберите пунктCreate Motion Tween, после чего область с 1-го по 10-й кадр станет синего цвета со штриховой линией

6 шаг. Переместите лягушку на 1-м кадре в верхний правый угол, а на 10-м - в нижний левый угол.

7 шаг. Сделайте 10-й кадр ключевым (из контекстного меню).

8 шаг. Просмотрите движениеControl_Play. Сохраните работу.

9. шаг. Самостоятельно создайте «зигзагообразную» траекторию движения лягушки.

Появление или исчезновение объекта из глубины

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

  1.  Сделайте текстовое поле, напишите в нем слово и превратите текстовое поле в клип (Insert/Convert to Symbol). Расположите поле в центре кадра.
  2.  Создайте второй ключевой фрейм в 25 кадре (F6). Увеличьте размер текстового поля до очень больших размеров (Scale)
  3.  Создайте анимацию движения.
  4.  Протестируйте клип. 

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

Вращение объекта вокруг оси Y или X

Довольно распространенный прием для создания иллюзии трехмерного пространства на экране. Часто применяется в кнопках.

  1. Создайте сначала первый и третий ключевые фреймы
  2. Сделайте анимацию движения из первого фрейма в третий
  3. Примерно посредине вставьте второй ключевой фрейм (F6) и уменьшите ширину объекта до 10%
  4. Протестируйте мультик, добавьте еще несколько ключевых фреймов, поменяйте заливку.

Задание 2. Создайте модель флюгера или пропеллера.

Хамелеон, или Фигура, плавно меняющая цвет

ЭффектTint (Window/Panels/Effect) используется для плавного изменения цвета объекта.

  1. Нарисуйте прямоугольник со скругленными углами (настройка -Round Rectangle Radius) произвольного цвета.
  2. Создайте последовательность кадров (15), добавьте ключевой кадр и добавьте движениеMotion Tween.
  3. Выберите свойствоTint эффектаColor на панели Properties при выбранном инструментеPaint Bucket Tool,измените цвет объекта на втором ключевом фрейме и уровень яркости в процентах на этой же панели.
  4. Протестируйте мультик, чтобы посмотреть, как изменяется цвет.

Задание 3. Создайте модель светофора.

Задание 4: Создать два произвольных объекта, движущихся по разным траекториям

Примечание

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

Секция слоёв располагается в левой части временной шкалы. Для создания нового слоя кликните правой кнопкой мыши по названию первого слоя (по умолчаниюLayer 1) и выберите в контекстном менюInsert Layer.

Вопрос: каким ещё способом можно добавить слой?

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

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

Упражнение 3 Изобразим движение рыбки по волнам

1 шаг. Нарисовать рыбку и импортировать её в библиотеку (для этого достаточно конвертировать объект в символ). Просмотреть содержимое библиотеки можно с помощью командыWindow_Library.

2 шаг. Сделайте 15-й кадр ключевым. 

3 шаг. Для задания траектории (направляющего слоя) вызовите правой кнопкой на слое с объектом контекстное меню и выберите пунктAdd Motion Guide. Сверху добавится еще один слой типаGuide, а обозначение слоя с объектом при этом сдвинется слегка вправо.

4 шаг. Нарисуйте вGuide слое любую кривую (она может пересекать себя), по которой будет двигаться объект.

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

Добавьте движение и протестируйте анимацию.

Замечание

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

Вы можете на вкладке Frame отметить опциюOrient to Path. Это доступно при выделенном объекте. В результате объект будет двигаться с сохранением направления угла поворота относительно кривой.

Задание 5: Создайте произвольный ролик, используя анимацию движения, содержащий не менее 3-х слоев и 2-х движущихся объектов

Анимация формы

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

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

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

После того как у вас есть два ключевых кадра, вы делаете активным первый из них, и выбираете на панелина панелиProperties для свойстваTween задайтеShape.

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

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

Задание 6.

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

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

Пользоваться ими очень легко:

1) на первом ключевом кадре (с которого начинается анимация) вы добавляете контрольную точку (Modify_Shape_Add shape hint). На сцене появится маленькая красная точка, обозначенная буквой латинского алфавита. Вы прикрепляете ее к той части изображения, которая двигается не так, как вы хотели;

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

Удалить все точки можно с помощьюModify_ Shape_Remove All Hints.Удалить же единственную точку можно, нажав на ней правую кнопку мыши, и в контекстном меню выбравRemove Hint.

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

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

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

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

Задание 7

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

Flash   ООП   PHP   СУБД   WEB   БДИ   ЯиМП   3GL   4GL   5GL   ММТ   ТПОИ   ТП

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

НОВОСТИ ФОРУМА

Форум Рыцари теории эфира


Рыцари теории эфира
 10.11.2021 - 12:37: ПЕРСОНАЛИИ - Personalias -> WHO IS WHO - КТО ЕСТЬ КТО - Карим_Хайдаров.
10.11.2021 - 12:36: СОВЕСТЬ - Conscience -> РАСЧЕЛОВЕЧИВАНИЕ ЧЕЛОВЕКА. КОМУ ЭТО НАДО? - Карим_Хайдаров.
10.11.2021 - 12:36: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ - Upbringing, Inlightening, Education -> Просвещение от д.м.н. Александра Алексеевича Редько - Карим_Хайдаров.
10.11.2021 - 12:35: ЭКОЛОГИЯ - Ecology -> Биологическая безопасность населения - Карим_Хайдаров.
10.11.2021 - 12:34: ВОЙНА, ПОЛИТИКА И НАУКА - War, Politics and Science -> Проблема государственного терроризма - Карим_Хайдаров.
10.11.2021 - 12:34: ВОЙНА, ПОЛИТИКА И НАУКА - War, Politics and Science -> ПРАВОСУДИЯ.НЕТ - Карим_Хайдаров.
10.11.2021 - 12:34: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ - Upbringing, Inlightening, Education -> Просвещение от Вадима Глогера, США - Карим_Хайдаров.
10.11.2021 - 09:18: НОВЫЕ ТЕХНОЛОГИИ - New Technologies -> Волновая генетика Петра Гаряева, 5G-контроль и управление - Карим_Хайдаров.
10.11.2021 - 09:18: ЭКОЛОГИЯ - Ecology -> ЭКОЛОГИЯ ДЛЯ ВСЕХ - Карим_Хайдаров.
10.11.2021 - 09:16: ЭКОЛОГИЯ - Ecology -> ПРОБЛЕМЫ МЕДИЦИНЫ - Карим_Хайдаров.
10.11.2021 - 09:15: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ - Upbringing, Inlightening, Education -> Просвещение от Екатерины Коваленко - Карим_Хайдаров.
10.11.2021 - 09:13: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ - Upbringing, Inlightening, Education -> Просвещение от Вильгельма Варкентина - Карим_Хайдаров.
Bourabai Research - Технологии XXI века Bourabai Research Institution