Сейчас 127 заметки.

Интерактивная анимация вращения Adobe Flash Professional CS: различия между версиями

Материал из ЗАметки
 
(не показано 7 промежуточных версий этого же участника)
Строка 1: Строка 1:
 +
Данная flash-анимация основана на эффектах [[Выезжающий эффект с графической картинкой|перемещения]], [[Растущий текст Adobe Flash|приближения]] и [[Вращение объекта в Flash|вращения]] с использованием Action Script.<br />
 +
 +
 
[[Файл:vra.png]]
 
[[Файл:vra.png]]
  
Создаём новый документ.
+
Создаём новый проект Ctrl+N.
  
 
[[Файл:vra2.png]]
 
[[Файл:vra2.png]]
Строка 69: Строка 72:
 
[[Файл:vra15.png]]
 
[[Файл:vra15.png]]
  
 +
Выделяем прямоугольник, нажимаем правую клавишу мыши.
  
 +
[[Файл:vra17.png]]
  
[[Файл:vra16.png]]
+
В диалоговом окне выбираем "Вставить ключевой кадр", поочередно вставляем ключевой кадр на 5,10 и 15 кадрах.
  
[[Файл:vra17.png]]
+
[[Файл:vra18.png]]
  
[[Файл:vra18.png]]
+
Поочередно кликаем правой кнопкой мышки между 1-5, 5-10, 10-15 кадрами, в диалоговом окне выбираем "Создать классическую анимацию движения".
  
 
[[Файл:vra19.png]]
 
[[Файл:vra19.png]]
 +
 +
Переходим на пятый кадр и стрелками на клавиатуре перемещаем прямоугольник на две позиции вверх.
  
 
[[Файл:vra20.png]]
 
[[Файл:vra20.png]]
 +
 +
Переходим на десятый кадр и стрелками на клавиатуре перемещаем прямоугольник на три позиции вниз.
  
 
[[Файл:vra21.png]]
 
[[Файл:vra21.png]]
 +
 +
Переходим на пятнадцатый кадр и стрелками на клавиатуре перемещаем прямоугольник на одну позицию вверх.
  
 
[[Файл:vra22.png]]
 
[[Файл:vra22.png]]
 +
 +
Импортируем новую картинку.
  
 
[[Файл:vra23.png]]
 
[[Файл:vra23.png]]
 +
 +
  
 
[[Файл:vra25.png]]
 
[[Файл:vra25.png]]
 +
 +
Создаём новый слой.
  
 
[[Файл:vra26.png]]
 
[[Файл:vra26.png]]
 +
 +
Выбираем инструмент "Кисть".
  
 
[[Файл:vra27.png]]
 
[[Файл:vra27.png]]
 +
 +
Произвольно рисуем тучку.
  
 
[[Файл:vra28.png]]
 
[[Файл:vra28.png]]
 +
 +
Выбираем инструмент "Ведро с краской" и внутреннюю часть тучи заливаем белой краской.
  
 
[[Файл:vra29.png]]
 
[[Файл:vra29.png]]
 +
  
 
[[Файл:vra30.png]]
 
[[Файл:vra30.png]]
 +
 +
Два раза кликаем по нарисованному объекту(туче), чтобы выделить его.
  
 
[[Файл:vra31.png]]
 
[[Файл:vra31.png]]
 +
 +
Нажимаем клавишу F8 и преобразовываем в графический элемент.
  
 
[[Файл:vra32.png]]
 
[[Файл:vra32.png]]
  
 +
Переходим на двадцатый кадр, нажимаем правую клавишу мыши и
 +
в диалоговом окне выбираем "Вставить ключевой кадр".
 
[[Файл:vra33.png]]
 
[[Файл:vra33.png]]
 +
 +
Кликаем мышкой между 1 и 20 кадрами, создаем классическую анимацию движения.
  
 
[[Файл:vra34.png]]
 
[[Файл:vra34.png]]
 +
 +
Переходим на двадцатый кадр третьего слоя.
  
 
[[Файл:vra35.png]]
 
[[Файл:vra35.png]]
 +
 +
Перетаскиваем графический элемент(тучу) стрелками на клавиатуре или просто переместив объект мышкой вверх.
  
 
[[Файл:vra36.png]]
 
[[Файл:vra36.png]]
 +
 +
Переходим на двадцатый кадр первого слоя.
  
 
[[Файл:vra37.png]]
 
[[Файл:vra37.png]]
  
 +
Жмем правую клавишу мыши, в диалоговом окне выбираем "Вставить ключевой кадр".
  
 
[[Файл:vra38.png]]
 
[[Файл:vra38.png]]

Текущая версия на 15:50, 26 августа 2012

Данная flash-анимация основана на эффектах перемещения, приближения и вращения с использованием Action Script.


Vra.png

Создаём новый проект Ctrl+N.

Vra2.png

Импортируем картинку в рабочую область комбинациями клавиш Ctrl+R.

Vra3.png

Нажимаем F8, преобразуем картинку в ролик.

Vra4.png

Выделяем символ, заходим в раздел "Свойства" и указываем ему уникальное имя "qw_mc".

Vra5.png

Создаём новый слой для Action Script.

Vra6.png

Нажимаем F8.

Vra7.png

Вставляем туда нижеуказанный Action Script.

_root.onEnterFrame = function() {
	a = qw_mc._x - _root._xmouse;
	b = qw_mc._y - _root._ymouse;
	
	radian = Math.atan2(b,a);
	
	angel = (radian*180)/Math.PI;
	
	qw_mc._rotation = angel;
}



Vra8.png

Нажимаем обратно F9.

Vra9.png

Кликаем на белый фон рабочей области,заходим в раздел "Свойства".

Vra10.png

Выбираем цвет.

Vra11.png

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

Vra12.png

Выбираем инструмент прямоугольник.

Vra13.png

В нерабочей области рисуем прямоугольник.

Vra14.png

Преобразуем прямоугольник в ролик, для этого выделим его и нажмём клавишу F8.

Vra15.png

Выделяем прямоугольник, нажимаем правую клавишу мыши.

Vra17.png

В диалоговом окне выбираем "Вставить ключевой кадр", поочередно вставляем ключевой кадр на 5,10 и 15 кадрах.

Vra18.png

Поочередно кликаем правой кнопкой мышки между 1-5, 5-10, 10-15 кадрами, в диалоговом окне выбираем "Создать классическую анимацию движения".

Vra19.png

Переходим на пятый кадр и стрелками на клавиатуре перемещаем прямоугольник на две позиции вверх.

Vra20.png

Переходим на десятый кадр и стрелками на клавиатуре перемещаем прямоугольник на три позиции вниз.

Vra21.png

Переходим на пятнадцатый кадр и стрелками на клавиатуре перемещаем прямоугольник на одну позицию вверх.

Vra22.png

Импортируем новую картинку.

Vra23.png


Vra25.png

Создаём новый слой.

Vra26.png

Выбираем инструмент "Кисть".

Vra27.png

Произвольно рисуем тучку.

Vra28.png

Выбираем инструмент "Ведро с краской" и внутреннюю часть тучи заливаем белой краской.

Vra29.png


Vra30.png

Два раза кликаем по нарисованному объекту(туче), чтобы выделить его.

Vra31.png

Нажимаем клавишу F8 и преобразовываем в графический элемент.

Vra32.png

Переходим на двадцатый кадр, нажимаем правую клавишу мыши и в диалоговом окне выбираем "Вставить ключевой кадр". Vra33.png

Кликаем мышкой между 1 и 20 кадрами, создаем классическую анимацию движения.

Vra34.png

Переходим на двадцатый кадр третьего слоя.

Vra35.png

Перетаскиваем графический элемент(тучу) стрелками на клавиатуре или просто переместив объект мышкой вверх.

Vra36.png

Переходим на двадцатый кадр первого слоя.

Vra37.png

Жмем правую клавишу мыши, в диалоговом окне выбираем "Вставить ключевой кадр".

Vra38.png


Проверяем ролик, нажимаем комбинацию клавиш CTRL+ENTER


Просмотреть файл: http://wikiency.org/swf/qw_mc3.swf

Скачать исходник: http://wikiency.org/fla/qw_mc3.fla