Wykończenie blinkie z animacjami Flash Motion

• Kwiecień 25, 2024

Kiedy ostatnio pracowaliśmy nad animacją Flash blinkie, właśnie zakończyliśmy efekty tekstowe. Ostatnim efektem tekstowym występującym w animacji było pojawienie się i zniknięcie nazwy strony internetowej „J3 Designs”. Znika ze sceny po lewej z efektem przejścia na osi czasu (przejście 3 na osi czasu). Był tego powód i wkrótce dowiesz się, jaki był tego powód.

Pamiętaj, że jako część szczegółów projektu mamy te dwie biedronki. Czas na ich uruchomienie. Kiedy budowaliśmy warstwy do naszego projektu blinkie, dodaliśmy złotą biedronkę do warstwy Bug 1. Teraz pierwszą rzeczą, którą zrobimy, jest dodanie drugiej biedronki do nowej warstwy, którą nazwiemy Bug 2. Chcemy, aby ta czerwona biedronka pojawiła się spod okienka obrazu. Dlatego będziemy musieli umieścić nową warstwę pod warstwą Szczegóły statyczne.

Otwórz blinkie2.fla we Flash CS3 i zabierzmy się do pracy. Chcemy, aby biedronka zaczęła się ruszać spod kamei, gdy nazwa strony zaczyna znikać. Chcemy, żeby wyglądało na to, że tekst znika z powodu biedronki. Dodamy więc tę nową biedronkę do ramki 110, kiedy tekst zacznie znikać.

1. Kliknij Plik - Importuj - Importuj do biblioteki, aby otworzyć okno dialogowe Importuj i dodaj czerwoną biedronkę do naszej biblioteki.
   
   
2. Dodaj nową warstwę pod warstwę Szczegóły statyczne i nazwij ją „Bug 2”. Dodaj klatkę kluczową (Wstaw - Oś czasu - Klatka kluczowa) do klatki 110. Przeciągnij czerwoną biedronkę z biblioteki na scenę i na razie poza zasięgiem wzroku.
   
   Chcemy, aby biedronka przesunęła się w lewo, dopóki nie zniknie ze sceny, gdy tekst zniknie. Tak więc chcemy, aby biedronka znalazła się na lewo i na lewo od sceny, zanim dotrzemy do klatki 160.
   
   
3. Kliknij klatkę 160 na warstwie Bug 2, dodaj klatkę kluczową i przeciągnij czerwoną biedronkę w lewo i zejdź ze sceny. Kliknij prawym przyciskiem myszy między klatkami 110 a 160 i wybierz z menu podręcznego opcję Utwórz animację ruchu.
   
   Przetestuj film i powinieneś zobaczyć, jak tekst znika, gdy przesuwa się nad nim biedronka. Gdy czerwona biedronka zniknie ze sceny, przesuniemy złotą biedronkę (warstwa Bug 1) w górę i w prawo, aż zniknie ze sceny.
   
   
4. Kliknij klatkę 160 na warstwie Bug 1 i dodaj klatkę kluczową jako punkt początkowy animacji złotej biedronki. Użyjmy 20 klatek, aby przenieść złotą biedronkę ze sceny. Kliknij Frame 180 i dodaj klatkę kluczową. Przesuń złotą biedronkę w górę i ze sceny.
   
   
5. Kliknij prawym przyciskiem myszy między klatkami 160 a 180 i utwórz animację ruchu. Kliknij klatkę 180 i dodaj ramkę do warstw szczegółów statycznych i tła, aby ponownie wyświetlić zawartość tych warstw.
   
   Na koniec chcemy przenieść złotą biedronkę z powrotem do pierwotnej pozycji w lewym dolnym rogu sceny. Ale nie chcemy, aby błąd zszedł ze szczytu sceny. Chcemy, aby przesunął się w górę spod sceny. Musimy więc najpierw umieścić złotą biedronkę po lewej i pod sceną. Następnie wystarczy przesunąć go w górę z powrotem do pierwotnej pozycji, aby animacja mogła się powtarzać. Użyjemy 10 ramek, aby przenieść biedronkę z powrotem na miejsce.
   
   
6. Wróć do Ramki 1 na warstwie Bug 1 i wybierz złotą biedronkę. Kliknij Edytuj - Kopiuj, aby zapisać pierwotną pozycję złotej biedronki.
   
   
7. Nadal na warstwie Bug 1 dodaj klatkę kluczową do ramki 190. Kliknij Edytuj - Wyczyść, aby usunąć złotą biedronkę, która już tam jest. Następnie kliknij Edytuj - Wklej na miejscu, aby przywrócić złotą biedronkę do pierwotnej pozycji.
   
   
8. Nadal na warstwie Bug 1, kliknij Frame 181 i dodaj klatkę kluczową. Następnie usuń złotą biedronkę, która już tam jest. Umieść złotą biedronkę z powrotem w pierwotnej pozycji na tej ramce (Wklej na miejscu). Następnie przeciągnij tę biedronkę pod scenę. Dodaj animację ruchu między klatkami 181 a 190, która przeniesie tę biedronkę na scenę.
   
   
9. Kliknij Ramkę 190 i dodaj ramkę do warstw Szczegóły statyczne i Warstwy tła, aby ponownie wyświetlić zawartość tych warstw.
   
   

Przetestuj i zapisz blinkie jako blinkie3.fla. Następnie opublikuj swoje blinkie jako plik .swf i ciesz się swoim nowym blinkie.

Wzory J3

Prawa autorskie 2018 Adobe Systems Incorporated. Wszelkie prawa zastrzeżone. Zrzuty ekranowe produktów Adobe zostały przedrukowane za zgodą Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst i Flash Paper jest / są [a] zarejestrowanym znakiem towarowym lub znakami towarowymi Adobe Systems Incorporated w Stanach Zjednoczonych i / lub innych krajach.