Борис Будинас icon

Борис Будинас



НазваниеБорис Будинас
Дата конвертации10.08.2012
Размер95.66 Kb.
ТипДокументы

Борис Будинас

Графическое компьютерное творчество

budinas@orc.ru

www.budinas.narod.ru

18 ноября 2006


Векторная графика. FLASH анимация

************************************


В курсе используются ссылки на программу PHOTOSHOP, COREL DRAW и ADOBE ILLUSTRATOR. В качестве примеров иногда даются ссылки на мой сайт www.budinas.narod.ru - они не являются наилучшими примерами, но мне просто удобно на них ссылаться.


В этом занятии очень много много упражнений - выберите из них наиболее вам интересные (а может быть все вам интересны?).


ЗАНЯТИЕ 4: Общее писание FLASH - экран программы FLASH, специфика программы, основные понятия FLASH. Временная шкала. Распределенное программирование.Меню программы FASH (screenshots). Другие элементы интерфейса


*****************************

Общее описание FLASH - экран программы FLASH, специфика программы, основные понятия FLASH. Временная шкала. Распределенное программирование. Два вида анимации. Символы. Меню программы FLASH (screenshots).Другие элементы интерфейса


Дополнительные материалы - изображения экранов программы FLASH- MX (screenshots)


++++++++++++++++++++++++++++++++=

++++++++++++++++++www.schools.keldysh.ru\budinas\course3\screenshots\screenshot.htm


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


Итак, при запуске FLASH MX вы видите на экране программы несколько окон программы. В самом верху - меню программы, описание меню см. следующее занятие. Также окно с временной шкалой (Timeline) и слоями (Layers), далее рабочее поле, на котором и появляются объекты и их анимация, и окна кодов и свойств (Actions и Properties). Эти окна могут быть активированы или свернуты (см. меню WINDOW ниже).


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


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


Во первых можно что-то положить на рабочее поле ( из библиотеки клипа ) или просто нарисовать что-то. Далее в окне ACTIONS мы можем написать инструкции на языке ACTION SCRIPT.
И в окне PROPERTIES - свойства - можно сказать о том, как должна проходить анимация между этим и следующим ключевыми кадрами (например, рисунок из первого ключевого кадра перетекает в рисунок из второго ключевого кадра). В окне PROPERTIES можно задавать и некоторые свойства объекта, например его прозрачность (сначала надо выделить этот объект щелкнув на нем левой верхней стрелкой панели инструментов). В этом же окне задаются и размеры области, где происходит анимация.

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

Инструкции - по старинке я называю их кодами - на языке ACTION SCRIPT, которые мы пишем для ключевого кадра, выполняются в каждом кадре, начиная с этого кадра до следующего ключевого кадра. Например, если в ключевом кадре объект сдвигается , то и во всех непосредственно следующих за ним не ключевых кадрах он тоже сдвигается.


Пусть мы создали какую-то анимацию, т.е. во времени на экране что-то происходит. То, что мы создали мы будем называть "клип" или "мувик" - от английского Movie Clip. Если мы запустим этот клип, то он будет повторяться циклически, т.е. после последнего кадра будет повторяться опять первый - так устроен FLASH (конечно с помощью программы этот цикл можно остановить - вот пример необходимости программы). Например, клип, в котором человек делает один шаг (клип "шагающий"). В таком клипе человек будет шагать на одном месте. Теперь мы сделаем внешний клип и поместим туда клип "шагающий". Клип "шагающий" будет крутиться в своем времени, пока результат будет все тот же - цикл, шаг на месте . Но теперь во внешнем клипе будем перемещать клип "шагающий" на определенное расстояние (например напишем программу, сдвигающую клип "шагающий"). Тогда можно получить "шагающего человека", если мы подберем надлежащим образом интервал времени и расстояния сдвига. Кстати, если мы подберем эти значения неудачно, человек будет шагать, совершая совсем странные движения, что, вообще говоря, может быть гораздо интересней, чем просто идущий человек (зачем вам делать правильно идущего человека во FLASH - взгляните просто в окно!).


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


Как уже говорилось, когда мы запускаем мувик в интернете или FLASH - проигрывателе, он прокручивается с первого кадра до последнего и перескакивает опять в первый, т. е. крутится в бесконечном цикле .Однако с помощью программирования довольно легко избавиться от цикличности изображения на экране - с помощью программирования изображение на экране можно варьировать в зависимости от номера цикла. Более того, программирование позволяет это делать некоторым случайным образом ( в Action Script есть оператор Math.random()), так что на каждой итерации мувик может выглядить по-новому.


********************

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

*********************


Программирование во FLASH как бы распределенное - коды ACTION SCRIPT пишутся не в одном месте, а привязываются к ключевым кадрам. И коды внешнего мувика, и коды внутренних мувиков выполняются независимо друг от друга. Конечно мы можем из одного мувика управлять другим, например остановить мувик командой типа bbfrict.gotoAndStop(1) (останавливает мувик bbfrict в 1 кадре); Коды могут быть привязаны и к самим объектам на экране. Сначала вы выбираете кадр во временной шкале, потом объект на рабочем столе (когда вы выбрали кадр, то все объекты в нем выделены - а потом вы указываете-выделяете только одиннужный объект) и пишете код в окне ACTIONS. Примерно так выглядит код, благодаря которому объект после нажатия мышки на нем будет перемещаться вместе с мышкой:


this.onPress = function()

{

this.startDrag(false, 37, 35, 702, 259);

}


Некоторые средства отладки


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

Если мувик состоит из нескольких разнородных частей, удобно эти части оформит в различные сцены (INSERT - Scene). Но мы в этом курсе будем использовать только одну сцену.


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


with(bbfrict) {

// все, что дальше в скобках, относиться к экземпляру bbfrict

bball._x=10;

// меняем координату x дважды вложенного мувика bball

}


Как всегда // означает комментарии

Можно использовать обозначения типа parent.bbfrict, чтобы обратиться из вложенного мувика к объекту снаружи.


Задание 1 Попробуйте описать средство отладки CONTROL - Debug Movie


*************************

Два вида анимации. Символы

****************************


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

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

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


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


***************

ЗАДАНИЯ присылается слушателям

***************

Слои (LAYERS)


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


**************************************************************

Меню программы FASH (screenshots). Другие элементы интерфейса

****************************************************************


Теперь кратко ознакомимся, что собой представляет экран программы FLASH – см. дополнительные материалы.

Мы употребляем английскую версию - соответствие с русской вы установите сами. Вот краткое описание экранов.


1 - экран с активированной временной шкалой (вверху) и свернутым окном программного кода - Actions - и свернутым окном свойств - Properties. Присутствует один слой, над надписью SCENE 1 - иконки для добавления слоя, для добавления слоя направляющего пути, корзина, куда выкидываются ненужные слои.


2 - то же, но с активированным окном программного кода - Actions


3- то же, но с активированным окном свойств - Properties. На рабочем столе выделен мувик bbfrict - экземпляр библиотечного мувика-символа bbfr

4 - окно Properties при открытии FLASH-файла; Size - размер рабочей области, где происходит анимация, Publish - можно указать версию FLASH-программы, см. меню FILE, Background - цвет рабочей области.

Frame Rate - число кадров в секунду для анимации.


5- окно Properties, когда вы указали на объект , лежащий в рабочей области; в данном случае это мувик - с именем bbfrict, экземпляр мувика bbfr, который лежит в библиотеке; Color - режим отображения объекта, например можно задать процент прозрачности. Не забудьте, что установки свойств действуют только для выбранного объекта и выбранного кадра (сначала фиксируется кадр, затем объект)


6- экран с окном библиотеки текущего клипа. Показывается библиотека командой WINDOW-Library (см. ниже). Два раза щелкнув на символ в библиотеке мы переходим в режим редактирования этого символа - он появляется в рабочей области и мы можем изменять этот символ прямо в ней, он автоматически меняется и в библиотеке. На картинке редактируется символ bbfr - это имя видно сверху слева над рабочей областью. Щелкнув на Scene 1 возвращаемся к редактированию нашей сцены. В окне библиотеки показывается сам символ. Если сверху справа символа есть квадратик и треугольник, то символ анимированный..


Совсем кратко опишем некоторые команды из верхнего меню - мы будем использовать далеко не все команды.


7-меню FILE. Open as library - открывает только библиотеку Flash - файла. Publish - в директорию, где находится FLASH - файл, записывается и исполняемый файл только для проигрывания (щелкнув на него мышкой появится окно, проигрывающее этот мувик), а также появляется HTML- страница, тоже проигрывающая этот мувик в в броузере. Мы уже говорили о том, как положить сделанный клип в интернет - на сервер надо положить исполняемый файл и туда же эту HTML страницу - можно и скопировать часть текста , касающееся этого мувика, на свою страницу.


8 - меню EDIT/. Cut Frames, Copy Frames, Clear Frames, Select Frames - команды, аналогичные обычным, но работающие с кадрами. Используются, когда вы переносите некоторые кадры вашего клипа в другой клип или делаете из готового клипа библиотечный символ


9- меню VIEW. Настройка окна программы, мы ссылаться на эти команды не будем - в начале работы обычно установлено хорошо по умолчанию. Например Timeline - появляется-исчезает временная шкала (даже упоминание о ней!), Work Area - появляются-исчезают слайдеры прокрутки рабочей области сцены. Там также найдете команды появления-исчезновения линеек, направляющих, координатной сетки для рабочей области.


10- меню INSERT. Это меню опишем подробнее, та как оно специфично для программы FLASH/

Convert To Symbol

New Symbol - программа переходит в режим создания символа. Все, что вы сделаете на экране, станет символом в библиотеке (сначала вы задаете имя символа). Для выхода из этого режима вы щелкаете на SCENE1 сверху рабочей области

Следующие три Layer, Layer Folder , Motion Guide дублируются иконками внизу временной шкалы (иконки расположены в другом порядке). Добавление уровня, группы уровней и направляющей (для анимации движения)

(Insert) Frame - вставляет кадр после выделенного, Remove Frames - уничтожает выделенные кадры.

Keyframe - из кадра делает ключевым (со всем его содержимым), Blank Keyframe - вставляет пустой ключевой кадр, Clear Keyframe - делает кадр не ключевым (со всем его содержимым)

INSERT - Scene - делает новую сцену

Create Motion Tween - делает анимацию движения между ключевыми кадрами


11- меню MODIFY. Самое для нас важное здесь - Shape - Add Shape Hint. Когда сделана анимация формы и выделен первый ключевой кадр, то можно с помощью этой команды добавить якорные точки - то есть контролировать эту анимацию. Некоторые команды этого меню дублируют панель инструментов. Выше мы упоминали команду Ungroup.


12-меню CONTROL (меню TEXT мы не будем использовать, поэтому описывать тоже не будем. Попробуйте разобраться сами, если возникнет необходимость). Мы будем использовать только Test Movie. Используется, когда сделав некоторую анимацию - выбрав ключевые кадры, что-то сделав в рабочей области, может быть написав кода на ACTION SCRIPT - вы захотите протестировать ваш клип. Другими командами можно однократно прокрутить клип, прокрутить обратно и т.д. Можно запретить использовать коды Action Script - этого вам как раз не стоит делать, так как во второй части курса мы будем заниматься программированием


13-меню WINDOW. Tools - показывает-скрывает панель инструментов, Timeline, Properties показывает и скрывает соответствующие панели (Properties действует одновременно и на панель Actions). Чрезвычайно важна команда Library - она показывает библиотеку клипа, то есть все символы, которые участвуют в построении клипа. Common Libraries - готовые библиотеки, может для вас что-нибудь оттуда пригодится. Также полезна команда Movie Explorer - в соответствующем окне собрана информация о вашем мувике - какие сцены, какие объекты в каких ключевых кадрах, какой код Action Script и где. Это окно можно распечатать и изучать ваш мувик, не смотря на экран компьютера.


***************

ЗАДАНИЯ присылается слушателям

***************




Похожие:

Борис Будинас iconБорис Будинас
Одна из целей визуальной антропологии – сохранить для будущего образы настоящего времени. Фиксация реальных образов и ситуаций часто...
Борис Будинас iconБорис Будинас
В курсе используются ссылки на программу photoshop, corel draw и adobe illustrator. В качестве примеров иногда даются ссылки на мой...
Борис Будинас iconБорис Будинас
В курсе используются ссылки на программу photoshop, corel draw и adobe illustrator. В качестве примеров иногда даются ссылки на мой...
Борис Будинас iconБорис Будинас
В курсе используются ссылки на программу photoshop, corel draw и adobe illustrator. В качестве примеров иногда даются ссылки на мой...
Борис Будинас iconКорнеев борис Георгиевич
Корнеев борис Георгиевич, один из старейших капитанов Беломорской базы гослова. Умер 20 июня 1972 года в Мурманске
Борис Будинас iconРедько борис Федорович
...
Борис Будинас iconМищенко борис Иванович
Мищенко борис Иванович, капитан на судах Мурманского тралового флота. Много лет с конца 1950-х годов возглавлял экипаж траулера «Рион»....
Борис Будинас iconБорис Каплун, ударник ансамбля «Ариэль»: «Я не Каплун, но я Каплун»
Борис Каплун не скрывал ностальгии по золотым временам «Ариэля», по той дружбе и жажде творчества, которые связывали знаменитую шестерку...
Борис Будинас iconМеркулов борис Панкратьевич
Меркулов борис Панкратьевич, руководитель службы эксплуатации управления "Севрыбпромразведка". В 1960-х годах ходил штурманом на...
Борис Будинас iconПогуц борис Дмитриевич
Погуц борис Дмитриевич, капитан упс «Комиссар Полухин» в 1990 году. До этого работал в Севгосрыбфлотинспекции. Журналистка рыбацкой...
Разместите кнопку на своём сайте:
Документы


База данных защищена авторским правом ©podelise.ru 2000-2014
При копировании материала обязательно указание активной ссылки открытой для индексации.
обратиться к администрации
Документы

Разработка сайта — Веб студия Адаманов