Aplikacje mobilne, oraz interaktywne komponenty www. Adobe Animate ebook

Krzysztof Wołk „Aplikacje mobilne, oraz interaktywne komponenty www. 

Adobe Animate”

Copyright © by Krzysztof Wołk, 2018

Copyright © by Wydawnictwo Psychoskok Sp. z o.o. 2018

Wszelkie prawa zastrzeżone. Żadna część niniejszej publikacji nie

 może być reprodukowana, powielana i udostępniana w 

jakiejkolwiek formie bez pisemnej zgody wydawcy.

Projekt okładki: Krzysztof Wołk

Korekta: Bogusław Jusiak

Skład epub, mobi i pdf: Kamil Skitek

Krzysztof Wołk - www.wolk.pl

ISBN: 978-83-8119-438-9

Wydawnictwo Psychoskok Sp. z o.o.

ul. Spółdzielców 3, pok. 325, 62-510 Konin

tel. (63) 242 02 02, kom. 695-943-706

http://www.psychoskok.pl/http://wydawnictwo.psychoskok.pl/ e-mail:[email protected]

Spis treści

WSTĘP

1. WPROWADZENIE DO ADOBE ANIMATE

2. TWORZENIE PRZYKŁADOWEGO PLIKU FLA

3. ZAZNACZANIE OBIEKTÓW

4. RYSOWANIE PROSTEGO KSZTAŁTU

4.1. SKŁADANIE KSZTAŁTÓW

4.2. RYSOWANIE NARZĘDZIEM OŁÓWEK

4.3. MALOWANIE NARZĘDZIEM PĘDZEL

4.4. WYPEŁNIENIE KOLOREM

5. PRACA Z TEKSTEM

5.1. ZADANIE

6. MODYFIKACJA KSZTAŁTÓW

6.1. KONWERSJA KSZTAŁTÓW

6.2. ZADANIE

7. PANEL TIMELINE

7.1. WARSTWY POMOCNICZE:

7.2. MASKI

7.3. ZADANIE

7.4. KLATKI KLUCZOWE

8. ANIMACJA POKLATKOWA (FRAME BY FRAME)

8.1. ZADANIE

9. SYMBOL

9.1. INSTANCJA

9.2. WYKORZYSTANIE SYMBOLI

9.3. TWORZENIE SYMBOLI

9.4. ZADANIE

9.5. TWORZENIE PRZYCISKÓW

9.6. ZADANIE

9.7. ZADANIE

9.8. BIBLIOTEKA I ZAGNIEŻDŻANIE SYMBOLI

10. ANIMACJA - TWEENING

11. TWORZENIE ANIMACJI KLASYCZNEJ OPARTEJ NA KLATKACH KLUCZOWYCH

11.1. ZADANIE

12. MOTION TWEEN

12.1. ZADANIE

12.2. ZADANIE

13.3. ZADANIE

13. WSTĘP DO ACTIONSCRIPT 3.0

13.1. ZADANIE

13.2. ZADANIE

14. ZDARZENIA

14.1. ZADANIE

14.2. ZADANIE

15. ZMIENNE

15.1. TYPY ZMIENNYCH

15.2. ZADANIE

15.3. TWORZENIE NAZW ZMIENNYCH

15.4. ZADANIE

15.5. ZADANIE

15.6. ZADANIE

16. POWTÓRKA

17. INSTRUKCJA WARUNKOWA IF

17.1. ZADANIE

18. OPERATOR WYŁUSKANIA

18.1. INSTANCE NAME

18.2. ZADANIE

18.3. ZADANIE

18.4. ZADANIE

18.5. ZADANIE

18.6. *ZADANIE

19. GOTOANDSTOP I GOTOANDPLAY

19.1. ZADANIE

19.2. ZADANIE

19.3. ZADANIE

19.4. ZADANIE

19.5. ZADANIE

19.6. ZADANIE

20. POLECENIE HITTESTOBJECT

20.1. ZADANIE

21. PRZESUWANIE OBIEKTÓW W OBRĘBIE SCENY ZA POMOCĄ KURSORA MYSZKI – DRAG

21.1. ZADANIE

21.2. ZADANIE

21.3. ZADANIE

21.4. ZADANIE

22. ADOBE AIR – PODSTAWY APLIKACJI MOBILNYCH

22.1. PIERWSZA APLIKACJA

22.2. GEST SWIPE

22.3. ZADANIE

22.4. GEST ROTATE

22.5. GEST PAN

22.6. GEST ZOOM

23. OBSŁUGA GPS – TURYSTA W WARSZAWIE

23.1. OBSŁUGA GPS

23.2. WYGODNE PRZEŁĄCZANIE MIĘDZY PLANSZAMI.

24. PROSTA GRA RPG

Wstęp

Niniejsza książka jest poświęcona aplikacji Adobe Animate, która umożliwia tworzenie zarówno aplikacji mobilnych na systemy Android oraz iOS, aplikacji na komputery stacjonarne PC, MAC, Linux oraz interaktywnych komponentów na nowoczesne strony WWW napisane w HTML 5. Czytelnik pozna podstawy programowania obiektowego oraz samego projektowania nowoczesnych aplikacji. Wszystko na podstawie przyjaznych przykładów opatrzonych w serie ćwiczeń do wykonania dla czytelnika.

Przydatna będzie wiedza związana z graficznymi aplikacjami Adobe, aczkolwiek nie jest to wymóg konieczny. Zachęcam również zapoznać się z HTML 5, o którym pisze w innej książce.

1. Wprowadzenie do Adobe Animate

Program Adobe Animate służy do tworzenia tak zwanych bogatych aplikacji internetowych (Rich Internet Aplications, RIA). Są to aplikacje łączące cechy aplikacji webowych oraz aplikacji desktopowych. Animate został stworzony z myślą o grafice wektorowej, jednak pozwala także na wykorzystanie grafiki rastrowej. Pozwala na tworzenie animacji oraz dodawanie elementów interaktywnych poprzez wykorzystanie języka ActionScript.

Aby stworzyć nową aplikację, wybieramy Plik > Nowy (File > New). Pracować będziemy z plikiem projektu Animate FLA. Pliki te mają rozszerzenie .fla i zawierają wszystkie zasoby multimedialne jakie wykorzystamy w projekcie.

Docelowo projekt będzie eksportowany do pliku .swf, który jest skompresowanym zapisem przygotowanej aplikacji.

Edytując taki plik w środowisku Animate można zauważyć, że interfejs użytkownika jest podzielony na pięć głównych części:

STAGE, czyli scena, zawiera elementy multimedialne, które mają być widoczne w trakcie pracy aplikacji. Biały prostokąt określa obszar faktycznie widoczny w oknie aplikacji. Scenę można zbliżać lub oddalać za pomocą narzędzia Zoom (ikona lupy).

W celu ułatwienia sobie pozycjonowania elementów na scenie można użyć takich elementów jak: Grid (siatka, aby wyświetlić lub schować siatkę należy wybrać menu View > Grid), Guides (wskaźniki, aby wyświetlić lub ukryć wskaźniki należy wybrać menu View > Guides > ShowGuides, aby włączyć lub wyłączyć przyklejenie elementu do wskaźnika należy wybrać menu View > Snapping > Snap to Guides), Rulers (linijki, aby dodać lub schować linijki należy wybrać menu View > Rulers).

TIMELINE (oś czasu) pozwala kontrolować przebieg animacji i określa, kiedy oraz w jaki sposób elementy mają się pojawić na scenie. Kolumna warstw znajduje się po lewej stronie osi czasu. Klatki zawarte w warstwach wyświetlane są w rzędzie po prawej przy nazwie warstwy. Nagłówek osi czasu (na górze) zawiera numery kolejnych klatek. Zaznaczona pionową czerwoną linią głowica wskazuje właśnie wyświetlaną klatkę. Warstwy działają analogicznie do tych znanych z aplikacji Photoshop. Pozwalają na edycje obiektu na jednej warstwie bez wpływaniu na obiekty znajdujące się na innych.

TOOLS, czyli panel narzędzi zawiera narzędzia służące do zaznaczania obiektów na scenie, tworzenia elementów tekstowych oraz rysowania grafiki wektorowej.

Panel narzędzi podzielony jest na kilka sekcji:

⇒ Obszar narzędzi pozwalających na zaznaczanie, rotację i przenoszenie obiektów

⇒ Obszar narzędzi pozwalających na pisanie, rysowanie czy wstawianie kształtów

⇒ Obszar narzędzi pozwalających na kolorowanie, wymazywanie itp.

⇒ Obszar widoku, zawierający narzędzia do powiększania, zmniejszania i przesuwania sceny

⇒ Obszar koloru pozwalający na wybór kolorów kolorem

⇒ Obszar opcji zawierający modyfikatory do wybranych narzędzi

PROPERTIES, czyli panel właściwości zawiera atrybuty każdego wybranego obiektu lub narzędzia. Można je edytować, aby dostosować obiekt lub efekt działania narzędzia do odpowiednich oczekiwań.

LIBRARY, czyli panel biblioteki zawiera elementy multimedialne i symbole zaimportowane, stworzone na potrzeby danego projektu. Warto pamiętać, że zebrane w bibliotece, lecz nie użyte na scenie pliki zwiększają rozmiar pliku projektu FLA, ale nie będą uwzględniane przy eksporcie, czyli nie będą miały wpływu na rozmiar pliku wynikowego SWF.

Koniec Wersji Demonstracyjnej

Wydawnictwo Psychoskok