Efekt Tekstowy by flashzone.pl-Tutorial

[damio12]

Głownym celem artykułu będzie pokazanie budowy animacji pojawiania się tekstu wykonanej całkowicie za pomocą skryptu i sterowanej parametrami. Jak sie okaże efekty mogą być interesujące.
Awięc do dzieła. Tworzymy mechanizm wyciagania kolejnych literek oraz przypisywania ich kolejnym wstawianym klonom symboli, nie zapominająć o kontroli długości już wyswietlonego tekstu.
Najpierw jednak tworzymy MovieClip z dynamicznym polem tekstowym w środku o nazwie zmiennej txt i nadajemy mu linkageName literka, nie zapomnijmy tez o włączeniu opcji embed fonts/all dla pola tekstowego w menu character. Do jego klonów będą ładowane kolejne literki. Od tego momentu będziemy zajmowali się już tylko i wyłacznie programowaniem.
Na głównym tajmlajlnie (listwie czasowej) piszemy kod:

Cytat:i = 0;
h_space = 10;
x = 30;
y = 50;
tekst = "jeszcze jakis inny tekst";
this.onEnterFrame = function() {
this.attachMovie("literka", "lt"+i, i);
var clip = this["lt"+i];
clip.txt = tekst.substr(i, 1);
clip._x = i*h_space+x;
clip._y = y;
if (i == tekst.length) {
delete i;
this.onEnterFrame = undefined;
}
i++
};

W skrócie jak to działa:
Ustawiamy licznik "i" na 0, definiujemy odległość między klipami z zawierające literki (h_space), współrzędne pierwszego klipu (x i y), oraz tekst który zostanie wyświetlony (tekst). Następnie przypisujemy zdarzeniu onEnterFrame dla głównego tajmlajnu blok kodu zawarty w ciele funkcji. Wykonuje on kolejne czynności:

wstawia klon Symbolu z biblioteki, na scene nadaje mu nazwe oraz głębokość wyświetlania.
przechowujemy referencje do tego kolnu w lokalnej zmiennej clip
przypisujemy zmiennej pola tekstowego znajdującego sie we stawionym klonie odpowiednią literkę z naszego łańcucha znaków
obliczamy pozycje docelowe x i y dla kolonu
sprawdzamy czy wartość licznika jest równa długości łańcuch czyli czy wyswietlone zostały wszystkie literki, jeżeli tak kasujemy wartość licznika i usuwamy funkcję ze zdarzenia onEnterFrame przypisując mu wartość niezdefiniowaną.


Następnie dodajemy do powyżeszego animację za pomocą skryptu. Dołączymy funkcję przypisaną zdarzeniu onEnterFrame, ale dla każdego wstawionego klonu, dzięki czemu każdy będzie się animował od momentu wstawienia go na scene.
Modyfikacje w kodzie zaznaczono Boldem:

Cytat:i = 0;
h_space = 10;
x = 30;
y = 50;
tekst = "jeszcze jakis inny tekst";
this.onEnterFrame = function() {
this.attachMovie("literka", "lt"+i, i);
var clip = this["lt"+i];
clip.txt = tekst.substr(i, 1);
clip._x = i*h_space+x;
clip._y = y;
clip._alpha=0
clip.onEnterFrame = function() {
if (this._alpha<100) {
this._alpha += 5;
} else {
this.onEnterFrame = undefined;
}
};
if (i == tekst.length) {
delete i;
this.onEnterFrame = undefined;
}
i++
};

I cóż się dzieje, najpierw ustawiamy wartość _alpha dla klonu na 0 a następnie przypisujemy zdarzeniu dla tego klonu blok kodu wykonujący następujące czynnośći: Jeżeli wartość _alpha tego(!) klonu (stąd this, odowołujemy sie do poziomu klonu a nie głównego tajmlajna) jest mniejsza od 100 0 zwiększ wartość _alpha o 5; w innym razie (wartość _alpha >= 100) skasuj (zmien na niezdefiniowane) zdarzenie onEnterFrame dla tego klipu.
Efakt jest taki że każdy wstawiony klon od momentu wstawienia zwiększa swoją wartość alpha do momentu aż osiągnie ona 100. Wygląda to tak że literki pojawiają sie kolejno i stają sie coraz mniej przezroczyste aż do chwili uzyskania zerowej przezroczystości (_alpha=100).

Spróbujmy teraz czegoś bardziej efektownego.
Właściwie od tego momentu wszystkie zmiany będą dotyczyły przedewszystkim definicji zdarzenia onEnterFrame dla kolnów. Powiedzmy że chcemy uzyskać efekt polegający na tym że literki pojawiają się w losowych miejscach a następnie płynnie zajmują właśniwą pozycję, tak jak by z rozsypanych literek składała sie linijka zdefiniowanego przez nas tekstu. Poparzmy jak teraz wygląda kod:

Cytat:i = 0;
h_space = 10;
x = 30;
y = 50;
tekst = "jeszcze jakis inny tekst";
this.onEnterFrame = function() {
this.attachMovie("literka", "lt"+i, i);
var clip = this["lt"+i];
clip.txt = tekst.substr(i, 1);
clip.x = i*h_space+x;
clip.y = y;
clip._x=clip.x+(random(100)-50)
clip._y=clip.y+(random(100)-50)
clip.speed=2
clip._alpha = 100;
clip.onEnterFrame = function() {
var sx=(this._x-this.x)/this.speed
var sy=(this._y-this.y)/this.speed
this._x-=sx
this._y-=sy

};
if (i == tekst.length) {
delete i;
this.onEnterFrame = undefined;
}
i++
};

Pogrubioną czcionką zaznaczyłem zamieniony fragment kodu. Na czym polegają zmiany. Poza tym ze zmianie uległa całość onEnterFrame dla klonu to zmieniło się oraz pojawiło nowych klika linijek przed onEnterFrame:
Zamiast tak jak poprzednio docelową pozycję x i y klonu przypisać właściwościom _x i _y przypisujemy je zmiennym o nazwach x i y. Natomiast _x i _y są liczone na podstawie wartości x i y w ten sposób że do tych wartości są dodawane losowe liczby. Jak to działa otóż funkcja random() losuje wartość z podanego przedziału (tu od 0-100) następnie od wylosowanej wartosci odejmujemy połowe górnej granicy czyli 50. Dlaczego tak, ano dlatego że w takim przypadku otrzymamy liczby z przedziału -50,50 tak więc losowe pozycje wyjściowe będą sie znajdowały zarówno poniżej jak i powyżej punktów docelowych. Dzieki czemu efekt losowego "rozsypania" literek będzie bardziej przekonujący.
Zajmijmy sie teraz zmienionym całkowicie zdarzeniem onEnterFrame. Na początku liczymy wartości lokalnych zmiennych sx i sy są to wartości o jakie zostanie zmieniona pozycja klonu (skok). Powstają ona poprzez podzielenie pozostałej aktualnie drogi (po osiach x i y) do punktu docelowego na ilość odcinków podaną w zmiennej speed. Skok zostaje wykonany o jeden taki odcinek dla _x i _y.
Co bardziej uważny czytelnik napewno zauważy następujacy fakt: Jeżeli skok odbywa sie o odcinek który jest częścią pozostałej drogi, a ilość odcinków, na które jest ona zakażdym razem dzielona, pozostaje stała, to odległość klonu od punktu do celowego będzie dążyć do zera ale nigdy nie będzie równa zero. W przypadku tej długości tekstu nie ma to prawie znaczenia natomiast jeżeli animowali byśmy jego większą ilość, obliczanie przesunięcia które nie daje już żadnego wizualnego efektu (bo skok odbywa sie np o 0.000002 pixela) znacznie spowolniło by całość animacji. Problem ten można wyeliminować za pomocą warunku kasującego onEnterFrame dla klipu po osiągnięciu odpowiedniej bliskości punktu docelowego.

Teraz zajmiemy sie połączeniem pierwszego efektu (pojawianie sie przez zmianą przezroczystości) z tym który właśnie uzyskaliśmy. Z tym że zamienimy losowane współrzędne wyjściowe klonów na współrzędne pobierane z kursora myszki co da efekt literek wysypujących sie z kursora.
Najpierw zmieniemy linijki w których przypisujemy kolnowi losowane wartosci _x i _y na:

Cytat:clip._x=_xmouse
clip._y=_ymouse
clip._alpha = 0;

Oraz zmieniamy wartość początkową _alpha na 0 żeby klip był niewidoczny w momencie wstawienia go na scene. Dzięki temu pierwsza pozycja klonu w momencie wstawienia na scene będzie taka sama jak pozycja kursora myszki w tym momencie.
Teraz zobaczmy jak wygląda nowa wersja onEnterFrame dla kolnu:

Cytat:clip.onEnterFrame = function() {
var sa=(100-this._alpha)/this.speed
var sx=(this._x-this.x)/this.speed
var sy=(this._y-this.y)/this.speed
this._alpha+=sa
this._x-=sx
this._y-=sy
};

Skok wartości _alpha jest liczony w taki sam sposób jak w przypaku _x i _y.
Idąc dalej tym śledem zanimujmy inne właściwości klonu jak np: _rotation, _xscale i _yscale, żeby zbogacić animacje.

Cytat:i = 0;
h_space = 10;
x = 30;
y = 50;
tekst = "jeszcze jakis inny tekst";
this.onEnterFrame = function() {
this.attachMovie("literka", "lt"+i, i);
var clip = this["lt"+i];
clip.txt = tekst.substr(i, 1);
clip.x = i*h_space+x;
clip.y = y;
clip._x=clip.x+(random(100)-50)
clip._y=clip.y+(random(100)-50)
clip._xscale=random(700)+100
clip._yscale=random(700)+100
clip._rotation=random(220)+50
clip.speed=4
clip._alpha = 0;
clip.onEnterFrame = function() {
var sa=(100-this._alpha)/this.speed
var sx=(this._x-this.x)/this.speed
var sy=(this._y-this.y)/this.speed
var ssx=(this._xscale-100)/this.speed
var ssy=(this._yscale-100)/this.speed
var sr=(this._rotation)/this.speed
this._alpha+=sa
this._x-=sx
this._y-=sy
this._xscale-=ssx
this._yscale-=ssy
this._rotation-=sr

};
if (i == tekst.length) {
delete i;
this.onEnterFrame = undefined;
}
i++
};

Całość onEnterFrame dla głównego tajmlajnu z zaznaczonymi miejscami modyfikacji wygląda jak powyżej. Efekt jest zdecydowanie ciekawszy manipulując parametrami można osiagnąć dużą różnorodność efektów. Jednym ze sposobów uzyskania jeszcze ciekawszej i bardziej złożonej animacji jest wprowadzenie do obliczeń pozycji funkcji trygonometrycznych.

Cytat:i = 0;
h_space = 10;
x = 30;
y = 50;
tekst = "jeszcze jakis inny tekst";
this.onEnterFrame = function() {
this.attachMovie("literka", "lt"+i, i);
var clip = this["lt"+i];
clip.txt = tekst.substr(i, 1);
clip.x = i*h_space+x;
clip.y = y;
clip.speed=7
clip._alpha = 0;
clip.i=1
clip.range=250
clip.onEnterFrame = function() {
var sa=(100-this._alpha)/this.speed
this.i++
this._alpha+=sa/2
this.range*=0.89
this._x=Math.sin(this.i/this.speed*2.5)*this.range+this.x
this._y=Math.cos(this.i/this.speed*2.5)*this.range+this.y
this._xscale=Math.sin(this.i/this.speed)*this.range+100
this._yscale=Math.cos(this.i/this.speed)*this.range+100
this._rotation=Math.sin(this.i/this.speed*3)*this.range
};
if (i == tekst.length) {
delete i;
this.onEnterFrame = undefined;
}
i++
};

Można na przykład zrobić to w powyższy sposób. Co właściwie dają nam funkcje trygonometryczne. Ich główną zaletą jest to że dla rosnących liniowo argumentów zwracają okresowo powtarzające sie wartości z przedziału od -1 do 1. Warto dodać też że jeżeli dla tego samego rosnącego argumentu będziemy liczyć _x i _y używając odpowiednio sin i cos (lub odwrotnie) o trzymamy ruch kołowy o po okręgu o promieniu 1 wystarczy więć pomnożyć wynik przez np 10 by otrzymać ruch po okręgu o promieniu 10. Dodając lub odejmując od otrzymanych wyników kolejno np 100 i 20, umieścimy środek okręgu w punkcie 100,20. Na tego rodzaju użyciu funkcji trygonometrycznych opiera się powyżesza animacja. Z tą różnicą że promień maleje dążąc do zera w zwiąsku z czym ruch odbywa sie defacto nie po okręgu a po torze spiralnym, którego środkiem jest punkt docelowy poszczególnego klipu. Dla przykładu zajmijmy się właściwością _x klipu. Powstaje ona w następujący sposób:
Liczymy wartość sinusa dla rosnącego licznika ("i") danego klipu, aby zmiany były łagodniejsze (dłuższy okres funkcji sinus) "i" mnożymy *2.5, następnie otrzymaną wartość mnożymy przez malejącą wartość "range" która spełnia rolę promienia. Na koniec dodajemy docelową wartość x. Ponieważ promień maleje i dąży do zera więc _x w końcu osiągnie wartość zbliżoną do x czyli docelową. To samo robimy by otrzymać _y z tą różnica że używamy funkcji cosinus, aby jak już wspomiałem uzyskać ruch po torze spiralnym. Na tej samej zasadzie opiera się animacja pozostałych wartości, róznią sie tylko poszczególne wartości liczbowe które wpływają na efekt wizualny.
Zachęcam do eksperymentowania ze skryptem, ułatwi ro zrozumienie zasady jego działania, oraz pozwoli na tworzenie własnych nowych rozwiązań.
Więcej znajdziesz na: www.flashzone.pl

[chwastu]

Bardzo ciekawy poradnik, bardzo mi pomógł.