webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> porady >> flash >> ActionScript

Tworzenie ekfektu starej animacji

autor: Piotr 'zakaru' Szarmach, ostatnia modyfikacja: 2007-02-15

szukaj: efekt starej animacji efekt starej animacji movie clip movie clip animacja animacja flash flash

W niniejszej poradzie nauczysz się tworzyć efekt starej animacji tekstu używając tylko skryptów. Na początek ustalmy właściwości naszej animacji, gdyż jest to bardzo ważne, zmienimy tylko wysokość i szerokość (witdth:300, height:80).

efekt starej animacji - zd.1

Dobra teraz przejdźmy do tworzenia animacji. Warstwę która już istnieje nazwij "napis", stwórz następną warstwę i nazwij ją "rzeczy", następnie stwórz jeszcze jedną warstwę i nazwij ją "akcje", wszystko powinno wyglądać tak jak na zd.1.

W warstwie napis stwórz jakikolwiek napis ustaw go mniej więcej na środku animacji, przekonwertuj go klawiszem 'f8' na obiekt typu 'movie clip' i nazwij jego klon "napis". Przejdź do klatki piątej i skopiuj klawiszem 'f5' zawartość warstwy "napis", w klatce pierwszej, w warstwie "akcje" stwórz ujęcie kluczowe, również w klatce piątej w tej samej warstwie stwórz ujęcie kluczowe. Nasz napis będzie znikał i pojawiał się, w klatce pierwszej w warstwie "akcje" wstaw taki oto kod:

liczba = Math.random();

Powyższy kod powoduje wylosowanie jakieś liczby i przyporządkowanie jej do zmiennej "liczba". Przejdź teraz do piątej klatki (również w warstwie akcje) i wstaw tam taką akcje:

if (liczba>=0.4) {
napis._visible = true;
} else {
napis._visible = false;
}

Powyższa akcja mówi nam, że gdy zmienna "liczba" jest większa lub równa liczbie 0.4 (if (liczba>=0.4)) obiekt o nazwie "napis" jest widoczny (za widoczność odpowiada parametr _visible ), lecz jeżeli powyższy warunek nie został spełniony obiekt o nazwie "napis" jest niewidoczny. Tak oto w prosty sposób stworzyliśmy mechanizm pojawiania się i znikania naszego napisu.

Przejdź teraz do warstwy o nazwie "rzeczy" i narysuj w niej linie która będzie przechodziła przez cały obszar animacji w pionie, przekonwertuj teraz tą linie na 'movie clipa', a jej klon nazwij "pasek". Pasek ten będzie poruszał się w poziomie, pora dodać do akcje, dzięki której będzie możliwy ten ruch, poniższą akcje również dodaj w warstwie "akcje" w klatce piątej:

pasek._x = random(300);

Powyższa akcja powoduje, iż zmienna x obiektu "pasek" jest losowo wybierana (random). Liczba 300 po akcji random mówi nam o tym na jakiej szerokości ma działać te losowe wybieranie, a że my chcemy aby losowe wybieranie działało na całej długości naszej animacji to wpisujemy 300 (bo tyle szerokości ma nasza animacja). Kolejną akcją jaką dodamy będzie powiększanie i zmniejszanie szerokości naszego paska, aby uzyskać taki efekt używamy akcji:

pasek._width=random(15);

Tym razem aby poszerzyć nasz pasek użyliśmy parametru _width który to jest odpowiedzialny za szerokość danego obiektu, liczba 15 określa do jakiej szerokości na maksa można poszerzyć nasz pasek. Aby animacja wyglądała ciekawiej dodamy jeszcze akcje która będzie zmieniała przeźroczystość paska. Dodaj poniższą akcje do klatki piątej w warstwie "akcje":

pasek._alpha=random(90);

Powyższej akcji chyba nie muszę tłumaczyć. Teraz przejdź do warstwy "rzeczy" i skopiuj jej zawartość do klatki piątej klawiszem 'f5'. Narysuj teraz małą szarą kropkę (oczywiście w warstwie "rzeczy") i przekonwertuj ją na obiekt typu 'movie clip' jej klon nazwij "kropka". Chcemy uzyskać efekt, aby nasza kropka zmieniała swoją wysokość i szerokość oraz zmieniała swoje położenie względem osi 'x' oraz 'y', aby uzyskać taki efekt dodajemy do klatki piątej w warstwie "akcje" poniższą akcje:

kropka._width=random(10);
kropka._height=random(10);
kropka._x=random(300);
kropka._y=random(80);

Powyższej akcji już chyba nie muszę omawiać, gdyż opiera się ona na wcześniejszych akcjach. Poniżej umieszczam cały kod który powinien znajdować się w klatce piątej w warstwie "akcje".

if (liczba>=0.4) {
napis._visible = true;
} else {
napis._visible = false;
}
pasek._x = random(300);
pasek._width = random(15);
pasek._alpha = random(90);
kropka._width = random(10);
kropka._height = random(10);
kropka._x = random(300);
kropka._y = random(80);

Nadeszła pora na przetestowanie filmu.

Piotr 'zakaru' Szarmach

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org