Создание интерактивных приложений к урокам средствами flash

Action Script можно рассматривать как основной язык программирования во Flash.

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

Для разработки интерактивных элементов во Flash используют три основных компонента: событие (event), порождающее определённое действие, действие (action), порождаемое тем или иным образом событием, и целевой объект (target), выполняющий действие или изменяемый событием.

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

Событие - является инициатором какого либо действия в проекте. Во Flash события подразделяются на:

1. События мыши/клавиатуры -эти события инициируются пользователем.

События кадров - если разрабатывается Flash ролик, то по достижении какого либо кадра возникает событие.

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

Целевой объект - это непосредственно объект над которым будет проведено действие вызванное событием. Целевые объекты подразделяются на четыре основных типа:

Текущий проект и его свойства.

Другой проект и его свойства (если проект находится в рамках основного проекта)

Графические элементы проекта (кнопка, рамка, фон и т.п.)

Внешние приложения (Интернет броузер или другие программы)

Действие - действия которые выполняются над целевым объектом.

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

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

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

Принципы Macromedia Flash.

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

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

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

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

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

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

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

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

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

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

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

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

Использование единой палитры web-safe, во избежание расхождений с цветами броузеров. Применение компонента управления проектом Library, который позволяет быстро найти любой объект и поменять его свойства.

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

Применение Macromedia Flash в Web.

Способы применения Flash, несмотря на некоторые небольшие минусы такие как требование от пользователя специального модуля расширения (plug-in), очень широки. Flash-проект способен сделать Web-страницу более привлекательной и стильной, а Flash баннер - затмить обычные анимированные GIF, тем более, что Flash-клипы (и любые действия в них) можно озвучивать. По этим причинам возникает неугасаемое желание каким-либо из способов применить технологию Macromedia Flash. Способы применения этой технологии выражаются в следующих объектах:

Flash баннер

Заставка в виде Flash-ролика

Целая страница, представляющая собой Flash Movie

Элемент дизайна в HTML-документе

Фоновый звук к HTML-странице (в формате mp3)

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

Macromedia выпустила Flash-проигрыватели для всех основных операционных систем и типов броузеров, что обеспечило необходимую для Internet кросс-платформенность и популярность этой технологии. Согласно последним опросам в Cети, приблизительно 80% пользователей могут просматривать содержимое Web-сайтов на Flash без загрузки дополнительного программного обеспечения, и только 61% - Web-страницы с элементами Java. Скорее вынужденным шагом было свободное лицензирование Macromedia кода (Free Source licensing program) проигрывателя для Flash, которое ускорит использование формата swf в Web-приложениях нового поколения сторонними производителями программных продуктов.

Общая терминология

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

Термин	Название в редакторе	Описание
Фрейм/Кадр	Frame	Это просто кадр. Кадры разделяются на ключевые (Key frame) и обычные.
Ключевой кадр	Key frame	Кадр, содержащий любое изображение или объекты. Из последовательности ключевых кадров и составляется анимация.
Временная шкала	Time scale	Панель, находящаяся сверху*. Содержит все кадры документа.
Панель инструментов	Tools	Панель, находящаяся слева. Содержит инструменты для рисования и выделения.
Панель действий	Actions	Панель, находящаяся внизу. Содержит редактор кода на Action Script.
Панель параметров	Properties & Parameters	Панель, находящаяся внизу, под панелью действий. Содержит свойства выделенного объекта или документа в целом.
Скрипт/Экшэн скрипт	Action Script	Язык программирования Flash роликов. Необходим для игр и приложений. Так же используется для управления ходом презентации.
Рабочее поле		Поле, находящееся по-центру документа, при его открытии. Имеет прямоугольную форму и цвет фона, выбранного на панели параметров. Определяет видимую область документа во время показа.
Предпросмотр	Preview	Режим отладки документа, необходим для просмотра "того, что получилось" и поиска ошибок. Вызывается по нажатию сочетания клавиш Ctrl+Enter

2.2 Основы создания интерактивных приложений flash

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

Flash позволяет:

· создавать интерактивные мультимедийные документы для автономного просмотра на компьютере и для размещения их в Интернете;

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

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

· создавать элементы интерфейса и назначать им действия;

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

Интерфейс программы Macromedia Flash

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

АНИМИРОВАНИЕ СОЛНЦА И СОЗДАНИЕ ЭФФЕКТА ЛИНЗЫ

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

Итак, начнем! Вся процедура состоит из 4 несложных частей:

* Рисуем солнце

* Рисуем лучи

* Рисуем блики

* Анимируем все элементы

1. Рисуем солнце

Солнце не должно быть обычным кружком, как делают некоторые. Солнце красиво смотрится, когда оно расплывается по краям, становится прозрачным. Добиться этого не сложно: рисуем круг, заливаем его градиентом со следующими характеристиками (середина - белый цвет alpha=100%; края - цвет неба alpha=0%) передвиньте белый цвет ближе к краю, чтобы солнце было солнцем, а не светящейся точкой в небе.

2. Рисуем лучи



Рисуем круг и заливаем его таким же градиентом, что и солнце. После этого выбираем инструмент "трансформация", растягиваем кружок, чтобы он стал длинным и тонким. Далее полученный лучик преобразуем в символ, делаем на 30%-40% прозрачнее, создаем несколько таких лучиков путем копирования, и прячем за солнышко.

3. Создаем эффект линзы

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

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

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

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

Итак, солнце переместили, теперь в ту же точку перемещаем и лучи, при этом немного поворачивая их. Это очень важно, иначе будет смотреться нереалистично. Сами лучи лучше сделать переливающимися, для этого в каждом символе создайте движение от alpha=100% к alpha=60% и обратно, от иллюзии переливающегося солнца будет аж слепить глаза. Но не забудьте в каждом отдельном лучике поставить различную длину движения, иначе Вы рискуете получить не переливающееся солнце, а мигающую сирену.

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

ВЫЧИРТАНИЕ КОНТУРОВ

Нарисуйте 2 одинаковых круга;

Разместите их так как показано на рисунке. Контуры обоих кругов объединяются;

Выделите заливку и линию обводки полного круга (двойной щелчок инструментом Стрелка на заливке);

Переместите круг так, чтобы он не имел с полумесяцем общих точек и удалите его;

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

ИСПОЛЬЗОВАНИЕ ТРАЕКТОРИИ ДВИЖЕНИЯ

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

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

2.Теперь можно приступить к созданию траектории движения. Выделите, если она не достаточно кривая, активируйте инструмент слой, на котором она будет располагаться. Выполните команду Insert - Timeline Motion Guide (Вставить - Временная шкала - Направляющий слой) или просто нажмите на кнопку Add Motion Guide (Добавить направляющий слой) в нижней части панели Timeline(Временная шкала). Таким образом, вы создадите слой Guide (Направляющий) - имя слоя задается автоматически. У слоя находящегося под слоем направляющих и соответственно под его воздействием, должен появиться отступ.

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

4. Щелкните по названию слоя, что бы активировать его. Выберите инструмент Pencil (Карандаш) и опцию Smootch (Сглаживание). Нарисуйте кривую линию на первом кадре. Если, по - вашему, Selection (Выделение) в режиме Smooth (Сглаживание) для достижения желаемого результата. Вы можете нарисовать траекторию движения с помощью инструментов Pencil (Карандаш) и Pen (Перо).

5. Направляющий слой должен автоматически покрыть 30 кадров, ибо таково количество вставленных промежуточных кадров. Если по какой-то причине длина направляющего слоя иная, вставьте столько дополнительных пустых кадров, сколько недостает до нужного количества, выполнив команду Insert - Timeline - Frame (Вставить - Временная шкала - Кадр) или воспользовавшись клавишей F5 на клавиатуре.

6. Активируйте режим привязки, щелкнув по иконке Snap (Привязка) на панели Toolbox (Набор инструментов) или на панели Properties Inspector (Инспектор свойств). Затем, выделив нужный объект изображения, перетащите его указателем мыши туда, где его центральная точка совпадает с начальной точкой траектории движения.

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

8. Если все работает нужным образом, щелкните по иконке с изображением глаза на панели Timeline (Временная шкала) и выберите режим Hidden (Скрыть) для слоя траектории движения.

9. Сохраните изменения и нажмите Enter для предварительного просмотра.

10. Чтобы ваш символ мог изменять направление в процессе движения по траектории, воспользуйтесь окном свойств кадров Properties (Свойства), щелкнув между двумя ключевыми кадрами на временной шкале. Теперь на панели Properties Inspector (Инспектор свойств) отразятся Frame Properties (Свойства кадров) с различными настройками для промежуточных кадров.

11. Установите флажок для Orient to path (Направить по траектории). Чтобы увидеть эту опцию, вам, возможно, придется развернуть панель Properties Inspector (Инспектор свойств). Это можно сделать нажатием на маленький треугольник, направленный уголком вниз, который находится в правом нижнем углу панели.

12. Чтобы повернуть ваш символ, выберите в меню Rotate (Поворот)опцию CW (Clockwise) для поворота по часовой стрелке или опцию CCW (Counter Clockwise) - для поворота по часовой стрелке или опцию CCW (Counter Clockwise) - для поворота против часовой стрелки. Укажите также угол поворота.

АНИМАЦИЯ ФОРМЫ (Shape tweening)

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

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

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

Рис 1. - Shape tweening

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

Рис. 2



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

Немного о параметрах shape tweening. Вы, наверное, заметили, что появилась пара других параметров, когда вы выбрали shape tweening в панели Frame - Easing и Blend (см. Рис. 1). Поле Label содержит метку кадра.

Easing задает обратное экспоненциальное ускорение. Величина этого параметра может изменяться от - 100 до + 100. Это означает, что если вы зададите отрицательный easing, движение будет происходить с положительным ускорением, скорость будет увеличиваться (см. Рис. 3). И наоборот, если easing будет положительным, анимация будет замедляться (см Рис. 4).

Рис. 3 - Easing: -100

Рис.4- Easing: +100

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

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

На первом ключевом кадре (с которого начинается анимация) вы добавляете контрольную точку (Modify->Transform->Add shape hint, Ctrl+Shift+H). На сцене появится маленькая красная точка, обозначенная буквой латинского алфавита. Вы прикрепляете ее к той части изображения, которая двигается не так, как вы хотели. Затем вы переходите на второй ключевой кадр, и прикрепляете эту же точку к части, в которую должна была перейти часть на начальном кадре. Точка будет уже зеленого цвета, а на начальном кадре она станет желтой. Так вы можете отличать начальные и конечные ключевые точки, так как на одном кадре могут присутствовать и те и другие.

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

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

На рисунках (Рис.5 и Рис.6) вы можете заметить разницу между кадрами, созданными без использования контрольных точек, и с использованием таковых.

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

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



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

форма

расположение

размер (любые пропорции)

цвет

угол поворота

Если вам нужно отключить shape tweening, в панели Frame выберите Tweening: None.

ВЛОЖЕННАЯ АНИМАЦИЯ

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

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

Возможны три способа решения этой проблемы:

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

Но приготовьтесь к тому, что вам придется рисовать каждый кадр анимации.

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

3. Создать вложенную анимацию. Вот об этом мы сейчас и поговорим.



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

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

АНИМАЦИЯ ПРИ ПОМОЩИ ACTIONSCRIPT

1. Запустим программу Macromedia Flash

2. Выделим 10-ый, 20-ый и 30-ые кадры и правой кнопкой создадим на них ключевые кадры, нажав Insert Blank Key Frame.

3. Установим черный цвет окантовки, оранжевый цвет заливки и

нарисуем круг на полотне.

4. Установим среднее сглаживание линий Smoth, черную окантовку и голубую заливку.

5. Выделим 20-ый кадр

6. Создадим какую-то фигуру в правой части экрана.

7. Установите размер и цвет шрифта.

8. В прямоугольнике 10-го кадра напишем одно слово, например ПЛАНЕТА, в фигуре 20-го кадра другое слово, например ЗЕМЛЯ.

9. На первом и на последнем кадрах нажмем дважды Break Apart (для превращения текста в векторный рисунок).

10. Скопируем кадр 10 и вставим его в 1-ый

11. Скопируем 20-ый кадр и вставим его в 30-ый

12. Установим курсор где-то посредине каждого промежутка на шкале времени и в нижнем окне Tween установим Shape (преобразование формы).

13. Изображение на первом кадре передвинем в центр полотна

14. Выходим в режим масштабирования и уменьшаем до минимума на 1-ом кадре изображение

15. Аналогично на 30-ом кадре изображение передвигаем так же в центр полотна и уменьшаем его масштаб до минимума

16. Проверим преобразование формы, двигаясь по оси времени.

17. Введем новый символ: Insert, New Symbol, Button.

18. Установим черную окантовку и зеленую заливку.

19. Нарисуем кнопку в виде прямоугольника.

20. Скопируем ее и вставим в остальные кадры работы кнопки.

21. Расцветим разные кадры кнопки разными цветами.

22. Войдем в библиотеку.

23. Посмотрим как работает кнопка в окне.

24. Войдем в режим сцены.

25. Вставим новый слой и назовем его КНОПКА.

26. Скопируем кнопку на полотно сцены.

27. Выделим нарисованную на сцене кнопку правой кнопкой мыши.

28. Войдем в режим action. on (release) {

29. Сценарий, назначенный клипу, использует программу-обработчик подобно сценарию кнопки в предыдущем занятии. Чтобы задать программу обработки, вместо командной строки on введите строку onCIipEvent, которая определяет события для клипов ролика. В данном случае событие будет следующим: enterFrame. Это автоматическое событие, происходящее при каждом обращении к данному кадру. Если ролик должен воспроизводиться со скоростью 12 кадр/с, оно должно посылаться в программу обработки 12 раз в секунду.

Если ролик остановлен командой stop () или просто состоит из одного кадра, то кадр "зацикливается", то есть перерисовывается с той скоростью, которая задана ролику

Подобно программе on (press) в сценарии кнопки, команды реакции на событие onClipEvent (enterFrame) заключаются в фигурные скобки. В данной программе будет только одна команда, перемещающая клип на один пиксель влево. Давайте взглянем на сценарий и проанализируем, какие действия в нем выполняются.

onClipEvent(enterFrame) {

this._ x -- ;

}

Разберем команду this._х -- по частям.

Команда this обозначает обращение команды к объекту, который ее содержит. В данном случае this используется для обращения к клипу, которому назначен этот сценарий.

За командой this следует точка, обозначающая обращение к свойству объекта. В нашем примере _х относится к горизонтальному положению клипа. Итак, this._x определяет горизонтальное положение клипа. Символ -- является декрементом (командой уменьшения значения). Он уменьшает значение стоящей перед ней величины на 1 (пункт). Таким образом, команда this._x -- берет значение горизонтального положение клипа и вычитает 1, благодаря чему клип перемещается влево.

Если клип необходимо переместить вправо, используется команда ++, которая называется инкрементом (это команда увеличения значения). Если вы хотите переместить клип вправо или влево сразу на несколько пикселей, используйте соответственно += или -=:

onClipEvent(enterFrame) {

this._x -= 5;

}

Данная команда переместит клип сразу на пять пикселей. В Action набираем необходимый скрипт последовательно через + код в окне кода:

on (release) {

stop();

}

30. Проверим работу кнопки Control, Test Movie.

31. Сохраним файл.

32. Сохраним публикацию в виде файлов fla swf html

Создание нового проекта

· Последовательность:

1. Файл (File) ->

2. Новый (New Flash Document)

3. Сразу его сохраним под каким-нибудь именем: для сохранение выполните сочетание клавиш Ctrl+S (всегда сохраняйте файл, при внесении важных изменений, так же рекомендуется сохранять резервные копии)

Проект создан

Создание анимации

· Для начала создадим новый проект.

o Теперь разберем простой пример создания покадровой анимации:

1. выберите инструмент "Кисть" (Brush);

2. нарисуйте что-нибудь в центре рабочего поля;

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

4. как видите, на новом кадре ничего не изменилось. Выберите инструмент выделения "Selection Tool";

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

6. повторяйте шаги 3, 4, и 6, пока не будете удовлетворены результатом;

7. теперь, чтобы увидеть проделанную работу, устройте предпросмотр, выполнив сочетание клавиш Ctrl+Enter;

8. наблюдайте :)

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

Написание скрипта для кадра

· Наверное, Вы заметили, что при просмотре мультика, когда анимация доходит до последнего кадра, то всё начинается сначала? Это происходит потому, что по стандарту на последнем кадре нет команды "остановиться". Так напишем её:

1. перейдите на последний кадр, щёлкнув по нему мышкой (на временной шкале);

2. теперь нажмите на панель действий, чтобы она раскрылась;

3. напишите: stop(); - это заставит анимацию остановиться на последнем кадре;

4. проверьте это, запустив предпросмотр.

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

Создание кнопки

· Нарисуем в центре рабочего поля что-нибудь кистью:

1. на панели инструментов (слева) выберите "Кисть" (Brush);

2. в центре рабочего поля нарисуйте что-нибудь кнопкообразное.

· Теперь преобразуем получившийся рисунок в кнопку:

1. выделите свой рисунок;

2. нажмите F8;

3. в открывшемся окошке выберите "Кнопка" (Button);

4. нажмите "ОК".

Кнопка создана!

Написание скрипта для кнопки

· Скрипт будем назначать на кнопку (о том, как её создать, написано выше):

1. выделите Вашу кнопку (вокруг неё должна появиться синяя рамочка);

2. зайдите в панель действий;

3. в поле ввода текста введите:

on(press){

stop();

}

· Разберём, что здесь написано:

o on(press) //при нажатии на кнопку (press в скобках обозначает, что действие начнётся в тот момент, когда на кнопку нажмут. Но есть и множество других событий, например, release - если поставить его вместо press, то действия начнутся, когда кнопку нажмут, а потом отпустят, т.е. при отпускании);

o { //открывающая скобка обозначает начало списка действий;

o stop(); //остановить воспроизведение (если бы мы хотели, наоборот, продолжить воспроизведение, то вместо stop(); написали бы play();)

o } //закрытие списка действий.

В результате, при нажатии на кнопку, воспроизведение анимации останавливается на текущем кадре.



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

Команда	Описание
play();	Возобновление (начало) проигрывания анимации.
stop();	Остановка воспроизведения анимации.
nextFrame();	Переход на следующий кадр.
prevFrame();	Переход на предыдущий кадр.
gotoAndPlay(<номер кадра>);	Переход на заданный кадр и воспроизведение анимации, начиная с него.
gotoAndStop(<номер кадра>);	Переход на заданный кадр и остановка воспроизведения на нём.

Создание интерактивной презентации

Создание управления воспроизведением

Создание панели навигации для презентации или мультика

· Для работы нам понадобятся:

o кнопка "Промотать вперёд";

o кнопка "Пауза";

o кнопка "Следующий кадр";

o кнопка "Предыдущий кадр".

Где их взять? Нигде. Будем делать сами - Вы и я.

Ход работы

1. Нарисуйте несколько объектов.

2. Преобразуйте каждый объект в кнопку, как это было описано выше.

3. На каждую кнопку назначьте своё действие (скрипт) по образцу.

4. Для кнопок "Следующий кадр" и "Предыдущий кадр" добавьте следующие действия: nextFrame(); (для кнопки "Следующий кадр") и prevFrame(); (для кнопки "Предыдущий кадр")

·

Мои кнопки

Вид получившейся панели на рабочем поле

Перенос панели на отдельный слой

Если анимации или кадров презентации еще нет

Для удобства:

Блокировка слоя

1. нажмите на кнопку "Блокировка слоя", как показано на рисунке;

2. добавьте новый слой. На нём будет размещаться анимация или слайды Вашей презентации;

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

Панель готова. Вы можете сохранить Ваш проект и в будущем использовать как шаблон.

Если Вы уже создали свою презентацию или анимацию

1. Выделите всю Вашу панель с кнопками управления.

2. Выполните сочетание клавиш Ctrl+X (чтобы вырезать панель для последующей вставки).

3. На временной шкале нажмите на первый кадр нового слоя, чтобы перейти на него.

4. Добавьте новый слой. На нём будет размещаться панель управления.

5. Перейдите на первый кадр нового слоя.

6. Выполните сочетание клавиш Ctrl+V (чтобы вставить панель на новый слой).

7. Теперь пролистайте кадры на временной шкале до последнего кадра анимации/презентации.

8. Выберите на той же позиции кадр нового слоя (как на рисунке) и нажмите F6.



СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ

1. Панкратова Т. "Flash 5: Учебный курс. СПб.: Питер, 2002.

2. Уотролп Э., Гербер Н. Эффективная работа: Flash MX. СПб.: Питер; Киев: BHV, 2003. (+ компакт-диск)

3. Файлы с заготовками для упражнений с сайта издательства «Питер»: http://www.piter.com.

4.rubencho@mtu.ru

5.missing-link@evolutionar-e.com.

6.http://www.dialektika.com

7.Дронов В. Macromedia Flash MX

Павлова И.М., Власова Н.Г. Macromedia Flash MX в модулях./Информатика в школе. № 3 - 2006

8. Каримов С.А. Flash MX. ЮНИТИ., 2007. - 544 с.

9. Колин Мук. Руководство для Action Script 2.0. СПб. : Питер, 2010. - 992 с.

10. Колин Мук. Сборник рецептов. СПб. : Питер, 2008. - 542 с.

11. Анисимов, А.В. Информатика. Творчество. Рекурсия. [Текст] / А.В. Анисимов.- Киев: Наукова думка, 1988.

12.Белошапка, В. О языках, моделях и информатике [Текст] / В. Белошапка / Информатика и образование.- 1987.- № 6.- С. 12-16.

13. Бирих, Р.В. Компьютерные модели школьных физических задач [Текст] / Р.В. Бирих, Е.А. Еремин, В.И. Чернатынский // Информатика: прил. к газ. "Первое сентября".- 2006.- 16-30 апр. (№ 8).- С. 3-10.

14.Бурцева, Г. Обучить с помощью электронных средств: это возможно! [Электронный документ] / Г. Бурцева (http://pedsovet.su/publ/26-1-0-739). 10.01.2010.

15.Голицына, О.Л. Программное обеспечение. [Текст]: Учебное пособие / О.Л. Голицына, Т.Л. Партыка, И.И. Попов.- M.: ФОРУМ: ИНФРА-М, 2006.

16. ГОСТ 5.3-2004 Библиографическая запись. Библиографическое описание [Текст]: Межгос. стандарт.- Введен в 2004 г. // Федеральный компонент государственных образовательных стандартов общего образования / М-во образования РФ. Ин-т образовательных систем.- М., 2004.

17.Гузеев, В.В. Планирование результатов образования и образовательная технология. [Текст] / В.В. Гузеев.- М.: Народное образование, 2000.

18.Дьюи, Д. Психология и педагогика мышления. [Текст] / Д. Дьюи.- М.: Совершенство, 1997.

19.Ершов, А.П. Компьютеризация школы и математическое образование [Текст] / А.П. Ершов // Информатика и образование.- 1992.- № 5-6.- С. 3-12.

20.Завалишина, Д.Н. О механизмах оперативного мышления [Текст] / Д.Н. Завалишина, В.Н. Пушкин // Вопросы психологии.- 1964.- № 3.- С. 87-100.

21. Крутецкий, В.А. Психология. [Текст] / В.А. Крутецкий.- М., 1986.

22.Кузнецов, А.А. Информатика. Тестовые задания [Текст] / А.А. Кузнецов.- M.: БИНОМ, 2003.

23.Левченко, И.В. Сборник методических материалов [Текст] / УПК «Педколледж-лицей» № 13; И.В Левченко.- М., 1996.

24.Селевко, Г.К. Современные образовательные технологии [Текст]: Учебное пособие / Г.К. Селевко. - М.: Народное образование, 1998.

25.Советский энциклопедический словарь. [Текст] / Гл. ред. А. М. Прохоров.- 4-е изд. - М, 1989.

26.Столяренко, Л.Д. Психология [Текст] / Л.Д. Столяренко, В.Е. Столяренко.- Ростов н/Д., 2000.

27.Тхоржевский, Д.А. Методика трудового обучения с практикумом. [Текст] / Д.А. Тхоржевский.- М.: Просвещение, 1987.

28.Угринович, Н.Д. Информатика (теория, методика, задачи) [Текст] / Н.Д. Угринович.- М.: МИПКРО, 1991.

29.Хотунцев, Ю.Л. Преподавание образовательной области «Технология» в 2004/2005 учебном году [Текст]: Методическое пособие / Ю.Л. Хотунцев, Л.И. Дубровская, А.В. Марченко.- М.: МИОО, 2004.

30. Шамова, Т.И. Управление образовательным процессом в адаптивной школе. [Текст] / Т.И. Шамова, Т.М. Давыденко.- М.: Педагогический поиск, 2001.

31.Шутенко, А.В. Методы проведения учебных занятий с использованием средств информационных и коммуникационных технологий / А.В. Шутенко [Электронный документ].- (http://pedsovet.su/publ/26-1-0-841). 05.04.2010.

32.Flash 4. Анимация в Интернете - Дерек Франклин, Брукс Паттон.: СПБ: Символ Плюс - Санкт- Петербург, 2000.

33.Бурлаков Михаил Викторович Adobe Flash CS3. Самоучитель. -- М.: «Диалектика», 2007. -- С. 624. -- ISBN 978-5-8459-1319-7

34.Шон Пакнелл, Брайан Хогг, Крейг Суонн Macromedia Flash 8 для профессионалов = Macromedia Flash Demystified. -- М.: «Вильямс», 2006. -- С. 672. -- ISBN 0-7357-1397-9

35.“Moodle. E-Learning Course Development.” William H. Rice IV. Published by Packt Publishing Ltd. 32 Lincoln Road Olton Birmingham, B27 6PA, UK.

Размещено на Allbest.ru