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

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