Jacek Doliński – real taste of my graphic life

Witam. Mały przestój dopadł nas na blogu. Zeszły piątek uciekł mi ponieważ szefostwo zaaranżowało pracownikom mały wyjazd integracyjny. Jak na informatyków przystało wypad skończył się cało nocnym graniem w WII .

Zabawa była przednia i z pewnością w przyszłości konsola zawita do mojego domu. Dzisiaj coś łatwego i prostego. Zrobimy sobie proste menu we flashu. Zaczynamy.

1. Tworzymy nowy dokument AS. 2.0

Wybieramy z okna powitalnego “Flash File (ActionScript 2.0)” lub “File -> New -> “Flash File (ActionScript 2.0)”.

2. Ustawienia dokumentu

W panelu “Document Properties” ustawiamy rozmiar dokumentu (600px na 50px), tło: “#1E002B”, 46 klatek na sekundę.

3. Dodajemy warstwy

Na pierwszej warstwie będziemy edytować nasz kod AS. Nadajemy jej nazwę “A” i zamykamy ją. Drugiej dajmy nazwę “buttons”, umieścimy na niej nasze przyciski.

4. Dodajemy tekst na warstwie “buttons”

Wybieramy narzędzie “Text Tool” skrót “T”. Wstawiamy 5 tekstów “Strona Główna”, “O nas”, “Nasze Realizacje”, “Oferta Współpracy”, “Kontakt”. Czcionka jakiej użyłem to “Verdana”, rozmiar: “12px”, kolor: “#D50082″

5. Przekształcamy nasz teskt na Movie Clipy

Zaznaczamy tekst wybieramy z menu: “Modify -> Convert to Symbol” lub wciskamy “F8″. W nazwie wpisujemy “przycisk1_mc”. W “Type” zaznaczamy “Movie Clip”. Klikamy “OK”. Robimy tak z każdym tekstem w naszym menu. Zmieniamy tylko nazwy na “przycisk2..3…4…5_mc”.

6. Nadajemy nazwę instancji naszym MC

Każdy MC musi mieć nazwę instancji “Instance name”. Pozwoli to nam w naszym kodzie AS odwoływać się do kolejnych pozycji z menu. Są różne rodzaje zapisu. Ja akurat nadałem nazwę instancji taką samą jak nazwy MC (”przycisk1_mc”, “przycisk2_mc” … “przycisk5_mc”).

7. Rozpoczynamy pisanie kodu

Wchodzimy na pierwszą klatkę naszej warstwy “A”. Naciskamy “F9″. Otworzy nam się panel akcji. To właśnie tutaj dzieje się magia . Do animacji wykorzystamy darmową bibliotekę “mc tween”. Musicie wcześniej ją zainstalować na swoim komputerze. Szczegóły instalacji i pliki znajdziecie pod tym adresem. Plik biblioteki umieszczamy w katalogu naszego projektu. Następnie musimy ją umieścić w naszym kodzie.

Wpisujemy: #include “mc_tween.as”

Wcześniej też zmieniłem położenie “Y” naszych przycisków. Umieściłem je poza sceną “Y = -20″. Tak żeby po uruchomieniu menu uzyskać efekt “wlotu na belkę”.

Teraz odwołamy się do naszych przycisków.

Wpisujemy: przycisk1_mc.ySlideTo(24, 0.3, “easeOutQuad”

Tłumaczenie:
- przycisk1_mc (jest to nazwa naszego przycisku),
- ySlideTo (przycisk będzie animował się po osi “Y”),
- 24 (pozycja “Y” do której ma się animować),
- 0.3 (czas w jakim ma się dostać na tą pozycję),
- easeOutQuad (rodzaj animacji. Wybrałem ten, ale cała biblioteka posiada jeszcze kilka innych. Szczegóły możecie zobaczyć w dokumentacji biblioteki).

Analogicznie robimy z kolejnymi MC, ale dodatkowo na końcu każdej lini kodu dodajemy czas po jakim ma się rozpocząć animacja. Dodałem (0.2, 0.4, 0.6, 0.8)

Wpisujemy: przycisk2_mc.ySlideTo(24, 0.3, “easeOutQuad”, 0.2

Uzyskaliśmy nasz efekt pojawiania się przycisków. Teraz dodamy kod, który będzie odpowiadał za to co się stanie po najechaniu na MC “onRollOver”, po ściągnięciu kursora z MC “onRollOut” oraz co ma się dziać po kliknięciu w MC “onRelease”. W naszym wypadku będzie to wywołanie adresu URL.

Wpisujemy: przycisk1_mc.onRollOver = function() {
przycisk1_mc.ySlideTo(17, 0.2, “easeOutQuad”);
};

przycisk1_mc.onRelease = function() {
getURL(”http://www.blog.jacekdolinski.com”, “_blank”);
};

Nadaliśmy zdarzenie gdzie po najechaniu na nasz MC napis podniesie się do pozycji “Y=17″, a po ściągnięciu wróci do “Y=24″. Po kliknięciu wywołamy funkcję getURL z przykładowym adres strony internetowej. Standardowo robimy tak z każdym naszym Movie Clipem.

Tak dotarliśmy do końca tutoriala. Tak jak pisałem wcześniej. Są to absolutne podstawy. Z czasem będziemy robić coś bardziej zaawansowanego, ale myślę że początkującym na pewno to się przyda. Pliki źródłowe możecie pobrać niżej. Czekam na wasze uwagi, oraz propozycje kolejnych lekcji.

POBIERZ PLIKI