Darmowy fragment publikacji:
Tytuł oryginału: Pro Android Flash
Tłumaczenie: Łukasz Schmidt
ISBN: 978-83-246-3920-5
Original edition copyright © 2011 by Stephen Chin, Dean Iverson, Oswald Campesato, and Paul Trani.
All rights reserved.
Polish edition copyright © 2012 by HELION SA.
All rights reserved.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording or by any information storage retrieval system,
without permission from the Publisher.
Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej
publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną,
fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje
naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich
właścicieli.
Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte
w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za
ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich.
Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne
szkody wynikłe z wykorzystania informacji zawartych w książce.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
WWW: http://helion.pl (księgarnia internetowa, katalog książek)
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/andfzp
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
• Kup książkę
• Poleć książkę
• Oceń książkę
• Księgarnia internetowa
• Lubię to! » Nasza społeczność
Spis treĂci
O autorach .............................................................................................................11
O recenzencie ........................................................................................................12
PodziÚkowania ......................................................................................................13
Przedmowa ............................................................................................................14
Wprowadzenie ......................................................................................................15
Rozdziaï 1 Wprowadzenie do Flasha mobilnego ....................................................................17
Dlaczego Android? .............................................................................................................................. 17
Flash na innych platformach .............................................................................................................. 18
Poznawanie Androida ......................................................................................................................... 18
Platforma Flash .................................................................................................................................... 20
Środowisko wykonawcze Flash ................................................................................................... 20
Narzędzia Flash ............................................................................................................................. 21
Uruchamianie aplikacji w programie Flash Professional ....................................................... 23
Uruchamianie aplikacji w programie Flash Builder ................................................................ 26
Uruchamianie aplikacji z wiersza poleceń ................................................................................ 36
Podsumowanie ..................................................................................................................................... 37
Rozdziaï 2
Dostosowywanie aplikacji do profilu urzÈdzenia mobilnego ................................39
Rozmiar ekranu .................................................................................................................................... 39
Rozdzielczość ekranu a jego gęstość .......................................................................................... 41
Symulowanie pikseli niezależnych od gęstości wyświetlacza urządzenia we Flashu .......... 42
Gęstość ekranu w aplikacjach Flex ............................................................................................. 42
Aplikacja Density Explorer ......................................................................................................... 43
Obsługa gęstości w CSS ................................................................................................................ 47
SPIS TRE¥CI
Rozdziaï 3
Rozdziaï 4
6
Orientacja ekranu ................................................................................................................................ 50
Przełączanie się pomiędzy trybem portretowym i krajobrazowym we Fleksie ................... 51
Automatyczna reorientacja we Flashu ....................................................................................... 55
Reorientacja we Flashu — obracająca się twarz ....................................................................... 56
Wielodotykowość i gesty .................................................................................................................... 58
Gesty w aplikacji mobilnej ........................................................................................................... 58
Aplikacja Flash Scrapbook .......................................................................................................... 60
API punktu dotykowego .............................................................................................................. 66
Podsumowanie ..................................................................................................................................... 71
Tworzenie aplikacji Flash i Flex dla Androida ........................................................73
Konstruowanie mobilnych UI za pomocą Fleksa ........................................................................... 73
ViewNavigatorApplication ......................................................................................................... 74
Ważne zdarzenia w życiu widoku .............................................................................................. 76
TabbedViewNavigatorApplication ............................................................................................ 78
Po prostu aplikacja ....................................................................................................................... 82
Komponenty ViewNavigator i View .......................................................................................... 84
Przekazywanie danych pomiędzy komponentami View ........................................................ 92
Zachowywanie komponentów View i danych sesji ................................................................. 92
Kontrolki wizualne .............................................................................................................................. 93
Kontrolki tekstowe ....................................................................................................................... 94
Obsługa klawiatury ekranowej .................................................................................................... 99
Kontrolki przycisków ................................................................................................................. 101
Listy Flex ...................................................................................................................................... 106
Kontrolki Slider, Scroller i BusyIndicator ............................................................................... 108
Podsumowanie ................................................................................................................................... 112
Grafika i animacja ................................................................................................113
Wykorzystywanie prostych obiektów Spark do rysowania grafiki 2D ...................................... 113
Rysowanie prostokątów i elips .................................................................................................. 113
Stosowanie gradientów liniowych i radialnych ...................................................................... 114
Renderowanie sześciennych krzywych Béziera ...................................................................... 117
Inny przykład elementu Path .................................................................................................... 120
Stosowanie filtrów Spark .................................................................................................................. 121
Stosowanie przekształceń obiektów geometrycznych .................................................................. 122
Dodawanie efektu zmiany rozmiaru ........................................................................................ 123
Dodawanie animacji za pomocą biblioteki Spark ......................................................................... 125
Stosowanie elementu Animate ................................................................................................. 126
Animacje odtwarzane równolegle i sekwencyjnie ................................................................. 128
Tworzenie animacji 3D ..................................................................................................................... 130
Tworzenie skórek Spark ................................................................................................................... 133
Generowanie wykresów 2D w Spark .............................................................................................. 136
Tworzenie wykresów słupkowych 2D ..................................................................................... 137
Tworzenie wykresów kołowych 2D ......................................................................................... 138
Wykorzystywanie FXG i Spark ........................................................................................................ 140
SPIS TRE¥CI
Program do szkicowania ................................................................................................................... 143
Podsumowanie ................................................................................................................................... 147
Rozdziaï 5 Wdraĝanie i publikowanie aplikacji .....................................................................149
Przygotowywanie emulatora Androida .......................................................................................... 149
Instalowanie Android SDK ....................................................................................................... 150
Tworzenie urządzenia wirtualnego Android .......................................................................... 151
Instalowanie AIR na emulatorze .............................................................................................. 153
Powiązania klawiatury z emulatorem ...................................................................................... 154
Wdrażanie aplikacji AIR ................................................................................................................... 155
Przygotowanie ADT ................................................................................................................... 156
Uprawnienia aplikacji ................................................................................................................ 157
Ikony i zasoby .............................................................................................................................. 160
Certyfikaty podpisywania kodu ....................................................................................................... 162
Tworzenie certyfikatów za pomocą ADT ............................................................................... 163
Publikowanie z Flash Professional .................................................................................................. 165
Eksportowanie wersji finalnej z Flash Builder ............................................................................... 166
Uruchamianie aplikacji Flex w emulatorze Androida ................................................................. 167
Wdrażanie aplikacji z wiersza poleceń ........................................................................................... 167
Publikowanie aplikacji AIR w Google Play .................................................................................... 170
Krok 1. Utwórz konto programisty w Google Play ............................................................... 170
Krok 2. Opakowywanie aplikacji .............................................................................................. 170
Krok 3. Wysyłanie aplikacji Adobe AIR .................................................................................. 171
Podsumowanie ................................................................................................................................... 171
Rozdziaï 6
Adobe AIR i aplikacje natywne Androida ............................................................173
Wywoływanie funkcji URI z Adobe AIR ....................................................................................... 174
Wywoływanie własnych stron HTML z Adobe AIR .................................................................... 176
Otwieranie stron HTML w Adobe AIR .......................................................................................... 177
Korzystanie z SQLite w Adobe AIR ................................................................................................ 179
Wprowadzenie do podstawowych koncepcji Androida .............................................................. 183
Podstawowe funkcje Androida 3.0 ........................................................................................... 184
Pobieranie i instalowanie Androida SDK ............................................................................... 185
Podstawowe koncepcje Androida ............................................................................................ 185
Tworzenie aplikacji dla Androida ................................................................................................... 191
Struktura aplikacji dla Androida .............................................................................................. 191
Najważniejsze pliki aplikacji dla Androida ............................................................................. 192
Wysyłanie powiadomień w aplikacjach dla Androida ................................................................. 195
Integracja aplikacji Adobe AIR z natywną aplikacją Androida .................................................. 205
Podsumowanie ................................................................................................................................... 207
Rozdziaï 7 Wykorzystywanie wejĂÊ sprzÚtowych ..................................................................209
Mikrofon ............................................................................................................................................. 209
Aparat — klasy Camera i CameraUI .............................................................................................. 212
Klasa Camera ............................................................................................................................... 212
Wykonywanie operacji na strumieniu wideo aparatu .......................................................... 215
7
SPIS TRE¥CI
Rozdziaï 8
Klasa CameraRoll ........................................................................................................................ 223
CameraUI ..................................................................................................................................... 227
Akcelerometr ...................................................................................................................................... 228
Klasy Accelerometer i AccelerometerEvent ........................................................................... 230
Geolokalizacja .................................................................................................................................... 232
Podsumowanie ................................................................................................................................... 235
Integracja z multimediami ...................................................................................237
Odtwarzanie efektów dźwiękowych ................................................................................................ 237
Klasa SoundEffect ....................................................................................................................... 238
Przykład osadzonego SoundEffect ........................................................................................... 239
Zaawansowane rozwiązanie dźwiękowe ........................................................................................ 240
Odtwarzanie nagranego dźwięku .................................................................................................... 242
Dynamiczne generowanie danych dźwiękowych .................................................................. 243
Obsługa przechodzenia pomiędzy stanami ............................................................................ 245
Odtwarzacz muzyki Flash ................................................................................................................. 250
Odtwarzanie plików MP3 .......................................................................................................... 250
Od prototypu do aplikacji ......................................................................................................... 254
Odtwarzanie wideo ............................................................................................................................ 275
Optymalizowanie wideo dla urządzeń mobilnych ................................................................. 275
Komponent Spark VideoPlayer ................................................................................................ 276
Wideo za pomocą klasy NetStream ......................................................................................... 277
Odtwarzanie wideo za pomocą OSMF .................................................................................... 282
Przykład aplikacji rejestrującej wideo ...................................................................................... 285
Podsumowanie ................................................................................................................................... 287
Rozdziaï 9 Obieg pracy projektant – programista .................................................................289
Rola projektanta wizualnego ............................................................................................................ 290
Początek w Adobe Device Central ........................................................................................... 290
Korzystanie z Device Central .................................................................................................... 290
Adobe Photoshop ....................................................................................................................... 295
Formaty plików graficznych ...................................................................................................... 297
Adobe Illustrator ......................................................................................................................... 299
Adobe Fireworks ......................................................................................................................... 300
Rola programisty ................................................................................................................................ 300
Narzędzia programisty ............................................................................................................... 302
Podsumowanie ................................................................................................................................... 304
Rozdziaï 10 Optymalizowanie wydajnoĂci ..............................................................................305
Podstawy optymalizowania wydajności aplikacji mobilnej ........................................................ 305
Postrzegana a faktyczna wydajność aplikacji ................................................................................. 306
Optymalizowanie wydajności grafiki .............................................................................................. 307
Elastyczny tor wyścigowy .......................................................................................................... 308
Redukowanie czasu wykonywania kodu ................................................................................. 309
Przyśpieszanie renderowania .................................................................................................... 309
8
SPIS TRE¥CI
Buforowanie bitmap na scenie .................................................................................................. 311
Renderowanie za pomocą GPU ................................................................................................ 317
Wydajne renderery elementów ........................................................................................................ 319
Klasy obrazów Flex ..................................................................................................................... 321
Wydajność komponentów tekstowych .................................................................................... 322
Wbudowane renderery elementów .......................................................................................... 324
API i narzędzia monitorujące wydajność ....................................................................................... 326
Hi-ReS! Stats ................................................................................................................................ 326
PerformanceTest v2 Beta ........................................................................................................... 327
Program profilujący we Flash Builder ..................................................................................... 328
Wydajność Flasha w przyszłości ...................................................................................................... 329
Szybsze odśmiecanie ................................................................................................................... 329
Lepsza wydajność kodu ActionScript ...................................................................................... 330
Współbieżność ............................................................................................................................ 331
Wielowątkowy potok renderowania ........................................................................................ 332
Stage3D ......................................................................................................................................... 333
Podsumowanie ................................................................................................................................... 334
Inne urzÈdzenia: tablety i TV ...............................................................................335
Skalowanie ekranu ............................................................................................................................. 335
Dostosowywanie oparte na stanach ................................................................................................ 337
Wykorzystywanie grup stanów ................................................................................................. 338
Dostosowywanie oparte na projekcie ...................................................................................... 344
Implementowanie interfejsu dla tabletu .................................................................................. 348
Przenoszenie aplikacji do odbiorników TV ................................................................................... 352
Przenoszenie aplikacji do urządzeń PlayBook .............................................................................. 353
System iOS .......................................................................................................................................... 356
Podsumowanie ................................................................................................................................... 356
Rozdziaï 11
Skorowidz ............................................................................................................359
9
SPIS TRE¥CI
10
R O Z D Z I A 4
Grafika i animacja
Grafiki są atrakcyjne dla osób w każdym wieku. Jeśli lubisz grafiki tak bardzo jak my, to ucieszysz się z tego,
że grafiki oparte na Fleksie, które działają w przeglądarce komputera biurkowego, będą także poprawnie
wyświetlane na urządzeniu mobilnym. Poza tym przy tworzeniu aplikacji związanych z grafiką dla urządzeń
mobilnych można również wykorzystać zdarzenia dotykowe i gesty (które opisaliśmy w rozdziale 2.).
W pierwszej części niniejszego rozdziału pokażemy, w jaki sposób renderować różne dwuwymiarowe
kształty, takie jak prostokąty, elipsy, krzywe Béziera i ścieżki. Druga część rozdziału zawiera przykłady kodu
renderującego obiekty geometryczne wypełnione gradientami liniowymi i radialnymi. W trzeciej części
rozdziału przedstawimy przykłady wykorzystywania filtrów, takich jak Blur, DropShadow i Glow.
Zobaczysz także wycinki kodu ilustrujące, jak wykonywać przekształcenia (przesunięcia, zmiana
rozmiaru, obracanie i przekształcenia poprzeczne) obiektów graficznych omówionych w pierwszej części
rozdziału. Następnie dowiesz się, jak renderować wykresy i grafy za pomocą komponentów MX. Ostatnim
przykładem w tym rozdziale będzie aplikacja do szkicowania, w której wykorzystamy omówione wcześniej
elementy. Program ten będzie obsługiwał także zdarzenia dotykowe, zapewni również możliwość rysowania
na obrazie w formacie JPG i opcję zapisu rysunków w postaci plików JPG na urządzeniu mobilnym.
Dzięki lekturze tego rozdziału dobrze zrozumiesz możliwości, jakie są związane z wykorzystaniem grafiki
w aplikacjach dla urządzeń mobilnych. Być może niektóre przykłady w tym rozdziale zainspirują Cię do
napisania własnych aplikacji z efektownymi grafikami!
Wykorzystywanie prostych obiektów Spark
do rysowania grafiki 2D
W tym podrozdziale pokażemy, jak renderować różne obiekty 2D, takie jak prostokąty, elipsy, krzywe Béziera,
wielokąty i ścieżki. Dodatkowo w niektórych przykładowych aplikacjach będziesz mógł obejrzeć utworzone
przez nas obrazy — w ten sposób porównasz wyniki działania prezentowanego kodu.
Rysowanie prostokątów i elips
Zacznijmy od narysowania dwóch prostokątów i elipsy — dwóch znanych każdemu obiektów geometrycznych.
Utwórz nowy projekt mobilny Flex, nadaj mu nazwę RectEllipse1 — skorzystaj z szablonu aplikacji mobilnej
i dodaj kod pokazany w listingu 4.1.
ROZDZIA 4. GRAFIKA I ANIMACJA
Listing 4.1. Renderowanie dwóch prostokątów oraz elipsy
?xml version= 1.0 encoding= utf-8 ?
s:View xmlns:fx= http://ns.adobe.com/mxml/2009
xmlns:s= library://ns.adobe.com/flex/spark title= HomeView
s:Rect id= rect1 x= 10 y= 10 width= 250 height= 200
s:fill
s:SolidColor color= 0xFF0000 /
/s:fill
s:stroke
s:SolidColorStroke color= 0xFFFF00 weight= 4 /
/s:stroke
/s:Rect
s:Ellipse id= ellipse1 x= 10 y= 220 width= 250 height= 200
s:fill
s:SolidColor color= 0x0000FF /
/s:fill
s:stroke
s:SolidColorStroke color= 0xFF0000 weight= 4 /
/s:stroke
/s:Ellipse
s:Rect id= rect2 x= 10 y= 460 width= 250 height= 100
s:fill
s:SolidColor color= 0xFFFF00 /
/s:fill
s:stroke
s:SolidColorStroke color= 0x0000FF weight= 8 /
/s:stroke
/s:Rect
fx:Declarations
!-- Tu umieść elementy niewizualne --
/fx:Declarations
/s:View
Kod w listingu 4.1 zaczyna się od elementu XML Rect, który określa wartości atrybutów id, x, y, width
i height. Warto zauważyć, że element XML Rect zawiera elementy XML fill i stroke zamiast atrybutów
fill i stroke, co odróżnia go od SVG, gdzie wartości fill i stroke są ustalane za pomocą atrybutów. Jednak
element XML stroke zawiera element potomny XML SolidColorStroke, który wskazuje wartości color
i weight jako atrybuty, a nie wartości elementów XML. Zauważ też, że w SVG istnieją atrybuty stroke
i stroke-width zamiast atrybutów color i weight.
Kod w listingu 4.1 zawiera także element XML Ellipse definiujący elipsę z niemal identycznymi
atrybutami i wartościami jak element XML Rect, ale generujący elipsę zamiast prostokąta.
na ekranie.
Drugi element XML Rect jest podobny do pierwszego elementu Rect, ale ma inne kolory i położenie
Na rysunku 4.1 pokazano dwa prostokąty i elipsę, narysowane w wyniku działania kodu z listingu 4.1.
Stosowanie gradientów liniowych i radialnych
Aplikacje mobilne Flex obsługują gradienty liniowe i radialne. Jak sugeruje nazwa, gradient liniowy powstaje
przez obliczenie barw pośrednich i nałożenie ich w sposób liniowy pomiędzy kolorem początkowym
a końcowym. Na przykład: jeśli gradient zmienia się od koloru czarnego do czerwonego, początkowym
kolorem jest czarny, a końcowym czerwony z liniowym przechodzeniem odcieni kolorów pomiędzy czarnym
a czerwonym.
114
WYKORZYSTYWANIE PROSTYCH OBIEKTÓW SPARK DO RYSOWANIA GRAFIKI 2D
Rysunek 4.1. Dwa prostokąty i elipsa
Gradient radialny różni się od liniowego tym, że przechodzenie odcieni następuje w sposób radialny.
Wyobraź sobie kroplę upadającą na powierzchnię wody: powstają kolejne okręgi o coraz większej średnicy
— w podobny sposób są renderowane gradienty radialne.
Jako ilustrację powyższego napisaliśmy kod, który renderuje prostokąt wypełniony gradientem liniowym
i elipsę wypełnioną gradientem radialnym. Utwórz zatem nowy projekt mobilny Flex, nadaj mu nazwę
LinearRadial1 — skorzystaj z szablonu aplikacji mobilnej i dodaj kod pokazany w listingu 4.2.
Listing 4.2. Stosowanie gradientów liniowych i radialnych
?xml version= 1.0 encoding= utf-8 ?
s:View xmlns:fx= http://ns.adobe.com/mxml/2009
xmlns:s= library://ns.adobe.com/flex/spark
title= HomeView
s:Panel width= 100 height= 100
title= Gradienty liniowy i radialny
s:Group
s:Rect id= rect1 x= 10 y= 10
height= 250 width= 300
s:fill
s:LinearGradient
s:GradientEntry color= 0xFF0000
ratio= 0 alpha= .5 /
s:GradientEntry color= 0xFFFF00
ratio= .33 alpha= .5 /
s:GradientEntry color= 0x0000FF
ratio= .66 alpha= .5 /
115
ROZDZIA 4. GRAFIKA I ANIMACJA
/s:LinearGradient
/s:fill
s:stroke
s:SolidColorStroke color= 0x000000 weight= 2 /
/s:stroke
/s:Rect
s:Ellipse id= ellipse1 x= 10 y= 270
height= 250 width= 300
s:fill
s:RadialGradient
s:GradientEntry color= 0xFF0000
ratio= 0 alpha= 1 /
s:GradientEntry color= 0xFFFF00
ratio= .9 alpha= 1 /
/s:RadialGradient
/s:fill
s:stroke
s:SolidColorStroke color= 0x000000 weight= 2 /
/s:stroke
/s:Ellipse
/s:Group
/s:Panel
fx:Declarations
!-- Tu umieść elementy niewizualne --
/fx:Declarations
/s:View
Kod w listingu 4.2 zawiera jeden element XML Panel. W tym elemencie znalazł się jeden element XML
Group, którego atrybuty określają układ panelu. Element XML Group zawiera dwa elementy potomne: Rect
i Ellipse. Element XML Rect definiuje prostokąt wypełniony gradientem liniowym:
s:Rect id= rect1 x= 10 y= 10 height= 250 width= 300
s:fill
s:LinearGradient
s:GradientEntry color= 0xFF0000 ratio= 0 alpha= .5 /
s:GradientEntry color= 0xFFFF00 ratio= .33 alpha= .5 /
s:GradientEntry color= 0x0000FF ratio= .66 alpha= .5 /
/s:LinearGradient
/s:fill
s:stroke
s:SolidColorStroke color= 0x000000 weight= 2 /
/s:stroke
/s:Rect
Powyższy element XML Rect określa wartości atrybutów id, x, y, width i height. Element ten zawiera
również element XML Fill (jak widziałeś już w poprzednim przykładzie), w którym z kolei znajduje się
element XML LinearGradient określający trzy elementy XML GradientEntry. Każdy z nich wskazuje wartość
dziesiętną (pomiędzy 0 i 1) dla atrybutów ratio i alpha. Ostatnia część elementu XML Rect zawiera element
XML Stroke, w którym z kolei znajduje się element XML SolidStrokeElement określający wartości atrybutów
color i weight.
W kodzie z listingu 4.2 znajduje się także element XML Ellipse, który definiuje elipsę z gradientem
radialnym. Ten kod zawiera niemal te same atrybuty i wartości, co element XML Rect, ale reprezentuje elipsę
zamiast prostokąta.
116
WYKORZYSTYWANIE PROSTYCH OBIEKTÓW SPARK DO RYSOWANIA GRAFIKI 2D
Na rysunku 4.2 pokazano prostokąt wypełniony gradientem liniowym i elipsę wypełnioną gradientem
radialnym.
Rysunek 4.2. Prostokąt wypełniony gradientem liniowym i elipsa wypełniona gradientem radialnym
Renderowanie sześciennych krzywych Béziera
Flex obsługuje sześcienne krzywe Béziera (krzywe trzeciego stopnia o dwóch punktach końcowych i dwóch
punktach kontrolnych) i kwadratowe krzywe Béziera (krzywe drugiego stopnia o dwóch punktach końcowych
i jednym punkcie kontrolnym). Sześcienną krzywą Béziera łatwo odróżnić, ponieważ jej definicja zaczyna się
od litery C (lub c), podczas gdy definicja kwadratowej krzywej Béziera zaczyna się od litery Q (lub q). Wielkie
litery C i Q wskazują bezwzględne położenie, a małe litery c i q położenie względem poprzedzającego punktu
w elemencie XML Path.
Pierwszy z punktów wskazanych dla sześciennej lub kwadratowej krzywej Béziera jest pierwszym
punktem kontrolnym, za nim następuje drugi punkt kontrolny w przypadku sześciennej krzywej Béziera,
a potem drugi punkt końcowy. Pierwszy punkt końcowy w kwadratowej i sześciennej krzywej Béziera jest
poprzedzającym punktem wskazanym w elemencie XML Path. Jeśli punkt taki nie zostanie wskazany,
początek układu współrzędnych (0, 0) służy za pierwszy punkt końcowy.
Sekwencję dla krzywych Béziera można także wskazać za pomocą litery S (dla krzywej sześciennej)
lub T (dla krzywej kwadratowej).
Teraz utwórz nowy projekt mobilny Flex, nadaj mu nazwę BezierCurves1 — skorzystaj z szablonu
aplikacji mobilnej i dodaj kod pokazany w listingu 4.3. Kod ten tworzy cztery krzywe Béziera: sześcienną,
kwadratową, dwie połączone sześcienne oraz sześcienną połączoną z kwadratową.
117
ROZDZIA 4. GRAFIKA I ANIMACJA
Listing 4.3. Renderowanie sześciennych i kwadratowych krzywych Béziera
?xml version= 1.0 encoding= utf-8 ?
s:View xmlns:fx= http://ns.adobe.com/mxml/2009
xmlns:s= library://ns.adobe.com/flex/spark
title= HomeView
s:Panel width= 100 height= 100
title= SzeĂcienne/kwadratowe krzywe Béziera
!-- sześcienna krzywa Béziera --
s:Path data= C 100 150 200 20 300 100
s:fill
s:LinearGradient rotation= 90
s:GradientEntry color= #FFFFFF alpha= 0.5 /
s:GradientEntry color= #FF0000 alpha= 0.5 /
/s:LinearGradient
/s:fill
s:stroke
s:SolidColorStroke color= 0x0000FF weight= 4 /
/s:stroke
/s:Path
!-- kwadratowa krzywa Béziera --
s:Path data= Q 250 200 100 300
s:fill
s:RadialGradient rotation= 90
s:GradientEntry color= #000000 alpha= 0.8 /
s:GradientEntry color= #0000FF alpha= 0.8 /
/s:RadialGradient
/s:fill
s:stroke
s:SolidColorStroke color= 0xFF0000 weight= 8 /
/s:stroke
/s:Path
!-- dwie połączone sześcienne krzywe Béziera --
s:Path data= C 100 300 200 20 300 100 S 250 200 300 250
s:fill
s:LinearGradient rotation= 90
s:GradientEntry color= #FF0000 alpha= 0.5 /
s:GradientEntry color= #FFFF00 alpha= 0.5 /
/s:LinearGradient
/s:fill
s:stroke
s:SolidColorStroke color= 0x00FF00 weight= 2 /
/s:stroke
/s:Path
!-- dwie połączone krzywe Béziera: sześcienna i kwadratowa --
s:Path data= C 250 400 200 150 350 100 T 250 250 400 280
s:fill
s:LinearGradient rotation= 90
s:GradientEntry color= #FFFF00 alpha= 0.5 /
s:GradientEntry color= #FF0000 alpha= 0.5 /
/s:LinearGradient
/s:fill
118
WYKORZYSTYWANIE PROSTYCH OBIEKTÓW SPARK DO RYSOWANIA GRAFIKI 2D
s:stroke
s:SolidColorStroke color= 0x000000 weight= 4 /
/s:stroke
/s:Path
/s:Panel
/s:View
Kod w listingu 4.3 zawiera element XML Panel, w którym z kolei znajdują się cztery elementy XML Path
tworzące krzywe Béziera z różnymi rodzajami cieniowania. Pierwszy element XML Path definiuje sześcienną
krzywą Béziera w następujący sposób:
s:Path data= C 100 300 200 20 300 100 S 250 200 300 250
[inne elementy pominiÚte]
/s:Path
Pierwszym punktem końcowym tej krzywej jest (0, 0), ponieważ nie zostały wskazane inne współrzędne;
punkty kontrolne to (100, 300) i (200, 20), docelowym punktem końcowym jest (300, 100).
Element XML Path zawiera element XML LinearGradient definiujący przejście barw od białej do
czerwonej, z poziomem krycia 0.5 oraz z niebieskim obrysem o szerokości linii równej 4, tak jak poniżej:
s:LinearGradient rotation= 90
s:GradientEntry color= #FFFFFF alpha= 0.5 /
s:GradientEntry color= #FF0000 alpha= 0.5 /
/s:LinearGradient
/s:fill
s:stroke
s:SolidColorStroke color= 0x0000FF weight= 4 /
/s:stroke
Drugi element XML Path definiuje kwadratową krzywą Béziera, której pierwszym punktem końcowym
jest (0, 0), ponieważ nie zostały wskazane inne współrzędne; punkt kontrolny to (250, 200), a docelowym
punktem końcowym jest (100, 300). Element XML Path zawiera element XML LinearGradient z przejściem
barw od czarnej do niebieskiej i poziomem krycia 0.8.
Trzeci element XML Path definiuje sześcienną krzywą Béziera, która jest „powiązana” z drugą sześcienną
krzywą Béziera, tak jak poniżej:
s:Path data= C 100 300 200 20 300 100 S 250 200 300 250
[inne elementy pominiÚte]
/s:Path
Dwoma punktami kontrolnymi dla tej sześciennej krzywej Béziera są (100, 300) i (20, 300), punktem
docelowym jest (300, 100). Druga część elementu XML Path definiuje kwadratową krzywą Béziera z punktem
kontrolnym (250, 200) i z docelowym punktem końcowym (300, 250).
Element XML Path zawiera element XML LinearGradient tworzący gradient liniowy z przejściem od
barwy żółtej do czerwonej, a następnie element XML Stroke z kolorem czarnym i o szerokości linii równej
4 jednostkom.
Ostatni element XML Path definiuje sześcienną krzywą Béziera, a następnie drugą sześcienną krzywą
Béziera tak jak poniżej:
s:Path data= C 250 300 200 150 350 100 T 250 250 400 280
[inne elementy pominiÚte]
/s:Path
Dwa punkty kontrolne dla tej sześciennej krzywej Béziera to (250, 300) i (200, 150), punktem docelowym
jest (350, 100). Druga część elementu XML Path definiuje kwadratową krzywą Béziera, której punktem
kontrolnym jest (250, 250), a docelowym punktem końcowym (400, 280).
Element XML Path zawiera element XML LinearGradient tworzący gradient liniowy — przejście od
barwy żółtej do czerwonej, z poziomem krycia 0.5, a następnie element XML Stroke z kolorem czarnym
i o szerokości linii równej 4 jednostkom.
119
ROZDZIA 4. GRAFIKA I ANIMACJA
Na rysunku 4.3 pokazano sześcienne, kwadratowe oraz połączone krzywe Béziera.
Rysunek 4.3. Sześcienne, kwadratowe oraz połączone krzywe Béziera
Inny przykład elementu Path
W poprzednim przykładowym fragmencie kodu pokazaliśmy, jak używać elementu Path do renderowania
zestawu krzywych Béziera. Element Path umożliwia także łączenie innych obiektów 2D, takich jak segmenty
linii i krzywe Béziera, z gradientami liniowymi i radialnymi. Utwórz teraz nowy projekt mobilny Flex, nadaj
mu nazwę Path1 — skorzystaj z szablonu aplikacji mobilnej i dodaj kod pokazany w listingu 4.4.
Listing 4.4. Łączenie segmentów linii i krzywych Béziera
?xml version= 1.0 encoding= utf-8 ?
s:View xmlns:fx= http://ns.adobe.com/mxml/2009
xmlns:s= library://ns.adobe.com/flex/spark
title= HomeView
s:Panel width= 100 height= 100
title= Linie/krzywe Béziera oparte na Ăcieĝce
s:Path data= M 50 50 L150 50 350 150 50 150z
C 250 300 200 150 350 100 T 250 250 400 500
s:fill
s:LinearGradient rotation= 90
s:GradientEntry color= #FF0000 alpha= 1 /
s:GradientEntry color= #0000FF alpha= 1 /
/s:LinearGradient
/s:fill
s:stroke
s:SolidColorStroke color= 0x000000 weight= 8 /
/s:stroke
/s:Path
/s:Panel
/s:View
Element XML Panel z kodu w listingu 4.4 zawiera jeden element XML Path, w którym fragmenty linii
posłużyły do wyrenderowania trapezoidu, a następnie pary sześciennych krzywych Béziera. Atrybut data
elementu XML Path jest następujący:
120
STOSOWANIE FILTRÓW SPARK
s:Path data= M 50 50 L150 50 350 150 50 150z
C 250 300 200 150 350 100 T 250 250 400 280
Część pierwsza atrybutu data (zaczynająca się literą M) definiuje trapezoid, część druga (zaczynająca się
literą C) renderuje sześcienną krzywą Béziera, część trzecia (zaczynająca się literą T) definiuje kolejną taką
krzywą.
Na rysunku 4.4 pokazano narysowane elementy: trapezoid i dwie sześcienne krzywe Béziera.
Rysunek 4.4. Elementy oparte na ścieżkach: trapezoid i krzywe Béziera
Stosowanie filtrów Spark
Aby znacząco poprawić wygląd aplikacji pisanych we Fleksie, warto wykorzystać filtry Flex — są bardzo
przydatne przy tworzeniu zaawansowanych efektów wizualnych. Proste obiekty Spark (z pakietu primitives)
obsługują różnorodne filtry, w tym Blur, DropShadow i Glow. Wszystkie filtry należą do pakietu spark.filters.
A zatem utwórz nowy projekt mobilny Flex, nadaj mu nazwę RectLGradFilters3 — skorzystaj z szablonu
aplikacji mobilnej i dodaj kod pokazany w listingu 4.5.
Listing 4.5. Rysowanie prostokątów z wykorzystaniem filtrów Spark
?xml version= 1.0 encoding= utf-8 ?
s:View xmlns:fx= http://ns.adobe.com/mxml/2009
xmlns:s= library://ns.adobe.com/flex/spark
title= ProstokÈt: gradient i filtry
s:Rect id= rect1 x= 50 y= 50 height= 300 width= 250
121
ROZDZIA 4. GRAFIKA I ANIMACJA
s:fill
s:LinearGradient
s:GradientEntry color= 0xFF0000
ratio= 0 alpha= .5 /
s:GradientEntry color= 0xFFFF00
ratio= .33 alpha= .5 /
s:GradientEntry color= 0x0000FF
ratio= .66 alpha= .5 /
/s:LinearGradient
/s:fill
s:stroke
s:SolidColorStroke color= 0xFF0000 weight= 2 /
/s:stroke
s:filters
s:DropShadowFilter distance= 80 color= #0000FF /
s:BlurFilter/
s:GlowFilter/
/s:filters
/s:Rect
/s:View
W kodzie z listingu 4.5 znalazł się element XML Rect definiujący prostokąt wyrenderowany z gradientem
liniowym. Atrybut ratio to liczba dziesiętna z przedziału od 0 do 1, określająca ułamek odległości pomiędzy
punktem startowym a docelowym, w której zostanie utworzone przejście koloru. W listingu 4.5 element
GradientEntry posiada atrybut ratio o wartości 0, co oznacza, że prostokąt jest renderowany w kolorze
0uFF0000 (szesnastkowa wartość koloru czerwonego). Drugi element GradientEntry posiada atrybut ratio
o wartości 0.33, co oznacza, że prostokąt jest renderowany w kolorze 0uFFFF00 (szesnastkowa wartość
oznaczająca żółtą barwę) od punktu, który znajduje się w 33 odległości od punktu początkowego do
docelowego. Trzeci element GradientEntry posiada atrybut ratio o wartości 0.33, co oznacza, że prostokąt
jest renderowany w kolorze 0x0000FF (szesnastkowa wartość oznaczająca barwę niebieską) od punktu
znajdującego się w 66 odległości od punktu początkowego do docelowego.
Atrybut alpha oznacza wartość krycia. Jest to wartość dziesiętna z przedziału od 0 (element niewidoczny)
do 1 (element całkowicie widoczny). Trzy elementy GradientEntry w listingu 4.5 mają wartość atrybutu alpha
równą 0.5, a więc prostokąt jest częściowo widoczny. Wypróbuj różne wartości atrybutów ratio i alpha
— sprawdź, które z nich dają atrakcyjny wizualnie efekt.
Ostatnia część elementu XML Rect zawiera element XML stroke, który definiuje kolor jako czerwony
i szerokość obrysu 2. Za nim zdefiniowano trzy następujące filtry Spark:
s:filters
s:DropShadowFilter distance= 80 color= #0000FF /
s:BlurFilter/
s:GlowFilter/
/s:filters
Trzy filtry Spark wykorzystane w tym przykładzie noszą nazwy wskazujące na uzyskiwany za ich pomocą
efekt. Pierwszy filtr, DropShadowFilter, dodaje efekt cienia do prostokąta określonego w elemencie XML Rect.
Drugi filtr, BlurFilter, dodaje efekt rozmycia. Ostatni z filtrów, GlowFilter, tworzy efekt poświaty.
Na rysunku 4.5 pokazano prostokąt wypełniony gradientem liniowym, dla którego zastosowano trzy
filtry Spark.
Stosowanie przeksztaïceñ obiektów geometrycznych
W tym podrozdziale pokażemy, jak stosować przekształcenia obiektów geometrycznych, w tym tych,
o których powiedzieliśmy we wcześniejszej części tego rozdziału. Proste obiekty geometryczne Spark
obsługują następujące efekty i przekształcenia:
122
STOSOWANIE PRZEKSZTACE OBIEKTÓW GEOMETRYCZNYCH
Rysunek 4.5. Prostokąt z gradientem liniowym, dla którego zastosowano trzy filtry Spark
x Animate
x AnimateColor
x AnimateFilter
x AnimateShaderTransition
x AnimateTransform
x Fade
x Move
x Resize
x Rotate
x Scale
x Wipe
x CrossFade
Proste obiekty geometryczne Spark są dostępne w pakiecie spark.effects i mogą być zastosowane
do komponentów Spark oraz komponentów MX. Pakiet mx.effects (dołączony do Flex 4 SDK) udostępnia
efekty odpowiadające funkcjonalnie komponentom Spark, które można zastosować dla komponentów MX.
W dalszej części rozdziału zamieściliśmy przykłady kodu Flex ilustrujące, jak animować zmiany rozmiaru
obiektu.
Dodawanie efektu zmiany rozmiaru
Efekty zmian rozmiaru (czyli powiększanie lub zmniejszanie odpowiednich wymiarów obiektu) mogą być
przydatne w grach i są bardzo łatwe w stosowaniu w aplikacjach Flex. Utwórz więc nowy projekt mobilny
Flex, nadaj mu nazwę ScaleEffect1 — skorzystaj z szablonu aplikacji mobilnej i dodaj kod pokazany
w listingu 4.6.
Listing 4.6. Dodawanie efektów zmian rozmiaru za pomocą gradientów liniowych
?xml version= 1.0 encoding= utf-8 ?
s:View xmlns:fx= http://ns.adobe.com/mxml/2009
xmlns:s= library://ns.adobe.com/flex/spark
123
ROZDZIA 4. GRAFIKA I ANIMACJA
title= Skalowany prostokÈt i elipsa
fx:Library
fx:Definition name= MyRect1
s:Rect x= 50 y= 50 height= 40 width= 20
s:fill
s:LinearGradient
s:GradientEntry color= 0xFF0000
ratio= 0 alpha= .5 /
s:GradientEntry color= 0xFFFF00
ratio= .33 alpha= .5 /
s:GradientEntry color= 0x0000FF
ratio= .66 alpha= .5 /
/s:LinearGradient
/s:fill
s:stroke
s:SolidColorStroke color= 0xFF0000 weight= 1 /
/s:stroke
s:filters
s:BlurFilter/
s:GlowFilter/
/s:filters
/s:Rect
/fx:Definition
fx:Definition name= MyEllipse1
s:Ellipse x= 200 y= 200 height= 40 width= 80
s:fill
s:LinearGradient
s:GradientEntry color= 0xFF0000
ratio= 0 alpha= .5 /
s:GradientEntry color= 0xFFFF00
ratio= .33 alpha= .5 /
s:GradientEntry color= 0x0000FF
ratio= .66 alpha= .5 /
/s:LinearGradient
/s:fill
s:stroke
s:SolidColorStroke color= 0xFF0000 weight= 1 /
/s:stroke
s:filters
s:DropShadowFilter distance= 20 color= #FF0000 /
/s:filters
/s:Ellipse
/fx:Definition
/fx:Library
s:Group
fx:MyRect1 scaleX= 6 scaleY= 4 /
fx:MyEllipse1 scaleX= 3 scaleY= 8 /
fx:MyRect1 scaleX= 2 scaleY= 2 /
fx:MyEllipse1 scaleX= 2 scaleY= 2 /
/s:Group
/s:View
Listing 4.6 zawiera dwa elementy XML Definition. Jeden z nich określa element XML Rect zawierający
definicję prostokąta, a drugi — element XML Ellipse z definicją elipsy. Element XML Group zawiera dwie
referencje do prostokąta i dwie referencje do elipsy, jak pokazano poniżej:
124
DODAWANIE ANIMACJI ZA POMOCk BIBLIOTEKI SPARK
s:Group
fx:MyRect1 scaleX= 6 scaleY= 4 /
fx:MyEllipse1 scaleX= 3 scaleY= 8 /
fx:MyRect1 scaleX= 2 scaleY= 2 /
fx:MyEllipse1 scaleX= 2 scaleY= 2 /
/s:Group
Pierwszy element XML zapewnia przeskalowanie zdefiniowanego wcześniej prostokąta MyRect1 poprzez
ustawienie wartości 6 i 4 dla atrybutów scaleX i scaleY. Drugi element XML zapewnia przeskalowanie
zdefiniowanej wcześniej elipsy MyEllipse1 poprzez ustawienie wartości 3 i 8 dla atrybutów scaleX i scaleY.
Na rysunku 4.6 pokazano efekt zmiany rozmiaru prostokąta i elipsy.
Rysunek 4.6. Efekt zmiany rozmiaru prostokąta i elipsy
Dodawanie animacji za pomocÈ biblioteki Spark
W tym podrozdziale przedstawimy aplikację, na przykładzie której pokażemy, jak animować obiekty
geometryczne, o których mówiliśmy we wcześniejszej części rozdziału. Efektami animacji z biblioteki Spark
primitives są:
x Animate
x AnimateColor
x AnimateFilter
x AnimateShaderTransition
x AnimateTransform
125
ROZDZIA 4. GRAFIKA I ANIMACJA
x CrossFade
x Fade
x Move
x Resize
x Rotate
x Scale
x Wipe
W kolejnych punktach, wykorzystując sekwencje kodu, pokażemy, w jaki sposób używać elementu XML
Animate i jak definiować animacje odtwarzane równolegle i sekwencyjnie.
Stosowanie elementu Animate
Animacje są oczywiście bardzo popularne w grach, ale mogą być efektywnie wykorzystywane także w innych
rodzajach aplikacji. Jednocześnie powinieneś pamiętać, że w aplikacjach biznesowych prawdopodobnie lepiej
będzie nie nadużywać elementów animowanych.
Utwórz nowy projekt mobilny Flex, nadaj mu nazwę AnimPropertyWidth — skorzystaj z szablonu aplikacji
mobilnej i dodaj kod pokazany w listingu 4.7.
Listing 4.7. Animowanie szerokości prostokąta
?xml version= 1.0 encoding= utf-8 ?
s:View xmlns:fx= http://ns.adobe.com/mxml/2009
xmlns:s= library://ns.adobe.com/flex/spark
title= Animowanie szerokoĂci prostokÈta
fx:Declarations
s:Animate id= MyAnimate1
s:motionPaths
s:MotionPath property= width
s:keyframes
s:Keyframe time= 0 value= 200 /
s:Keyframe time= 2000 value= 400 /
/s:keyframes
/s:MotionPath
/s:motionPaths
/s:Animate
/fx:Declarations
s:VGroup
s:Rect id= rect1 height= 300 width= 200
s:fill
s:LinearGradient
s:GradientEntry color= 0xFF0000
ratio= 0 alpha= .5 /
s:GradientEntry color= 0xFFFF00
ratio= .33 alpha= .5 /
s:GradientEntry color= 0x0000FF
ratio= .66 alpha= .5 /
/s:LinearGradient
/s:fill
s:stroke
s:SolidColorStroke color= 0xFF0000 weight= 2 /
/s:stroke
/s:Rect
126
DODAWANIE ANIMACJI ZA POMOCk BIBLIOTEKI SPARK
s:Button id= MyButton1 label= Animuj szerokoĂÊ
click= MyAnimate1.play([rect1])
bottom= 150 right= 50
/s:Button
/s:VGroup
/s:View
Kod w listingu 4.7 zawiera element XML Declarations, w którym z kolei znajduje się element XML
Animate definiujący szczegóły animacji. Element XML Animate posiada atrybut id o wartości MyAnimate1,
do którego tworzymy referencję w procedurze obsługi zdarzenia click. Procedurę tę opiszemy w dalszej
części tego podrozdziału.
W listingu 4.7 znajduje się także element XML VGroup, w którym z kolei znajduje się element XML Rect.
Jego zawartość przypomina przykładowe elementy XML, jakie już widziałeś w tym rozdziale. W tym samym
listingu znalazł się również element XML Button uruchamiający efekt animacji. Kiedy użytkownik kliknie
lub stuknie ten przycisk, zostanie wykonana procedura obsługi zdarzenia o wartości atrybutu id MyAnimate1,
która została zdefiniowana we wcześniejszej części kodu. Efekt animacji jest prosty: szerokość prostokąta
zwiększa się z 200 do 400 jednostek w czasie dwóch sekund (2000 milisekund).
Na rysunkach 4.7 i 4.8 pokazano dwa ujęcia prostokąta, który przesuwa się poziomo po ekranie,
kiedy użytkownik kliknie przycisk.
Rysunek 4.7. Animowany prostokąt (położenie początkowe)
Rysunek 4.8. Animowany prostokąt (położenie końcowe)
127
ROZDZIA 4. GRAFIKA I ANIMACJA
Animacje odtwarzane równolegle i sekwencyjnie
Flex obsługuje dwa sposoby odtwarzania animacji. Równoległe odtwarzanie animacji polega na wykonywaniu
dwóch lub większej liczby animacji w tym samym czasie. Z kolei odtwarzanie animacji sekwencyjnie polega
na wykonywaniu dwóch lub większej liczby animacji jedna po drugiej, co oznacza, że w danej chwili
wykonywana jest tylko jedna z nich. Mając to na uwadze, utwórz nowy projekt mobilny Flex, nadaj mu nazwę
SequentialAnimation1 — skorzystaj z szablonu aplikacji mobilnej i dodaj kod pokazany w listingu 4.8.
Listing 4.8. Tworzenie animacji odtwarzanej sekwencyjnie
?xml version= 1.0 encoding= utf-8 ?
s:View xmlns:fx= http://ns.adobe.com/mxml/2009
xmlns:s= library://ns.adobe.com/flex/spark
title= Animacja sekwencyjna
fx:Declarations
s:Sequence id= transformer1 target= {button1}
s:Move xFrom= 50 xTo= 150
autoCenterTransform= true /
s:Rotate angleFrom= 0 angleTo= 360
autoCenterTransform= true /
s:Scale scaleXFrom= 1 scaleXTo= 2
autoCenterTransform= true /
/s:Sequence
s:Sequence id= transformer2 target= {button2}
s:Move xFrom= 50 xTo= 150
autoCenterTransform= true /
s:Scale scaleXFrom= 1 scaleXTo= 2
autoCenterTransform= true /
s:Rotate angleFrom= 0 angleTo= 720
autoCenterTransform= true /
/s:Sequence
/fx:Declarations
s:Rect id= rect1 x= 10 y= 10 width= 400 height= 400
s:fill
s:SolidColor color= 0xFF0000 /
/s:fill
s:stroke
s:SolidColorStroke color= 0x0000FF weight= 4 /
/s:stroke
/s:Rect
s:Button id= button1 x= 50 y= 100 label= PrzeksztaïÊ mnie
click= transformer1.play() /
s:Button id= button2 x= 50 y= 200 label= PrzeksztaïÊ takĝe mnie
click= transformer2.play() /
/s:View
Listing 4.8 zawiera element XML Declarations, a ten z kolei trzy elementy XML Seguence definiujące trzy
efekty przekształcenia. Wykonywanie animacji rozpoczyna się od elementu XML Move (efekt przesunięcia),
następnym jest element XML Rotate (efekt obrotu) i wreszcie element XML Scale (efekt zmiany rozmiaru).
Kiedy użytkownik stuknie pierwszy element XML Button, zostaną wywołane animacje zdefiniowane
w elemencie XML Sequence o wartości atrybutu id równej transformer1.
Podobny opis mógłby dotyczyć drugiego elementu XML Sequence i drugiego przycisku, poza różnicą
polegającą na tym, że animacja obejmuje dwa obroty zamiast jednego.
128
Warto zauważyć, że można łatwo zmienić efekt animacji z sekwencyjnego na równoległy poprzez zamianę
elementu XML Sequence na element XML Parallel, tak jak poniżej:
DODAWANIE ANIMACJI ZA POMOCk BIBLIOTEKI SPARK
s:Parallel id= transformer target= {button}
s:Move xFrom= 50 xTo= 150
autoCenterTransform= true /
s:Rotate angleFrom= 0 angleTo= 360
autoCenterTransform= true /
s:Scale scaleXFrom= 1 scaleXTo= 2
autoCenterTransform= true /
/s:Parallel
Na zrzutach ekranu przedstawionych na rysunkach 4.9 i 4.10 pokazano dwa przyciski animowane
w sposób sekwencyjny. Na zrzutach ekranu pokazano tylko początkowy i końcowy stan animacji, a więc
uruchom tę aplikację mobilną i sam zobacz, jak wyglądają animacje przesunięcia i obrotu.
Rysunek 4.9. Przycisk animowany sekwencyjnie (stan początkowy)
Rysunek 4.10. Przycisk animowany sekwencyjnie (stan końcowy)
129
ROZDZIA 4. GRAFIKA I ANIMACJA
Tworzenie animacji 3D
Flex obsługuje kilka rodzajów animacji 3D, w tym przesuwanie, obracanie i zmiany rozmiaru obrazu
(pliku JPG). Efekt „ruchu” 3D polega na przesunięciu obrazu JPG oraz zmianie jego rozmiaru, a efekt zmiany
rozmiaru 3D obejmuje zwiększenie (lub zmniejszenie) szerokości i wysokości obrazu JPG od wartości
początkowej (zwykle 1) do ostatecznej (która może być większa lub mniejsza od 1). Efekt „obracania”
3D polega na przekształcaniu obrazu w taki sposób, że wydaje się on obracać w trzech wymiarach.
Przykładowy kod w listingu 4.9 pokazuje, jak dodawać efekty animacji 3D przesuwania, obracania i zmian
rozmiaru pliku JPG w aplikacji mobilnej.
Listing 4.9. Tworzenie animacji 3D
?xml version= 1.0 encoding= utf-8 ?
s:View xmlns:fx= http://ns.adobe.com/mxml/2009
xmlns:s= library://ns.adobe.com/flex/spark
title= Tworzenie efektów 3D
fx:Declarations
s:Move3D id= moveEffect target= {targetImg} xBy= 100 zBy= 100
repeatCount= 2 repeatBehavior= reverse
effectStart= playMoveButton.enabled=false
effectEnd= playMoveButton.enabled=true; /
s:Rotate3D id= rotateEffect target= {targetImg}
angleYFrom= 0 angleYTo= 360
repeatCount= 4 repeatBehavior= reverse
effectStart= playRotateButton.enabled=false;
effectEnd= playRotateButton.enabled=true; /
s:Scale3D id= atScale target= {targetImg}
scaleXBy= -.45 repeatCount= 2
repeatBehavior= reverse
effectStart= playScaleButton.enabled=false
effectEnd= playScaleButton.enabled=true; /
/fx:Declarations
s:VGroup width= 100 height= 100
s:Image id= targetImg
horizontalCenter= 0
verticalCenter= 0
source= @Embed(source= images/Cassandra4.jpg ) /
s:HGroup
s:Button id= playMoveButton
left= 10 bottom= 25
label= Przesuñ
click= moveEffect.play(); /
s:Button id= playRotateButton
left= 110 bottom= 25
label= ObróÊ
click= rotateEffect.play(); /
s:Button id= playScaleButton
left= 222 bottom= 25
label= Skaluj click= atScale.play(); /
130
TWORZENIE ANIMACJI 3D
/s:HGroup
/s:VGroup
/s:View
Na rysunku 4.11 pokazano obraz JPG Cassandra4.jpg — zdjęcie Cassandry Chin (córki Stephena China).
Obraz ten wykorzystaliśmy w kodzie, za pomocą którego zademonstrowaliśmy efekty animacji 3D.
Rysunek 4.11. Obraz JPG do prezentowania efektów animacji 3D
Kod z listingu 4.9 zawiera element XML Declarations, w którym znalazły się trzy elementy określające
animacje 3D wraz z trzema elementami XML Button. Użytkownik może klikać te przyciski, aby zobaczyć efekt
przekształcenia 3D. Elementami tymi są Move3D, który wskazuje położenie docelowe za pomocą atrybutów xBy
i zBy, reapeatCount o wartości 2 (który powoduje dwukrotne wykonanie efektu animacji) oraz repeatBehavior
o wartości reverse (który za każdym razem przekazuje informację o pierwotnym położeniu). Odpowiadający
animacji element XML Button zawiera atrybut label o wartości Przesuñ i atrybut click o wartości
moveEffect.play() — ta funkcja wywołuje animację ruchu zdefiniowaną za pomocą elementu XML
MoveEffect, który znajduje się w elemencie XML Declarations.
Efekt obrotu jest obsługiwany za pomocą elementu XML Rotate3D, którego atrybuty angleYFrom
i angleYTo określają kąty początkowy i końcowy o wartościach odpowiednio: 0 i 360 (oznacza to, że obiekt
wykona pełny obrót). Animacja obrotu jest wykonywana czterokrotnie. Element XML Button zawiera atrybut
label o wartości ObróÊ i atrybut clik o wartości rotateEffect.play() — ta funkcja wywołuje animację
obracania zdefiniowaną za pomocą elementu XML Rotate3D, który znajduje się w elemencie XML
Declarations.
Efekt zmiany rozmiaru (trzeci i jednocześnie ostatni) jest obsługiwany za pomocą elementu XML Scale3D,
który zawiera kilka atrybutów o wartościach określających szczegóły animowania obrazu JPG. Atrybut id
ma wartość atScale i służy do tworzenia referencji do tego elementu w innych miejscach kodu. Atrybut
target jest referencją do elementu XML, którego atrybut id ma wartość targetImg, co wskazuje na obraz JPG.
Atrybut scaleXBy ma wartość -0.25, co powoduje zmniejszenie obrazu JPG o 25 . Atrybut RepeatCount ma
wartość 4, a repeatBahavior wartość reverse, co oznacza, że efekt animacji będzie odtwarzany czterokrotnie,
na przemian od lewej do prawej i odwrotnie. Dwa pozostałe atrybuty to effectStart i effectEnd wskazujące
zachowania na początku i na końcu animacji, w tym przypadku polegają one na wyłączeniu i włączeniu
przycisku playButton.
131
ROZDZIA 4. GRAFIKA I ANIMACJA
Zauważ, że element XML Image wskazuje położenie obrazu Cassandra4.jpg w folderze, który znajduje
się w katalogu najwyższego poziomu projektu. Aby mógł powstać układ, element XML Image znalazł się
wewnątrz elementu XML VGroup, który zawiera element XML HGroup, gdzie z kolei znalazły się trzy elementy
XML Button.
Na rysunku 4.12 pokazano obraz JPG po wykonaniu animacji 3D.
Rysunek 4.12. Obraz JPG po wykonaniu animacji 3D
Na rysunku 4.13 pokazano obraz JPG po wykonaniu animacji obrotu 3D.
Rysunek 4.13. Obraz JPG po wykonaniu animacji obrotu 3D
Na rysunku 4.14 pokazano obraz JPG po wykonaniu animacji zmiany rozmiaru 3D.
132
Pobierz darmowy fragment (pdf)