Mój pierwszy banner.

Jedną z najważniejszych form reklamy internetowej jest banner - animacja będąca zarazem linkiem do reklamowanej strony. Można go znaleźć na prawie każdej wirtynie www. Możemy wyróżnić kilka bannerów: standardowe bannery umieszczane zazwyczaj u góry strony, mniejsze bannery umieszczane w tekście albo po bokach, bannery pływające umieszczane po bokach ,poruszające się wraz z przewijanym tekstem i bannery umieszczane na warstwach wyższych niż właściwa strona www, znikające po pewnym czasie
Banner, który stworzymy na potrzeby tej lekcji, będzie reklamował nieistniejący portal - ja.com.pl. Cała zabawa polegać będzie na zaanimowaniu obiektów graficznych.
W tworzeniu bannerów niezmiernie istotną kwestią jest ich rozmiar. Nie mogą wczytywać się godzinami, choćby były najbardziej interesującymi bannerami na świecie - nikt nie będzie czekał aż to cudo się ukaże na ekranie. Drugą ważną rzeczą jest poziom skomplikowania bannera, a mianowicie to w jaki sposób będzie on działał. Mimo niewielkiej wagi filmy flasha mogą znacznie obciążyć procesor, a co za tym idzie nasza animacja na wolniejszych komputerach może spowodować wręcz zawieszenie się komputera odwiedzającego stronę z naszym bannerem. Nie można zatem przesadzić z przechodzeniem w siebie obrazków, ani tez z wymyślnym Action Scriptem.
Zaczynamy
Na początku musimy zaprojektować banner na sucho, czyli ustalić jakie będą potrzebne elementy, w jakiej kolejności mają się animować, a przede wszystkim jak mają wyglądać aby przyciągnąć potencjalnego internautę na nasz serwis. Banner, który zrobimy będzie składał się z trzech haseł i adresu oraz tła:
1.Pierwsze hasło byłeś już u nas? wjedzie z lewej strony na scenę, zwolni by po pewnym czasie nabierać prędkości i zjechać ze sceny za prawą jej krawędź.

2.Drugie hasło nie? pojawi się na scenie wlatując na nią z przodu, a następnie zapadnie się w nią (efekt taki osiągniemy skalując napis).

3.Trzecie hasło wpadnie na scenę z góry by kolejno paść pod scenę.

4.Na samym końcu pojawi się adres portalu, który reklamujemy, podzielony na części, to znaczy każda z nich będzie inaczej animowana.

Jeżeli już to mamy możemy zacząć.
1
tworzenie warstw na głównej lini czasowej
Zaczynamy oczywiście od otwarcia Flasha i nowego dokumentu o wymiarach ) 468x60( wymiary ustawimy we właściwościach dokumentu wciskając Ctrl+M) - taka jest bowiem standardowa wielkość dużego bannera podłużnego. Ustalamy w tym samym okienku kolor tła oraz ilość klatek na sekundę(w tym przykładzie #990000-wiśnia i 25fps - klatek na sekundę). Następnie tworzymy dodatkową warstwę w Timeline(Ctrl+Alt+T).




Klikając podwójnie na ich nazwach, nazywamy odpowiednio warstwy: tło i napisy.
umieszczanie tła
Na warstwie tło umieszczamy elementy występujące w tle naszego bannera. Ja umieściłem dwa kształty narysowane narzędziem Pen (P).



Następnie zduplikowałem je(Ctrl+D) i przy pomocy polecenia Modify>Transform>Flip Hotizontaly, odwróciłem, uzyskując dwa lustrzane obiekty, które umieściłem po obu stronach sceny. Zmniejszyłem też ich widoczność w panelu Mixer aby nie wyróżniały się zbytnio.



tworzenie napisów
Na kolejnej warstwie przy pomocy narzędzia Text(T) piszemy: byłeś już u nas?, następnie łamiemy text(Modify>Break Apart lub Ctrl+B) konwertując go w ten sposób na wektory (w taki sposób postępujemy ze wszystkimi tekstami w tym tutorialu).



uwaga: czynność należy wykonać dwa razy dla każdego napisu, ponieważ za pierwszym razem jedno pole tekstowe zostanie podzielone na tyle pól ile jest liter w tekście.

Zabezpieczy to nasz banner przed niezamierzonymi zmianami spowodowanymi brakiem danej czcionki na innych komputerach.

2
tworzenie Movie Clipa
Następnym krokiem będzie przekonwertowanie napisu w Movie Clip(F8 lub Insert>Convert to Symbol) i nazwanie go napisy.



Po konwersji i nadaniu nazwy, klikamy podwójnie na tekście,aby wejść do niego i tam stworzyć całą animcję.
Edycję obiektu możemy jednak rozpocząć na kilka innych sposobów:
1* klikając na jego nazwie w biblioteceLibrary(Ctrl+L lub Window>Library),
2* wybierając obiekt do edycji przyciskim Edit Symbols obok wartości powiększenia obrazu (tutaj screen z prawj częsci timeline'a),
3* klikając prawym przyciskiem myszy na obiekcie i wybierając odpowiednią opcjęEdit, Edit in Place, Edit in New Window,
4* naciskając kombinację klawiszy Ctrl+E.
Najwygodniej jest jednak edytować obiekt w miejscu (Edit in Place), ponieważ mamy kontrolę nad położeniem obiektu na scenie, w innym przypadku nie widzimy sceny.
edycja Movie Clipa
Następnie (wewnątrz Clipa) dodajemy warstwy i nazywamy je kolejno(pierwszą już mamy i nazywamy ją byłeś?):
nie?
na co?
www



Na odpowiednich warstwach tworzymy napisy, tak jak poprzednio, nie konwertując ich do symboli oprócz ostatniego:
nie?
na co czekasz?
www.ja.com.pl
3
animacja pierwszego hasła
Klikamy prawym przyciskiem myszy na klatce nr 1, na warstwie byłeś? , na której znajduje się ów napis i wybieramy Create Motion Tween. Możemy to także zrobić przez menu Insert>Create Motion Tween.



Następnie klikamy lewym przyciskiem na klatce nr 10, na tej samej warstwie, i wstawiamy tam ang.Keyframe - klatkę kluczową (F6 lub Insert>Keyframe), powtarzamy to samo w klatkach: 15, 30, 35, 45. Wracamy do klatki nr 1 i tak umieszczamy napis aby znalazl się za sceną po lewej stronie.



W klatce nr 10 przesuwamy napis w prawo o długość wyrazu byłeś; klatki nr 15 i 30 pozostają niezmienione, natomiast w klatce nr 35 przesuwamy napis w lewo także o długośc wyrazu byłeś,a w klatce nr 45 ustawiamy nasz napis po prawej stronie sceny, tak aby znajdował się za nią.



dynamika animacji
Teraz należy zająć się dynamiką poruszania się go po scenie. Służą do teg wartości Ease w zakładce Properties (Ctrl+F3 lub Window>Properties. Jeżeli wybrana jest klatka, która zawiera Motion Tween lub Shape Tween możemy zmienić wartość Ease w zależności jaki efekt chcemy osiągnąć:
od -1 do -100 spowoduje, że animacja zwolni przed tą klatką ,a następnie przyśpieszy do następnej klatki
od 1 do 100 spowoduje, że animacja przyśpieszy wychodząc z klatki, a następnie zwolni przed następną klatką
W naszym przypadku ustawimy w pierwszej klatce wartość Ease na 100, co spowoduje, ze nasz napis szybko wjedzie na scenę, a następnie wolno wyhamuje, tak samo ustawimy w klatkach nr 10, 30, 35.
W dalszej kolejności dodamy powyżej warstwy byłeś? kolejną warstwę. Zaznaczymy pociągnieciem wszystkie klatki na warstwie byłeś?, a natępnie kopiujemy je do nowo powstałej warstwy (klikamy prawy klawiszem myszy, wybieramy Copy Frames lub Ctrl+C) i klikamy na klatce, od której ma zacząć się wklejana animacja - w tym przypadku na drugą i tam wklejamy klatki (Paste Frames lub Ctrl+V). Powstałe dodatkowo klatki możemy usunąć zaznaczając je i klikając prawym klawiszem myszki wybierając Remove Frames.


Następnie zaznaczamy w każdej klatce kluczowej ,na warstwie, do której wkleiliśmy klatki, tekst i zmieniamy jego przezroczystość: w zakładce Properties wybieramy z rozwijanego menu Color opcję Alpha i wpisujemy po prawej stronie wartość 50.


4
animacja drugiego hasła
Zaznaczamy pierwszą klatkę na warstwie nie? i przeciągamy ją do klatki nr 40, tam tworzymy Motion Tween i dodajemy Keyframe w następujących klatkach: 48, 51 ,61 ,66 ,71. W klatkach: 48, 61 ustawiamy wartośćEase na 100. Następnie w klatce nr 40 powiększamy napis tak aby wychodził poza scenę i ustawiamy wartośćAlpha na 0. W klatce nr 48 nieznacznie zmniejszamy napis, w klatce nr 66 zwiększamy o 50%, a w ostatniej zmniejszamy do zera jego wielkosć i wartość Alpha.


Zmiany wielkości możemy dokonać w oknieTransform(Ctrl+T lub Window>Transform) oraz narzędziem Free Transform(Q lub Modify>Transform>Free Transform). Skopiujemy animacje napisu w taki sam sposób jak przed chwilą w przypadku poprzedniego napisu i przesuniemy ją względem oryginalnej o dwie klatki, czyli wkleimy do klatki nr 42.




5
animacja trzeciego hasła
Zaznaczamy tekst na co czekasz? i wybieramy narzędzie Free Transform. Pośrodku napisu widzimy białą kropkę, którą możemy przesuwać, tak więc umieszczamy ją pod pierwszą literką naszego napisu. Jest to środek ciężkości obiektu, wobec którego wykonywane są operacje przy pomocy narzędzia Free Transform. Po najechaniu na jeden z rogów zaznaczenia kursor zmieni się w okrągłą strzałkę, wówczas należy obrócić napis tak aby jego koniec był wyżej niż początek.
Cały napis przesuwamy ponad scene, aby nie był widoczny. Przeciągamy klatkę z napisem do klatki nr 70 tworzymy Motion Tween i wstawiamy Keyframew klatkach nr 72, 73, 81, 84, 88. W klatce 72 ściągamy napis na dół - na scenę,a w kolejnej klatce obracamy go tak aby nie był przekrzywiony jak dotychczas. Kopiujemy tę klatkę do klatki nr 81. Natomiast w klatce nr 84 tak obracamy napis, tak aby początek znajdował się wyżej niż koniec. W ostatniej klatce przesuwamy go pod scenę.



Tak oto wykonaliśmy animację haseł w naszym bannerze.
6
animacja adresu naszego portalu
Zaznaczamy nasz adres (napiswww.ja.com.pl), konwertujemy do Movie Clipa(jeżeli wcześniej tego nie zrobiliśmy) i nazywamy ja.com.pl, w ten sposób uzyskujemy zagnieżdżonego klipa, który powinien zajmować tylko jedną klatkę(ostatnią) w naszym głównym klipie.



Następnie edytujemy powstały symbol. Wewnątrz pierwszą warstwę nazywamy www i tworzymy kolejno warstwy:
* ja
* com
* pl
* kropki




Zaznaczamy tylko litery ja i wycinamy je (Ctrl+X lub prawym przyciskiem myszy klikamy, a następnie wybieramy Cut), przechodzimy do warstwy ja i tam klikamy na scenie prawym klawiszem myszki i wybieramy Paste in Place wówczas litery zastaną wklejone w to samo miejsce, tylko że na innej warstwie. Tak samo postępujemy z com, pl oraz kropkami.
Można użyć także funkcji Distribute to Layers w taki sposób, że zaznaczamy litery, które mają powędrować na inną warstwę, grupujemy (Ctrl+G lub Modify>Group), a nastepnie zaznaczamy wszystkie grupy i wybieramy w menu Modify>Distribute to Layers lub (Ctrl+Shift+D). Wówczas zostaną automatycznie stworzone warstwy i umieszczone na nich odpowiednie elementy.



Jeżeli nie pogrupujemy elementów, każda litera zostanie umieszczona na osobnej warstwie,a tego nie chcemy.
Następnie na każdej warstwie, oprócz kropki i pl tworzymy Motion Tween. Na pierwszej warstwie www tworzymy Keyframe w klatkach nr 5 i 35. Na warstwie ja przeciągamy klatkę z tekstem do klatki nr 4 i wstawiamy klucze w klatkach nr 8 i 35. Na kolejnej warstwie com przeciągamy klatkę pierwszą do klatki nr 7 i umieszczamy klucze w klatkach nr 11 i 35. Warstwa pl powinna zaczynać się w klatce nr 12 i kończyć jak wszystkie w 35, a klatka kropki zaczyna się w nr 13. Teraz w pierwszej klatce zmniejszamy napis www i jego wartość Alpha do zera. Tak samo postępujemy w klatce nr 7 z napisem com. W klatce nr 4 zwiekszamy napis ja o 200% i zmniejszamy Alpha do zera. Dodamy jeszcze mrugnięcie kropek i banner prawie gotowy. Aby kropki znikły i pojawiły się musimy usunąć dwie klatki 31 i 33 (wstawiamy tam klatki kluczowe i kasujemy klawiszem Delete.
Animacja skończona, należy jeszcze zatrzymać głównego klipa napisy w ostatniej klatce, aby adres portalu mógł się odegrać, a następnie poinformować napisy, aby odtworzyły się raz jeszcze.
7
akcje
W ostatniej klatce (tam gdzie znajduje się podklip ja.com.pl w klipie napisy) musimy umieścić akcję zatrzymania. Klikamy na tej klatce prawym przyciskiem myszy i wybieramy Actions lub wywołujemy okno akcji wciskając klawisz F2. W oknie w trybie Expert(Ctrl+Shift+E lub w prawym górnym rogu klikamy na ikonę ze strzałką) wpisujemy akcje:




Następnie w podklipie ja.com.pl w ostatniej klatce wpisujemy akcje:
_parent.play();
Tak więc animację mamy skończoną jeszcze dodamy przycisk, który będzie odsyłał internautów do naszego portalu po kliknięciu na banner. Wracamy więc do sceny gdzie mamy dwie warstwy, tworzymy tam jeszcze jedną i na niej rysujemy narzędziem Rectangle(R) prostokąt na całą wielkośc sceny. Zaznaczamy go i ustawiamy widoczność jego wypełnienia i konturu na zero w zakładce Color Mixer(Shift+F2 lub Window>Color Mixer), następnie konwertujemy do przycisku Button.



Teraz przycisk jest całkowicie niewidoczny, ale to nie znaczy, że nie będzie spełniał swojej funkcji. Otwieramy okno akcji i mając zaznaczony nasz przycisk wpisujemy akcje, która spowoduje otworzenie się nowego okna z naszym portalem:

on (release) {
getURL("http://www.ja.com.pl", "_blank");
}
Teraz należałoby przetestować nasz banner, możemy to zrobić podczas pracy we Flashu wciskając Ctrl+Enter. Wówczas będziemy mogli zobaczyć jak prezentuje się sama nasza animacja. Nałeżałoby jednak przetestować nasz banner na strinie www, wobec czego musimy opublikować film Flasha - wciskamy Ctrl+F12 i mamy opublikowaną stronę zawierającą nasz banner, zapisaną w tym samym katalogu co źródło i z taką samą nazwą.



Zakończenie
W ten sposób stworzyliśmy animowany banner we Flashu. W powyższym tutorialu przedstawiłem podstawowe funkcje programu dotyczące posługiwania się narzędziami do obróbki grafiki i animacji wektorowej, w taki sposób, aby każdy mógł go wykonać - osoba, która nigdy nie miała do czynienia z tą aplikacją jak i osoby, które już zetknęły się z tego typu programami.
Banner jest jednym z ważniejszych form reklamy w internecie, jego wykonanie zależy w głównej mierze od pomysłu i dynamiczności animacji. Narzędzie Macromedii daje ogromne możliwości, nie tylko w produkcji bannerów, ale różnorodnych animacji interaktywnych, prezentacji czy gier. Pomimo znajomości narzędzi dużą rolę odgrywają często eksperymenty, więc zachęcam gorąco do nich

---