Отправляет email-рассылки с помощью сервиса Sendsay

Flash MX от А до Я

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Программирование на Flash" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

  Май 2003   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
24.05.2003
07:12:21
23:23:34
25
26
27
28
29
30
31
Автор
Писатель

Статистика

5.099 подписчиков
-18 за неделю
←   Все выпуски   →

Make your game with Flash MX


Информационный Канал Subscribe.Ru

mitemail@mail.ru Made by }}v{{!+е


Введение в ActionScript (продолжение).

Простите, что нет рисунков... Вернее они есть, но в целях экономии нервов я решил не переводить их в jpeg... Скачать данную статью в doc формате с рисунками в bmp можно отсюда http://mite.by.ru/asp3.rar

Итак, сегодня мы поговорим о таких вещах, как текстовые эффекты. Наверняка, многим из вас хотелось сделать какую-нибудь надпись (будь то имя, ник, или девиз), так чтобы она переливалась всеми цветами радуги, вращалось, изменяла цвет, форму и т.д. Так вот, супер-пупер эффекта не обещаю, но, в целом, получиться неплохо…
Существует множество способов создания текстовых эффектов. Можно использовать не только флеш-технологию…тут подойдет и гиф-анимация, и ява-приложения…Кроме того сейчас существует множество дополнительных программных средств, произведенных различными фирмами, для создания простых и не очень текстовых эффектов, анимации и т.д. в формате swf. Но разговор то у нас об ActionScript! Поэтому и эффект у нас будет на ActionScript с минимальным использование встроенных средств флеш-анимации (без них не обойтись).
Конечно, многие уже делали спецэффекты обходясь без скриптов…Но сколько времени вам потребовалось? А когда что-то не нравилось, наверняка, приходилось переделывать весь флеш… ActonScript как раз позволяет создать такой флеш, который будет как бы универсальной формой для всех ваших эффектов. То есть, внеся незначительные изменения в данную форму, вы получите совершенно другой эффект при минимуме затрат…
Ну, как? Готовы? Тогда поехали…

Открываем новый документ, в свойствах мувика выставляем необходимые значения. Для того, чтобы ваш эффект выглядел более динамичным, поставьте значение Frame Rate где-то 20-25 fps. Цвет и размер флеш-окна выставляйте по вкусу…
Итак, на Layer 1 делаем три пустых фрейма – это для скриптов. На Layer 2 будет распологаться наш “рабочий мувик”, самая главная, пожалуй, часть. Ну и на Layer 3 будет просто какой-нибудь фон.
Рис.1.
В первом фреиме первого слоя первой сцены пишем вот такой код:

str = "Visit www.yourcomp.ru !!!";
ras = 15;
i = 1;
lgth = length(str);
char1.bukva.simbol = substring(str, 1, 1);

Переменной str (это и есть тот текст который будет в эффекте) типа строка присваивается значение "Visit www.yourcomp.ru !!!", переменной ras (расстояние между буквами в тексте в пикселях) значение 15. С этим понятно. Это основные переменные, и изменяя их, вы получите различный результат. Переменные i и lgth здесь только инициализируются. Функция length(str) возвращает количество символов в строке str. К строке char1.bukva.simbol = substring(str, 1, 1); мы еще вернемся. Пока достаточно сказать, что функция substring(str, 1, 1) возвращает кусок строки str, начиная с первого символа, размером один символ, т.е., фактически, букву “V”.
Во втором фрейме первого слоя пишем:

i += 1;
duplicateMovieClip ("char1", "char" add i, i);
set ("char" add i add ".bukva.simbol", substring(str, i, 1));
setProperty ("char" add i, _x, getProperty ("char" add (i-1),_x)+ras);
if (i == lgth) {
stop ();
}

Переменная i увеличивается на 1. Следующая строка создает копию клипа char1 с именем char2 на уровне 2 (эта команда была довольно подробно описана в свое время, поэтому нет смысла на ней останавливаться). Далее переменной symbol, о которой будет сказано ниже, присваивается значение, равное следующей букве строки str, т.е. буква “i”. Команда SetProperty, как вы уже знаете, устанавливае значение _x текущей буквы, т.е. координату х, на расстоянии ras от предыдущей буквы. Ну и условие: когда i становиться равной lgth, происходит остановка главного цикла. Попробуйте, когда мы напишем весь эффект, убрать условие…через некоторое время начнет страшно торозить, потому что в цикле непрерывно создаются все новые и новые клипы, а это требует ресурсов…
Ну и в третьем фрейме пишем всего одну строку:

gotoAndPlay (2);

Это зациклит флеш.
В общем, скрипт работает так: цикл выполняется до тех пор, пока не выполниться условие; использование цикла позволяет выводить буквы текста по одной, создавая интересный эффект…
У читателей, конечно же, возникнет вопрос: а где собственно эффект? Вот эффектом мы сейчас и займемся…
Пишем букву “W” в поле рисования. Обычно используют именно эту букву, так как она имеет наибольшую ширину и высоту (поэтому другие буквы не будут усекаться при выводе). Дальше в Text Options буквы (Window->Panels->Text Options) в выпадающем меню выбираем “Dynamic Text”, а в поле Variable: пишем “symbol” (без кавычек). Выделяем букву и конвертируем (F8 или Insert->Convert to Symbol…) в Movie Clip, в поле Name: вводим любое имя. В Instance клипа (Ctrl+I) в поле Name вписываем “bukva”. Еще раз конвертируем клип в Movie Clip. В Instance этого клипа в поле Name пишем “char1”. Теперь редактируем клип char1 (Выделяем клип и Ctrl+E). Используя Motion Tween и различные эффекты (Tint, Alfa и др.), сделайте так, чтобы клип “bukva” менял цвет, размер, положение…
Рис.2.
Это и будет тот эффект, который вы увидите. Включайте фантазию и вперед!

Практически все текстовые эффекты основаны на алгоритме, который мы сегодня рассмотрели. Вам останется только изменить значения переменных, изменить эффект вывода отдельной буквы и в результате получиться новый необычный эффект…
И напоследок…
Есть еще один “подвид” текстовых эффектов. В предыдущем случае эффект получался за счет того, что каждая буква слова выводилась через определенный промежуток времени, меняя цвет или что-либо еще… Сейчас попробуем несколько иной подход.
Открываем новый документ. Создаем новый символ Movie Clip (Ctrl+F8). Теперь нужно сделать эффект, то есть не тот эффект, который мы сделали в предыдущем примере с клипом “bukva”, а нечто совсем другое. Нужно сделать, как бы это сказать, заполнитель для букв, который будет изменять цвет, форму и т.д. Для этого используем Shape Tween (а не Motion, как в предыдущем примере) и различные инструменты: Brush Tool, Line Tool и другие. Например, точка превращается в квадрат, потом в четыре точки, причем постоянно меняется и цвет и положение рисунка. Сделать что-либо в этом роде достаточно просто.

Рис.6.

Будем считать, эффект вы сделали. Теперь сделайте следующее: скопируйте примерно 8-9 клипов с эффектом (можно перетаскивать клип с нажатой клавишей Ctrl, можно использовать стандартные средства: Ctrl+C, Ctrl+V), расположите их вертикально на одинаковом расстоянии друг от друга (сделать это можно при помощи панели Align, Ctrl+K). Затем выделяете все копии и конвертируете в Movie Clip. Этот клип будет использоваться в эффекте уже непосредственно, поэтому, для возможности обращения к этому клипу, в Instance клипа в Name впишите “clip”. Конвертируем клип “clip” в Movie Clip, например, с именем “effect”. Затем, двойным щелчком мыши, редактируем клип. Теперь все действия выполняются внутри клипа “effect”! Для следующего шага нам необходимо вставить два пустых фрейма: один - до, другой - после фрейма с клипом “clip”(можно, например, выделить фрейм с клипом и перетащить его на фрейм вперед, потом кликнуть на третий фрейм правой кнопкой мыши и выбрать “Insert Blank Keyframe”). В Actions первого фрейма напишем вот такие две строчки:

max = 15;
i = 1;

В Actions второго:

if (i<=max) {
duplicateMovieClip ("clip", "clip"+i, i+2);
setProperty ("clip"+i, _x, clip._x+i*15);
setProperty ("clip"+i, _y, clip._y);
i++;
}

И в Actions третьего фрейма:

gotoAndPlay (2);

Думаю, что объяснять тут ничего особо не надо, если, конечно, вы разобрали предыдущий пример…В общем, клип “clip” копируется несколько раз через некоторое расстояние по оси Х. Причем за один проход цикла, появляется только одна копия. Все это создает подобие волнообразного движения.
Итак, у нас есть клип “effect”, который может служить отличным фоном для нашего текста. Что же нам мешает его поставить вместо фона? Ничего!
Переходим на Scene 1. Создаем два слоя: один для маски, т.е. вашего текста, другой для недавно созданного клипа “effect”.

Рис.7.

На первый слой помещаем наш текст, причем лучше, если текст будет разбит комбинацией Ctrl+B (у меня не работала маска-текст). На второй слой помещаем клип “effect”. То, как лучше расположить клип, вы увидите, как только запустите флеш, но вообще-то клип должен быть левее текста. Теперь остальсь щелкнуть правой кнопкой мыши по Layer 1 (он должен быть выше чем Layer 2) и выбрать Mask. Для того что бы видеть что к чему, уберите замки на слоях (они появляются автоматически).

Рис.7.1.

Ну, вроде все. Осталось экспериментально подобрать расстояние на которое копируется клип “clip”, правильно расположить клип “effect” и все! Эффект готов. Должно получиться нечто вроде этого:

Рис. 8.

Вообще, на Flash можно воплотить любые эффекты, все зависит от упорства и еще раз упорства… Пробуйте, экспериментируйте…и все будет хорошо!

Сайты, которые стоит посмотреть:

www.flashkit.com - лучший архив Flash исходников и ресурсов.

Скачать данную статью в doc формате c bmp рисунками можно отсюда http://mite.by.ru/asp3.rar

Если что-то не получилось, скачай исходники вот здесь http://mite.by.ru/asp3s.rar

Мой сайт - http://mite.by.ru/

http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное