Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00322 005730 12761588 na godz. na dobę w sumie
wyszukaj dokładnie | pobierz wtyczkę
Android Flash. Zaawansowane programowanie aplikacji mobilnych - książka
Android Flash. Zaawansowane programowanie aplikacji mobilnych - książka
Autor: , , , Liczba stron: 368
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-3920-5 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> programowanie mobilne >> android
Porównaj ceny (książka, ebook, audiobook).
Czytaj online.
Komentuj

Wejdź w świat tworzenia oprogramowania dla urządzeń mobilnych!

Platforma Android z każdym dniem zdobywa tysiące kolejnych użytkowników. Andy Rubin - odpowiedzialny za nią w Google - pochwalił się aktywacją 700 tysięcy nowych urządzeń z tym systemem każdego dnia. Robi wrażenie? Pomyśl, jak wykorzystać ten rynek i stworzyć aplikację, która podbije serca użytkowników. Dzięki możliwości wykorzystania technologii Flash teraz jest to jeszcze łatwiejsze!

'Android Flash. Zaawansowane programowanie aplikacji mobilnych' to kompletny przewodnik po budowaniu skomplikowanych, zajmujących aplikacji dla Androida. Dzięki tej książce nauczysz się programować smartfony Android oraz tablety z wykorzystaniem najpopularniejszych frameworków służących do tworzenia bogatych aplikacji internetowych (RIA) dla Androida - Flash i Flex.

Gdy wraz z autorami przejrzysz już zestaw narzędzi programistycznych Flasha, dowiesz się, jak dodawać multimedia, animacje i efekty specjalne do aplikacji. Zrozumiesz, jak działa optymalizowanie dla różnorodnych wyświetlaczy oraz jak wykorzystać dane wejściowe pochodzące z aparatu, GPS, mikrofonu i akcelerometru. Poznasz metody tworzenia certyfikatów podpisywania kodu oraz uzyskiwania jak najlepszej wydajności aplikacji. Zapoznasz się z dużą ilością praktycznego, dobrze skomentowanego kodu i zbudujesz trzy kompletne projekty: program do rysowania, odtwarzacz muzyczny Flash oraz aplikację AIR przechowującą informacje o stanach witryn w bazie danych SQLite.

Sprawdź możliwości technologii Flash dla platformy Android.

Twórz atrakcyjne aplikacje mobilne za pomocą Flasha, Fleksa i Androida!

Znajdź podobne książki Ostatnio czytane w tej kategorii

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 PRZEKSZTA’CE” 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)

Gdzie kupić całą publikację:

Android Flash. Zaawansowane programowanie aplikacji mobilnych
Autor: , , ,
Sklep
Format
Cena
Helion.pl Helion.pl
książka
69,00 zł
Idź do sklepu »

Opinie na temat publikacji:

Inne popularne pozycje z tej kategorii:

Czytaj również:

Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: