Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Пузырьки


Урок по созданию анимации пузырьков во флеше.
1. ...начал естественно - с подготовки. Нашел подходящее изображение, пошаманил в Photoshop-е, там подправил, там размыл, и вуаля! Вот и готово фоновое изображение:
alt
2. Теперь заходим во Flash и создаем сцену с размерами под наше изображение: 410 х 455, и 30 кадров в секунду будет достаточно.

3. Импортируем наше фоновое изображение на пустой слой, выравниваем и называем слой bg.
Пузырьки
4. Теперь создаем новый символ в библиотеке [Ctrl + F8]. Называем его bubble:
alt
5. Рисуем «пузырек».
Так как основные цвета будут белые, меняем цвет рабочей области на темный.
"Пузырек" рисуем с фантазией, но можете и просто повторить мои действия :)
Это будет круг, с размерами где-то в 10 пикселей по высоте и ширине, немного вытянутый снизу, без контурной линии и с градиентной заливкой:
alt
Выровняйте «пузырек» приблизительно по центру относительно начала координат, и настройте трансформацию градиента:
alt
И еще в этом символе можно создать дополнительный слой и нарисовать в нем нечто на подобие блика:
alt
Пузырек готов!

6. Создаем новый символ [Ctrl + F8], на этот раз типа MovieClip и называем его bubbleMC:
Пузырьки
Ставим галочку на Export for ActionScript для последующей работы с этим мувиком через AS

7. В этом клипе называем пока что единственный слой path, и рисуем на нем кривую:
Пузырьки
Как видите, кривая должна начинаться приблизительно в начале координат мувика (особой точности тут не нужно), ее форма должна быть более зигзагообразной снизу и ее высота должна быть в пределах 350px. Для сглаживания Pencil Mode я установил в Smooth

8. Создаем новый слой, называем его bubble и перемещаем его под слой path. На этот слой перетягиваем из библиотеки символ bubble. Слой path переводим в режим Guide:
Пузырьки
Следите, чтоб слой bubble стал дочерним слоем для слоя path. Для этого как бы перетащите его под слой path.

9. На слое bubble создаем Motion Tween. Переходим в 50-ый кадр и создаем ключевой кадр [F6]. На слое path так же становимся на 50-ом кадре и продлеваем «жизнь» нашей кривой [F5]:
Пузырьки
10. Теперь работаем с объектом bubble. Выберите первый кадр и убедитесь, что в нем установлена привязка и синхронизация:
alt
Теперь возьмите пузырек и переместите его к началу нашей кривой (самая нижняя точка). При этом должна сработать привязка. Перейдите в последний, 50-ый кадр, и перетяните пузырек в конец кривой (самая верхняя точка). После этого перейдите в кадр 8, и создайте ключевой кадр [F6]. Возьмите этот ключ и перетащите его на 15 кадр:
Пузырьки
В этом же кадре установите смягчение движения на -100:
alt
Тут же установите трансформацию пузырька – масштаб 50%:
alt
Переходим в первый кадр и устанавливаем масштаб пузырька в 10%.

11. Теперь над слоем path создаем новый слой и называем его actions. В нем переходим на 51-й кадр и создаем пустой ключевой кадр [F6]. В этом кадре пишем скрипт:
Пузырьки
На этом создание нашего пузырька закончено.

12. Ну и теперь возвращаемся на сцену, где у нас только один слой с фоновым изображением, создаем новый слой, называем его actions и пишем код:

<!--ec1-->this.createEmptyMovieClip("holderMC", this.getNextHighestDepth());
// создаем в корне пустой клип. Он будет контейнером для всех наших пузырьков

holderMC.onEnterFrame = function() {
    // для этого клипа создаем функцию, которая будет выполняться в каждом кадре

    var bubbleName:String = "bubble" + random(1000);
    // «придумываем» имя для нового пузырька
   
    var bubbleX:Number = random(Stage.width);
    var bubbleY:Number = random(Stage.height);
    // случайно размещаем его на сцене
   
    var bubbleScale:Number = random(6) * 10 + 50;
    // и масштабируем его в пределах 50-100%
   
    var bub:MovieClip = this.attachMovie("bubbleMC", bubbleName, random(1000), {_x:bubbleX, _y:bubbleY, _xscale:bubbleScale, _yscale:bubbleScale});
    // А теперь берем пузырек из библиотеки, и выкладываем его в клип контейнер с позицией, именем и масштабом, вычисленными ранее. Обратите внимание, что глубина пузырька выбирается так же случайно, и есть конечно вероятность, что один мувик перекроет другой, но в нашем случае это прибавит некоторую реалистичность :)
}


Ну и теперь самое сложное – жмем [Ctrl+Enter]
И наслаждаемся результатом.


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

комментарии (1)

#1 написал: klara7 | 19 июля 2010 12:42
     

"Исходник, исходник!!!" - скандировала толпа. good А можно сделать фон прозрачным?
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.