Kwik Page Turn Animation

• Może 3, 2024

W ciągu ostatnich kilku samouczków pracowaliśmy nad szablonem strony dla naszej aplikacji Kwik Book. Do szablonu mamy jeszcze jedną rzecz, którą jest animacja liniowa, która emuluje przewrót strony.

Chcemy, aby ta animacja była odtwarzana natychmiast po załadowaniu strony. Mamy już grafikę animacji na warstwie kwkpgTurn na stronie 1. Również ta warstwa została ustawiona jako Zasób współdzielony, dzięki czemu będzie działać w aplikacji książkowej.

Animacja liniowa

W tym momencie będziemy tworzyć bardzo prostą animację i będziemy korzystać z większości ustawień domyślnych. Ale będziemy się dużo uczyć o animacjach liniowych, ponieważ dodamy wiele z nich do książki.

Animacja liniowa przenosi obiekt z jednego punktu na ekranie do drugiego. Dlatego głównymi ustawieniami animacji liniowej są punkty początkowy i końcowy. Kwik automatycznie ustawi punkt początkowy animacji jako bieżącą pozycję obiektu na warstwie. Będziemy musieli ustawić punkt końcowy animacji.

Czas trwania animacji ustawimy również w sekundach, ponieważ określi to szybkość poruszania się obiektu. Na koniec ustawimy animację tak, aby uruchamiała się po załadowaniu strony.

Animacja przewracania stron

1. W sekcji Strona / Komponenty panelu Kwik wybierz stronę 1. Powinieneś zobaczyć „@ page1” u góry sekcji.
   
   
2. Kliknij na Przełącz na ikonę Widok komponentów, aby zobaczyć listę komponentów już dodanych do tej strony.
   
   
3. Wybierz warstwę kwkpgTurn w panelu Warstwy.
   
   
4. Na pasku kategorii kliknij przycisk Ikona animacji.
   
   
5. Kliknij na Ikona animacji liniowej (pierwsza ikona w pierwszym rzędzie narzędzi).
   
   
6. W oknie dialogowym Animacja liniowa zmień nazwę animacji na „pgTurn”.
   
   
7. Warstwa kwkpgTurn: Mówi Kwikowi, aby użył grafiki na warstwie kwkpgTurn do animacji. Pozostaw to zaznaczone
   
   

W sekcji Właściwości Kwik pokazuje nam pozycje X i Y obiektu na warstwie kwkpgTurn oraz szerokość i wysokość obiektu graficznego. Ponieważ chcemy przenieść całą grafikę poza ekran, musimy przesunąć ją co najmniej o tę samą liczbę pikseli, co szerokość grafiki (732 px). Przesuńmy go o 732 piksele w lewo. Ponieważ bieżąca pozycja X wynosi 0. Spowoduje to, że liczba końcowa będzie ujemna. Nie chcemy przesuwać obiektu w pionie, dlatego utrzymamy pozycję Y ustawioną na 0. Spowoduje to, że obiekt będzie poruszał się tylko w poziomie.

8. Pozycja końcowa:
   x -732
   y 0
   
   
9. Losowa pozycja końcowa: nie będziemy korzystać z tej funkcji, więc pozostaw jej ustawienie domyślne.
   
   
10. Czas trwania: Chcemy, aby grafika poruszała się bardzo szybko, aby dać efekt odwrócenia. Ustawmy to na 1 sekundę i 0,25 sekundy opóźnienia.
    
    
11. Zaznacz pole Wstrzymane po zakończeniu.
    
    
12. Pętla: Ustaw tę opcję na l czas.
    
    
13. Uruchamia: Ustaw tę opcję, gdy strona się uruchomi.
    
    
14. Kliknij Utwórz.
    
    
15. Powinieneś zobaczyć, że animacja pgTurn została dodana do listy komponentów tej strony.
    
    

Teraz jest dobry czas na przetestowanie projektu. Kliknij przycisk Publikuj w panelu Kwik. Przetestuj przyciski nawigacyjne i animację przewracania strony.

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.
Produkt Kwik, logo Kwik i Kwiksher są własnością Kwiksher.com - Copyright 2011. Zrzuty ekranu wykorzystane za zgodą.

Te samouczki dotyczą starszej wersji Kwik 2 i mogą nie być bardzo pomocne podczas korzystania z Kwik 3 i nowszych wersji. Jeśli masz problemy, skorzystaj z forum Kwik.

Instrukcje Wideo: SKETCHBOOK TOUR 2019! (Może 2024).