Jak zrobić przycisk we Flash CS5?

Cześć, w tym artykule chciałem Ci pokazać jak zrobić prosty przycisk we Flash CS5 - ActionScript 3.0 ! Więc zaczynamy od utworzenia nowego dokumentu w AS 3.0. 




Jeśli otworzysz program pojawi się okno powitalne, z którego możesz wybrać interesujący Cię dokument. W tym oknie wybieramy opcję UTWÓRZ NOWY - ActionScript 3.0
Jak widzisz pojawił nam się nowy dokument z domyślnymi ustawieniami stołu montażowego. Teraz należy przejść do górnego menu, z którego należy wybrać WSTAW - NOWY SYMBOL lub wybrać z klawiatury CTRL+F8
No i pojawia nam się kolejne okienko, w którym należy wybrać odpowiednią opcję dla nas. Oczywiście w nazwie wpiszemy sobie "btn1" a z typu wybierzemy PRZYCISK.
Jeśli klikniesz OK to zobaczysz, że nasz stół montażowy trochę się zmieni i linia czasu również. Przechodzimy dalej i wybieramy narzędzie prostokąt (R), które znajduje się po lewej stronie naszego ekranu. Wybieramy również kolor, który jest w dolnej części panelu z narzędziami. Pierwszy prostokąt od góry to obramowanie, a kolejny to wypełnienie naszego prostokąta lub innej figury. Z tego drugiego kwadratu wybierz kolor lub gradient.
Jeśli nie chcesz domyślnych kolorów tego gradientu możesz to zmienić w oknie KOLOR, które możesz włączyć za pomocą OKNO - KOLOR lub ALT+SHIFT+F9. W tym oknie ustaw sobie wg uznania kolory i przechodzimy do dalszej części artykułu :)
Jeśli już zdecydowałeś się na kolory swojego przyszłego przycisku to teraz możemy zrobić kolejny krok i stworzyć nasz przycisk. Masz już wszystko wybrane i zaznaczone więc wystarczy że na stole montażowym zrobisz sobie kwadrat lub prostokąt.
Jak widzisz powstałem na dziwny pasek na naszym stole. Teraz jeśli chcesz zmienić rozmiary gradientu lub go obrócić przyda nam się narzędzie o nazwie NARZĘDZIE PRZEKSZTAŁCENIE GRADIENTU lub wybrać z klawiatury (F)
Żeby przekształcić nasz gradient wystarczy, że najedziesz na nasz przyszły przycisk i po prostu na nim klikniesz lewym klawiszem myszki. Widzisz, że pojawiło się tam białe kółko i kwadrat ze strzałką w środku. Żeby obrócić gradient, wystarczy że najedziesz kursorem myszy na to białe kółko i zobaczysz kursor, który mówi o tym, że możesz przekręcić gradient. Jeśli już ustawisz sobie gradient, to kwadratem ze strzałką w środku możesz zmniejszyć lub zwiększyć gradient. Dopasuj wszystko wg uznania i zajmiemy się kolejnym etapem.
Jeśli masz podobny efekt w swojej pracy jak na powyższym obrazku, to jesteśmy już na dobrej drodze. Wypadałoby aby nasz przycisk miał jakąś nazwę. W tym celu wybierzemy narzędzie TEKST (T) i napisz to co ma być na przycisku.
Jak widzisz, przycisk już jest prawie gotowy, jeszcze trzeba stworzyć jakąś funkcjonalność. W tym celu przechodzimy trochę wyżej, a konkretnie do naszej linii czasu. Jak zdążyłeś już zauważyć różni się ona od linii czasu, która jest na głównej scenie. Teraz musimy wstawić klatkę kluczową w kolejnej klatce. Możesz to zrobić za pomocą myszki, klikając prawym przyciskiem na pustą klatkę i wybrać WSTAW KLATKĘ KLUCZOWĄ lub użyć przycisku na klawiaturze F6.
Pojawiła nam się kolejna klatka, w której został umieszczony nasz przycisk. Jeśli nie wiesz co to za klatka to już to tłumaczę. Więc pierwsza klatka to nic innego jak stan naszego przycisku, w której nic się nie dzieje :) Jeśli chodzi o drugą to klatka, w której wykonana jest pewna czynność, a mianowicie, jeśli użytkownik najedzie myszką na nasz przycisk to powinno coś się stać. Więc jeśli chcemy zmienić nasz przycisk, tak aby po najechaniu myszką coś się zadziało należy go jakoś zmodyfikować. Ja zrobię tak, że odwrócę nasz gradient w drugą stronę. W tym celu użyje narzędzie do PRZEKSZTAŁCENIA GRADIENTU. Jeśli już to zrobiłeś przejdźmy do klatki trzeciej. Zaznacz trzecią klatkę i naciśnij klawisz F6. Ta klatka odpowiada za naciśnięcie lewego klawisza myszy na naszym przycisku. Ja zmienię kolor napisu. Więc jeśli użytkownik kliknie na przycisk, zobaczy że napis na przycisku zmieni się. Wystarczy wybrać narzędzie ZAZNACZENIE (V) i kliknąć dwa razy na napisie. Zobaczysz, że napis podświetlił się co oznacza, że można go edytować. Po prawej stronie znajduje się panel o nazwie ZNAK gdzie możesz modyfikować napis. Mój przycisk w klatce trzeciej wygląda następująco.
Została nam ostatnia klatka, w której należy wybrać F6 z klawiatury i nic więcej nie musimy z nią robić ponieważ ta klatka odpowiada za "aktywację" naszego przycisku. Chodzi o to, że prostokąt z gradientem będzie całym polem gdzie będzie pojawiała się "rączka" gdy użytkownik najedzie na nasz przycisk. Jeśli już wszystko masz tak jak to powinno wyglądać to jesteśmy na dobrej drodze ku końcowi :) Teraz żeby zobaczyć jak nasz przycisk działa musimy przejść na scenę pierwszą.
Jeśli już się znajdziesz na scenie pierwszej/głównej to musimy nasz przycisk przeciągnąć na stół montażowy z biblioteki. Jeśli nie widzisz biblioteki to musisz przejść do OKNO - BIBLIOTEKA lub CTRL+L i przeciągnąć przycisk.
Jak już masz przycisk na stole montażowym to możesz zobaczyć jak on działa. Wybierz z klawiatury CTRL+ENTER i sprawdź jak zachowuje się Twój przycisk. Ja go przetestowałem i zachowuje się tak jak powinno być, mam nadzieję, że u Ciebie też jest wszystko w porządku.
Rozumiem, że u Ciebie również wszystko działa i chciałbyś aby przycisk gdzieś Cię prowadził :) Jeśli tak to możesz przepisać skrypt, który jest w filmie umieszczonym na dole artykułu lub użyć opcji WYCINKI KODU co będzie trochę szybsze :) Więc przejdź do OKNO - WYCINKI KODU, pojawi się okno, z którego musisz wybrać opcję OPERACJE i KLIKNIJ ABY PRZEJŚĆ DO STRONY SIECI WEB
Jeśli masz zaznaczony przycisk, to możesz kliknąć dwa razy na opcję, którą chcesz nadać przyciskowi. Ja wybieram pierwszą opcję pierwszą czyli, żeby kierował mnie na stronę www. Jeśli klikniesz dwa razy, zapewne pojawi się komunikat, że Twój przycisk nie posiada nazwy instancji i FLASH utworzy go sam. Kliknij OK. Jeśli kliknąłeś to zobaczysz okno z operacjami i z kawałkiem skryptu, który będzie przenosił nas na stronę internetową. Jeśli nie chcesz aby przycisk przenosił Cię na stronę firmy Adobe należy wpisać adres jaki chcesz.
Teraz możesz przetestować swój klip i zobaczysz, że wszystko działa tak jak powinno ! Jeśli nie to napisz do mnie !


Zapraszam do obejrzenia wideo !




3 komentarze:

  1. ...a jak by to wyglądało w AC2?

    OdpowiedzUsuń
  2. nie znam się wcale na tym a chce na swojej stronie która robię w html i css wstawić menu we flashu.
    zrobiłem całość tak jest przedstawione ale nie wiem jak i gdzie wpisać odnośnik do np index.html
    jak gdzieś próbuję dać geturl to przyciski latają w gorę w dół...
    Możesz mi napisać gdzie wpisać albo jak to zrobić ?

    OdpowiedzUsuń