TUTORIA

L Flash
>>>
EFEKTY
>>>
efekt_07
 1.
Otwórz Flasha i stwórz film z dwiema warstwami (Insert > Layer).
Pierwszą warstwę nazwij button, a drugą title.

2.
Na warstwie button narysuj kwadrat, a następnie przekonwertuj go do
symbolu typu button (Insert > Convert to Symbol) nadając mu nazwę
button. Powstały przycisk (button), za pomocą panela Align, wyrównaj
tak, aby znajdował się w centralnej części filmu.

3.
Przejdź do trybu edycji symbolu button, dodaj jedną warstwę (Insert >
Layer) i na dodanej warstwie narysuj symbol (np. słuchawkę telefonu)

4.

Na warstwie title narysuj figurę geometryczną, przypominająca

kształtem znane z komiksów "dymki". Narysowaną figurę przekonwertuj do
Pierwszym krokiem jest stworzenie nowego przycisku (ctrl+F8)

2.
Tworzymy trzy warstwy i nazywamy je – „dolna”, „środkowa”, „górna”

3.
Pierwszą warstwą, na której będziemy pracować jest warstwa "dolna".
Tworzymy koło koloru czarnego, które pozwoli nam otrzymać efekt cienia. Dobrze będzie
skopiować utworzone koło (ctrl+c) przed przejściem do warstwy następnej.

4.
Jesteśmy w warstwie "środkowej". Wklejamy koło skopiowane wcześniej (ctrl+v) i
wypełniamy tym razem gradientem (np. czerwono-czarnego gradientu). Ustawiamy
okrąg pokolorowany gradientem nad okrąg czarny, aby otrzymać efekt cienia.

5.
W warstwie "górnej" tworzymy trzecie koło koloru jednolitego (w tym przypadku
jest to kolor czerwony, ten, od którego wychodziliśmy tworząc gradient),
troszeczkę mniejsze od poprzednich. Przesuwamy je na centrum poprzednich kółek
tak by uzyskać efekt trójwymiaru.
6.
Przechodzimy do akcji "down" w warstwie środkowej i dodajemy klatkę kluczową
(F6). Ustawiamy gradient odwrotny do poprzedniego, odwracając efekt światła i
powtarzamy operację z nasuwaniem kółka w jednolitym kolorze. Na pozostałych
warstwach wykonujemy operacje analogiczne do poprzednich.

7.
Kończąc naszą pracę pozostaje nam jedynie dodać brakujące klatki, kopiując do
akcji "over" i "hint" klatki z akcji "up" przycisku.

8.
Z paska "menu" wybieramy "window">"library". Z naszej biblioteki wybieramy przycisk i
przeciągamy go na scenę.

Naetepne
Tworzymy nowy plik ustalamy jego wymiary, liczbę klatek na sekundę
i kolor tła. Pamiętajcie o tym, że im większa liczba klatek na sekundę tym
animacje będą bardziej płynne (najlepiej ustawiać liczbę z przedziału od
18 do 30). Zaczynamy prace, wybieramy narzędzie do tworzenia tekstów
(symbol A). Tworzymy napis. Jeżeli mamy otwarty panel np. PRACA DYPLOMOWA
2.
Properties to zaraz po wybraniu tego narzędzia ustawi się on na
właściwości tekstu. W nim określamy jego wygląd. Mój napis powstał
czcionką Verdana rozmiar 30 pogrubiona. Teraz, gdy mamy już napis klikamy
CTRL+B. Każda litera powinna zostać rozseparowana i być w oddzielnym
niebieskim prostokąciku. Każda litera naszego tekstu jest oddzielnym
obiektem.

3.
Teraz musimy je umieścić każdą w oddzielnej warstwie. Z menu Modify
wybieramy opcję ostatnią Distribute to Layers (Ctrl+Shift+D). Powstały
teraz nowe warstwy każda zawiera jakąś literę lub znak. Warstwa, w której
powstał tekst jest pusta, możemy ją usunąć klikając na symbol kosza. Mając
nadal zaznaczone wszystkie litery (każda litera w niebieskim prostokącie)
klikamy na klatkę nr 1 w dowolnej warstwie prawym klawiszem i wybieramy
Create Motion Tween.
4.
Teraz animujemy litery. W klatce nr 90 wstawiam klatki kluczowe kończące
animację. Można robić to na piechotę wybieramy warstwę, klatkę nr 90 i
wciskamy F6. Jest jednak szybszy sposób. Wybieramy najwyższą warstwę i jej
klatkę 90 trzymając lewy klawisz myszki zaznaczamy ciągnąc w dół wszystkie
klatki nr 90 potem wystarczy wcisnąć F6 i gotowe.

5. .....
Teraz przechodzimy do klatki nr 1 i zaznaczamy wszystkie litery w taki
sposób jak zaznacza się pliki lub foldery w Windowsie. Zaznaczone
wszystkie litery powiększamy (Modify/Transform/Scale and Rotate...) by
wyszły poza pole pracy. Teraz powiększamy je o 800%. Animacja prawie
gotowa. Teraz należy zsunąć litery, mogą na siebie zachodzić. Napis
powinien na szerokość zmieścić się w polu pracy.
6.
Dodamy opóźnienie.
Litery będą się zmniejszać jedna po drugiej i na końcu animacji utworzą
napis. Pierwsza litera tekstu zaczyna się animować od klatki nr 1 drugą
musimy opóźnić o jakiś okres czasu w stosunku do litery pierwszej ja dałem
5 klatek. Przesuwamy klatkę kluczową w warstwie z literą drugą z klatki nr
1 do 5 chwytając ją myszką. Teraz klatkę kluczową litery trzeciej
przesuwamy do klatki nr 10.

7.
Postępujemy tak do końca naszego wyrazu zwiększając opóźnienie o 5 klatek.
Gdy to już wykonamy przechodzimy do przedostatniej litery i jej klatki
kluczowej kończącej animacje nr 90. Klatkę tą przesuwamy do klatki nr 85.
Z pozostałymi warstwami postępujemy podobne zmniejszając położenie klatek
kluczowych o 5 w stosunku do warstwy poprzedniej.

8.
Otrzymaliśmy następujący efekt: litery zmniejszają się startując w
odstępach czasu i powoli układają nasz napis. Dla większego efektu możemy
dodać efekt Alpha pojawiania się liter z jednoczesnym pomniejszeniem.
Zaznaczamy pierwszą literę wyrazu w jej pierwszej klatce kluczowej.
Powinna zmienić się nam zawartość panelu Properties na właściwości obiektu
graficznego (Graphic). Ustawiamy w nim Color na Alpha 0%. To samo
wykonujemy z każdą kolejna literą. Publikujemy i animacja jest gotowa.
Animacji pojawiania się tekstu
wykonanej całkowicie za pomocą
skryptu
i sterowanej parametrami.
Tworzymy mechanizm wyciągania
kolejnych literek oraz
przypisywania ich kolejnym
wstawianym klonom symboli, nie
zapominając o kontroli długości
już wyświetlonego 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:

i = 0;
h_space = 10;
x = 30;
y = 50;
tekst = "Tutaj wpisujemy
 pierwszy tekst OBRONA PRACY
01 ";
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++

};

Opis kodu:

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 nazwę oraz głębokość

wyświetlania.

 przechowujemy referencje do tego kolnu w lokalnej zmiennej clip

 przypisujemy zmiennej pola tekstowego znajdującego się 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 wyświetlone
zostały wszystkie literki, jeżeli tak kasujemy wartość licznika i usuwamy funkcję ze
zdarzenia onEnterFrame przypisując mu wartość niezdefiniowaną.

Zapis.fla Podglad.swf
2.
Następnie dodajemy do powyższego 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
scenie. Modyfikacje w kodzie zaznaczono Boldem:

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++
};

Opis kodu:

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).

Zapis.fla Podglad.swf

3.
Teraz zastosujemy bardziej efektywny poruszanie się tekstu. Właściwie od
tego momentu wszystkie zmiany będą dotyczyły, przedewszystkim definicji
zdarzenia onEnterFrame dla koló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ściwą pozycję, tak jak by z rozsypanych
literek składała się linijka zdefiniowanego przez nas tekstu. Poparzmy jak
teraz wygląda kod:

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++
};

Opis kodu:

Pogrubioną czcionką zaznaczony jest 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 wartości odejmujemy połowę 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ą się
znajdowały zarówno poniżej jak i powyżej punktów docelowych. Dzięki czemu efekt losowego
"rozsypania" literek będzie bardziej przekonujący.
Zajmijmy się 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.

Zapis.fla Podglad.swf

4.
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 zmienimy linijki, w których przypisujemy klonowi losowane
wartości _x i _y na:

clip._x=_xmouse
clip._y=_ymouse
clip._alpha = 0;
Opis kodu:
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:

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
};
Opis kodu:

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

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++
};
Opis kodu:

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.
 Moduł lampek Moduł lampek
ostrzegawczych ostrzegawczych

Wyświetlacz
wielofunkcyjny
Panel MISC
Panel LG

Zespól pedałów do sterowania

Panel ręcznego sterem kierunku
pochylenia

Wyświetlacz informujący
o uszkodzeniach
Panel ELEC

Panel ręcznego trymera

Panel ostrzegawczy
Panel sterowania FLT Drążek

Panel kontroli
 Moduł lampek Moduł lampek
ostrzegawczych ostrzegawczych

Wyświetlacz
wielofunkcyjny
Panel MISC
Panel LG

Zespól pedałów do sterowania

Panel ręcznego sterem kierunku
pochylenia

Wyświetlacz informujący
o uszkodzeniach
Panel ELEC

Panel ręcznego trymera

Panel ostrzegawczy
Panel sterowania FLT Drążek

Panel kontroli