Компьютерная графика и анимация с использованием Macromedia Flash

Разделы: Информатика


Flash - революционная по своим возможностям система, предоставляющая невиданную доселе свободу творчества. Являя собой уникальный синтез графики, анимации и программирования, она позволяет легко справляться с невероятно сложными для более традиционных технологий задачами. Освоив Flash, можно создавать баннеры, собственные игры, мультфильмы, презентации… Однако не стоит возводить Flash в культ, слепо веря, что с его помощью можно решить абсолютно все проблемы. Flash - всего лишь один из инструментов, такой же, как HTML, JavaScript или CSS. Каждая из этих технологий может эффективно решать свои узкие задачи.

Запомним навсегда - Actions (действие), может применяться к "символу" (Movie Clip) и "кадру" (Frame). Это разные вещи и применяются по-разному. При этом в заголовке окна Actions будет: "Actions - Movie Clip" - для символа, и "Actions - Frame" - для кадра.

Прилепим символ к курсору мышки

Задача (цель). Итак, надо взять символ и присвоить ему координаты в зависимости от положения курсора мыши.

Решить задачу можно разными способами. Но все они относятся к "программным" средствам. Поэтому без Actions никак не обойтись.

Символ имеет координаты – они обозначаются "_x" и "_y". Курсор мыши (именно курсор, а не мышь) имеет координаты "_xmouse" и "_ymouse", которые Flash всегда знает.

С помощью знака "=" мы присвоим новые координаты нашему символу. Но сначала нам понадобится символ.

1. Создадим символ.

1.1. Нажмем Ctrl+F8.

1.2. В появившемся окне введем имя или оставим то, что есть "Symbol 1". Behavior должен быть "Movie Clip".

1.3. Нажмем "ОК" и нарисуем что-то простое, например круг.

1.4. Отобразим библиотеку Ctrl+L. Там должен появиться символ под названием, например Symbol 1, а над Timeline надпись "Szene 1 Symbol 1".

1.5. Должно быть нечто, как на рисунке <Рисунок1>:

 

Можно вполне использовать готовый рисунок. Для этого надо его сначала импортировать в библиотеку, а затем конвертировать в Movie Clip.

2. Теперь перейдем на основную сцену (щелкнем слово "Szene 1" над Timeline) и перетащим наш символ на Рабочий стол.

3. Свернем панель справа и Properties, чтобы не мешали. А панель Actions развернем.

4. Щелкнем левой кнопкой мыши наш символ (выделим) и в поле "Actions – Movie Clip" введем точь-в-точь, как магическое заклинание, следующий код:

onClipEvent (enterFrame) {

_x =_x+_xmouse;

_y =_y+_ymouse;

}

Пока запомним это как заклинание. (Вспомните про козу, про которую пела Пугачёва А.Б.)

onClipEvent (enterFrame) – это обработчик событий (event).

enterFrame – означает, что в каждом кадре.

То, что справа от знака "=" всегда главное, то, что делается. А то, что слева от знака "=", то чем всё это заканчивается. То есть, это можно сказать так: "берем текущую координату икс символа (_x) прибавляем к ней текущую координату икс курсора мыши (_xmouse) и результат присваиваем координате икс символа". Теперь всё это заключаем в фигурные скобки {…..}, то есть контейнер, и обрабатываем в каждом кадре (onClipEvent (enterFrame)). Вот так – изнутри ползём наружу J .

Теперь нажмем клавиши Ctrl+Enter, то есть протестируем наш клип. Что видим – наш символ как бы "прилип" к курсору мыши.

А почему нельзя написать _x=_xmouse ? И что будет, если так сделать? А что будет, если "x" и "y" поменять местами? <Рисунок2>

Что ж теперь изменим слегка наш программный код.

onClipEvent (enterFrame) {

_x =_x+_xmouse/10;

_y =_y+_ymouse/10;

}

Что получилось? Да, символ теперь "бегает" за курсором мыши. Но попробуйте объяснить, что происходит справа от знака равно в нашем коде?

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

Например, щелкнем правой кнопкой 20 кадр и выберем Insert Keyframe, то же – в 40 кадре. Теперь вернемся в 20 кадр и уменьшим наш кружок раз в пять, только центр надо оставить на месте. Теперь на панели Properties там, где Tween надо выбрать Shape. Ну а теперь щелкнем 39 кадр и тоже поставим Shape. Если всё правильно сделали, то на зеленом фоне между 1 и 20, а также между 20 и 40 кадрами появятся стрелочки. Жмём Ctrl+Enter…

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

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

Попробуйте менять коэффициенты деления и посмотрите, что получится. Можно добавить функцию Math.random() – случайное число от "0" до"1". Например, так:

onClipEvent (enterFrame) {

_x =_x+_xmouse/10+Math.random()*50-25;

_y =_y+_ymouse/10+Math.random()*50-25;

}

То есть добавляется случайное число от "0" до"50" минус "25". А в чём измеряется? – в пикселях! Все координаты – это пиксели.

Заменим символ курсора мышки

План может быть, например, такой:

Задача (цель). Итак, надо скрыть курсор мыши, а вместо него поставить нами созданный символ.

Реализовать же, опять-таки, наш план можно разными способами. Теперь мы впишем код в кадр.

1. Создадим символ курсора.

2. На главной сцене вставим ещё один слой и поместим туда созданный нами символ курсора мыши <Рисунок3>.

3. Чтобы использовать этот символ в коде мы должны дать ему имя – не то имя, которое в библиотеке, а имя экземпляра символа, то есть того, что на сцене. Выделим символ, если он не выделен и в Properties под строчкой Movie Clip впишем имя mous (можно любое, но только латинскими буквами).

4. Теперь надо написать код. Щелкнем левой кнопкой мыши кадр в слое символа курсора. На следующем рисунке слои уже переименованы, обратите внимание.

5. Теперь развернем панель Actions. Обратите внимание, что теперь в заголовке будет Actions – Frame.

6. Ну а теперь впишем следующее заклинание Великих Магов.

Mouse.hide();

startDrag("mous", true);

7. И всё! Обратите внимание, что в кадре на Timeline появилась буковка "a" – что значит: кадр с Actions. Жмём Ctrl+Enter и наблюдаем.

Mouse.hide() – метод, который позволяет скрыть курсор.

startDrag – команда, которая заставляет символ перемещаться за указателем мыши. Обратите внимание, что в этой команде указано имя Movie Clip (то есть нашего символа) "mous". Второй параметр обозначает, к чему будет присоединен символ при перетаскивании, к центру символа относительно позиции мыши (true), или к точке, где пользователь нажал кнопку на символе (false). Этот параметр необязателен <Рисунок4>.

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

А почему нельзя написать Mouse.hide() прямо в первом символе? А для ответа на него надо получше узнать заклинания Великих Магов.

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

Резюме. Хороший план - 90% успеха. Надо учиться правильно, грамотно формулировать задачу. Наметить пути реализации. Разработать "сценарий" действий. Если не получается – то надо менять план…. Может быть…. Иногда 20 строчек кода можно заменить на 5-6, и даже меньше. Но работать они будут только в определённых условиях. Actions Script тем и хорош, в частности, что действия можно прописывать отдельно к каждому отдельному клипу, к каждому кадру.

Приложение 1

Приложение 2

Приложение 3