Matrix ефект на курсора

Автор: sova

Всичко е обяснено подробно, така че урокът е подходящ и за начинаещи.

1. Отворете нов документ:

File > New > Flash Document > Ok

1. Настройте кадрите в секунда на 30, височината на 400 и фона черен:
   Modify > Document…

.: Frame rate: 30
.: Height: 400
.: Background color: #000000
Ok

1. Направете динамично текстово поле и го кръстете letter_txt:

Text Tool (T)

Properties >

.: Text Type: Dynamic
.: Instance Name: letter_txt
.: Font: Verdana
.: Font Size: 12
.: Text (fill) color: #00FF00
.: Alaign Center

Съвет: За всеки случай можете да вградите шрифтовете. Това може да
предотврати проблеми с визуализацията на проекта, но имайте предвид, че
увеличава размера му: Properties > Embed…
> задържате ‘Ctrl’ и последователно
кликате на: Uppercase, Lowercase, Numerals
> Оk
Кликнете някъде върху работната площ > Напишете само една буква (която и да е)
> Esc

1. Поставете създаденото току що текстово поле в MovieClip, с името letter_mc

.: Ако letter_txt не е избрано, изберете го

Modify > Convert to Symbol….

.: Name: letter
.: Type: Movie clip
.: Registration: ( точно посредата)

Properties >

.: Instatce Name: letter_mc

С това се изчерпва работата по графичните елемнти на проекта, остава само кода,
който всъщност ще свърши цялата работа.
В кадър 1 на главната времедиаграма поставете следния скрипт:

import mx.transitions.Tween;
import mx.transitions.easing.*;
var options:String = new String("abcdefghigklmnopqrstuvwxyz");
letter_mc._visible = false;
var index:Number = new Number(1);
_root.onMouseMove = function() {
var ime:String = "letter"+index+"_mc";
duplicateMovieClip(letter_mc, ime, index);
index++;
_root[ime]._x = _xmouse+10;
_root[ime]._y = _ymouse+15;
_root[ime].onMouseMove = function() {
if (this._alpha == 0) {
removeMovieClip(this);
}
};
var num:Number = new Number(random(options.length));
_root[ime].letter_txt.text = options.charAt(num);
new Tween(_root[ime], "_alpha", Strong.easeOut, 100, 0, 5, true);
new Tween(_root[ime], "_y", Strong.easeIn, _root[ime]._y, 400, 1, true);
};

// Това става в прозореца ‘Actions’, който може да бъде извикан от Window >
Actions или като натиснете F9

1. Тествайте филма:

Control > Test Movie
или
Ctrl + Enter

За тези, които се интересуват как работи скриптът – обяснението:

import mx.transitions.Tween;
import mx.transitions.easing.*;

Импортира класовете, които ще ползваме по-нататък в скрипта

var options:String = new String("abcdefghigklmnopqrstuvwxyz");

Създава променлива от типа String, в която се съхраняват възможните стойности на текстовото поле (падащите букви)

var index:Number = new Number(1);

създава променлива от типа Number, чиято стойност указва индексът на дупликата на letter_mc

_root.onMouseMove = function() {

Оттук започва фунцията, която ще се изпълнява при събитието onMouseMove на главната времедиаграма (_root), тоест всеки път, когато курсорът бъде преместен

var ime:String = "letter"+index+"_mc";

Създава променлива от типа String, която указва настоящето име на дупликата на letter_mc. Както се вижда това име се образува като между „letter“ и „_mc“ се постави стойноста на променливата index. Пример: letter1_mc, letter2_mc и тнт. Тази промелива се използва при адресирането на целта на следващите действия.

duplicateMovieClip(letter_mc, ime, index);index++;

Създава дупликат на инстанцията letter_mc на класа MovieClip, задава й за име стойността на променливата ime, и я поставя в ниво, отговарящо на стойността на променливата index (така се осигурява всеки дупликат да има уникално име и да е разположен на собствено ниво – нещо важно при адресирането на инстанции).
Стойността на променливата index се увеличава с единица.

_root[ime]._x = _xmouse+10;
_root[ime]._y = _ymouse+15;

Задава координати на съответния дупликат, така че да се намира почти на мястото на курсора (спрямо главната времедиаграма) и да има леко изместване надолу и вдясно.

_root[ime].onMouseMove = function() {
if (this._alpha == 0) {
removeMovieClip(this);
}

Ако съотвтната инстанция не се вижда тя се изтрива – така не натоварваме излишно проекта. Проверката се извършва за всяка инстанция поотделно, при настъпване на събитието onMouseMove.

var num:Number = new Number(random(option.length));

Създава променлива от типа Number, чиято стойност указва кой символ от променливата options ще се просвои като текст на текстовото поле в съответната инстаниция. Тази стойност всеки път е случайно цяло число с максимална стойност дължината на променливата/стринга options.

_root[ime].letter_txt.text = options.charAt(num);

И ето тука вече се задава стойността на текстовото поле (ако трябва да сме точни

• на текста му, защото то има и други параметри). Както вече стана ясно, тази
  стойност ще един от символите на options, и ще е случайна.

Ето и частта, която отговаря за анимацията:

new Tween(_root[ime], "_alpha", Strong.easeOut, 100, 0, 5, true);
new Tween(_root[ime], "_y", Strong.easeIn, _root[ime]._y, 400, 1, true);

Първият ред прави така, че параметърът _alpha на съответната инстанция се променя от 100 на 0 за 5 секунди.
Вторият ред променя параметърът _y на съответната инстанция от текущата си стойност до 400 (което е долната граница на проекта) за 1 секунда.

};

Затваря цялата тая функция 😉

//извинявам се ако не съм използвал точната терминология и например вместо
‘инстаниция на класа TextField, с име бля бля….’ , съм казал просто името на
инстанцията, обаче се надявам да сте ме разбрали.

Това е, успех!