Главная
Форум
Баннеры
ТОП Сайтов
Мониторинг серверов
Банлист Сервера
Статистика Сервера
Наши отзывы
Новые сообщения · Участники · Правила форума · Поиск · RSS
  • Страница 1 из 1
  • 1
Эффект растущей ветки,
DooDLeZДата: Воскресенье, 28.03.2010, 20:25 | Сообщение # 1

WebMaster
Сообщений: 485
[ ]
:-(
Flash Flowers Spinning on Branches

Это очень интересный эффект и не сложный в создании, если вы умеете рисовать. Можно использовать готовый рисунок из архива, прикрепленного внизу.
Загрузите zip файл на свой компьютер. В данном уроке будут использоваться только цветы и ветки. В будущем вы сможете экспериментировать, чтоб добиваться различных эффектов.
Эффект хорош для шапок на сайте – первое что увидит пользователь это появляющиеся ветки.

Присоединённый файл
ex1.swf ( 70.57к )
Кол-во скачиваний: 9889

Мы обсудим все, что вы найдете в исходнике, так что откройте его. На главной временной шкале 3 слоя:
- слой webarticles.org (можете проигнорировать данный слой, он не связан с данным эффектом)
- слой the effect, содержащий саму анимацию
- слой background – фон, который виден сзади анимации.

урок. Эффект растущей ветки *

На главной временной шкале всего один кадр. Так что все действие происходит внутри мувиклипов. Чтобы открыть мувиклип с эффектом щелкните 2 раза по маленькому прямоугольнику слева от сцены. Если клип не открылся – убедитесь, что слой не заблокирован и является видимым.

урок. Эффект растущей ветки *

Теперь, когда вы внутри клипа нажмите на проигрывание, чтоб посмотреть что мы сделали на этом этапе: большая ветка растет с правой стороны сцены, маленькие ветки появляются таким же образом, но растут от большей ветки. Мы сделали ту мультипликацию, помещая каждую ветвь в свой слой. В этом примере ветки не являются символами, это просто рисунки. Анимация выполнена с помощью tween Shape – т.е. изменением формы от меньшей ветки к большей с небольшим перемещением влево. Так же можно преобразовать ветви в мувиклипы и создавать иллюзию роста с помощью tween Motion.

урок. Эффект растущей ветки *
урок. Эффект растущей ветки *

Итак, первая часть эффекта сделана. Теперь мы обсудим вторую часть эффекта, с помощью которого ветви смогут расти снова и снова.

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

CODE
stop();

Т.е. мы остановили анимацию таким образом, чтобы после того как ветки перестали расти цветы распускаются снова и снова, поскольку клип с ними зациклен. Но как это сделать?
Для начала поговорим об одном цветке. Цветок распускается, растет, а затем исчезает. Для этого сначала надо нарисовать сам цветок.
урок. Эффект растущей ветки *
Вот пример того, что нарисовали мы в самом FX, чтобы сократить размер конечного файла. Для того, чтобы сделать рост и вращение, рекомендуем преобразовать рисунок в мувиклип (F6). В клипе с цветами (речь идет об исходнике) щелкните по любому из цветков 2 раза, чтобы войти в него. В первом кадре мы поместили маленький цветок, а в 15 кадре побольше размером и немного повернули его. Между этими кадрами применен Tween Motion. Как результат – плавное появление цветка с вращением. Цветок остается таким же до 53 кадра, в котором начинает исчезать. Исчезновение сделано необычным способом.
Мы назвали данный клип просто – «а» и поместили в 53 кадр следующий скрипт:
Code

<!--c1--><div class="codebox_title">[b]CODE[/b] </div><div class="codebox"><div id="CODE"><!--ec1-->if( a._alpha >= 0 ) {
a._alpha = a._alpha - 1;
gotoAndPlay(52);
}
else play();<!--c2--></div></div><!--ec2-->

Добираясь до 53 кадра мультипликация используя if каждый раз проверяет уровень alfa клипа а. Если прозрачность клипа больше либо равна нулю. Если это так, то прозрачность уменьшается (alfa=100 – объект виден полностью, alfa=0 – объект полностью прозрачный).

Есть более изящный способ работы с клипом:

Code

<!--c1--><div class="codebox_title">[b]CODE[/b] </div><div class="codebox"><div id="CODE"><!--ec1-->onClipEvent( enterFrame ) {
if( this._alpha > 0 )
    this._alpha--;
else
    play();
}<!--c2--></div></div><!--ec2-->

Не забывайте, что если вы хотите остановить анимацию, то вам надо будет использовать скрипт
Code

<!--c1--><div class="codebox_title">[b]CODE[/b] </div><div class="codebox"><div id="CODE"><!--ec1-->stop();<!--c2--></div></div><!--ec2-->

Последняя часть данного клипа – это пустые кадры. Таким образом осуществлена небольшая задержка между началом и концом мультипликации.

Эта техника, которую мы часто используем. Она имеет преимущество из-за того что похожа со случайным умножением. При этом мы можем управлять каждым клипом.
Поднимемся на уровень выше – в клип, содержащий все цветы. Помещаем первый цветок в первый кадр первого слоя на то место куда пожелаем. Второй цветок на слой выше спустя несколько кадров и.т.д. Не забываем менять размеры цветочков.
Мы повторили это действие 36 раз, т.е. на ветке распускается 36 цветов. Таким образом, мы добрались до 175 кадра. Одни цветы только будут распускаться, другие «увядать». Это будет гарантировать впечатление бесконечного цикла со случайными элементами.
Не забываем написать в последнем кадре скрипт

Code

<!--c1--><div class="codebox_title">[b]CODE[/b] </div><div class="codebox"><div id="CODE"><!--ec1--> stop();<!--c2--></div></div><!--ec2-->

Надеюсь это урок был интересен для вас!

  • Страница 1 из 1
  • 1
Поиск:


Все права принадлежат PainKiller.Net.Ru 2009-2010. Дизайн сайта разработан - PainKiller.Net.Ru
Внимание! Рип шаблона запрещен "Нарушение авторского права"! Design bY PainKiller.Net.Ru
Тиц и pr сайта