Русскоязычные документы веб-мастеру готовы к употреблению
Где вы зарабатываете больше всего?
Яндекс.Директ
Google Adsens
Sape
Begun
Setlinks
Mainlinks
Blogun

Всех приветствую! Итак, по просьбе пишу урок о простейшей анимации во флеше. Начинаем, как говорится, с малого. Потом обещаю добавить еще (по pop-up, если так и не напишут). Открываем Flash MX. Перед нами - наша рабочая сцена, меню, панель инструментов итд. Внизу есть такое вот окошко: Properties (Свойства). Там основные настройки вашего мульта (рис.1). Нас там интересует FRAME RATE - скорость прокрутки вашего мульта. Иначе 12 fps означает, что за одну секунду будет проигрываться 12 кадров (frame) вашего мульта. Эта скорость стандартная и, в принципе, то, что надо. Если вам надо замедлить ваш мульт - уменьшаете, надо сделать быстрее - увеличиваете эту цифру.


Теперь перейдем к самой анимации.
Во флеше есть два основных способа: shape tweening и motion tweening.
Рассмотрим первый. Shape - (англ.) форма. Вы уже понимаете, что тут речь пойдет именно об изменении формы. Создаем некую форму, например синий квадрат. Вверху, в строке времени (timeline) у нас на первом кадре появится кружочек на сером фоне - мы создали ключевой кадр (keyframe). Теперь создадим такой же кадр в 10-м кадре. Это можно сделать двумя способами: наводим мышку на 10 кадр, делаем клик (кадр стает синим) и в меню последовательно выбираем: Insert->keyframe; иначе можно: наводим на 10 кадр, кликаем, нажимаем F6. В строке времени все 10 кадров серые. Красная линия показывает на каком именно кадре мы находимся. (рис.2)



Переходим в 10 кадр. Выделяем наш квадратик (мышкой или нажатием ctrl+A,- данное сочетание клавиш выделяет все, что у нас находится в рабочей области). Перемещаем наш квадрат куда-нибудь в сторону (проследите, что вы в 10-м кадре!) и меняем цвет на, например желтый. Теперь переходим обратно в первый кадр. В строке Properties имеется выбор Tween, где по умолчанию стоит атрибут "none". То есть никакой анимации. Изменяем его на "shape". В строке времени наши кадры приобретают салатовый цвет со стрелочкой. Когда все сделано нажимаем "enter". КРАСОТА! Квадратик двигается, да еще и цвет меняет! Снова переходим в 10 кадр. Выделяем все (ctrl+A). И нажимаем клавишу delete (то есть удаляем). На месте квадратика рисуем какой-нить красненький кружочек. Снова переходим в первый кадр и нажимаем enter. Квадрат теперь стает кружком и красным. Вы уже поняли, что вам не надо прорисовывать каждый кадр - это за вас сделает flash! Хотя если вам нужна особая точность, или что-то - можете прорисовывать. тогда файл вырастет в размерах. Если вам нужен более плавный переход от квадратика к тому же, например, кружку - сделайте этот процесс не на 10, а, скажем, на 25 кадров. Если вам нужно более замысловатые движения и перемещения - для этого существуют слои-маски, но о них как-нибудь в следующий раз. Рисунок 3 показывает, как на линии времени выглядит ваша анимация. Теперь вы умеете рисовать простейший мувик с изменением формы!


Теперь рассмотрим второй способ задания анимация: motion tweening (перевод что-то типа: построения промежуточной анимации движения). Здесь будет чуточку посложнее. Снова открываем новый файл флеша. Чем отличаются shape и motion? Тем, что во втором случае мы будем работать не над формами, а над готовыми объектами, т.е. символами. Символ - это так сказать, простейшая единица анимации во флеше. Это более распространенный способ рисования. Повторяем все снова - в первом кадре рисуем синенький квадратик. выделяем его и нажимаем F8 (или выполняем последовательно: Insert->convert to symbol). Перед нами появляется диалоговое окно (рис. 4).


Что же это такое? Во флеше есть три типа символов: мувик (moovie clip) - это некая дополнительная анимация внутри символа. то есть, этот символ содержит в себе какую-нибудь анимацию и т.д. имеет точно такую строку времени, как и основная сцена; кнопка (button) - элемент, который реагирует на нажатие, присутствие мышки над ним итд. Короче, кнопка и есть; и третий элемент, самый статичный - graphic. То есть просто графика, некое изображение. Мы будем работать с последним. Как-то его называем, нажимаем "ОК". На квадратике появляется кружочек - иначе, центр нашего символа (центр тоже можно задать в том диалоговом окне). Все наши символы заносятся в библиотеку. Оттуда мы их можем редактировать, вставлять куда надо и куда не надо, удалять, добавлять. Чтобы посмотреть на свою библиотеку нажмите F11 или выполните действия: Window -> Library. В 10-м кадре создадим ключевой кадр (F6). Теперь можем переместить куда-то наш квадрат. Затем сделаем его невидимым: для этого выделим его в 10-м кадре. На панели propperties в разделе color зададим alpha (прозрачность). Поставим ему атрибут в процентах: 0. Вернемся на 1-й кадр. Выполним все те же действия, что и для shape tweening, только вместо shape отметим motion. Кадры во временной строке станут фиолетовыми и через них протянется стрелочка, как это показано на рис. 5. Нажмем enter.


У нас получится эффект "квадрат летит в пустоту". Поздравляю! Вы знаете, как делать примитивную графику во флеше! Еще одна важная особенность - на каждую анимацию у нас должен быть выделен отдельный слой (Layer). Если вам надо добавить еще один слой воспользуйтесь командой: Insert->Layer. И совсем чуть-чуть о строке времени. Как вы уже поняли - салатовое со стрелочкой - shape tweening, фиолетовое со стрелочкой - motion tweening. Салатовое или фиолетовое с линиями - вы задали анимацию, но эту анимацию создать невозможно, - вы сделали что-то не правильно. Серый цвет - все кадры с такой закраской являются точной копией предыдущего ключевого кадра (keyframe). Белая окраска линии означает, что в этих кадрах ничего нет. Черный кружочек - ключевой кадр. Белый кружочек - пустой ключевой кадр (blank keyframe). Ну, вроде все. (рис. 6)


На этом пока что все. Этот тот минимум, с которым можно работать. Далее изучите добавление звука, контроль над звуком, и вперед - писать Масяню. :) Обещаю, что обязательно вскоре напишу еще один урок - по продвинутой анимации во флеше. Про то, как сделать "падение пера", про маски, про контроль над изменением формы в shape tweening'е. Потом еще чего-то напишу. Рад был и рад есть! Если вопросы - прошу на форум или: nirva@ua.fm (с)from St.Dimitryi aka Nirva


Комментарии

Имя 

 

[15.10.08] Урок фотошоп Рисование фракталов

[14.10.08] Плагины для Photoshop Добавлено парочку новых.

[13.10.08] Пиксельные шрифты Добавлено 11 шрифтов.

[10.10.08] Урок фотошопа Как нарисовать дерево.

[05.10.08] JavaScript Новая документация.

[03.10.08] Plug-ins Пару новых плагинов для фотошопа.

[01.10.08] Урок фотошопа Старая фотография.

[01.10.08] Урок фотошопа Сказочный текст.

[30.09.08] PERL статьи 3 новых интересных статьи.

[30.09.08] PHP статьи Полосатая таблица.

[29.09.08] WEB документация На сайте появились учебники и книги.

[18.09.08] Урок Фотошопа Ледяной текст 2.

[16.09.08] Урок Фотошопа Mp3 Player.

[15.09.08] Урок Фотошопа Огненный текст.

Все новости
Рейтинг@Mail.ru
Александр Акимов
ICQ:
Mail: odvd@ya.ru