Obiekt.eurolol.pl | O grafice w formie video…

W dzisiejszym tutorialu pobawimy się nieco matematyką, a dokładnie mówiąc użyjemy jednego z jej działów: trygonometrii. Przy pomocy programu Adobe Flash CS4 Professional i ActionScript’u 3.0 utworzymy obiekt filmowy (w naszym przpadku będą to oczy psa) podążające za kursorem naszej myszy znajdującej się nad plikiem flash. Do tego celu wykorzystamy jedną z postaci z ostatniego filmu Studia Animacji Pixar o tytule “Up“. Postacią tą będzie Dug, czyli przemiły gadający pies (widoczny powyżej), który na potrzeby tutoriala pożyczy nam swoje oczy! ;)

Nie przedłużając już więcej zabierzmy się do pracy i odpalmy właściwy ku temu program…

Krok 1 – Tworzymy nowy dokument
Stwórz nowy dokument flash z obsługą ActionScript 3.0, a następnie zapisz go tymczasowo gdzieś na swoim dysku pod nazwą EyesFollow.fla.

Krok 2 – Importujemy niezbędne materiały
W tym celu użyj tego samego obrazu co ja lub wybierz własny. W drugim przypadku pamiętaj aby wykonać “dziury” w miejscu oczu. Gdy plik będzie już odpowiednio przygotowany zaimportuj go wprost na obszar sceny klikając: File >> Import >> Import to Stage (Ctrl+R). Celem tego tutoriala jest sprawienie by oczy psa podążały za kursorem naszej myszy, choć równie dobrze nabyte umiejętności możesz wykorzystać w zupełnie inny sposób.

Krok 3 – Dodajemy oczy
Utwórz nową warstwę klikając na ikonę New Layer, a następnie nazwij ją oczy. Następnie wybierz narzędzie Oval Tool (O) i przytrzymując klawisz Shift (dla zachowania proporcji rysowanego obiektu) umieść koło w miejscu oka (pamiętaj by Fill Color ustawić na #ffffff, a Stroke Color najlepiej wyłączyć). Gdy białe koło będzie na swoim miejscu zaznacz je i wybierz z menu: Modify >> Convert to Symbol… tak jak poniżej:

Po zatwierdzeniu zmian kliknij dwukrotnie na utworzonym klipie filmowym aby przejść do jego edycji. Tym razem zaimportuj do sceny plik oko.png wybierając tak jak w poprzednim kroku: File >> Import >> Import to Stage (Ctrl+R), a następnie umieść je w prawym rogu białego koła. Powróć do głównej sceny klikając Scene 1:

Zaznacz teraz oko i wydaj polecenie kopiuj-wklej klikając: Ctrl+C i Ctrl+V. Uzyskaną kopię umieść na miejscu drugiego oka. Używając palety Properties nadaj lewemu oku nazwę eye1_mc, a prawemu eye2_mc w polu Instance Name.

Krok 4 – Trygonometria w ActionScript 3.0
Na tym kończy się część graficzna tego samouczka. Czas na ActionScript. Wyjaśnijmy więc co zamierzamy osiągnąć. Kiedy oczy podążają za kursorem myszy obracają się pod właściwym kątem, który zmienia się za każdym posunięciem gryzonia. Oto jak to wygląda na prostym schemacie:

Naszym celem jest ustalenie wartości tego kąta, aby móc obrócić oko w odpowiedni sposób. Nałóżmy na schemat wszystkie dane jakie możemy pozyskać i sprawdźmy czy coś z tego wyjdzie:

W tym miejscu do głosu dochodzi właśnie trygonometria i metoda atan2. Jak się okazuje w ręce mamy wszystkie potrzebne informacje do przeprowadzenia odpowiednich obliczeń i określenia prawidłowego kątu. Wykorzystajmy więc to: Stwórz nową warstwę i nazwij ją actionscript. Zaznacz jej pierwszą klatkę i wklej ostateczny kod ActionScript 3.0 klikając Window >> Actions (F9):

stage.addEventListener(MouseEvent.MOUSE_MOVE, followCursor);
function followCursor(event:MouseEvent):void {
var coordy1 : Number = mouseY - eye1_mc.y;
var coordx1 : Number = mouseX - eye1_mc.x;
var angleRadians1 : Number = Math.atan2(coordy1,coordx1);
var angleDegrees1 : Number = angleRadians1 * 180 / Math.PI;
eye1_mc.rotation = angleDegrees1;
var coordy2 : Number = mouseY - eye2_mc.y;
var coordx2 : Number = mouseX - eye2_mc.x;
var angleRadians2 : Number = Math.atan2(coordy2,coordx2);
var angleDegrees2 : Number = angleRadians2 * 180 / Math.PI;
eye2_mc.rotation = angleDegrees2;
}

Teraz już tylko przetestuj wszystko w akcji klikając Control >> Test Movie (Ctrl+Enter). Jeśli wszystko poszło dobrze powinieneś zobaczyć coś takiego:

Możesz również od razu pobrać cały projekt i pliki źródłowe tutaj.

źródło: riacodes.com

Powiązane wpisy:

• Zmiana wyglądu kursora myszy we flashu (ActionScript 3.0)
• Płynna animacja rozmycia tekstu w technologii Flash
• Modelujemy miskę dla naszego czworonoga
• Stwórz swój własny wektorowy motyw morskich kafelek
• Zielona ramka na Twoje myśli
• Kolorowe buttony i Photoshop

Być może zainteresują Cię również inne artykuły o podobnej tematyce? Linki do nich znajdziesz powyżej! :)