VR
Virtual Reality On-line   Журнал
Новости   |     Журнал    |    Хаkер    |     Магазин   |   Проекты
[   Вход    ]
[Kарта сайтa]

[ Download  ]
[  Конкурс  ]
[ Анекдоты  ]
[  Ссылки   ]
[  Реклама  ]
[ Почтальон ]
[ О проекте ]






TopList
Flash 4.
Простые, но нужные приёмы анимации
:
Logo

Я уже расказал достаточно о теории, теперь пора переходить к практике. Сегодня мы познакомимся с парою анимационных приёмов, которые очень удобно использовать во Flash 4. Эти приёмы очень распространены и используются практически на любых анимированных страницах, так что это будет основа для дальнейшего изучения Flash.

Первым делом запусти Flash 4 и измени параметры сцены. Для этого выбери меню Modify->Movie (рис 1) и измени значение ширины и высоты фильма. Для нас достаточно будет размеров 250х200.
Logo
Рис 1. Параметры фильма

Теперь мы нарисуем цветок. Нарисуй по середине кадра большой круг жёлтого цвета (просто мне так хочется :)). Теперь выдели карандашь (Pencil) и установи у него тип линии Smooth (параметры мы расматривали в прошлый раз, такие как цвет, заливка, толщина линии и тип). Нарисуй один лепесток (смотри рисунок 2).
Logo
Рис 3.
Logo
Рис 2.

Когда рисуешь лепесток, то ты должен пересечь карандашём круг. Это заставит Flash автоматически разорвать круг и в тех местах, где ты его пересёк карандашём. Залей лепесток красным цветом.

Теперь дарисуй остольные лепестки по всей окружности нашего круга (стебля). Посмотри на рисунок 3. Мои лепестки получились немного корявые, потому что всё это только пример да и безполезно мне напрягатся. Я с детства не умею рисовать, поэтому надеюсь, что ты меня простишь за мои извращенея. Ну что поделаешь, если мне родители забыли руки обработать напильником.
Logo
Рис 4.

Теперь я выбираю с палитры инструментов элемент Arrow (простая стрелка, с помощью которой можно выделять объекты) и выделяя ненужные части моего рисунка удаляю их кнопкой Delete. Посмотри на рисунок 4. Вот это уже больше похоже на нормальный цветок. Если у тебя получилось красивей, я не обижусь. Я уже привык к своим рукам. Сколько раз мне говорили, что рождённый программировать рисовать не может :).

Давай теперь закрасим наши лепестки красным цветом с помощью элемента Paint Bucket.

Рис 5.

Теперь создадим анимацию. Для этого щёлкни правой кнопкой мыши по третьему кадру и выбери в появившемся меню "Insert Keyframe" (создать ключевой кадр). Перейди на этот кадр и выдели всё содержимое (Ctrl+A). Теперь выдели кнопку "Rotate" Logo в панели инструментов. и разверни всю сцену на несколько градусов.

Всё, наша сцена готова. Нажми File->Publish Preview->HTML и ты увидешь нечто похожее на рис 5.

Давай теперь очистим третий кадр. Щёлкни по нему правой кнопкой мыши и выбери "Clear Keyframe" (удалить ключевой кадр). Перейди на первый кадр и выдели всё его содержимое. Нажми F8 чтобы "сгрупировать" всё в один объект. Тебя попросят ввести имя нового объекта, введи, например, имя "Sun". Это желательно делать почаще, чтобы анимация занимала как можно меньше места. Потом мы ещё встретимся с символами и поговорим подробней. Теперь ты будешь работать со всем цветком, как с одним целым объектом, а не отдельными кривыми линиями.

Рис 6.

Снова создай ключевой кадр в третьем кадре. Перейди на него и увеличь наше солнце. Для этого выдели его и нажми кнопку Scale (она находится рядом с Rotate). Теперь ты можешь растягивать как угодно наше солнышко. Увеличь его совсем чуть-чуть и твоя сцена снова готова (см рисунок 6).

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

Теперь улучшим анимацию. Дважды щёлкни между первым и третим кадром. В появившемся окне перейди на закладку Tweening и измени здесь параметр "Tweening" на Motion. Больше ничего менять не надо, просто надави ОК и теперь твоя анимация будет двигатся гладко и приятно.

 Исходники примера забирай здесь


Design by FMk group ©
Copyright©: Horrific aka Флёнов Михаил ©