Menu
- Aktualności
- Mój startup Nowy odcinek
- Blogi ekspertów
- Projektowanie WWW
- Planowanie
- Hosting i domeny
- Organizacja i nawigacja
- Webdesign i grafika
- Warsztat - programy
- Tutoriale Photoshop
- Programowanie i tworzenie
- XHTML, HTML i CSS
- JavaScript, DOM i AJAX
- jQuery
- PHP i SQL
- Flash i ActionScript
- Dostępność i WAI
- Promowanie stron
- Pozycjonowanie
- Reklama i marketing
- Monitoring i statystyki
- Publicystyka
- Artykuły ogólne
- Społeczności
- Praca i zarabianie
- Wywiady
- Standardy sieciowe
- Zasoby
- Kursy
- Recenzje książek
- Linki
Dla webmastera
Kursy
Pierwsza animacja
Pierwsza animacja
Czas zabrać się do pracy. Na początek stworzymy najprostszą animacje ruchu obiektu. Tworzymy nowy plik z menu File wybieramy New. Teraz dostosujemy nasz dokument z menu Modify wybieramy Document... .
Tu ustalamy rozmiary (Dimensions) naszego pola pracy na 500 pikseli szerokości (width) i 100 px wysokości (height). Kolor tła (Background Color) możecie wybrać dowolny ja wybrałem granatowy. Ustalamy także liczbę klatek na sekundę (Frame Rate). Ja dałem 20.
Klikamy OK. Teraz bierzemy narzędzie do rysowania koła ustawiamy wypełnienie na czerwone radialne kółko, obramowanie koła ustawiamy na brak i rysujemy kółko na naszym polu pracy z jego lewej strony. Wypełnienie koła możemy dostosować przy pomocy panelu o nazwie Color Mixer (Shift+F9). Mamy pierwszy obiekt.
Zauważcie, że w warstwie pierwszej Layer 1 i jej pierwszej klatce pojawiła się klatka kluczowa która oznacza, że jest w niej nasze kółko. Teraz klikamy prawym klawiszem właśnie na tą klatkę. Z rozwiniętego menu wybieramy Create Motion Tween. Klatka zmieniła kolor na niebieski. Zaznaczcie teraz kursorem klatkę nr 40 i wciśnijcie klawisz F6. Nasza animacja będzie trwała od klatki nr 1 do 40 co widać w warstwie Layer 1.
Będąc w klatce 40 przesuńcie przy pomocy narzędzia czarnej strzałki nasze kółko na drugi koniec pola pracy. Animacja prawie gotowa naciśnijcie Enter animacja powinna ruszyć. Kropka przesuwa się od lewej do prawej. Ja dodałem jeszcze jedną warstwę (w polu warstw mała ikonka oznaczająca warstwę ze znakiem plus ) i ustawiłem ją niżej w stosunku do Layer 1. Tu narysowałem owal który umieściłem pod nasza pierwszą kropką.
W mikserze kolorów ustawiłem wypełnienie na kolor szary z widocznością Alpha na 50%. Sprawi to wrażenie cienia. Naszą pierwszą kropkę w klatce nr 1 obniżyłem do krawędzi pola pracy, a w klatce nr 40 ustawiłem pod górna krawędzią. Kropka będzie szła po przekątnej. Teraz jej cień w warstwie Layer 2 tak samo animowałem jak naszą kropkę tylko z tym wyjątkiem, że jest cień jest duży gdy rozpoczyna się animacja a mały gdy się kończy.
By zmienić wielkość cienia w ostatniej klatce klikamy na niego prawym klawiszem i wybieramy z listy opcję Scale. Pojawiają się punkty dzięki którym możemy przeskalować obiekt. Można jednak zrobić to dokładniej zaznaczamy nasz cień i z menu głównego wybieramy opcje Modify/Transform/Scale and Rotate... .
Tu ustalamy scale na 30% i klikamy OK. Teraz wszystko prawie gotowe. Musimy ustalić jeszcze publikacje naszej animki. Wchodzimy w menu File/Publish Settings... i tam w zakładce Flash ustalamy. Protect from import ustalamy hasło zabezpieczenia.
Odznaczamy pozostałe pola jeżeli są zaznaczone. Przechodzimy do zakładki HTML gdzie możemy ustalić Window Mode na Transparent Windowless. Klikamy kolejno na przycisk Publish i OK. Teraz możemy obejrzeć efekt naszej pracy. Otwieramy wygenerowany plik HTML. Animka powinna wyglądać podobnie do tej.
Moja kropka jest w stylu 3d i wygląda jak kula. O tym jak wykonać taką kulkę dowiecie się w rozdziale o innych programach współpracujących z flashem.

