Введение в технологию Flash
статья по информатике и икт по теме

Введение в технологию Flash

Введение в технологию Flash        

I. Инструменты        

II. Кадры, Timeline        

III. Публикация работы        

Понятие эталона (symbol)        

Графические объекты        

Использование Библиотеки (Library)        

Кнопки        

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

Объект Movie Clip        

Слои        

Анимация движения по маршруту (пути).        

SHAPE        

настройки сцены        

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

Результат работы во Flash4 - это файл с расширением .swf . Он отображается . flash-player фирмы "Macromedia", который подключается к любому броузеру как plugins. Тем самым гарантируется полная однозначность воспроизведения. Перейдем к рассмотрению самого flash-редактора.

I. Инструменты

Text Tools. Важно, что написанный таким образом текст отображается в браузере так же, как в обычном HTML документе, т.е. если вы выбрали шрифт отсутствующий у посетителя то текст будет отображен другим шрифтом. Если вы хотите чтобы текст стал графическим объектом, то вы должны выделить тест и в меню Modify выбрать пункт Break Apart, тогда текст будет разбит на отдельные векторные объекты, с которыми можно работать как с любой векторной графикой.

II. Кадры, Timeline

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

1. Создадим в этом кадре простейшее изображение – закрашенный прямоугольник.
2. Сгруппируем его в один объект (контур + заливка):
3. Выделим его - обводим прямоугольник инструментом стрелка

4. Группируем - Modify > Group.
5. После создания изображения в этом кадре мы можем осуществить его автоматическую анимацию. Для этого  нужно выбрать конечный кадр, например, 40-й, и сделать его ключевым (меню Insert  > keyframe или F6).
   
6. После этого щелчок правой кнопкой мыши в timeline на указателе первого кадра

7. вызывает контекстное меню, в котором надо выбрать пункт "Create Motion Tween" (создать движение между двумя кадрами). Если в timeline между первым и последним кадрами возникла голубая линия со стрелкой, то это означает, что анимация успешно выполнена.

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

9. Чтобы протестировать клип в Веб-броузере, воспользуйтесь File > Publish Preview > HTML

10. Понятие  ключевого кадра.

III. Публикация работы

Меню File >Save приводит к записи рабочего файла Flаsh в формате .fla. В этом файле сохраняется вся ваша “кухня”, ваша библиотека эталонов, все настройки. Вы можете прервать работу сохранив ее в этом файле, а потом открыть соответствующий файл .fla и продолжить ее.

Публикация в HTML - меню File > Publish. В этом случае Flash создает два файла: файл с расширением .swf, в котором записывается сама Flash-анимация и собственно HTML документ, с которым может работать браузер.

Понятие эталона (symbol)

Одним из самых главных понятий, необходимых для правильной работы во Flash является понятие эталона (symbol). 

Работу во Flash всегда надо начинать с создания эталона, и лишь затем его размещать на сцене.

Во Flash существует три типа эталонов: "графика", "кнопка", "movie clip", каждый из которых обладает своими свойствами.

Графические объекты

Зайдите в меню "Insert", выберите пункт меню "Symbol", а там - "Graphics". Flash сменит окно сцены на окно редактирования эталона.

Импортируйте растровое изображение - File > Import

В левом верхнем углу расположены две кнопки: Scene1 и Symbol. Нажмите на кнопку Scene1, -  вы выйдете из режима редактирования эталона и перейдете на сцену.

Теперь нажмите сочетание клавиш Ctrl + L. На экране появится библиотека эталонов, в которой в данном случае будет два элемента: просто растровый рисунок и Symbol.

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

 Сделайте, к примеру, 60-й кадр ключевым, а затем вернитесь к первому кадру.

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

Щелкните правой кнопкой мыши по нему, в контекстном меню появится пункт Properties. Выбрав его, вы можете изменить изображение. Выберите, например, пункт Alpha (прозрачность), сдвиньте движок к нулю. Изображение станет полностью прозрачным. Затем выполните анимацию - Mtion Tweenning  (см. III 6-7)

Посмотрите на результат (Ctrl+Enter).

Использование Библиотеки (Library)

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

Вызов окна библиотеки (Library): Выберите Window > Library (или Ctrl + L)

Кнопки

Прейдем теперь к созданию другого типа эталона – кнопки: Isert > New Simbol > Button. Задавая новый эталон, вы сразу же можете ему дать смысловое имя.

Когда вы перешли в режим редактирования кнопки, timeline заменилась на линейку с четырьмя состояниями (фазами)  кнопки.  

У кнопки есть всего четыре кадра:

Up - это рисунок ненажатой кнопки;

Over - курсор расположен над кнопкой

Down - нажатие кнопки мыши

Hit (Hit Area) - здесь определяется область реакции кнопки.

Итак, создайте новый эталон типа Button, и он тут же откроется для редактирования. Первый кадр Up

Возьмите инструмент “прямоугольник”, нарисуйте прямоугольник и поместите его в центр символа – крестик в центре окна редактирования, и залейте синим цветом. Так будет выглядеть кнопка в не нажатом состоянии.

Теперь выделите мышью в хронометрической линейке второй кадр Over и сделайте его ключевым - нажмите клавишу F6.  Здесь вы редактируете фазу кнопки, видимую при наведенном на нее курсоре.

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

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

Сделайте ключевым кадр Hit и нарисуете в нем два прямоугольника, один в том месте, где  располагались кнопки, другой рядом (это мы делаем, чтобы лучше понять свойства кадра Hit)

Затем мы переходим на сцену и перетаскиваем в нее кнопку из библиотеки. Теперь проверьте поведение кнопки, перейдите в режим просмотра Ctrl + Enter. Надо обратить внимание на то, что кнопка реагирует на курсор мыши в областях, которые мы задали в кадре Hit.

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

Вернитесь на сцену с кнопкой, щелчком правой кнопки мыши по изображению кнопки на сцене, появиться контекстное меню, а в нем выберете “Свойства” (Properties). Появиться окно свойств этого экземпляра, в нем есть три закладки, выберете  закладку “Actions” (действия) и нажмите на знак “+”. Появиться выпадающее меню, в котором перечислены действия, которые можно связать с этим элементом, в данном случае, с кнопкой.

Свяжем с кнопкой стандартную функцию – гиперссылку, для этого выберем пункт “Get URL”. Появиться следующее окно, в котором мы укажем полный URL ссылки.

Можно указать имя HTML файла и относительный путь к нему, если он на вашем компьютере. Затем сохраните вашу работу и выполните публикацию, меню File >Publish. Откройте полученный файл (скорее всего он будет называться Movie1.html) в браузере и проверьте действие кнопки.

Flash дает возможность присваивать кнопкам различные функции. Посмотрим еще раз на вкладку Action и выберем Go To,

мы видим, что кнопке можно присвоить различные функции:

• перехода на разные сцены одной Flash-анимации (окошко Scene).
• перехода на разные кадры (окошко Frame), по номеру кадра, по его метке, по выражению, вычисляющему кадр, на следующий или предыдущий кадр

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

Объект Movie Clip

Меню Insert > New Symbol > Movie Clip. Для примера, в режиме редактирования эталона нарисуем круг со спицами, так, чтобы центр его совпадал с центром окна рисования символа:

Этот рисунок состоит из различных частей, для того, чтобы выполнить анимацию его надо превратить в один объект, Для этого инструментом “стрелка”  обводим прямоугольник вокруг рисунка, тогда все его элементы оказываются выделенными.

Затем в меню Modify команда Group  (Ctrl + G) превращает рисунок в единый объект. Теперь заставим колесо вращаться.  Для этого сделаем,  к примеру, 60-й ключевым (F6), вернемся к первому кадру и щелчком правой кнопки мыши по метки кадра вызовем контекстное меню.

В этом меню выберем “свойства” (Properties), появиться окно свойств кадра (Frame Properties), в котором выделим закладку  Tweening, а там Motion. Откроется окно анимации движения (Tweening Motion).

Выберем вращение по часовой стрелке 3 раза (Clockwise 3 time). Нажав клавишу Enter, увидим вращение.

Перейдем теперь на сцену в первый кадр и вставим экземпляр этого эталона в левый конец сцены. Теперь пусть это колесо катиться слева направо. Для этого сделаем ключевым 60-й кадр и передвинем колесо в крайнее левое положение. В меню Tweening первого кадра выберем просто Motion, и, нажав комбинацию Ctrl + Enter, увидим движение и вращение.

Как сделать так, чтобы анимация заканчивалась на последнем кадре?

Для этого перейдем к последнему кадру и щелчком правой кнопки мыши по метки кадра вызовем контекстное меню. В нем выберем вкладку Action и значком ”+” вызовем выпадающее меню, в котором выберем команду Stop. Теперь при просмотре, поступательное движение колеса заканчивается, но оно продолжает вращаться. Чтобы остановить вращение колеса, сделайте двойной щелчок по эталону колеса в библиотеке эталонов, тогда вы перейдете в режим редактирования эталона. Здесь приделайте тоже самое – остановку на последнем кадре.

Слои

Если вы хотите сделать два или более разных движущихся в различном направлении объектов, то в этом случае необходимо использовать разные слои. Создайте два различных эталона типа Graphic, к примеру, прямоугольник и овал. Перейдите на сцену и щелчком мыши по значку “+” в окне слоев создайте два слоя в линейке кадров (timeline).

В каждый из этих слоев из библиотеки (Ctrl + L) поместите разные экземпляры эталонов, например, в слой 1 – прямоугольник, в слой 2 – овал. Для каждого слоя проделайте анимацию типа Tweening Motion в разных направлениях по диагонали сцены. Теперь вы можете наблюдать две независимые анимации на одной сцене. (см. Movie3.fla на CD).

Анимация движения по маршруту (пути).

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

В первом ключевом кадре в Guide Layer нарисуйте инструментом Pencil (Карандаш) линию, которая начинается слева, посередине кадра делает петлю и оканчивается справа.

Теперь сделайте активным первый ключевой кадр слоя с анимацией и включите инструмент Snap (Магнит).

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

В меню свойств первого (Frame Properties), в закладке  Tweening > Motion включите флажок Snap to guide. Все параметры анимации движения по маршруту задаются там же, где и параметры обычной анимации движения - на вкладке Tweening параметров первого ключевого кадра. Здесь интересны две опции.

Флажок Orient to path direction заставляет объект не только двигаться по маршруту, но и соблюдать угол наклона относительно нормали каждой точки траектории.

Настройка Easing – Out позволяет имитировать неравномерное движение по пути.

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

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

SHAPE

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

Просмотрите анимацию.

Настройка анимации форм производится на вкладке Tweening окна параметров кадра, в котором она начинается. выборе пункта Properties... контекстного меню кадра.

Раздел Blend Type устанавливает метод просчета промежуточных форм. В режиме Distributive (Распределенная) промежуточные формы имеют более гладкие очертания, редактор старается изображать выпуклые фигуры округлыми и обтекаемыми. Этот метод годится для показа морфинга мягкого тела, сделанного из вещества наподобие пластилина или воска. Flash как бы перераспределяет массу объекта, выпячивая и втягивая те или иные области. Режим Angular (Угловатая), напротив, рассчитан на фигуры, имеющие в себе большое количество углов и прямых линий. В таком случае Flash старается изобразить морфинг через изменение углов и излом прямых участков; при этом создается впечатление, будто фигура сделана из ломкой проволоки. Если вы примените данный режим к округлым фигурам, не имеющим углов и прямых в обрисовывающей линии, редактор сменит его на Distributive прямо по ходу морфинга.

Анимация линий. В первом кадре нарисуйте инструментом карандаш произвольную линию, создайте 40-й ключевой кадр (F6) и с помощью инструмента “стрелка” измените форму кривой. Затем, как в предыдущем примере, выполните анимацию Shape. При просмотре видно как линия плавно изменяет форму. Можно заметить, что Flash обрабатывает анимацию форм неидеально.

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

Перейдите в стартовый кадр анимации формы. Выполните команду меню Modify > Transform > Add Shape Hint или нажмите Ctrl+H. В окне редактирования появится красный кружок с латинской буквой а внутри. Передвиньте этот кружок на какую-нибудь точку формы. Теперь перейдите к последнему кадру анимации. Здесь вы увидите точно такой же кружок с той же буквой. Передвиньте его в точку формы, куда, по вашему мнению, должна перейти та точка, которую вы только что пометили в первом кадре. Как только вы установите второй кружок, он окрасится в зеленый цвет. Если вы вернетесь сейчас к первому кадру, то обнаружите, что кружок в нем тоже поменял цвет на желтый. Значит, обе точки подсказки установлены, и Flash «понимает», как надо изгибать форму, чтобы точка, помеченная буквой о в первом кадре, перешла в точку, помеченную той же буквой в последнем. Если хотя бы одна из этих точек находится не на границе формы или установлена на форму неправильно, обе точки окрасятся в красный цвет.

Теперь, проиграв анимацию, вы увидите, что Flash по другому интерполирует промежуточные формы.

Чтобы видеть в рабочей области точки подсказки, не забудьте включить флажок в меню View > Show Shape Hints или нажать комбинацию клавиш Ctrl+Alt+H. Для точек подсказки доступно контекстное меню, содержащее следующие команды:

Add Hint добавляет новую пару точек подсказки. Эта команда доступна только в первом ключевом кадре анимации;

Remove Hint удаляет выделенную пару точек подсказки.

Remove All Hint удаляет все точки подсказки.

настройки сцены

В заключении рассмотрим настройки самой сцены анимации.

Редактирование анимации обычно начинается с этой группы параметров; впрочем, вы в любой момент можете вернуться к ним. Окно настроек открывается командой меню Modify >Movie или комбинацией клавиш Ctrl+M. Рассмотрим присутствующие в нем опции:

• Frame Rate - в данном поле вы указываете частоту кадров вашего фильма, то есть число кадров в секунду, FPS (Frame Per Second). Если вы делаете относительно несложный фильм и намерены просматривать его на быстром компьютере, установите значение FPS около 25. При такой частоте смены кадров зритель не видит мерцания и воспринимает изображение как непрерывное; В Internet принято использовать частоту 12 кадров в секунду. При этом обеспечивается достаточно ровное восприятие; к тому же FPS принято устанавливать равной 12 в фильмах QuickTime. Если вы используете сложную графику, выставьте частоту 8 кадров в секунду;

• Dimensions - в этих полях вы вводите размеры видимой области кадра фильма, ее ширину (Width) и высоту (Height). Минимальные возможные размеры кадра фильма - 18х18 точек, максимальные -2880х2880.

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

• Match - это альтернативный способ указать размеры кадра вашего фильма:

Printer - установит размеры кадра так, чтобы при распечатке он помещался на листе без масштабирования. Учитываются отступы печати;

Contents - определит размеры кадра фильма по размерам содержащегося в нем изображения, с небольшими отступами по краям;

• Grid Spacing - в данном поле вы указываете величину шага сетки;

• Show Grid - этот флажок включает отображение сетки в области редактирования;

• Colors - здесь вы задаете цвета:

Grid - цвет сетки;

Background - цвет фона фильма. Один из вопросов, часто задаваемых новичками, которые осваивают Flash 4: «А как мне сделать фон фильма синим?» Необходимый параметр вы указываете именно в этом месте;

• Ruler Units - в данном выпадающем меню вы определяете единицу измерения линеек. Можно выбрать одну из наиболее употребительных единиц измерения, а именно:

Inches - целые дюймы;

Inches (Decimal) - дюймы с разметкой десятых долей;

Points - пункты;

Centimeters - сантиметры;

Millimeters - миллиметры;

Pixels - относительные точки.