Рандомный выбор объекта

Итак, мы уже немного познакомились с функцией random и оценили её значимость для аниматора. То, что достигается тяжёлым трудом с использованием классической анимации, сводится к нескольким строкам кода. Даже больше! С использованием as3 мы никогда не получим повтора! Конечно, использование random не ограничивается анимированием глаз и других частей тела. С этой функцией можно сделать ещё много чего интересного. Например, покрасить машины в разные цвета. Не верите? Смотрите сами!

Шаг 1.

Рисуем машинку. Отделяем кузов и оборачиваем его в клип. Назначаем ему имя car_body в Instance name на панели Properties. 

 

Шаг 2.

Добавляем в этот клип ещё несколько ключевых кадров с кузовом другого цвета (можно поменять кузов более кардинально, не только изменением цвета, это может быть любая другая модель авто, а также автобус, трактор и т.д.).

 

Временная шкала должна выглядеть примерно так (в каждом кадре машина другого цвета):

Шаг 3.

Добавляем выше новый слой as и на нём пишем код:

gotoAndStop(Math.floor(Math.random() * totalFrames + 1));

Немного об этой строке кода. Эффект будет следующий: после каждого запуска ролика анимация в этом клипе будет останавливаться на случайном кадре. Функция рандома возвращает дробное случайное значение, поэтому используем floor.

Шаг 4.

Клип car_body оборачиваем ещё в один клип, назовём его car, в котором дорисовываем колёса и делаем анимацию, если нужно. В нашем случае была сделана анимация кузова:

Вот так выглядит анимация самой машины:

Шаг 5.

Оборачиваем car ещё в один клип и внутри него делаем анимацию едущей машинки через экран обычным твинингом. Получившийся клип перемещаем за край экрана и смотрим, что получилось:

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

Конечно, это не совсем тот результат, которого нам бы хотелось достичь. Было бы намного лучше, если бы каждый раз, когда машинка появляется на экране, она была другого цвета.

Шаг 6.

Итак, в основном клипе создаём новый слой (над всей анимацией клипа car) И в нём пишем код:

{syntaxhighlighter brush: as3;fontsize: 100; first-line: 1; }addEventListener(Event.ENTER_FRAME, Update); function Update(e:Event){ if(currentFrame == 1) // если первый кадр // Меняем цвет машинки car.car_body.gotoAndStop( Math.floor(Math.random()*car.car_body.totalFrames + 1) ); } {/syntaxhighlighter}

Теперь перед каждым выездом машинка меняет цвет:

Клип с машинкой готов к использованию. Можем разместить несколько машинок в рабочей области (чтобы машинка ехала в другую сторону, достаточно отобразить клип по горизонтали). Для того, чтобы заполнить изначально рабочее пространство, заставим анимацию в каждой машинке проигрываться, начиная с определённого кадра. Для этого дадим имя клипам с машинками (у нас это car1 - car6), создаём новый слой, на котором пишем код:

{syntaxhighlighter brush: as3;fontsize: 100; first-line: 1; }car1.gotoAndPlay(65); car2.gotoAndPlay(50); car4.gotoAndPlay(70); car5.gotoAndPlay(30); car6.gotoAndPlay(100); {/syntaxhighlighter}

Анимация машинки №3 начинается с 1-го кадра. Смотрим результат:

Как видим, кода тут совсем чуть-чуть, разобраться в нём не сложно. Можно ещё пофантазировать и добавить разные модели машинам, добавить разноцветные автобусы, самолёты или ещё чего. Не забывайте делиться своими наработками с нами. Удачи!

Исходник (Cs5)

Автор урока: Андрей Барвинко

Графика и анимация: flash-animated.com

Комментарии
Аватар пользователя Домовенок

Я занимаюсь флеш от случая к случаю. И в основном разбираю исходники, чтобы что-то понять и сделать подобное. А у вас не найдется этого же урока, но в cs4?

Аватар пользователя Oksana

к сожалению, я сейчас на 6-той версии флеша и сохранить под цс4 не получится, к сожалению(

Аватар пользователя Домовенок

Жаль, конечно. А-то прям уже руки чешутся применить это все для себя.

Аватар пользователя Anyoneelselikeyou

https://dl.dropboxusercontent.com/u/102421182/cars_random_colors.fla
Вот, в cs4...

Что бы вы сделали, если бы точно знали что всё получится?...

Аватар пользователя Oksana

спасибо)

Аватар пользователя LeeTovetz

Легче скачать и установить более высокую версию флеша. Можно ей не пользоваться, но отпадет потребность такие вопросы задавать ))))

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

Аватар пользователя Oksana

LeeTovetz пишет:

Легче скачать и установить более высокую версию флеша. Можно ей не пользоваться, но отпадет потребность такие вопросы задавать ))))

офигенный совет!

Аватар пользователя Домовенок

Очень развернутый и, главное, полезный совет. Вы автор урока?

Аватар пользователя Slybrowney

Спасибо! Такие замечательные уроки, наглядные и весёлые. Ваш блог сделался моим любимым вечерним чтением Smile

Аватар пользователя LeeTovetz

Отличный урок. Спасибо.

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

Пожалуйста, оставьте ваш комментарий. Спасибо!
Содержимое этого поля является приватным и не будет отображаться публично.
CAPTCHA
Вопрос для проверки
Заполните поле проверки