Вращаем винни-пуха или управление таймлайном

15.06.2009

Если вы хотите сделать так-же, то эта статья для вас. На самом деле, тут нет ничего сложного. Для приготовления нам понадобятся: винни-пух — 1 штука, фотоаппарат — 1 штука, пара рук и голова.

Ну и компьютер, само собой.

---

Для начала нужно отснять наш объект. Делать это надо вкруговую, чтобы, впоследствии, при соединении фотографий в последовательность кадров, было ощущение, что он вращается. Проще всего отснять его при помощи поворотного круга, проградуированного на равные доли. Я изготовил такой круг, на скорую руку, из обычного компакт-диска. Притом, пригодилась и коробка. Она послужила станиной, на которой все и вертелось. После деления круга на равные части, их получилось 48. В общем-то, можно было сделать и меньше, но так анимация будет более плавной.

Затем, нужно выставить фигурку точно посередине круга, чтобы оси вращения фигурки и круга совпадали. При съемке нужно соблюдать крайнюю аккуратность, чтобы не сдвинуть фигурку или фотоаппарат. Но, допустим, у вас все получилось и теперь мы имеем 48 фотографий нашего винни-пуха. Вот таких:

Полученную секвенцию нужно дополнительно обработать, вырезав фигурку из фона, затем изменить размер фотографии, чтобы он соответствовал нашим требованиям. У меня фотографии размером 500х333 пикселя. Подготовленные фотографии необходимо сохранить в формате PICT, либо в любом другом, поддерживающем прозрачность, Например, PSD или PNG. К сожалению, мой Flash отказался открывать эти два формата, согласился лишь на PICT. Как вариант, можно сделать видеофайл из этой секвенции и сохранить в формате Flash Video, с альфаканалом. Однако, это тоже не выход. Итоговый файл будет меньше, но Flash-плееру придется декодировать кадры видео в реальном времени, а эта операция потребляет очень много системных ресурсов. Флешка будет просто «тормозить».

Итак, фотографии подготовлены, можно приступать. секвенцию для этого урока можно скачать здесь. Создаем новый документ, размером 500х333, с частотой кадров — 25. Затем, в библиотеке нужно создать новый пустой movieclip. Назовем его «vinni» и откроем для редактирования. Затем, импортируем в него нашу секвенцию картинок. Да, и не забудьте, что у картинок должны быть последовательные номера. (например, pic_01, pic_02, pic_03 и так далее.)

Делается это так: выделяете первый кадр на таймлайне, нажимаете Ctrl+R и выбираете только одну, первую картинку секвенции. Flash вам сообщит, что найдена секвенция и предолжит импортировать остальные кадры. Также, возможно вам сообщат, что количества кадров на таймлайне недостаточно для импортирования такого количества картинок и предложат их увеличить. Соглашаемся и ждем, пока все картинки загрузятся. На таймлайне их сразу станет видно. Проведите головкой воспроизведения по кадрам таймлайна и вы увидите, что наш винни крутится вокруг своей оси. Это нам и нужно.

Теперь возвращаемся на главную сцену и помещаем нашего винни-пуха на первый кадр единственного имеющегося там слоя. Если протестировать ролик, нажав Ctrl+Enter, мы увидим крутящуюся фигурку. Значит, все сделано правильно. Добавляем на главной сцене еще один кадр, чтобы наш мувик занимал два кадра и создаем еще два слоя. В первом из них делаем оба пустых кадра ключевыми. Сделать это можно, выделив второй кадр и нажав F6. На втором кадре пишем следующий код:

Это нужно для того, чтобы воспроизводилась только текущая сцена. Да, пока она одна, но в конце урока мы сделаем предзагрузчик, потому что ролик будет весить довольно много. А располагаться, загрузчик, будет в отдельной сцене.

Теперь выделим нашего медведя и на панели Properties дадим ему имя. Например, «vi». Это нужно для обращения к этому movieclip’у из Actionscript.

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

В этом случае, плеер отслеживает положение мыши по оси «X» и устанавливает головку воспроизведения на кадр, соответствующий координате мыши. Однако, сцена у нас имеет ширину в 500 пикселей, а кадров всего 48. Таким образом, плеер будет пытаться воспроизвести медведя на кадрах от 49 до 500. Но их у нас нет. Эту проблему можно решить, разделив ширину сцены на равные 48 частей и присвоить им по единице приращения, относительно координат мыши. Простым делением 500/48 мы получаем число, примерно 10,5. На это число и поделим текущую координату мыши. Для удобства, присвоим получившееся значение, переменной.

Получится так:

И, чтобы все было точно, округлим значение переменной до целого числа, при помощи оператора «Math.floor» Ну, а теперь нужно сказать плееру, чтобы он устанавливал головку воспроизведения на кадр, соответствующий нашей переменной. Итоговый код будет выглядеть так:

Этот код следует поместить на первый кадр нашего второго слоя, который пока мы не трогали. В итоге, таймлайн главной сцены будет выглядеть так:

Проверим работу нашего творения. Если вы все сделали правильно, то медведь должен послушно крутиться, управляемый мышью.

Поскольку, наш ролик весит почти мегабайт, понадобится какое-то время для его загрузки. Чтобы зритель не скучал в это время, надо сделать ему предзагрузчик. Делается он так: нажимаем Shift+F2 для вызова панели со сценами и добавляем новую сцену. Помещаем ее вверх, чтобы она была первой и начинаем работать с ней. Добавляем еще один кадр на таймлайне, создаем еще один movieclip с какой-либо зацикленной анимацией внутри него и помещаем его на слой сцены-загрузчика. Я сделал movieclip с картинкой внутри и заставил ее мерцать в случайном порядке. На самом клипе есть простой код для этого:

Он означает, что когда movieclip появляется в кадре, у него меняется прозрачность в случайном порядке. Подробнее объяснять не вижу смысла, думаю, слова «this», «alpha» и «random» всем знакомы, хотя-бы из уроков английского.

Создаем еще один слой, еще один movieclip (на этот раз пустой) и кладем его туда. На клипе (не на кадре) пишем следующий код:

Итак, ролик готов, медведь крутится. Поздравляю! У вас получилось. Но, если есть какие-то сомнения или проблемы, можете посмотреть готовый проект этого урока. Удачи!

Метки: actionscript, flash, анимация