Как сделать flash на macromedia flash 8
Обновлено: 06.07.2024
Общеизвестно, что регулярность и уровень подготовки учащихся к каждому занятию находятся в прямой зависимости от наличия и глубины проводимых контрольных мероприятий. Из всех существующих на сегодняшний день методик диагностирования самой перспективной и эффективной считается тестирование.
Тестирование как форма контроля и объективной оценки знаний и умений обучаемых все более привлекает внимание преподавателей - практиков. Однако многих педагогов не устраивают «готовые» тесты: их оформление, содержание, уровень сложности, несоответствие программному материалу. Программа Macromedia Flash предоставляет уникальные возможности для создания «авторских» тестов – красочных, анимационных, интерактивных, рассчитанных на разновозрастные группы обучаемых.
Разработкой тестов могут заниматься не только педагоги, но и учащиеся во время факультативных и кружковых занятий. Ученики сами придумывают вопросы по интересующей их теме и составляют короткие однозначные ответы на них. Такой вид деятельности даёт возможность учащимся лучше понять общие и отличительные качества изучаемых объектов, легче классифицировать различные явления, полнее усваивать учебный материал. Производство тестов - кропотливый и длительный процесс, но при этом невероятно творческий и увлекательный.
Типовые правила подготовки материалов для тестового контроля :
§ каждый тест должен выражать одну идею, одну мысль;
§ задания должны быть краткими, четкими, легко читаемыми;
§ неправильные ответы должны конструироваться на основе типичных ошибок и быть правдоподобными;
§ формулировка заданий не должна содержать двусмысленности и «ловушек»;
§ следует располагать тесты по возрастанию трудности;
Тест должен включать разнообразные по форме, содержанию, степени сложности задания, достаточно полно охватывать материал проверяемой темы. Хорошим тоном считается наличие инструкции, поясняющей особенности и алгоритм тестирования. Инструкция должна быть четкой, понятной для выполнения.
Для построения тестовых заданий наиболее пригодными методиками являются:
а) выбор варианта (альтернативные);
г) исключение лишнего.
Тестирование становится гораздо интересней, когда вопросы представлены не в стандартной форме, например: голосовой ответ (подходит для изучения иностранных языков), Drag - and - drop (возможность построения или перемещения объектов на экране), область на рисунке (для выбора правильного ответа необходимо отметить область на представленном рисунке) и другие.
Вашему вниманию предлагаются различные варианты тестов, разработанные в среде Macromedia Flash , на занятиях компьютерного кружка. Возраст авторов тестов: 12 – 16 лет.
1. Тест типа «Правилка»
Размещаем в каждом кадре fla -документа текст задания «Исправьте ошибки в словах», текстовое поле типа Static с текстом вопроса, текстовое поле типа Input c именем otvet для ввода ответа, кнопку перехода к следующему вопросу.
Каждому кадру с вопросами необходимо присвоить имя (например, vopros1, vopros2,…) и поместить на него скрипт stop();
Возможны два варианта сценария при неправильном ответе на вопрос:
- ожидание верного ответа, т.е. переход на следующий вопрос осуществляется только при наличии правильного выполнения задания;
В первом случае на кнопку пишется следующий код:
if (otvet==” цыплёнок ”)
Во втором случае на кнопку запишем следующий код:
on ( release )
gotoAndPlay (” vopros 2”); // переход на новый кадр
if ( otvet ==”цыплёнок”) // проверка ответа
Примечание. На первый кадр следует записать следующий скрипт: n =0;
Предлагается вопрос и 3-4 варианта ответа на него. Каждому варианту соответствует кнопка, при нажатии на которую осуществляется переход к следующему вопросу.
На каждый кадр с вопросами необходимо поместить скрипт stop();
На одну кнопку с правильным вариантом ответа записывается следующий код:
gotoAndPlay(“vopros2”);
n = n +1;
На остальные кнопки помещается код:
on ( release )
gotoAndPlay (“ vopros 2”);
Примечание. Условный оператор в этом типе тестов не используется.
3. Тест с вводом номера правильного ответа
Для перехода к следующему вопросу используется кнопка, на которую помещается следующий код:
on ( release )
if ( otvet ==”…”)
gotoAndPlay (“ vopros 2”);
4. Тест «Установи соответствие»
Пример. Номера, написанные на тюбиках красок разных цветов, нужно поставить в соответствие со словом на английском языке, обозначающим данный цвет.
Для проверки результата на кнопку следует написать следующий код:
on ( release )
if ( kk 1=="3" && kk 2=="5"&& kk 3=="2"
5. Кроссворд
Рисуется сетка кроссворда. В каждую ячейку кроссворда помещается текстовое поле типа Input , которое получает имя. Для проверки решения кроссворда пишем код:
on ( release )
if ( s 1==' m ' && s 2==' i ' && s 3==' l '
Примечание. Задайте для всех текстовых полей выравнивание по центру.
6. Тест с перемещением объектов (метод Drag - and - Drop )
Для примера используется тест по английскому языку на тему «Произношение звуков»: расположенные на поле слова необходимо перенести в нужное место карусели в соответствии с их звуковым произношением.
Создаем текстовые поля, преобразуем их в кнопки, для перемещения на каждую кнопку пишем код:
on (press)
startDrag("ka1",false);
, где ka1 – имя кнопки .
Чтобы осуществить проверку, необходимо написать следующий условный оператор, учитывая координаты прямоугольных областей:
on ( release )
if ( ka 6._ x >-60 && ka 6._ x <30 && ka 5._ x >-60 && ka 5._ x <30 && ka 4._ x >-60 && ka 4._ x <30 && ka 7._ x >-160 && ka 7._ x <-110 && ka 8._ x >-160 && ka 8._ x <-110 && ka 9._ x >-160 && ka 9._ x <-110 && ka 1._ x >100 && ka 1._ x <140 && ka 2._ x >90 && ka 2._ x <150 && ka 3._ x >90 && ka 3._ x <150 && ka 1._ y <100 && ka 2._ y <100 && ka 3._ y <100 && ka 4._ y <100 && ka 5._ y <100 && ka 6._ y <100 && ka 7._ y <100 && ka 8._ y <100 && ka 9._ y <100 && ka 1._ y >-10 && ka 2._ y >-10 && ka 3._ y >-10 && ka 4._ y >-10 && ka 5._ y >-10 && ka 6._ y >-10 && ka 7._ y >-10 && ka 8._ y >-10 && ka 9._ y >-10)
7. Тест «Лабиринт»
Рисуется лабиринт, по которому нужно провести объект, например, шарик. В каждом переходе лабиринта появляется очередной вопрос теста.
Движение шарика задается автоматически с помощью Motion tweening . В нужных местах лабиринта создаются ключевые кадры, на которые помещается скрипт stop() . Объект останавливается и далее продвигается по лабиринту только при вводе в ячейку правильного ответа.
На кнопку проверки пишется следующий скрипт:
on ( release )
if ( ot ==11) // проверка ответа
Примечание. Подробнее смотри в журнале «ИиО» № 10-2008.
8. Тест «Шарики» (авторская идея теста для младших школьников)
Примером служит текст стихотворения с пропущенными буквами. На местах пропусков создаются текстовые поля для ввода (лучше не оставлять их пустыми, а поместить в них символ «.»).
Для наглядности меняем цвет шрифта в полях ввода.
Кнопке проверки соответствует следующий код:
on ( release )
if(x1!=' и ')
if(x2!=' о ')
if(x3!=' ю ')
if(x4!=' о ')
if(x5!=' одуванчики ')
, где q 1, …, q 5 – имена клипов-шариков;
x 1, …, x 5 – имена текстовых полей ввода.
Примечание. Свойство alpha характеризует прозрачность объекта. Как альтернативу можно использовать свойство видимости, например, q 1._ visible = false ;
Вариант для детей с художественными способностями: делая клип «воздушный шарик» невидимым, включать свойство видимости для заранее прорисованного клипа с анимацией, изображающей, как лопается шарик.
9. Тест «Возводим дом»
Для реализации данного теста необходима предварительная работа: создать красочный рисунок дома, каждый элемент которого преобразовать в клип. Присвоить клипам имена.
На первый кадр поместить код, делающий каждый их клипов невидимым:
имя клипа. _ visible = false ;
На кнопку c правильным ответом пишем код:
q1._visible=true; // дверь
gotoAndPlay(“vopros2”);
На кнопку c неверным ответом пишем код:
text1=’ двери ’;
gotoAndPlay(“vopros2”);
При правильных ответах на вопросы теста поэтапно «возводится» дом (становятся видимыми его отдельные фрагменты). В противном случае, под строкой «В доме не хватает:» в подготовленные текстовые поля типа Dynamic последовательно выводятся названия недостающих частей дома.
10. Тест « Раскрась рисунок »
Рисуется черно-белая картинка, каждый фрагмент которой оформляется как отдельный клип (например, разбитый на сектора мяч). Каждому клипу присваиваем имя. Если тестируемый правильно отвечает на вопросы, то рисунок постепенно закрашивается.
На кнопку c правильным ответом пишем код:
on ( release )
gotoAndPlay (" vopros 2" );
col=newColor(q1);
col.setRGB(0xFFcc33); // цвет заливки
, где q 1 – имя клипа-фрагмента рисунка.
11. Тест-шутка «Отгадайка-ка»
При наведении мышки на нужный объект, он становится видимым. Можно «спрятать» все объекты и искать их, водя мышкой по экрану. Необходимо использовать метод hitTest.
Пример демонстрирует карту Беларуси, на которой точками обозначены города. Когда мышка указывает на областной центр, появляется его название и точка меняет цвет на красный.
onClipEvent (enterFrame)
if (this.hitTest
(_root._xmouse,_root._ymouse,true))
col = new Color(_root.kr1);
col . setRGB (0 xFF 6600); //цвет красный
12. Тест с использованием компонентов CheckBox
Результаты тестирования оформляем в виде таблицы. Стрелка (клип с именем strelka) указывает на текущий номер вопроса.
На кнопку проверки пишем следующий код:
gotoAndPlay(“vopros2”); //следующий вопрос
strelka ._ y +=17; //перемещение стрелки вниз
//проверка правильности ответа
if (k3.getValue() && !k1.getValue()
o 2="+";> //занесение символа «+» в таблицу
o 2="-";> //занесение символа «-» в таблицу
, где k1, k 2, k 3 – имена компонентов CheckBox,
o1,…, o 5 – имена текстовых полей типа Dynaniс, расположенных во втором ряду таблицы,
getValue – свойство состояния флажка ( true или false ).
Очевидно, что тесты – не единственная форма контроля знаний. Однако сочетание возможностей компьютерных технологий и достоинств тестирования вызывает большой интерес к использованию их в учебном процессе.
Работа над созданием тестов в среде Macromedia Flash формирует конструкторские и исследовательские навыки активного творчества, способствует развитию креативного мышления, предоставляет возможность реализовать дизайнерские и художественные способности ребёнка.
Желаю всем удачи, вдохновения и полёта творческой мысли при разработке новых увлекательных тестов!
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
До сих пор мы рассматривали Flash-фильмы, которые воспроизводились без вмешательства зрителя от начала и до конца. Однако Flash позволяет также создавать интерактивные приложения, в которых пользователь может управлять демонстрацией контента. В данном уроке мы начнем знакомство с элементами языка описания сценариев Action Script и рассмотрим, как с его помощью можно создать интерактивные приложения. В качестве примера создадим фотоальбом с элементами интерактивного интерфейса. Но прежде чем приступить к описанию Action Script, следует рассказать еще об одном виде символов, который мы до сих пор оставляли без внимания, — это символы-кнопки. Для построения интерактивного интерфейса они просто необходимы.
Создание кнопок
Кнопка представляет собой четырехкадровый интерактивный мувиклип. Когда мы присваиваем символу тип «Кнопка», Flash создает для нового символа монтажную линейку из четырех кадров:
Чтобы создать кнопку, выполните команду Insert => New Symbol (можно набрать сочетание клавиш Control+F8). В появившемся диалоговом окне Create New Symbol введите имя символа-кнопки (например, but1) и выберите тип символа Button («Кнопка»).
Flash переключится в режим редактирования символа, предоставив кадры Up, Over, Down и Hit. Первый кадр, Up, становится пустым ключевым кадром. Нарисуем в этом кадре ненажатый вид кнопки (рис. 1).
Рис. 1. UP-кадр кнопки
Выделим второй кадр, помеченный как Over и соответствующий состоянию, когда курсор занесен над кнопкой. Вставим в этом кадре ключевой фрейм (по команде Insert => Keyframe ), в результате чего появится ключевой кадр, полностью повторяющий содержание Up-кадра. Изменим цвет кнопки, как показано на рис. 2.
Рис 2. Over-кадр кнопки
Аналогично добавим следующий кадр (Down-кадр) и нарисуем нажатое состояние кнопки (рис. 3).
Рис. 3. Down-кадр кнопки
В Hit-кадре пока не будем ничего рисовать, а вернемся к этому кадру чуть позже.
Перейдем к основной сцене, вызовем библиотеку по команде Window => Library и создадим экземпляр символа кнопки путем перетаскивания его на сцену (рис. 4.)
Рис. 4. Создадим экземпляр кнопки, перетащив его из библиотеки
В результате получим следующий фильм. Как видно из данного фильма, надавливание кнопки происходит не только тогда, когда мы нажимаем мышью на центральную (рабочую) зону кнопки, но и при нажатии на рамку вокруг нее. Связано это с тем, что если Hit-кадр не нарисован, то рабочая область кнопки будет соответствовать Up-кадру.
Для того чтобы нажатие кнопки происходило только в рабочей зоне, необходимо в Hit-кадре определить эту зону, то есть нарисовать кнопку без рамки (см. рис. 5)
Рис. 5. Hit-кадр кнопки
После того как мы добавим необходимый Hit-кадр получим следующий фильм, в котором при нажатии на рамку продавливания кнопки не происходит.
Чтобы сделать кнопку интерактивной, необходимо связать факт нажатия кнопки с выполнением определенных команд, то есть описать определенный сценарий. Для задания сценариев во Flash существует специальный язык Action Script. В данном уроке мы затронем лишь незначительную часть возможностей этого языка, а в дальнейшем будем возвращаться к структуре и синтаксису Action Script по мере усложнения примеров создания интерактивных фильмов на Flash.
Понятие об Action Script
Action Script представляет собой язык написания сценария — набора инструкций, которые управляют элементами Flash-фильма. Сценарии Action Script могут быть встроены в фильм или храниться во внешнем текстовом файле с расширением AS.
При встраивании сценария в фильм его можно внедрять в разные части фильма. Точнее, сценарии Action Script могут содержать ключевые кадры, экземпляры кнопок и экземпляры мувиклипов. Соответственно сценарии называются сценариями кадра (Frame Action), сценарием кнопки (Button Action) и сценарием клипа (MovieClip Action).
Сценарии Action Script выполняются по наступлении определенных событий, инициированных пользователем или системой. Механизм, который указывает программе Flash, какой оператор следует выполнить при наступлении того или иного события, называется обработчиком событий.
Action Script имеет собственный синтаксис, во многом схожий с синтаксисом JavaScript. Flash MX 2004 поддерживает Action Script всех предыдущих версий Flash.
Одним из основных понятий Action Script являются Actions — команды, которые выдают инструкции во время исполнения SWF-файла. Например, gotoAndStop() отсылает воспроизводящую головку (Рlayhead) на определенный кадр или метку. От слова Actions и происходит название языка — Action Script (дословно — сценарий действий). С большинством понятий этого языка мы ознакомимся на конкретных примерах.
Интерактивный фотоальбом
Продемонстрируем использование кнопок для управления фотоальбомом — создадим набор фотографий и добавим две кнопки, которые будут листать фото вперед и назад.
Поместим на основной монтажной линейке первое фото и добавим кнопку из стандартного набора. Для доступа к нужной папке следует выполнить команду Windows => Сontrol Panels Common Libraries => Buttons (рис. 6).
Рис. 6. Добавим кнопку из стандартной библиотеки
В результате выполнения данной команды появится панель, содержащая большой набор заранее нарисованных кнопок различных типов. Выберем, например, Key Buttons (кнопки, похожие на клавиатурные клавиши), откроем соответствующую папку, выберем кнопку key-left (рис. 7) и создадим экземпляр данной кнопки (путем перетаскивания ее на сцену).
Рис. 7. Элементы папки Key Buttons
Обратите внимание, что, когда вы устанавливаете вторую кнопку (key-right) на сцене и перемещаете ее, чтобы установить на одном уровне с первой кнопкой, программа дает подсказку (пунктирную линию), которая позволяет точно позиционировать кнопку (рис. 8).
Рис. 8. Автоматическое выравнивание кнопок на одном уровне
Для того чтобы добавить сценарий, необходимо вызвать редактор Action Script по команде Window =>Development Panels => Actions или нажав клавишу F9. Если вы собираетесь часто писать скрипты, то эту клавиатурную команду стоит запомнить. В результате появится редактор Action Script (рис. 9).
Рис. 9. Панели редактора Action Script
Мы будем присваивать сценарий кнопке. В последних версиях ActionScript имеется возможность писать централизованный код, то есть код, который размещен в одном месте, и такая возможность позволяет лучше разбираться в больших программах. Однако в простых примерах (которые мы и рассматриваем) присваивание сценария кнопке вполне допустимо.
Итак, для кнопки со стрелкой влево нам нужно формализовать следующий сценарий: «Если кнопка отпускается на некотором кадре, то с этого кадра необходимо перейти на предыдущий кадр». В соответствии с синтаксисом языка Action Script (рис. 10) это будет выглядеть следующим образом:
Перед вами третья часть статьи под названием "Macromedia Flash 8: курс молодого бойца", посвященная этому замечательному программному продукту и технологии Flash. Начиная с сегодняшнего дня, темы нашего разговора о Flash станут более узкими. Поэтому впредь я буду опускать слова "курс молодого бойца" в заглавии. Однако это обстоятельство совсем не повлияет на способ изложения материала, основная цель которого - ответить на множество вопросов, возникающих у начинающих flash-дизайнеров, и дать пищу для размышлений бывалым.
Итак, сегодня на повестке дня компоненты пользовательского интерфейса Macromedia Flash Professional 8, а также способы их настройки.
Стандартные компоненты Flash 8
В последней версии мощного графического пакета Macromedia Flash 8, помимо кучи инструментов, методов и эффектов временной шкалы, предназначенных для создания качественной мультипликации, присутствуют полноценный объектно-ориентированный язык программирования ActionScript 2.0 и многочисленные компоненты (встроенные программные блоки типа Movie).
Зачем вообще нужны компоненты? Во многих случаях они значительно упрощают процесс разработки интерактивного приложения. С помощью полей ввода данных и всевозможных переключателей на web-сайтах легко создаются регистрационные формы, посредством загрузчиков можно управлять загрузкой текстовых и мультимедийных данных из различных источников и т.д. Сегодня мы познакомимся с одним из классов компонентов во Flash 8 - элементами пользовательского интерфейса (User Interface - UI).
Самым популярным объектом во Flash, конечно, является кнопка (button). Она присутствует во Flash и как тип символа, и как элемент UI. Реже используются компоненты RadioButton, CheckBox, MenuBar и др., но они отнюдь не являются менее важными. Окно компонентов вызывается по нажатию Ctrl+F8 или из меню Window -> Components. Основные компоненты UI см. в таблице.
Сегодня на примере настройки параметров элемента пользовательского интерфейса под названием Alert будут рассмотрены принципы работы со стилями компонентов.
Предварительная настройка свойств компонентов
Компонент Alert позволяет организовать небольшой диалог пользователя с компьютером. Сообразим что-то похожее на программу-говорилку Alice, созданную в 60-х годах и обладающую небольшим искусственным интеллектом, который позволял поддерживать беседу с человеком, используя его ответы на ранее заданные вопросы.
Подобным образом можно организовать и более сложный диалог с пользователем.
Работа со стилями
Для чего же используются стили? Сейчас поясню. Любой компонент во Flash имеет определенную цветовую гамму, размер шрифта и т.д. Но если вы занимаетесь разработкой, к примеру, собственного сайта, то, чтобы не нарушать целостность картины, вам придется "подстроить" компоненты под сайт. Я думаю, что не ошибусь, если скажу, что каждый flash-дизайнер стремится создать свои ролики в особенной, свойственной только ему, манере. С помощью стилей и тем во Flash 8 можно сделать каждый компонент уникальным. Но не будем распыляться и сосредоточимся пока на стилях.
Прикладной программный интерфейс форматирования (Styles API) предоставляет пользователю свойства и методы, с помощью которых можно изменить цвет компонента и отформатировать текст, содержащийся на нем. Обычно этого достаточно. Вместе с Flash 8 поставляются два стиля с набором параметров: "Halo" и "Sample", которые находятся в файлах HaloTheme.fla и SampleTheme.fla, соответственно. На рисунке показано их месторасположение в Windows 2000/XP. Нужно отметить, что у темы "Sample" свойств намного больше, поэтому целесообразнее использовать именно ее для модификации компонентов. А делается это следующим образом:
- Вызывается команда File -> Import -> Open External Library и в диалоговом окне указывается файл SampleTheme.fla. Затем на панели импортированной библиотеки выбирается Flash UI Components2 -> Themes -> MMDefault. Потом из этого окна необходимо перетащить папку с ресурсами нужного компонента (assets) в окно библиотеки символов текущего документа.
- При помощи методов setStyle (параметр, значение) и getStyle (параметр) можно установить или получить значение того или иного параметра выбранного стиля.
Поскольку мы работаем с компонентом Alert, то перетащим в библиотеку символов нашего документа папку "Alert Assets". Затем воспользуемся стандартными свойствами темы "Sample" (см. листинг).
Теперь цвет диалогового окна Alert изменен на фиолетовый (0xE0C5FE), а надписи на нем стали синими, причем шрифт превратился в "Times New Roman" с размером 15 пунктов. Нужно отметить, что таким образом был модифицирован символ Alert, поэтому изменения скажутся на всех его экземплярах. Описание всех свойств тем "Halo" и "Samlpe" можно найти в справке Flash 8.
А если мне этого мало?
Если даже при использовании стилей внешний вид компонентов не отвечает вашим эстетическим требованиям, тогда можно попробовать написать свою собственную тему. Для этого достаточно отредактировать или заменить оболочки необходимых компонентов в одной из стандартных тем. Для этого сохраняем файл HaloTheme.fla или SampleTheme.fla под уникальным именем, загружаем его, переходим в окно библиотеки символов (Window -> Library или Ctrl+L), выделяем необходимый компонент и в контекстном меню выбираем опцию "Edit". Одни элементы пользовательского интерфейса состоят из множества частей, поэтому их можно легко преобразить, перерисовав или создав заново каждую деталь. Такими компонентами являются Button, CheckBox, ComboBox, DataGrid, RadioButton и пр. Другие оболочки рисуются программным способом. В этом случае для изменения внешнего вида компонента потребуется модифицировать исходный код. Это, например, компонент Alert. Поскольку создание пользовательской темы является трудоемким процессом, мы не будем его подробно рассматривать. По крайней мере, сейчас. Вот и все.
Послесловие
Сегодняшняя статья о программном пакете Macromedia Flash 8 - наша последняя встреча в 2005 году. У ее автора начинается пора экзаменов в университете. Однако не так страшна сессия, как ее малюют. Намного ужаснее несколько недель до нее, когда за минимально возможное время нужно выполнить и защитить энное количество лаб, а также допуститься к самим экзаменам. :) Поэтому сделаем небольшой перерыв.
Знаете ли вы, что на горе Кения, которая находится в тропической Африке, смена поры года наступает каждые сутки? Днем на вершине потухшего вулкана царит лето, а ночью земля покрывается льдом. Невероятно, но это факт! Дело в том, что флора вершины Кении очень чувствительна к тропическому солнцу, которое греет только днем. Ночью же температура падает до нуля и ниже. Если бы я не видел этого своими глазами (документальный фильм BBC), я бы точно не поверил!
Но сейчас вам предстоит покорить другую вершину, которая расположена на материке Macromedia Flash 8 Professional и называется "Управление объектами посредством сценариев". С помощью встроенного языка программирования ActionScript можно обратиться почти к каждому элементу Flash- документа и определить программным путем его реакцию на любые события: загрузка клипа в память, нажатие клавиши на клавиатуре и т.д. Эти возможности Flash с большим успехом используются при написании компьютерных игр и создании многофункциональных интерактивных приложений, главная роль в которых отводится пользователю. И именно эти возможности Flash 8 (и более ранних версий) на протяжении данной статьи станут для вас притчей во языцех.
О Flash: назначение, особенности
Какой современный юзверь не знает "Масяню", "Магазинчик Бо", "Ежи и Петруччо"! Так вот, все эти мультики созданы средствами Flash. Вы когда- нибудь посылали пингвина прямо в "десятку" в YetiSports? Так вот, эта игрушка и многие другие тоже созданы средствами Flash. Вы заходили на сайт Disturbed? Здорово, правда? Так вот, эта и многие другие интернет-странички тоже созданы средствами Flash. Так что же такое Flash? Ответ: Flash — это технология, позволяющая создавать высококачественные мультимедийные интерактивные приложения, которые могут быль использованы в любых областях. Хотите рисовать такие же мультики, игры и сайты? Тогда обзаведитесь Macromedia Flash 8 Professional и как минимум дочитайте эту статью до конца:).
Основными особенностями Macromedia Flash являются:
. Работа с векторной графикой и поддержка растровой.
. Временная шкала, используемая для создания мультипликации.
. Возможность оптимизации готовых роликов.
. Мощный язык сценариев ActionScript.
. Множество компонентов GUI.
. Большой набор средств рисования и публикации.
. Поддержка различных платформ (IBM PC, Macintosh, мобильные устройства) и др.
Каждый графический элемент, расположенный на сцене Flash, называется объектом. Это может быть простейшая геометрическая фигура или целый Flash-ролик. Объекты, находящиеся в библиотеке каждого проекта Flash (Window -> Library), называются символами (Symbols). Любой объект можно превратить в символ командой Modify -> Convert To Symbol. Если объект перетащить из библиотеки символов на монтажный стол (используя Drag & Drop), то он превратится в экземпляр символа (Instance). Экземпляр отличается от символа тем, что любое его изменение не отражается на соответствующем ему символе, а редактирование символа сказывается на всех порожденных экземплярах. Типы символов во Flash приведены в таблице 1.
Что ж, можно считать, знакомство с Macromedia Flash состоялось. Теперь попробуем программу в действии.
На повестке дня
Сегодня я предлагаю читателю поучаствовать в рисовании и оживлении двояковыпуклой линзы, посредством которой можно рассмотреть мелко набранный текст. Увеличительное стекло должно перемещаться как при помощи мышки, так и при помощи клавиатуры. Действия, которые будут проделаны и описаны, просты и легко повторяются, а их результат может даже пригодиться (идея была мною позаимствована из книги по Flash). Кроме того, вы познакомитесь с принципами управления несколькими взаимосвязанными предметами и анимированными масками. Кто сказал, что маски — это suxx? Вы говорите, ересь. Сжечь их на костре! Маски — это палочка-выручалочка каждого Flash-мейкера. Итак, за дело (не бойтесь — про костер я пошутил:))!
Планирование действий, или ликбез
Будет проще, если каждый предмет — исходный текст, первую маску, увеличенный текст, вторую маску и линзу — расположить на отдельном слое. Для наглядности присвоим слоям имена, характеризующие расположенные на них предметы. Самым первым, т.е. нижним, пусть будет Normal Text, затем — Mask 1, следом за ним — Scaled Text, потом — Mask 2 и, наконец, Zoom. Осталось нарисовать действующие лица нашей пьесы и продумать мизансцену. Теперь, когда предельно ясна как сама цель, так и способ ее достижения, можно попробовать воплотить ее в жизнь.
Работа с масками, или как сделать линзу
С помощью инструмента Text разместите на нижнем слое надпись и превратите ее в объект типа MovieClip с помощью команды Modify -> Convert To Object. Теперь введите его имя на закладке Properties (Ctrl+F3). Пусть будет norm_text (рис.2). Это нам необходимо для привязки к тексту первой маски. Теперь нужно создать саму маску. Для этого в меню Insert выберите New Symbol и в свойствах создаваемой маски укажите тип MovieClip и название Mask 1. В открывшемся окне редактирования нового символа нарисуйте большой черный прямоугольник, а в его середине — белый круг радиусом 60, который затем необходимо удалить. При тестировании ролика (Ctrl + Enter) в этом месте текста видно не будет. Это как раз то, что нужно. Следите за тем, чтобы окружность встала ровно по центру рабочей области — там, где нарисован маленький крестик. Это впоследствии избавит вас от лишней головной боли. Когда маска готова, закройте редактор символов и из библиотеки символов (Ctrl + L) перетащите на второй слой монтажного стола экземпляр только что созданного символа.
Рисуем оправу к линзе
С помощью наложения двух масок было получено увеличительное стекло. Теперь самое время заняться лупой. Для этого в меню Insert выберите New Symbol и опять задайте тип MovieClip. В моем случае лупа состоит из трех частей: ручки, оправы и ее верхнего слоя. Ручка нарисована инструментом Line и залита градиентом, наложение которого можно отрегулировать Gradient Transform Tool'ом. Оправа и ее верхний блестящий слой — полые (т.е. без заливки) окружности. Заливку в этом случае нужно отключить, чтобы через отверстие в лупе можно было видеть нижние слои, которые вместе образуют увеличительную линзу. Первое кольцо оправы имеет внешний радиус 65, внутренний радиус 55 и толщину 10, второе — 66, 64 и 2. Имейте в виду, что на панели Properties указываются средние размеры, т.е. без учета толщины линии. Поэтому придется самостоятельно рассчитывать границы объектов при "подгонке" частей лупы. Готовую лупу, вернее, ее кольца, также необходимо расположить ровно по центру окна редактора символов — иначе не оберешься проблем. Но об этом в следующем разделе.
I like to move it, move it…
Теперь осталось самое интересное — заставить лупу перемещаться вслед за курсором мыши. Итак, из библиотеки символов перенесите на монтажный стол на слой Zoom экземпляр уже созданной лупы и дайте ей название (рис.4). Я решил не мудрить и записал просто "zoom_1". Теперь выделите лупу, откройте редактор сценариев (F9) и наберите следующий код:
onClipEvent(mouseMove) _root.zoom_1._x = _root._xmouse;
_root.zoom_1._y = _root._ymouse;
_root.mask_1._x = _root._xmouse;
_root.mask_1._y = _root._ymouse;
_root.mask_2._x = _root._xmouse;
_root.mask_2._y = _root._ymouse;
>
Это обработчик события mouseMove, т.е. перемещения указателя мыши, для объекта zoom_1. ОnClipEvent("Событие") — стандартная функция обработки событий для клипов. Ключевое слово _root указывает на то, что объекты zoom_1, mask_1 и mask_2 находятся в основном клипе, а свойства _xmouse и _ymouse позволяют узнать текущие координаты курсора мыши. Дальше все понятно: лупу и обе маски передвигаем в точку (_xmouse, _ymouse), т.е. привязываем к мышке. Теперь при малейшем изменении положения указателя лупа будет следовать за ним. Помните, я вам несколько раз советовал располагать создаваемые символы ровно по центру поля редактора? Теперь самое время это пояснить. Видите ли, в противном случае при задании одних и тех же координат для объектов zoom_1, mask_1 и mask_2, т.е. _xmouse и _ymouse, лупа и маски просто бы разбегались кто куда. Если объекты перемещаются посредством клавиатуры, то это замечание неактуально. В этом случае для zoom_1 нужно написать следующий сценарий:
onClipEvent (enterFrame) Speed = 10;
if (Key.isDown (Key.RIGHT)) this._x += Speed;
_root.mask_1._x += Speed;
_root.mask_2._x += Speed;
> else if (Key.isDown (Key.UP)) this._y -= Speed;
_root.mask_1._y -= Speed;
_root.mask_2._y -= Speed;
> else if (Key.isDown (Key.DOWN)) this._y += Speed;
_root.mask_1._y += Speed;
_root.mask_2._y += Speed;
> else if (Key.isDown (Key.LEFT)) this._x -= Speed;
_root.mask_1._x -= Speed;
_root.mask_2._x -= Speed;
>
>
Это обработчик события enterFrame для лупы, которое возникает при загрузке каждого нового кадра клипа. Объявленная переменная Speed определяет скорость перемещения указателя мыши, а вернее, приращение координат при нажатии на клавиши управления курсора. Для определения активированной клавиши используется метод isDown общего объекта Key. Функция isDown возвращает истину, если была нажата указанная в ее параметрах кнопка. Таким образом, если пользователь хочет переместить лупу вверх и давит клавишу "вверх", то сработает инструкция "if (Key.isDown (Key.UP))…", если влево — то "if (Key.isDown (Key.LEFT))…" и т.д. Теперь остается изменить координаты лупы и масок для каждого случая. Если лупе приказали ползти вверх, тогда ясно, что нужно уменьшить ординату объектов zoom_1, mask_1 и mask_2 на величину Speed. Это делается при помощи оператора "-=", ну, а синтаксис вы видите в листинге. Ту же самую команду можно записать как "_root.mask_1._y = _root.mask_1._y — Speed"(классический вариант). И так, и так правильно (программисты, пишущие на С/С++, ехидно посматривают на недоумевающих паскалистов). Обработчик нажатия остальных трех клавиш записывается аналогично.
Когда сценарий привязан к конкретному объекту, то при обращении к нему для экономии места указывают не полный путь, а ключевое слово "this". Поскольку данный сценарий закреплен за лупой (объектом с именем "zoom_1"), громоздкую запись "_root.zoom_1._x" можно заменить на "this._x". Обращаю ваше внимание на использование прописных букв в зарезервированных словах ActionScript — например, enterFrame, Key.isDown и других. Это не прихоть автора, а особенность синтаксиса языка. Эти и другие слова нужно записывать именно так, и никак иначе. Если вы допустили ошибку в ключевом слове, то оно сразу изменит свой цвет с синего на черный, а компилятор попросит определить неизвестную переменную. Теперь можете откинуться на спинку кресла, выпить чашечку любимого кофе и с неподдельным восхищением посмотреть на результат ваших трудов.
И еще несколько слов
Посредством сценария можно не только перемещать объекты, но и изменять любые из их свойств. Хотите, чтобы лупа вдруг стала полупрозрачной? Нет проблем! Напишите обработчик события загрузки ролика, т.е. "onClipEvent (load)", содержащий команду "this._alpha = 50;" или "setProperty (this, _alpha, 50)". Увеличенный текстовый блок совсем не обязательно мастерить самостоятельно. Для изменения размеров в полтора раза достаточно записать код:
onClipEvent (load) <
this._width += this._width/2;
this._height += this._height/2;
>
Можно даже предусмотреть возможность ввода оптической силы линзы, скорости перемещения лупы и т.д. Клипы также могут использоваться в качестве кнопок (объектов типа Button) и реагировать на нажатие и, извольте, отжатие клавиш мыши. В этом случае функцией для обработки событий выступает не "onClipEvent ("Событие")", а "on ("Событие")". Список событий, обрабатываемых каждой функцией см. в таблице 2. Если скриптов для объектов накопилось очень много, то можно смело пользоваться их браузером на левой панели страницы Actions (рис.5).
Кроме того, во Flash никто не запрещает создавать объекты динамически и размещать их на нужных слоях, а также создавать анимацию полностью программным путем. Управлять можно не только поведением предметов, но и последовательностью проигрывания клипов, если Flash-документ состоит из нескольких роликов. Но об этом, даст Бог, еще поговорим.
Подведение итогов
В первую очередь хотелось бы отметить явные преимущества векторной графики во Flash по сравнению с растровой, которые проявляются в следующих аспектах: маленький размер изображения и высокое качество картинок, нарисованных за сравнительно небольшой период времени. Действительно, весь ролик с лупой занимает всего 5 Kb (мне было лень проводить оптимизацию) в формате SWF. Отсюда напрашивается вывод, что, если разрабатывать быстрый (в смысле, быстро грузится) и красивый сайт, то лучше это делать полностью во Flash и, если необходимо, то с минимальным количеством bitmap-текстур и пр. Развитый инструментарий Flash и большие возможности управления содержимым роликов позволяют это сделать. Что касается таких частей web-страниц, как форумы, то их можно смастерить на своем движке отдельно от сайта. Единственная загвоздка — Flash Player необходимой версии, который установлен далеко не на всех машинах. Я думаю, вы уже ощутили, насколько просто во Flash создается рисунок и насколько удобны инструменты, предназначенные для этого. Вспомним хотя бы то, как была нарисована лупа. Кажется, что разработчики старались все сделать так, чтобы пользователь за несколько минут мог получить классное изображение или мультфильм. То же справедливо и для других пакетов Macromedia, например, Freehand. Там вроде такой же набор инструментов. Из растровых графических редакторов ауру Flash точнее всего может передать PaintShop Pro. Если говорить об ActionScript 2.0 и управлении объектами посредством сценария, то перед нами, без сомнения, мощный объектноориентированный язык программирования, который сконструирован так, чтобы быть интуитивно понятным и одновременно позволять вытворять различные нешуточные вещи. В частности, мне кажется, что создавать и располагать объекты динамическим путем в ActionScript легче, чем, например, в Delphi. Если бы ActionScript умел работать с множествами, я бы делал во Flash свой курсовой проект:).
На сайте КГ вместе с данной статьей вы можете найти два SWF-ролика с лупой, управляемой мышкой и клавиатурой, а также исходники. Конечно, они почти одинаковые и отличаются лишь сценарием для лупы. Я считаю, что они вам пригодятся — сам учился на таких примерах и знаю, что пользы от них может быть больше, чем от всей статьи. Если вас посетят безумные идеи, можете смело воспользоваться моими роликами, только не забудьте сообщить мне о том, что у вас получилось. Мне, знаете, тоже интересно:). Вот и все. Благодарю за внимание:).
Использованная литература
1. Дунаев В.В. Самоучитель Flash MX 2004. — СПб.: Питер, 2005. -368 с.
2. Справочная система Macromedia Flash 8.
Компьютерная газета. Статья была опубликована в номере 17 за 2006 год в рубрике софт
Вот и готов наш первый фильм Flash. Давайте, что ли, посмотрим его.
Простейший способ воспроизвести созданный фильм прямо в среде Flash — нажать клавишу < Enter> или выбрать пункт Play меню Control. Flash тотчас воспроизведет наше творение. При этом бегунок будет перемещаться по шкале кадров, показывая воспроизводимый в данный момент кадр.
Воспроизведение, запущенное таким образом, всегда начинается с текущего кадра, но только если это не последний кадр дорожки. Если же мы сделали текущим именно последний кадр дорожки, Flash начнет воспроизведение с первого кадра. Закончившись на последнем кадре, воспроизведение остановится.
Если мы захотим прервать воспроизведение раньше, чем фильм дойдет до конца, то должны будем нажать еще раз клавишу < Enter> или выбрать в меню Control пункт Stop.
Чтобы зациклить фильм (сделать так, чтобы он воспроизводился бесконечно), мы включим пункт-выключатель Loop Playback в меню Control. После этого, когда воспроизведение дойдет до последнего кадра фильма, бегунок перескочит на первый кадр, и фильм начнет воспроизводиться с начала.
Мы также можем перемещаться по фильму вперед (к концу) и назад (к началу) по кадрам. Для этого следует пользоваться клавишами <точка> и <запятая> соответственно. Также можно выбирать пункты Step Forward One Frame и Step Backward One Frame меню Control. Ну и, конечно, можно просто мышью перетаскивать бегунок в нужном направлении.
Чтобы быстро переместить бегунок на первый кадр фильма ("перемотать" фильм в начало), мы выберем пункт Rewind меню Control или нажмем комбинацию клавиш <Ctrl>+<Alt>+<R>. А пункт Go to End позволит нам переместить бегунок на последний кадр фильма ("перемотав" его в конец).
Для управления воспроизведением фильма мы можем пользоваться одним из инструментариев Flash — пультом (рис. 11.5). Чтобы вывести его на экран, нужно включить пункт-выключатель Controller подменю Toolbars меню Window.
Перечислим все кнопки пульта в порядке слева направо:
? "перемотка" в начало, т. е. перемещение бегунка на первый кадр фильма;
? перемещение на кадр назад, т. е. к началу фильма;
? перемещение на кадр вперед, т. е. к концу фильма;
? "перемотка" в конец, т. е. перемещение бегунка на последний кадр фильма.
Будет ли пульт вам полезен — решать вам самим. Честно говоря, автор так ни разу им и не воспользовался. Ему вполне хватает пунктов меню Control и связанных с ними комбинаций клавиш.
Еще одно средство Flash будет нам полезно, но не сейчас, а в дальнейшем, когда мы начнем создавать фильмы, содержащие интерактивные элементы (например, кнопки). Это режим воспроизведения фильма в отдельном окне. Чтобы просмотреть фильм в отдельном окне, достаточно выбрать пункт Test Movie меню Control или нажать комбинацию клавиш <Ctrl>+<Enter>.
Что в этом случае сделает Flash? А вот что…
1. Выполнит экспорт нашего документа в формат Shockwave/Flash.
2. Откроет новое окно — окно просмотра фильма.
3. Загрузит получившийся файл Shockwave/Flash в это окно и запустит его воспроизведение.
Для управления воспроизведением фильма в отдельном окне мы можем пользоваться уже знакомыми нам пунктами меню Control (это меню доступно и в окне просмотра): Play, Stop, Rewind, Step Forward One Frame и Step Backward One Frame.
В окне просмотра фильм всегда воспроизводится зацикленным. Чтобы избежать этого, мы отключим пункт-выключатель Loop меню Control этого окна.
Находясь в окне просмотра фильма, можно также задавать качество и масштаб его отображения. Для задания качества служат пункты — переключатели, находящиеся в подменю Quality меню View: Low (низкое), Medium (среднее) или High (высокое; выбран по умолчанию). Для задания масштаба следует воспользоваться уже знакомыми нам пунктами меню View: Zoom In (увеличение масштаба), Zoom Out (уменьшение масштаба) — и пунктами подменю Magnification.
Насладившись своим творением, закроем окно просмотра, щелкнув на кнопке закрытия или выбрав пункт Close меню File этого окна.
Данный текст является ознакомительным фрагментом.
Продолжение на ЛитРес
Оформление созданной презентации
Оформление созданной презентации В программе Microsoft PowerPoint реализованы широкие функциональные возможности, чтобы быстро и красиво оформить презентацию. В частности, с помощью соответствующих инструментов, расположенных на ленте PowerPoint 2007, можно перейти в режим настройки
Контроль анимации
Контроль анимации Следующей задачей является обеспечение гарантий того, что тип Timer сместит текущий фрейм визуализации в рамках PictureBox. Снова напомним, что число фреймов в цикле анимации зависит от текущей скорости автомобиля. Необходимость изменений изображений в PictureBox
1.4. Дополнение созданной модели процессов организационными диаграммами, диаграммами DFD и Workflow (IDEF3)
1.4. Дополнение созданной модели процессов организационными диаграммами, диаграммами DFD и Workflow (IDEF3) 1.4.1. Диаграммы потоков данных (Data Flow Diagramming) Диаграммы потоков данных (Data flow diagramming, DFD) используются для описания документооборота и обработки информации. Подобно IDEF0, DFD
Эффекты анимации
Эффекты анимации Если бы мы работали в Word или Publisher, то на этом, собственно, пришлось бы и остановиться – что можно сделать с неподвижной картинкой? Но слайду в PowerPoint совершенно нет нужды быть неподвижным! Напротив, ему это в корне противопоказано.Надписи, картинки и прочие
Создание анимации
Создание анимации Теперь нужно научиться перемещать объект по экрану. Если это делать достаточно быстро, то у пользователя создается ощущение непрерывного воспроизведения анимации. Для этого следует создать метод updatePositions, который позволит перемещать изображение. Пока
1.5. Дополнение созданной модели процессов диаграммами DFD и Workflow (IDEF3)
1.5. Дополнение созданной модели процессов диаграммами DFD и Workflow (IDEF3) 1.5.1. Диаграммы потоков данных (Data Flow Diagramming) Диаграммы потоков данных (Data flow diagramming, DFD) используются для описания документооборота и обработки информации. Подобно IDEF0, DFD представляет модельную систему как
Создание анимации
Создание анимации Современные мобильные телефоны поддерживают не только статичные изображения, но и анимированные GIF-файлы. Все больше пользователей ставят в качестве заставки на экран телефона динамичные изображения, ведь они гораздо привлекательнее.Существует
Два вида компьютерной анимации
Два вида компьютерной анимации Компьютерные анимация и видео (в дальнейшем мы будем употреблять эти термины как синонимы, так как особой разницы между ними нет) могут быть покадровыми или трансформационными.Покадровая анимацияПокадровая анимация (ее еще называют
Создание покадровой анимации
Создание покадровой анимации Предположим, что нужно создать небольшой учебный фильм для средней школы. Этот фильм будет демонстрировать процесс деления клетки. Вы еще не забыли школьный курс биологии? Самое время его вспомнить.Наш фильм будет содержать двенадцать
Создание кадров анимации
Создание кадров анимации Итак, мы хотим создать последовательность кадров, т. е. покадровую анимацию, фильм. Давайте же создадим ее.Из главы 1 мы помним, что каждый кадр покадровой анимации — ключевой. Мы уже говорили об этом, так что сейчас не будем повторяться.Один
Правка анимации
Правка анимации Любое, даже, на первый взгляд, совершенное творение может быть еще немного усовершенствовано. А поскольку в мире нет ничего совершенного, переделывать уже сделанное нам придется очень часто.Фильмы Flash — не исключение из этого правила. Посмотрим, что
Еще раз об "оборванной" анимации
Еще раз об "оборванной" анимации Заканчивая разговор о движении, укажем на "подводные камни", которые могут встретиться на пути начинающего Flash-аниматора. И, разумеется, поговорим о том, как эти "камни" обойти.Как мы помним, "оборванная" анимация получается в том случае, когда
Создание составной анимации
Создание составной анимации Давайте создадим составную анимацию, демонстрирующую распад прямоугольника на части. Но сначала создадим сам "предмет распада", если еще этого не сделали. Нарисуем на рабочем листе прямоугольник и преобразуем его в обычный графический
Параметры внутренней анимации
Параметры внутренней анимации Теперь давайте выделим на рабочем листе экземпляр нашего анимированного образца и посмотрим, что нам предлагает панель Properties. Если это экземпляр графического образца, эта панель примет вид, показанный на рис. 13.4. В данный момент нас
Создание многослойной анимации
Создание многослойной анимации Создадим новый документ Flash и нарисуем на рабочем листе круг. Преобразуем его в графический образец и дадим ему имя Круг. В результате этих действий мы получим на рабочем листе экземпляр этого образца.Теперь можно приступать к созданию
Управление воспроизведением анимации
Управление воспроизведением анимации Обычно каждый клип начинает воспроизводиться сразу же после загрузки и воспроизводится до последнего кадра его анимации. Однако, используя сценарии, мы можем управлять этими процессами, в частности, останавливать и запускать
Читайте также: