Jak zrobić animowane menu we Flash CS5 - ActionScript 3.0?

Witam Cię serdecznie drogi użytkowniku ! W tym artykule chciałbym Ci pokazać w jaki sposób można zrobić bardzo ciekawe animowane menu we Flash CS5 za pomocą ActionScript 3.0 !
 





A więc zacznijmy od otwarcia programu i wybrania pustego dokumentu ActionScript 3.0


Jeśli już mamy otwarty pusty dokument to przejdźmy do górnego menu, z którego wybierzemy INSERT - NEW SYMBOL. 


Pojawi nam się okno, w którym należy wpisać nazwę i ustalić typ, w naszym przypadku będzie to Movie Clip.


Jak widzisz, po kliknięciu OK pojawia się nowy stół montażowy, na którym zaczniemy tworzyć nasz nowy przycisk. Więc przejdź do palety z narzędziami i wybierz prostokąt a następnie ustal kolory jakie mają być na Twoim przycisku. Ja ustawiam obramowanie na BRAK i kolor, coś w odcieniach szarości. Na stole montażowym narysuj prostokąt. Użyj narzędzia Tekst i stwórz swój tekst, który chcesz umieścić na przycisku, możesz również ustalić kolor swojego tekstu. Jeśli wszystko już masz, to zaznacz cały prostokąt z napisem i za pomocą skrótu klawiaturowego CTRL+C - CTRL+V (MAC: CMD+C - CMD+V) powiel swój przycisk. Zmień kolory w powielonym przycisku i ustaw jeden prostokąt pod drugim.


OK, idziemy dalej. Teraz możesz użyć linii pomocniczych dzięki, którym ustawisz odpowiednio swoje przyciski, a więc przejdźmy do górnego menu, z którego należy wybrać VIEW - RULERS i pojawią nam się miarki w lewej i górnej części okna naszego stołu montażowego. Możesz je wyciągnąć i odpowiednio dopasować do przycisku.


Jeśli wszystko zrobiłeś to teraz możesz zaznaczyć cały przycisk, górny oraz dolny i wybrać z klawiatury CTRL+B - użyj tego skrótu dwa razy (MAC: 2xCMD+B) w ten sposób nasza grafika przekształci się na pojedyncze piksele, zarówno prostokąt jak i tekst. 
Teraz należy przejść do linii czasu i w pierwszej linii, drugiej klatce należy wstawić klatkę kluczową, możesz kliknąć prawym przyciskiem myszy na daną klatkę i wybrać WSTAW KLATKĘ KLUCZOWĄ, jak widzisz, pojawiła się nowa klatka z zawartością taką samą jak i w pierwszej klatce, czyli z naszym przyciskiem. Idziemy dalej. Teraz żeby nasza animacja trwała przez chwilę należy w klatce 6,7 czy też której chcesz, wstawić klatkę kluczową, czyli tak samo jak w klatce drugiej. Następnie kliknij prawym przyciskiem myszki na drugą klatkę lecz tym razem wybierz UTWÓRZ KLASYCZNĄ ANIMACJĘ. Teraz przejdź do klatki 6,7 czy też do tej w której kończy się Twoja animacja i zaznacz ją. Następnym krokiem będzie przesunięcie naszych prostokątów w górę. Czyli zaznacz klatkę ostatnią i zaznacz przyciski. Teraz za pomocą strzałek z klawiatury możesz przesunąć w górę nasz przycisk.


No i już coś widać. Teraz należy odwrócić naszą animację. Najszybciej będzie jeśli zaznaczysz całą animację od klatki drugiej na linii czasu do ostatniej klatki i ja skopiujesz. Czyli zaznacz tą animację i za pomocą prawego przycisku myszy wybierz KOPIUJ KLATKI, następnie przejdź do klatki, która znajduje się już za animacją i wklej tą animację, którą skopiowałeś. Teraz musimy odwrócić nasze klatki, czyli zaznaczamy to co właśnie wkleiliśmy i klikamy prawym przyciskiem myszki i wybieramy ODWRÓĆ KLATKI, teraz jest już wszystko w porządku. 
Teraz musimy utworzyć nową warstwę na linii czasu, którą nazwiemy MASKA. W pierwszej klatce utwórz prostokąt taki sam jak nasz przycisk. To niebieskie na obrazku to będzie nasza MASKA


Teraz przechodzimy do linii czasu i klikamy prawym przyciskiem myszki na warstwę MASKA i wybieramy polecenie MASKA. Jak widzisz ta opcja wyświetla tylko ten obszar, który ukryliśmy pod naszym niebieskim prostokątem.
Następnie tworzymy nową warstwę, która musi znaleźć się pod wszystkimi warstwami. Utwórz tam taki sam prostokąt jak w masce lecz jego krycie ustaw na 0%. To będzie prostokąt dzięki, któremu nasz przycisk będzie aktyny po najechaniu myszką. 
Idziemy dalej i tworzymy następną warstwę, która musi być na samej górze, nad wszystkimi warstwami. Nazwij ją AS. W pierwszej klatce utwórz akcję stop(); kliknij na warstwę i naciśnij F9 z klawiatury, w oknie wpisz funkcje stop(); następnie powiel tą funkcje w klatce 6 czy 7, tam gdzie nasz przycisk wjeżdża na górę oraz w ostatniej klatce naszej animacji.


Jeśli już to wszystko masz, to w klatce drugiej utwórz PUSTĄ KLATKĘ KLUCZOWĄ i w klatce 7 tam gdzie jest druga funkcja stop, to zaraz za nią utwórz drugą taką klatkę. Jeśli tak zrobiłeś, to zaznacz drugą klatkę i przejdź do panelu po prawej stronie i nadaj nazwę tej klatce over


a w klatce 7 wpisz out. Teraz możemy przystąpić do kolejnego kroku. A mianowicie, przechodzimy do klatki pierwszej tam gdzie jest funkcja stop(); i za pomocą F9 otwiera nam się okno z akcjami gdzie wpisujemy taki skrypt dzięki, któremu nasz przycisk będzie poprawnie dział:


skrypt:
___________________________________________________


stop();


this.addEventListener(MouseEvent.MOUSE_OVER, twojaFunkcja);
function twojaFunkcja (e:MouseEvent):void {
this.gotoAndPlay("over");
}




this.addEventListener(MouseEvent.MOUSE_OUT, twojaFunkcja2);
function twojaFunkcja2 (e:MouseEvent):void {
this.gotoAndPlay("out");
}




___________________________________________________


i teraz należy przejść do SCENY 1 i z Biblioteki przeciągnąć nasz plik na stół montażowy. Jeśli przetestujesz film to wszystko powinno działać lecz możesz nie zobaczyć rączki gdy najedziesz myszką na przycisk, aby to zmienić należy wejść w przycisk klikając go dwa razy i jeszcze raz wejść do klatki pierwszej na linii AS i dopisać do skryptu taką funkcję:


___________________________________________________


stop();

this.buttonMode = true;
this.useHandCursor = true;

this.addEventListener(MouseEvent.MOUSE_OVER, twojaFunkcja);
function twojaFunkcja (e:MouseEvent):void {
this.gotoAndPlay("over");
}

this.addEventListener(MouseEvent.MOUSE_OUT, twojaFunkcja2);
function twojaFunkcja2 (e:MouseEvent):void {
this.gotoAndPlay("out");
}
___________________________________________________


Teraz możesz przetestować swój film i wszystko powinno działać tak jak należy ! Zapraszam do obejrzenia wideo oraz subskrypcji kanału na Youtube ! 


















3 komentarze:

  1. A jak dodać do tego buttona link jakiej strony zewnętrznej?

    OdpowiedzUsuń
  2. Bardzo mi pomoglo !!! Ale mam pytanie ..... czy za kazdym razem chcac stworzyc przycisk bede musial robic to od poczatku ? czy moge jakos zmienic teks na przycisku?

    OdpowiedzUsuń
  3. Dokładnie, jak dodać jeszcze do tego komende z hiperłączem? kiedy wklejam ją na początku wiersza poleceń przyciski szaleją i latają góra dół, tak samo kiedy dam tą komendę na końcu proszę o odpowiedź

    OdpowiedzUsuń