Итак, мы уже немного познакомились с функцией 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-го кадра. Смотрим результат:
Как видим, кода тут совсем чуть-чуть, разобраться в нём не сложно. Можно ещё пофантазировать и добавить разные модели машинам, добавить разноцветные автобусы, самолёты или ещё чего. Не забывайте делиться своими наработками с нами. Удачи!
Автор урока: Андрей Барвинко
Графика и анимация: flash-animated.com
Я занимаюсь флеш от случая к случаю. И в основном разбираю исходники, чтобы что-то понять и сделать подобное. А у вас не найдется этого же урока, но в cs4?
к сожалению, я сейчас на 6-той версии флеша и сохранить под цс4 не получится, к сожалению(
Жаль, конечно. А-то прям уже руки чешутся применить это все для себя.
https://dl.dropboxusercontent.com/u/102421182/cars_random_colors.fla
Вот, в cs4...
Что бы вы сделали, если бы точно знали что всё получится?...
спасибо)
Легче скачать и установить более высокую версию флеша. Можно ей не пользоваться, но отпадет потребность такие вопросы задавать ))))
моя радость тут ))) http://leetovetz.deviantart.com/gallery/
Легче скачать и установить более высокую версию флеша. Можно ей не пользоваться, но отпадет потребность такие вопросы задавать ))))
офигенный совет!
Очень развернутый и, главное, полезный совет. Вы автор урока?
Спасибо! Такие замечательные уроки, наглядные и весёлые. Ваш блог сделался моим любимым вечерним чтением
Отличный урок. Спасибо.
моя радость тут ))) http://leetovetz.deviantart.com/gallery/