Co tu dużo mówić czy opisywać, prosty samouczek, a więc i prosty efekt. Zmienimy dzisiaj wygląd kursora naszej myszy używając do tego ActionScriptu 3.0. Ale aby lekko urozmaicić ten tutorial postanowiłem go w pewien sposób połączyć z poprzednim, gdzie jak mam nadzieję jeszcze pamiętasz wprawiliśmy oczy Dug’a w ruch. Tym razem nasz kursor zamieni się w uciążliwą muchę, dzięki czemu całość nabierze sensu: oczy psa podążające za latająca mu przed nosem muchą. Prawda, że sprytne?

Krok 1
Otwórz projekt z poprzedniego wpisu lub stwórz nowy dokument flash z obsługą ActionScript 3.0, a następnie przejdź do okna Document Properties (Ctrl+J) i wybierz stosowne wymiary (Dimensions), tło (Background color) oraz ilość klatek na sekundę (Frame rate) – tu wpisz wartość 26 fps.

Krok 2
Utwórz nową warstwę i nazwij ją kursor, po czym korzystając z narzędzia Brush Tool (B) narysuj małą muszkę:

Jeśli rysowanie sprawia Ci kłopoty możesz zaimportować do sceny gotową muchę klikając: File >> Import >> Import to Stage (Ctrl+R). Przekonwertuj ją w obiekt filmowy (Modify >> Convert to Symbol…) nadając jej nazwę cursor_mc:

Po przekonwertowaniu muchy w symbol (póki jest on jeszcze zaznaczony) przejdź do panelu Properties i w polu Instance Name wpisz cursor.

Krok 3
Stwórz nową warstwę i nazwij ją actionscript (a jeśli edytujesz nasz poprzedni projekt po prostu użyj istniejącej już warstwy o tej nazwie). Zaznacz jej pierwszą klatkę i wklej następujący kod ActionScript 3.0 klikając Window >> Actions (F9):

Mouse.hide();
Mouse.hide();
cursor.startDrag(true);

Gotowe, przetestuj swoja animację klikając Ctr+Enter:

źródło: flashfridge.com

Powiązane wpisy:

• Obiekty filmowe podążające za kursorem myszy w Adobe Flash CS4 Professional (trygonometria w ActionScript 3.0)
• Płynna animacja rozmycia tekstu w technologii Flash
• Stwórz swój własny wektorowy motyw morskich kafelek
• Modelujemy miskę dla naszego czworonoga
• Kolorowe buttony i Photoshop
• Rekonstruujemy oryginalne logo Google Inc.

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

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! :)

Korzystając z tego szczegółowego samouczka nauczysz się w jaki sposób za pomocą programu Adobe Flash CS3 Professional wykonać prostą prezentację tekstu (typowy banner, button lub cokolwiek innego) z animacją jego rozmycia. Tutorial ten nie wymaga znajomości ActionScript’u, dlatego nie będziemy z niego korzystać. Podczas tej lekcji nauczysz się w jaki sposób skonwertować jakikolwiek tekst w symbol Movie Clip, zaanimować go (wykorzystując Motion Tween) , a następnie nałożyć odpowiednie filtry dodające uroku naszej pracy. A więc do dzieła!

Krok 1
Stwórz nowy dokument Flash po czym przejdź do okna jego proporcji (Document Properties) wciskając na klawiaturze kombinację klawiszy Ctrl+J. W polu Dimensions wpisz wymiary dokumentu, nad którym będziemy pracować. Wybierz również tło (Background color) dla naszej pracy, w moim przypadku jest to ciemny odcień koloru niebieskiego: #004477. Na koniec ustal Frame rate na 32 fps, dzięki czemu nasza animacja stanie się o wiele płynniejsza.

Krok 2
Zmień domyślną nazwę warstwy Layer 1 (klikając na niej dwukrotnie i zatwierdzając enterem) na: txt1.

Krok 3
Wybierz z menu po lewej narzędzie Text Tool (T) po czym włącz swoją ulubiona czcionkę, ustal jej rozmiar oraz pozostałe opcje i wpisz w obrębie sceny jakiś tekst. Jeśli Ci na tym zależy możesz go także wyrównać do środka sceny używając palety Align (pamiętaj by włączyć opcję Align/Distribute to stage, dzięki czemu tekst będzie wyrównywany względem brzegów dokumentu).

Krok 4
Póki Twój tekst jest ciągle zaznaczony wciśnij na klawiaturze klawisz F8 (Convert to Symbol), aby skonwertować go w symbol Movie Clip:

Krok 5
Przy pomocy klawisza Ctrl zaznacz kolejno na listwie czasu naszego dokumentu klatki o numerach 15, 80 i 95, a następnie wciśnij na klawiaturze klawisz F6, dzięki czemu w miejscach tych zostaną utworzone tzw. klatki kluczowe. Możesz to również zrobić w inny sposób korzystając z menu programu: Insert >> Timeline >> Keyframe – efekt jest ten sam.

Krok 6
Przejdź do klatki numer 95 i zaznacz wcześniej utworzony tekst za pomocą narzędzia Selection Tool (V), gdy to zrobisz otwórz panel proporcji (Properties Panel) lub użyj skrótu klawiaturowego Ctrl+F3. Wybierz zakładkę Filters i kliknij na ikonę niebieskiego plusa (Add filter) po czym wybierz pozycje Blur stosując poniższe ustawienia:

Zaraz po tym przejdź z powrotem do zakładki Properties i po prawej stronie w menu Color wpisz wartość Alpha równą 0%.

Krok 7
Zaznacz klatkę numer 80 po czym przejdź do Properties Panel (Ctrl+F3) i dla menu Tween wybierz wartość Motion, a dla Ease -100 (tak jak na poniższym obrazku):

Krok 8
Wróć do pierwszej klatki dokumentu i powtórz kroki numer 6, 7 i 8. Jedyną różnicą jaka odnotujemy będzie ustalenie wartości Ease na 100:

Krok 9
Stwórz nową warstwę klikając w ikonę Inser Layer, a następnie nazwij ją txt2 i umieść ponad pierwszą warstwą dokumentu.

Krok 10
Zaznacz klatki numer 90, 105 i 185 warstwy txt2 i wciśnij klawisz F6 na swojej klawiaturze.

Krok 11
Póki jesteś w klatce 185 powtórz krok 6.

Krok 12
Wróć do klatki 170 i powtórz krok 7.

Krok 13
Przejdź do klatki 90 i powtórz krok 8.

Przetestuj swój dokument wciskając Ctrl+Enter, dzięki czemu zostanie wywołane okno Test Movie. Oto efekt naszej pracy:

Jeśli jesteś leniwy możesz pobrać gotowy plik *.fla i przerobić go według swoich potrzeb, oto i on: pobierz plik. Oryginalną wersję tego tutoriala w języku angielskim znajdziesz na flashvault.net. Pozdrawiam!

Powiązane wpisy:

• Zmiana wyglądu kursora myszy we flashu (ActionScript 3.0)
• Stwórz swój własny wektorowy motyw morskich kafelek
• Modelujemy miskę dla naszego czworonoga
• Kolorowe buttony i Photoshop
• Obiekty filmowe podążające za kursorem myszy w Adobe Flash CS4 Professional (trygonometria w ActionScript 3.0)
• Rekonstruujemy oryginalne logo Google Inc.

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