Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Мышиный след


В этом уроке мы заставим за нашей мышью следовать поворачивающийся анимированный текст.
Мы разместим этот текст внутри графического символа, потому что позже нам нужно сделать из него твин, а flash не разрешит нам сделать твин прямо из текста.

Итак, создайте новый Flash документ.
Шаг 1. Cоздайте новый графический символ в библиотеке; это то же самое, что вы создаете муви клип, но выберите "Graphic" вместо "Movie Clip":
alt
Внутри этого символа создайте статическое текстовое поле и напишите то, что пожелаете.

Шаг 2.
Теперь создайте в библиотеке новый муви клип и назовите "textAnimation".

Перетащите экземпляр текстовой графики в первый кадр, скопируйте этот первый кадр и вставьте его во второй и 30-ый кадры.

В библиотеке установите для этого муви клипа идентификатор "Text" для связывания.

Шаг 3.
Перейдите на основную сцену. В первом кадре основной временной шкалы вставьте этот код:

<!--c1-->
CODE
<!--ec1-->
//угол для муви клипа textAnimation
var newAngle = 0;

//используется для создания новых муви клипов
var count = 0;

//аттачим муви клип textAnimation
attachMovie("Text", "Text" + count, 1000 + count);

//установим координаты xPos и yPos для первого муви клипа
var xPos = Text0._x;

//мы будем использовать эти переменные, чтобы двигать муви клипы
var yPos = Text0._y;
<!--c2-->
<!--ec2-->
Шаг 4. Теперь перейдите в библиотеку. Кликните дважды по мувику textAnimation. Для этого текстового муви клипа откройте панель actions. В первый кадр вставьте этот код:
<!--c1-->
CODE
<!--ec1-->
//если мышь находится справа от этого мувика
if(_root.xPos < (_root._xmouse - 10))
{
       //увеличиваем xPos на 10
       _root.xPos += 10;
}
//если мышь слева
else if(_root.xPos > (_root._xmouse + 10))
{
       //уменьшаем xPos на 10
       _root.xPos -= 10;
}

//если двигалась ввниз
if(_root.yPos < (_root._ymouse - 10))
{
       _root.yPos += 10;
}
<!--c2-->
<!--ec2-->
<!--c1-->
CODE
<!--ec1-->
//если двигалась вверх
else if(_root.yPos > (_root._ymouse + 10))
{
       _root.yPos -= 10;
}

//установим координаты муви клипа равными x(y)Pos
this._x = _root.xPos;
this._y = _root.yPos;

//увеличим угол на 10, чтобы муви клип повернулся
_root.newAngle += 10;

//установим наш поворот на новый угол
this._rotation = _root.newAngle;

//увеличим count, чтобы мы могли создать новый муви клип в следующем кадре
_root.count++;
<!--c2-->
<!--ec2-->
В этом кадре мы используем глобальные переменные, чтобы каждый экземпляр этого муви клипа увеличивал глобальные переменные x(y)Pos и newAngle. Эти муви клипы не будут в действительности поворачиваться и двигаться, пока мы не создадим новые экземпляры, используя новые положения и углы.

Во втором кадре выделите текстовую графику, чтобы сделать некоторые изменения.

Выберите эту опцию в панели properties:
alt
И измените эти установки:
alt
Это изменит цвет текста; вы можете использовать любой цвет, какой хотите.

В последнем кадре сделайте то же самое, но выберите опцию "Alpha" вместо "Tint" и установите ее в 0%.

И сделайте графический экземпляр меньше, используя Free Transform Tool.

Вставьте этот код во второй кадр:
<!--c1-->
CODE
<!--ec1-->
//здесь мы аттачим новый муви клип, который будет иметь
//новый угол и положение, которые мы установили в предыдущем кадре.
_root.attachMovie("Text", "Text"+_root.count, 1000+_root.count);
<!--c2-->
<!--ec2-->
Теперь в последнем кадре:
<!--c1-->
CODE
<!--ec1-->
//удаляем этот муви клип
this.removeMovieClip();
<!--c2-->
<!--ec2-->
Это все! Постарайтесь не делать больше одной строки текста, поскольку анимация будет выглядеть не очень привлекательно.

Объяснение кода
<!--c1-->
CODE
<!--ec1-->
var newAngle = 0;
<!--c2-->
<!--ec2-->
Определяем угол для муви клипов, каждый приаттаченный мувик увеличивает эту переменную при создании эффекта вращения, который реально не существует.
<!--c1-->
CODE
<!--ec1-->
var count = 0;
<!--c2-->
<!--ec2-->
Переменная используется для новых муви клипов.
<!--c1-->
CODE
<!--ec1-->
attachMovie("Text", "Text" + count, 1000 + count);
<!--c2-->
<!--ec2-->
Аттачим муви клип.
<!--c1-->
CODE
<!--ec1-->
var xPos = Text0._x;
var yPos = Text0._y;
<!--c2-->
<!--ec2-->
Переменные используются для контроля за положением приаттаченных муви клипов.
Муви клипы также имеют фиксированное положение; эффект движения создается приаттачиванием новых муви клипов на новые позиции в каждом фрейме. Чтобы сделать это, нам только нужно изменить эти две переменные.
<!--c1-->
CODE
<!--ec1-->
if(_root.xPos < (_root._xmouse - 10))
{
       _root.xPos += 10;
}
<!--c2-->
<!--ec2-->
Если мышь находится справа от этого муви клипа увеличиваем переменную xPos на 10, чтобы следующий приаттаченный муви клип находился на 10px правее.
<!--c1-->
CODE
<!--ec1-->
else if(_root.xPos > (_root._xmouse + 10))
{
       _root.xPos -= 10;
}
<!--c2-->
<!--ec2-->
Уменьшаем переменную, чтобы двигать следующий муви клип налево.
<!--c1-->
CODE
<!--ec1-->
if(_root.yPos < (_root._ymouse - 10))
{
       _root.yPos += 10;
}
<!--c2-->
<!--ec2-->
Увеличиваем yPos чтобы двигать вниз.
<!--c1-->
CODE
<!--ec1-->
else if(_root.yPos > (_root._ymouse + 10))
{
       _root.yPos -= 10;
}
<!--c2-->
<!--ec2-->
Уменьшаем, чтобы двигаться вверх.
<!--c1-->
CODE
<!--ec1-->
this._x = _root.xPos;
this._y = _root.yPos;
<!--c2-->
<!--ec2-->
Установим положение муви клипа, используя переменные xPos и yPos.
<!--c1-->
CODE
<!--ec1-->
_root.newAngle += 10;
<!--c2-->
<!--ec2-->
Увеличиваем глобальную переменную для угла. Следующий муви клип будет также использовать эту переменную, всегда добавляя 10 и создавая эффект вращения.
<!--c1-->
CODE
<!--ec1-->
this._rotation = _root.newAngle;
<!--c2-->
<!--ec2-->
Установим поворот муви клипа.
<!--c1-->
CODE
<!--ec1-->
_root.count++;
<!--c2-->
<!--ec2-->
Увеличиваем эту переменную для создания муви клипов.
<!--c1-->
CODE
<!--ec1-->
_root.attachMovie("Text", "Text"+_root.count, 1000+_root.count);
<!--c2-->
<!--ec2-->
Аттачим новый муви клип.
<!--c1-->
CODE
<!--ec1-->
this.removeMovieClip();
<!--c2-->
<!--ec2-->
Удаляем муви клип, после того как он оказался в последнем фрейме.
В дополнение хочу сказать, что вместо текста в графический символ можно вставить все, что угодно.
Приведу пример, что получилось у меня. Очень красиво


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

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