• Авторизация


Крутящийся шарик в Adobe Flash. 18-12-2014 23:58 к комментариям - к полной версии - понравилось!

Это цитата сообщения здесь_нет_никого Оригинальное сообщение

Крутящийся шарик в Adobe Flash.

Делаем крутящийся шарик без скриптов,с помощью масок и анимации движения.







Сразу оговорюсь,я все это делала путем экспериментов и проб,в 3d не получилось и я решила поиграть с масками, делала больше для себя, так что не обессудьте. В ФШ есть тоже урок аналогичный этому, вот я и решила добиться результата во флеш сымитировать в 3d. Можно выставлять свои параметры и альфу, и цвет, кому, как нравится, фантазировать со снежинками, бликами и т.д, кто на что способен и у кого какая фантазия. Совершенно не сложно, но очень интересно!

Создаем документ,без разницы AS2, или AS3.
Рабочий стол делаем каким нибудь цветом, для дальнейшего удобства работы.
Рисуем круг, рисуем с зажатой клавишей шифт(чтоб у нас шарик был ровный). Смотрите,чтоб не было обводки.
Я залила круг радиальным градиентом и сделала прозрачность градиента с альфой где-то 70% (на любителя)

[показать]
Преобразовываем шар в символ 'шар'
[показать]
Заходим в символ шара и там будем создавать остальное.
Сразу подпишите слои, чтобы потом не путаться(слоев будет много)
Создаем новый слой, подписываем его 'маска' и рисуем на нем круг,в свойствах выставляем размеры такие же, как у шара и выравниваем все по центру
[показать]
Закрываем слой маска на замочек и убираем пока видимость,закрыв глазик.
[показать]
Создаем новый слой, я назвала его блик и нарисовала кисточкой полоску и уменьшила прозрачность до 70% (Слой блик-это тоже на любителя,можно подготовить в ФШ). Закрываем на замочек.
[показать]
Создаем новый слой-подписываем звездочки, или снежинка,кому,что нравится. Я взяла готовую загруженную в библиотеку снежинку в png.
Переносим на сцену(мы работаем в символе 'шар') слой снежинка у нас выделен, остальные закрыты на замочек.
Снежинку уменьшаем до нужного размера и выравниваем по центру, как на скрине выше. Далее...труднее, дублируем саму снежинку на сцене 4 раза и выставляем четко на одинаковом расстоянии друг от друга,примерно как на рисунке у меня.
[показать]
Делаем дубликат этого слоя и называем 'снежинки 2'(пока его закроем).
Возвращаемся на первый слой с снежинками, выделяем все четыре снежинки и преобразовываем в символ.
[показать]
Выделив на слое снежинка первый кадр - нажимаем создать анимацию движения, у нас выделилось 24 кадра(по умолчанию)
[показать]
[показать]
аккуратно выделяем последний кадр и нажимаем 'вставить ключевой кадр'-'все' - как на рисунке.
[показать]
Продляем этот ключевой кадр где-то до 50 кадра.
[показать]
Остальные слои выделив 50-ый кадр продляем(F5).
[показать]
Выделяем 50-ый кадр на слое снежинка и перемещаем слой со снежинками стрелочками на клавиатуре с нажатым шифтом(чтоб не сдвинуть) по часовой стрелке.
Очень важно, чтобы последняя снежинка находилась точно в том же месте, как на первом кадре.
Это при выделенном первом кадре :
[показать]
Это при выделенном последнем (50):
[показать]
Теперь переходим на слой маска,помещаем его над слоем снежинка,включаем маску и тестируем.
[показать]
[показать]
Если все устраивает, отключаем маску и переходим на дубликат слоя со снежинками 2.
Выделив слой преобразовываем его в символ,для удобства даем имя.
[показать]
Далее выделив первый кадр нажимаем правой кнопой - создать анимацию движения, точно так же ,как с первым слоем снежинка, создаем ключевой кадр,продляем до 50 кадра.
Движение делаем против часовой стрелки,на первом кадре снежинки находятся вот так, как на скрине,самое главное это выравнивание по краям шара, чтоб не было скачков.
[показать]
[показать]
Можно и без второго слоя снежинок,но я делала как бы все прозрачным.
Сделали анимацию слоя со снежинками 2, перемещаем этот слой под слой со снежинками 1 и чтобы он тоже был под маской.
[показать]
Делаем пипку для ниточки.
Рисуем, или вставляем готовую, я для урока нарисовала см. скрин.
[показать]
Дублируем и один слой назовем маска. Пока его закроем. Между этими двумя слоями создадим один слой и назовем его блик на пипке. Выделив первый кадр рисуем на сцене прямоугольник по высоте пипки, ширина хоть сколько, я делала где-то.... см.скрин.
[показать]
Заливаете его цветом по вкусу и ластиком стираете все, оставив 3 или 2 полоски полоски, как выше на скрине, тут можно экспериментировать.
Выделив преобразовать в символ,затем выделив первый кадр-нажимаем создать анимацию движения, продляем, вставив в конце ключевой кадр(как это делается-описывала вначале), до 50-ого кадра и также в первом кадре ставим в начале и на последнем кадре в конце.
положение на первом кадре:
[показать]
положение на последнем кадре:
[показать]
Переходим на слой выше(дубликат пипки) и ставим его маской по отношению к слою блика.
На временной шкале должно быть вот так:
[показать]
В библиотеке так:
[показать]
Возвращаемся на монтажную сцену,все с неё удаляем,ставим нужный фон и с библиотеки переносим символ "шар", трансформируем его, как вам надо и все.
У вас всего на основной сцене два слоя -фон и символ шарика.
Тестируем! Если, что непонятно, обращайтесь.
Удачи!


Тестируем!


вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Крутящийся шарик в Adobe Flash. | Алла_Буланова - Дневник Алла_Буланова | Лента друзей Алла_Буланова / Полная версия Добавить в друзья Страницы: раньше»