Szybkie projektowanie we Flash CS5 dla Androida


Aplikacje na Android kładą nacisk na dostarczanie określonych treści. Na przykład, chcesz aplikację do gry w karty, inną do czytania nagłówków wiadomości i inne dla pokazywania horoskopów, pogody itp. Wszystkie one są niewielkie. Wynika z tego ,że można rozwijać aplikacje na Android szybciej. Tu nauczymy się jak szybko prototypować i budować aplikacje na Android z małym lub bez kodu.
Tworzenie treści na telefon z Androidem , który nie wymaga programowania
Flash CS5 pozwala ci tworzyć rozwiązania, które będą się uruchamiały na Androidzie , a które nie wymagają żadnego programowania. Tu nauczymy się jak tworzyć rozwiązania bez stosowania ActionScript. No może będzie trochę AS, ale niewiele. Zobaczysz jak animacje i wideo mogą być użyte bardzo łatwo dla stworzenia rozwiązania na Android. Źródłem sukcesu Flash jest szeroki zakres wyrafinowanych multimediów. Oto techniki multimedialne we Flash CS5:
- Tworzenie animacji
- Odtwarzanie dźwięku w tle
- Prezentacja wideo
- Praca z 3D
Wiele z tych technik multimedialnych będzie ci znanych jeśli pracowałeś wcześniej z Flash CS3 czy CS4. System Android daje ci jednak wyzwanie, jakich nie mogłeś oczekiwać przy projektowaniu Flash dla stron internetowych na komputerach stacjonarnych. Android działa zazwyczaj na wolniejszym CPU z ograniczonym graficznymi ulepszeniami.
Techniki animacji jakich powinieneś użyć na urządzeniach przenośnych
Flash dostarcza ci wielu technik animacji jakich możesz użyć .Od najprostszej animacji poklatkowej do technik Classic Tween i Motion Tween. nazym celem jest pokazać ci technik animacji jakie mogą być zastosowane bez dodawania ActionScript. Każda technika będzie oceniana pod kątem działania na urządzeniach z system Android. Mamy trzy podstawowe techniki animacji :
• Animacja poklatkowa
• Classic Tween
• Motion Tween
Każda z tych technik może być podrasowana dla uruchomienia na telefonie z Androidem. Dobra wiadomość jest taka ,że nie trzeba robić zbyt wielu modyfikacji.
Animacja poklatkowa
Pierwszą z tych technik jest animacja poklatkowa. Jest to stara technika z klasycznych dni początów animacji z końca XIX wieku, z niesławnym Zoetrope. Założenie jej to :
1.Tworzenie rysunków, takich jak motocykl
2.Kopiowanie rysunku i jego nieznaczna modyfikacja
3.Kopiowanie drugiego rysunku z modyfikacją
4. Powtarzanie
5.Dodanie wszystkich klatek w sekwencję filmu
Voila! Mamy swoją animację poklatkową. Celem jest zachowanie zmian ilustracji klatka po klatce dla odzwierciedlenia zmian w ogólnej animacji. Do czasu kiedy osiągnie końcową klatkę i zacznie odtwarzać ponownie wszystkie klatki. Animacja klatkowa jest najstarszym typem animacji wspieranym przez Flash Historia technik sięga 1997 roku kiedy Flash był nazywany FutureSplash. W związku z tym istnieje wiele wspaniałych narzędzi we Flashu które pozwalają łatwo stworzyć animację poklatkową. Zacznijmy od dodania animacji klatkowej do Flasha.
1.Otwieramy Flash CS5 i wybieramy szablon AIR for Android. Wybieramy szablon domyślny i zapisujemy plik jako FrameAni.xfl, używając nowego nieskompresowanego formatu plików we Flashu CS5
2. Do tego przykładu użyjemy pliku Android.png . Wybieramy File → Import → Import to Stage&hellip';
3.Wybieramy Android.png i importujemy go na naszą scene. Będziemy mieli dwie warstwy jak pokazano tu : Start do animacji. Górna warstwą jest logo Androida a druga warstwą tekst
4.Celem animacji jest obrócenie logo Androida. Zaczniemy od wybrania klatki w warstwie Image w panelu Timline : Wybór klatki 2.
5.Klikamy prawym klawiszem myszki i wybieramy opcję Keyframe. Klatka kluczowa jest specjalną klatką, która kopiuje zawartość poprzedniej klatki i dodaje do nowej. Wtedy w nowej klatce możemy zastosować zmiany dla klatki. W tym przypadku, dodamy niewielki obrót na rysunku
6.Logo powinno być zaznaczone na Stage. Naciśnij Q aby zmienić kursor na kursor Free Transformation. Z tym aktywnym kursorem możemy obracać logo przez zaznaczenie prawego górnego rogu obrazka
7.Wybieramy ikonę i obracamy bardzo niewiele, jak pokazano to tu : Obrót narzędziem Free Transformation.
8.Wybierz klatkę 3 w linii czasowej Image i wybierz polecenie Insert Keyframe. Obraz będzi skopiowany z poprzedniej klatki. Wybierz obraz i obróć go
9.Wykonuj ten proces dopóki ikona Androida nie wykona pełnego obrotu. Powinno to zająć około 3 klatek.
10.Wybierz CTRL-ENTER (PC) lub CMD+ENTER (Mac) aby przetestować filmik. Zobaczysz nazwę Android pokazującą się i znikającą - można to łatwo zmienić.
11.Wybioerz warstwę nazwaną text. Wybierz końcową klatkę w warstwie Image i wybierz F5 dla szybkiego dodania klatki. Klatka , którą dodałeś nie jest klatką kluczową,ale klatką rozszerzaną tak długo jak tekst jest na ekranie : Klatka z tekstem.
12.Przetestuj swój filmik ponownie. Zobaczysz animację i tekst na ekranie. Udostępnij filmik na telefon z Adroidem aby zobaczyć wydajność animacji.
Android OS lubi animacje poklatkowe kiedy używamy obrazków PNG. Powód jest taki ,że animacja pokaltkowa jest najbardziej podstawową animacją we Flashu. Jak widać animacja poklatkowa może być uciążliwa i skomplikowana. Każdy niewielki błąd może powodować godziny przeróbek. To dlatego we Flashu można wykorzystać animację Tween. Jest to technika , gdzie animacja jest dodawana przez Flash między dwoma punktami. Flash wspiera dwie różne techniki Tween : Classic i Motion
Wykorzystanie technik Classic Tween
Jak wskazuje nazwa, Classic Tween jest techniką , która została dołączona do Flash od jego pierwszego wydania, i jest "klasyczną" techniką animacji we Flash. Classic Tween wymaga dwóch klatek kluczowych w warstwie na osi czasu. Przejdźmy przez ten proces
1.Zaczniemy od stworzenia nowego filmiku AIR for an Android. Zapisz plik i nazwe jako classicTween.xfl
2.Zaiportuj logo Android i tekst
3.Nazwa warstwy logo to "logo"
4.Wybierz logo Android. Kliknij prawym klawiszem myszki i wybierz, Convert to Symbol. Nazwij nowy symbol "android". Classic Tween wymaga aby użyć albo symbolu Graphic lub Movie Clip w sekwencji animacji : Classic Tween.
5.Wybierz Frame 30 na warstwie logo w panelu Timeline
6.Kliknij prawym klawiszem i wybierz Insert Keyframe : Insert Keyframe.
7.Mamy teraz zdefiniowane dwa punkty w czasie : pierwszą i 30 klatkę
8.ustawmy sekwencję animacji dla wycieniowania logo. Zaznacz klatkę 30 warstwy logo
9.Otwórz panel Properties. W sekcji Color Effect, wybierz Alpha z menu Style : Właściwość Alpha.
10.Zmień pozioom Alpha na zero. To uczyni animację niewidoczną
11.W tym czasie, jeśli odtwarzasz animację, wszystko co zobaczysz to logo na ekranie przez większość animacji i mrugającą na końcu. to nie to czego chcemy .Dodajmy Classic Tween dla kontroli animacji.
12.Zaznacz klatkę 1 warstwy logo w timeline
13.Kliknj prawym klawiszem myszy i wybierz Create Classic Tween : Classic Tween w pierwszej klatce
14. Teraz zobaczysz cieniowanie w kaltce 1 i 30 ze strzałką w nich. Odtwórz animację. Teraz zobaczysz logo blednące w trakcie aniamcji : Classic Tween i bleknięcie aniamcji
15.Zaznacz warstwę nazwaną text. Wybierz końcową klatkę warstwy Image i wybierz F5 dla szybkiego dodania klatki. Nie jest to klatka kluczowa ale klatka ,która będzie się rozszerzała tak jak długi jest tekst
Jak widzisz , jest to podstawowa animacja Tween. To co odkryjesz pracując z techniką Classic Tween, jest to ,że staje się znacząco trudniejsza kiedy wykonujemy złożoną animację. W tym miejscu nadchodzi Motion Tween.
Użycie Motion Tween
Technika Motion Tween została dodana do Flash CS4. Jest bardzo łatwa do użycia. Możesz stworzyć ponownie efekt animację w kilku krokach, niż robi to Classic Tween. Zademonstrujemy to ,tworząc sekwencję animacji jaką wykonaliśmy w Classic Tween
1.Stwórz nowy szablon AIR for Android we Flash CS5 i zapisz szablon jako motionTween.xfl
2.Skopiuj logo Android do pliku motionTween.xfl
3.Kliknj prawym klawiszem na logo Android. Pamiętaj, tym razem, logo jest jeszcze ilustracją i nie może być skonwertowane do symbolu Library. Skonwertuj logo Android do symbolu
4.Kliknij prawym klawiszem myszki na symbolu logo Android na scenie i zaznacz opcję Create Motion Tween : Create Motion Tween
5.Pojawi się niebieska linia długości 24 klatek w tej samej warstwie jak logo. Tym razem twoja animacja będzie się uruchamiała. 24 klatki odzwierciedlają 1 sekundę animacji : 24 klatki
6.Wybierz końcowa klatkę w niebieskiej linii. NIE wstawiaj klatki kluczowej. Przy zaznaczonej klatce końcowej, otwórz panel Properties i zmień poziom Alpha dla obrazu na 0
7.To wszystko - przetestuj swoją nową animację
Technika animacji Motion Tween pozwala we Flash CS5 na dużo łatwiejsze tworzenie złożonych sekwencji animacji. Pójdźmy dalej i zmodyfikujmy nowe Motion Tween na logo, aby sprawdzić jak wielką możemy mieć kontrolę
1.Zazancza klatkę 12 na timeline loga. Powinno to być środek naszego Motion Tween. Przeciągnij logo Android do dolnego lewego rogu
2.Po przeciągnięciu logo zobaczysz linię jaka się pojawiła na ekranie pokazującą ścieżkę animacji jaką tworzysz. Ta nowa ścieżka jest nazywana Animation Spline : Animation Spline. Jest to ścieżka matematyczna, która pozwala zobaczyć co się dzieje z animacją. Dodatkowo, zobaczysz mały, czarny diament pojawiający się na klatce. Jest to wizualny wskaźnik, że robiłeś coś na klatce.
3.Przetestuj filmik. Logo będzie się odbijać w górę i w dół wzdłuż Animation Spline. To dobrze, ale co jeśli zechcemy dodać więcej animacji?? Metoda Classic Tween wymaga dodania więcej klatek kluczowych; Motion Tween tego nie wymaga
4.Zaznacza klatkę 6. Przeciągnij logo do górnego lewego rogu sceny. Zauważ ,że Animation Spline jest automatycznie aktualizowany dla odzwierciedlenia nowej ,zmodyfikowanej ścieżki animacji : Ścieżka animacji
5.Zaznacz klatkę 18. Przeciągnij logo do górnego prawego rogu sceny. Ponownie, Animation Spline aktualizuje się , bez konieczności dodania dodatkowych klatek kluczowych : Przesunięcie Motion Tween
6.Odtwórz filmik. Voila!
Ok, widziałeś jak możesz dodać nowe punkty w linii czasu Motion Tween gdzie coś się wydarza. W tym przypadku, "coś" jest po prostu przesuwaniem logo wokół ekranu. Ale Motion Tween nie kończy się na tym. A co jeśli chcemy przedłużyć czas naszej sekwencji animacji lub zmienić umiejscowienie animacji na ekranie? Mamy do tego narzędzia. Aktualnie animacja na ekranie pozostaje przez 1 sekundę. Jest to zdefiniowane przez dwie wartości : ogólny wskaźnik klatki domyślnego filmu AIR for Android to 24 klatki na sekundę (fps) i Motion Tween w linii czasu której długość wynosi dokładnie 24 klatki.
1.Długość czasu animacji na ekranie może być modyfikowana przez wybranie dalekiej prawej kaltki Motion Tween w warstwie logo i przeciągnięcie jej. Przeciągnij ostatnią klatkę Motion Tween do klatki 96 : Powiększanie Motion Tween
2.Następnie, przenieśmy całą animację z bieżącej pozycji na ekranie do różnych pozycji. Aby to zrobić, zaznacz zielony Animation Spline i przeciągnij ją. Zobaczysz , że cała ścieżka animacja została przeniesiona jak przeniósł się Animation Spline : Całe Motion Tween
3.Odtwarzanie animacji
Sekwencja animacji trwa teraz 4 sekundy. Można zauważyć ,że animacja jest płynna. Wszystko co musisz zrobić, to przedłużyć okres czasu animacji. Nie redukujesz szybkości klatek. Ponadto, podczas gdy logo jest nadal tą samą ścieżką animacji ,jaką ustawiłeś pierwotnie, cała ścieżka została przesunięta a nowy punkt animacji również został dołączony. Te dwa proste kroki (zmiana całego czasu trwania sekwencji animacji i zmiana położenia całej animacji) mogą być wykonane w technice Classic Tween ale będzie to wymagało dodatkowych kroków. Na pewno nie będziesz mógł wykonać tych zmian z trzech krokach.
Narzędzia Subse;lection i Free Transform mogą być również użyte dla dodania więcej szczegółów do ścieżki animacji. Narzędzie Subselection pozwala ci zaznaczyć punkty wektora w animacji. Każdy wektor , który może być zmodyfikowany jest podświetlony z zieloną kropką w Animate Splite. Z zaznaczonym możesz wypchnąć i zmodyfikować krzywą animacji. Narzędzie Free Transformation pozwla ci zaznaczyć całe Animation Splite i rozciągać, pochylać i obracać Spline jeśli byłaby pojedynczym obiektem. Przejdziemy przez te kroki dla zastosowania narzędzia Subselection i Free Transform w twojej ścieże Animation Splite Motion Tween
1.Użyjemy animacji stworzonej z Moton Tween. Teraz , odtwarzając animację, ruch jest bardzo kanciasty
2.Z panelu Tools wybierz narzędzie Subselection (naciśnij A dla skrótu klawiaturowego) : Narzędzie Subselection
3.Przy aktywnym narzędziu Subselection, wybierz i przytrzymaj zieloną kropkę w Animation Spline. Przeciągnij lekko aby pokazać uchwyty podzaznaczania
4.Kliknij, przytrzymaj i przeciągnij uchwyty podzaznaczania dla modyfikacji kształtu krzywej. W tym miejscu modyfikujesz łuk krzywej
5.Wybierz drugi punkt na Animate Spline i zmień łuk animacji
6.Teraz wybierz narzędzie Free Trnasform z panelu Tools (lub naciśnij przycisk Q dla skrótu klawiaturowego) : Narzędzie Free Transform
7.Zaznacz dowolny punkt w animacji. Cała Animation Spline będzie podświetlona z uchwytami zmiany rozmiaru i obrotu
8.Przenieś kursor nad prawy górny róg dopóki kursor nie zmieni się w obracającą się ikonę. Obróć ścieżkę animację. Zauważ ,że całą Animation Spline obraca się, a nie tylko jedną klatkę nad jaką pracujesz : Obrócona ścieżka animacji
9.Przy narzędziu Free Trnasform już zaznaczonym, kliknij i przeciągnij górny uchwyt wyśrodkowany zmiany rozmiaru zwiększając rozmiar obiektu
10.Odtwórz aniamcję. Zobaczysz ,że cała sekwencja animacji została zmieniona przez kontrolki narzędzia Free Transform
Ale można więcej. Motion Tween ma własny edytor, który pozwala modyfikować dalej animację
Praca z Motion Editorem
Motion Editor jest narzędziem, które Adobe stworzył dla dostosowania swojego Animation Spline. : Motion Editor
Motiom Editor ma główne sekcje :
• Modyfikowanie wartości właściwości da Tween
• Dodawanie i usuwanie klatek kluczowych
• Wskaźnik do podglądu zmian
Wybierając dowolny punkt w Motion Tweek na scenie a ustawienia zostaną zaktualizowane w Motion Editor. Narzędzie Motion jest podzielone na pięć głównych obszarów:
• Basic Motion
• Transformation
• Color Effect
• Filters
• Eases
Konwersja Motion Tween do ActionScript
Różnica między Classic Tween a Motion Tween tkwi w tym jak animacja została skonstruowana. Przy animacji Classic Tween jest dyktowana przez linię czasową. W Motion Tween animacja jest tworzona matematycznie. Porównania Classic Tween z Motion Tween jest jak porównanie obrazu bitmapowego z obrazem wektorowym :pierwszy jest zbudowany z klatek a drugi zbudowany matematycznie. W rzeczywistości Motion Tween jest cały sterowany przez pierwszą klatkę sekwencji Motion Tween. Liczba klatek kontroluje tylko jak długo animacja jest odtwarzana ale nie koniecznie kontroluje transformację w animację. Aby to zademonstrować, Adobe dołączył Copy Motion jako funkcję ActionScript 3.0, która pozwala ci kopiować dowolny Motion Tween na scenę do ActionScript. Posiadanie Motion Tween w ActiponScript pozwala ci rozszerzyć funkcjonalność sekwencji animacji poza to co jest możliwe z narzędziami Timeline i Motion Editor. Na przykład, możesz chcieć wyzwolić klip dźwiękowy do odtworzenia kiedy animacja została ukończona. Kopiowanie ActonScript wymaga wymaga tylko abyś miał Motion Tween na scenie. W poniższym przykładzie jest prosty kształt, który jest przenoszony z jednego położenia do drugiego. Kliknij prawym klawiszem myszki na Animation Splite a zobaczysz opcję nazwaną Copy Motion as ActionScript 3.0. Zaznacz tą opcję. Otwórz edytor tekstu i wklej ActionScript do niego : Motion Tween z ActionScript. Pownieneś zobaczyć coś podobnego do tego:
import fl.motion.AnimatorFactory;
import fl.motion.MotionBase;
import fl.motion.Motion;
import flash.filters.*;
import flash.geom.Point;
var __motion_myMovie:MotionBase;
if(__motion_myMovie == null) {
__motion_myMovie = new Motion();
__motion_myMovie.duration = 24;
// Wywołanie overrideTargetTransform do zabezpieczenia
wartości skali, pochylenia,
// lub obrotu rotation values z odniesieniem w stosunku do
// oryginalnej transformacji obiektu.
// __motion_myMovie.overrideTargetTransform();
// Poniższe wywołanie addPropertyArray przypisuje wartości danych
// dla każdej właściwości tweened . Jest jedna wartość w Array
// dla każdej klatki w tween, lub mniej jeśli ostatnia wartość
// pozostaje taka sama dla reszty klatek
__motion_myMovie.addPropertyArray("x", [0,13.0435,
26.087,39.1304,52.1739,65.2174,78.2609,91.3043,104.348,
117.391,130.435,143.478,156.522,169.565,182.609,195.652,
208.696,221.739,234.783,247.826,260.87,273.913,286.957,
300]);
__motion_myMovie.addPropertyArray("y", [0,2.73913,
5.47826,8.21739,10.9565,13.6957,16.4348,19.1739,21.913,
24.6522,27.3913,30.1304,32.8696,35.6087,38.3478,41.087,
43.8261,46.5652,49.3043,52.0435,54.7826,57.5217,60.2609,
63]);
__motion_myMovie.addPropertyArray("scaleX",
[1.000000]);
__motion_myMovie.addPropertyArray("scaleY",
[1.000000]);
__motion_myMovie.addPropertyArray("skewX", [0]);
__motion_myMovie.addPropertyArray("skewY", [0]);
__motion_myMovie.addPropertyArray("rotationConcat",
[0]);
__motion_myMovie.addPropertyArray("blendMode",
["normal"]);
__motion_myMovie.addPropertyArray("cacheAsBitmap",
[false]);
// Create an AnimatorFactory instance, which will
manage
// targets for its corresponding Motion.
var __animFactory_myMovie:AnimatorFactory = new
AnimatorFactory(__motion_myMovie);
__animFactory_myMovie.transformationPoint = new
Point(0.499826, 0.500000);
// Call the addTarget function on the AnimatorFactory
// instancja do celu DisplayObject z tym Motion.
// Drugi parametr jest liczbą czasu animacji
// jaka będzie odtwarzana - wartość domyślna 0 oznacza ,że będzie w pętli
// __animFactory_myMovie.addTarget(, 0);
}
Jeśli obiekt animowany na Scenie nie ma ID, jeden będzie automatycznie generowany dla niej. ActionScript jest zbudowany z trzech głównych sekcji:
• Linie 1-5 importują dodatkowe klasy animacji, które są stworzone przez Adobe dla animacji. Redukuje ilość pracy jaka jest potrzebna dla wykonania animacji
• Instrukcja IF zaczyna się od linii 7 opsiując animację dla obiektu nazwanego myMovie na scenie
• Wynikiem tego jest opis kluczowych ruchów obiektu. Dla tego przykładu animacji jest to bardzo proste - tylko właściwości X i Y zostały zmodyfikowane. Bardziej złożone animacje wymagają dodatkowych opisów właściwości
Pracując z Motion Tween, Motion Editor i ActionScript dają dokładną kontrolę nad animacją. Jednakże animacja Motion Tween wymaga więcej większego graficznego przetwarzania przez telefon z Androidem. Aby zarządzać doświadczeniami i oczekiwaniami klienta, utrzymuj mniej niż 20 sekwencji animacji Motion Tween na ekranie w tym samym czasie. Z większą ilością sekwencji animacji uruchomionych jednocześnie pojawi się znaczny spadek liczby klatek na sekundę w telefonie z Androidem
Kontrolowanie dźwięku
Dźwięk jest obszarem gdzie Android przoduje. Są trzy dobre powody dlaczego dźwięk jest tak tak dobry
- Android OS ma wbudowany odtwarzacz MP3
- Każdy Android ma głośniki
- Wyjście audio (słuchawki)
Android ma oddzielną klasę ,multimedialną do obsługi audio. Ta klasa może być wykorzystana przez Flash dla odtwarzania zawartości. Nie będzie wielką niespodzianką lista plików odtwarzanych na Androidzie : AAC LC/LTP, HE-AACv1(AAC+),HE-AACv2, AMR-NB, MP3, MIDI, Ogg Vorbis, PCM/Wave. Jeśli pracujemy z Flash , widać znajome typy plików, takie jak MP3, WAV i MP4(i mobilna wersja MPEG4 nazywana 3GP). Dodatkowo widać , format dźwiękowy open source Vorbis. Vorbis nie jest wspierany w filmikach Flash. Chociaż Android wspiera ten format, odtwarzacz AIR for Android nie. Flash daje ci kilka sposobów podłączenia w filmie.:
• Bezpośrednie importowanie audio do biblioteki
• Kontrolowanie audio z komponentami multimedialnymi
• Wykorzystanie ActionScript do kontroli audio
Dzięki stosowaniu tych technik można zastosować dokładną kontrolę nad dźwiękiem w technologii Flash.
Dodawanie dźwięku do Flash
Dodawanie dźwięku do Flash nie zmieniło się wiele przez lata. Jeśli dodawałeś pliki do Biblioteki, już wykonałeś kroki potrzebne do połączenia klipu dźwiękowego. Możesz zaimportować pliki dźwiękowe do Flasha przez wybranie File → Import → Import to Library … i wybranie pliku dźwiękowego. Oto lista formatów plików wspieranych przez Flash : Lista formatów plików we Flash
- ASND (Widows lub Macintosh), natywny format dźwiękowy Adobe Soundbooth
- WAV (tylko Windows)
- AIFF (tylko Macintosh)
- mp3 (Windows lub Macintosh)
Jeśli masz zainstalowany QuickTime 4 lub późniejszy w systemie, możesz zaimportować dodatkowe formaty plików :
- AIFF (Windows lub Macintosh)
- Sound Designer II (tylko Macintosh)
- Sound Only QuickTime Movies (Windows lub Macintosh)
- Sun AU (Windows lub Macintosh)
- System 7 Sounds (tylko Macintosh)
- WAV (Windows lub Macintosh)
Kiedy wybierzesz dźwięk w jednym z tych formatów audio, zobaczysz go w Library. Mała ikona głośnika będzie powiązana z tym plikiem. Możesz wybrać i odwarzać klip audio bezpośrednio w Library : Pliki dźwiękowe w Library . Domyślnie, nazwa dla pliku dźwiękowego będzie taką samą nazwę jak zaimportowany plik. Podwójne kliknięcie nazwy w Library pozwoli ci zmienić nazwę na bardziej znaczącą. Wykonaj te kroki aby zaktualizować plik dźwiękowy jaki zaimportowałe
1.We Flash, otwórz Library. Zaznacz dźwięk jaki chcesz zmodyfikować. Wybierz przycisk Play w poprzednim oknie dla testowania klipu dźwiękowego
2.Kliknij prawym klawiszem myszki na klipie dźwiękowy .Masz trzy opcje , które są szczególnie ważne : Edit with… , Edit with Soundbooth, Update : Opcje w Library
3.Jeśli masz Adobe Soundbooth zainstalowany na komputerze możesz wybrać Edit with Soundbooth. Otworzy to Soundbooth na komputerze z plikiem dźwiękowym z Flash Library. Możesz nawet edytować ten plik. Wybierz opcję Save zachowując zaktualizowany plik bezpośrednio we Flash
4.Jeśli nie masz zainstalowanego Soundbooth, wtedy możesz wybrać dowolny inne narzędzie do edycji audio. Użycie opcji Edit with… pozwlając ci użyć dowolnego innego narzędzia do aktualizacji klipów dźwiękowych. Plik będzie zapisany bezpośrednio we Flash
5.Oprócz tego, możesz zmienić oryginalny plik na dysku twardym i zaktualizować plik we Flash. Zaimportowany plik dźwiękowy nie zgubi swojego połączenia z oryginalnym plikiem dźwiękowym na twoim dysku twardym. Jest to bardzo przydatne kiedy wiesz ,że będziesz zmieniał oryginalny plik dźwiękowy ale potrzebujesz dźwięku zastępczego dopóki nie będzie ostatecznej wersji. Po dokonaniu aktualizacji do oryginalnego pliku, wybierz Update… we Flash. Otworzy się okno Update Library Items. Wybierz OK
Teraz kiedy mamy plik w bibliotece, możesz użyć go w swojej aplikacji. Pierwsze miejsce gdzie możesz zobaczyć swoje pliki dźwiękowe działające w Flash jest linia czasu.
1.Otwórz panel Timeline
2.Wybierz klatkę 1 domyślnej linii czasu
3.W panelu Properties, rozszerz sekcję Sound. Pierwszą opcją jest rozwijane menu nazwane Name. Wybierz to menu aby zobaczyć różne pliki dźwiękowe w bibliotece
4.Wybierz plik
5.Aby łatwiej zobaczyć plik dźwiękowy w linii czasu, dodaj dodatkowe klatki do warstwy na której pracujesz (naciśnij F5)
6.Wizualna kopia tego pliku dźwiękowego jest teraz wstawiona do linii czasu
7.Przetestuj filmik a usłyszysz klip dźwiękowy
Zwróć uwagę ,że plik audi nie brzmi tak samo jak plik oryginalny kiedy testowałeś filmik. Jest tak ze względu na ustawienia we Flash. Flash będzie konwertował plik audio do formatu 16 kbps MP3. Możesz to zmienić:
1.Wybierz File → Publish Settings…
2.Otworzy się okno Publish Settings
3.Wybierz zakładkę Flash
4.W sekcji Images and Sounds Publish Settings Flash wybierz przyciski Audiio Stream i Audio Event Setting : Publish Settings . Otworzy się okno Sound Settings
5.Zmień bitrate na 128 kbps : Audio Stream i Events. Jest to odpowiednik jakości dźwięku CD
6.Wybierz OK i opublikuj swój filmic. Usłyszysz teraz ,że dźwięk brzmi lepiej
Praca z ActionScript
Jak sobie możesz wyobrazić, możesz użyć ActionScript dla sterowania plikami audio. Ale teraz nie będziemy się w to zagłębiali. Pokażemy jednak co można zrobić z ActionScript bez wykonywania dużo pracy. W tym przykładzie mamy zamiar użyć panelu Code Snippets dla wykonania lekkiego liftingu. Code Snippets jest miejscem gdzie masz dostęp do powszechnie używanych kodów ActiponScript. Przyjrzyjmy się jak dodać odtwarzanie MP# przy użyciu ActionScript bez pisania zbyt wiele kodu ActionScript
1.Zacznij od stworzenia nowego pliku AIR for Android
2.Zaiportuj logo Android. Kliknij na nim prawym klawiszem myszki i skonwertuj do symbolu Movie Clip
3.Wstawka wymaga aby symbol miał nazwę. Wybiersz symbol logo na scenie. Otwórz panel Properties i nadaj nazwę symbolowi playSound
4.Przy wybranym symbolu playSound, otwórz panel Code Snippets : : Code Snippets.
5.Rozwiń Audi and Video
6.Kliknij podwójnie Click to Play/Stop Sound
7.Przetestuj filmic. Zobaczysz , że kiedy klikniesz filmik playSound, zacznie się odtwarzać plik dźwiękowy. Naciśnij klip ponownie, a dźwięk zostanie zatrzymany
Prawdopodobnie zauważyłeś ,że kiedy dodałeś wstawkę, otworzyło się okno Actions. Został dodany poniższy kod ActionScript:
playSound.addEventListener(MouseEvent.CLICK,
fl_ClickToPlayStopSound);
var fl_SC:SoundChannel;
var fl_ToPlay:Boolean = true;
function fl_ClickToPlayStopSound(evt:MouseEvent):void
{
if(fl_ToPlay)
{
var s:Sound = new Sound(new URLRequest("http://
www.helpexamples.com/flash/sound/song1.mp3"));
fl_SC = s.play();
}
else
{
fl_SC.stop();
}
fl_ToPlay = !fl_ToPlay;
}
Na górze wstawki jest zbiór instrukcji wyjaśniających jak można zmodyfikować kod. Np. możesz zmienić URLRequest dla wskazania różnych plików MP3.
Kontrolowanie wideo
Wideo jest dużo w Sieci. Wystarczy spojrzeć na strony takie jak YouTube, Hulu i Vimeo. Zwierają one tysiące godzin wideo. Ale jaką zastosowano technologię? Jasne, Flash. Słyszałeś pewnie wiele o standardzie video HTML5; jednak rzeczywistość jest taka ,że Flash ma co następuje dla odtwarzania wideo:
-Spójne odtwarzanie
-Szerokie wsparcie dla standardów multimedialnych
-Zaawansowane sterowanie
W większości, Flash jest narzędziem jakiego używasz do połączenia plików wideo i odtwarzania przez odtwarzacz Flash SWF. Wideo w sieci jest sterowane przez CODEC. CODEC (Compression / Decompression) jest technologią używaną do przechowywania plików audio i wideo .Najpopularniejszy CODEC audio jaki znamy to MP3.Wideo pochodzi z dziesiątków różnych CODEC&ów./ Aktualnie odtwarzacz AIR for Android pozwala na odtwarzanie następujących formatów wideo:
- Flash Video VP 6
- MPEG- 4
Flash VP6 jest formatem wydanym z Flash Playerem 8. Odtwarzany jest tylko we Flashu.. Motion Pictures Expert Group jest liderem w standaryzacji CODEC′ów wideo. MPEG-4 jest aktualnie ustandaryzowany wydaniem tego format wideo. Firmy takie jak Apple, Microsoft i Adobe wspierają narzędzia do edycji i odtwarzania wideo MPEG-4. Jest również format zwany WebM. Jest to nowy format wideo wydany przez Google po przejęciu firmy On2. WebM jest standardem wspieranym przez Flash, Google Chrome i Mozilla Firefox 4.0+. Micorosft postanowił ,że IE 9 również będzie obsługiwał ten format. On2, firma która napisała format WebM, jest tą samą firmą która zaprojektowała dormat wideo Flash Video VP6. Innymi słowy, Adobe miał kontakty z firmą, która teraz jest częścią Google. Chociaż WebM nie jest obsługiwany przez AIR for Android, jasne jest "kiedy" a nie "czy" ten format będzie obsługiwany. AIR for Android wspiera zarównow Flash Video VP6 jak i MPEG-4
Dodawanie wiedeo do twoich filmików Flash
Jest dużo rzeczy jakie możesz zrobić z wideo we Flashu. Wiele można osiągnąć przez skorzystanie z ActionScript. Metoda ActionScript komplikuje się bardzo szybko. Na szczęście Adobe dołączyła zbiór komponentów , które pozwalają bardzo szybko wstawiać odtwarzacz wideo do Flasha. Komponenty Flash są narzędziami jakich możesz użyć dla dodania bogatej funkcjonalności do swoich filmików bez konieczności tworzenia narzędzia od podstaw. Przykładem jest kontrolka menu rozwijanego. Komponenty są umieszczone w panelu Component : Panel Component,gdzie mamy trzy grupy komponentów. Jedną, która nas teraz interesuje jest grupa nazwana Video. Wybierz komponent FLVPlayBack 2.5 i przeciągnij go na scenę : Flash Video Player. Zobaczysz ,że FVLPlayBack wygląda jak kontrolka odtwarzacza video. Ważne jest aby zapamiętać , że komponenty są tylko elementami Flash, które możemy modyfikować . To oddziela Flash od innych środowisk programistycznych które czynią trudniejszym modyfikowanie swoich głównych kontrolek. Wybierz FLVPlayeBack na scenie i otwórz panel Properties dla dostępu do właściwości komponentu. Komponent FVLPlayerBack posiada dużą liczbę właściwości jakie możesz modyfikować. Najczęstsze funkcje jakie będziesz dołączać to:
- Autoplay
-Cue points
-Preview
-Scale mode
-Skin
-Source
-Volume
Autoplay jest funkcją, która będzie uruchamiała odtwarzanie wideo automatycznie po załadowaniu filmu Flash. Cue points są punktami jakie możesz dodawać edytorem wideo lub przez ActionScript. Możesz używać cue points dla wyzwolenia zdarzenia . Np. wideo treningowe może zostać podłączone do interaktywnego quizu, odtwarzane kiedy odpowiedź będzie poprawna. Scale mode pozwala ci mieć plik wideo odtwarzany w skali rozmiaru komponentu FVLPlayerBack na scenie. Skin jest ogólnym tematem dla odtwarzacza wideo. Istnieją ponad trzy tuziny typów skórek. Każda skórka może mieć własny kolor. Prowadzi to do potencjalnie tysięcy wariantów. Właściwość source pozwala ci łączyć bezpośrednio plik wideo jaki chcesz załadować. Może to być FLV, 3GP lub DRM. Końcowym ustawieniem jest Volume. Tu możemy zdefiniować domyślną głośność dla pliku wideo

Praca w trzecim wymiarze
Świętym Graalem dla projektantów gier jest 3D. Możesz tworzyć 3D we Flash na kilka sposobów:
• Bezpośrednio we Flash CS5
• Pracując na innych narzędziach 3D
• Korzystając z klas open source
Dlaczego część o 3D jest na samym końcu? Otóż 3D może być programistycznie skomplikowane i dramatycznie zmniejszać wydajność rozwiązań na Androida. 3D jest skomplikowane i trudne w przetwarzaniu komputerowym. W przeciwieństwie do animacji i wideo, 3D dodaje cały nowy poziom złożoności dla osi Z, dla głębi. Modele 3D są konstruowane w oparciu o wielokąty trójkątne. Im więcej wielokątów, ty bardziej realistyczny obraz stworzony w 3D. Telefon z Androidem może obsługiwać model 3D, ale wiele milionów wielokątów przeniesionych do animacji 3D może go zatrzymać awaryjnie. Aby utrzymać optymalną wydajność dla 3D lub wyżej, trzeba będzie tworzyć proste modele 3D.
Narzędzi Flash dla 3D
Dwa proste narzędzia 3D jakich możesz używać we Flash to 3D Rotation i Translation dodane do Flash CS4. Te dwa narzędzia są bardzo podstawowymi narzędziami 3D pozwalającymi na doadwanie prostych efektów 3D do obiektów 2D. Na przykład, odtwarzacz wideo może obracać się w 3D na ekranie. Przejdźmy przez proces dodawania obrotu 3D do obiektu na scenie
1.Zaczynamy od stworzenia nowego pliku AIR for Android .Nazwiemy go Flash3D.xfl
2.Na scenie dodamy logo Androida. Konwertujemy logo do symbolu Movie Clip
3.Wybieramy klatkę 1 w linii czasu zawierającej logo Androida. Klikamy prawym klawiszem myszki i wstawiamy Motion Tween
4.Wybieramy końcową klatkę Motion Tween
5.Wybieramy narzędzie 3D Transform w panelu Tools
6.Klikamy logo Androida. Zobaczymy ikonę kształtu docelowego z krzyżykiem pojawiającym się na logo
7.Wybieramy górny wierzchołek krzyżyka. Klikamy i przeciągamu myszką w dół. Zobaczysz ,że logo zmienia perspektywę nad pionową przestrzenią 3D
8.Wybieramy lewą stronę poziomą krzyżyka. Klikamy i przeciągamy myszką przez ekran, Zobaczysz ,że logo zmienia perspektywę nad przestrzenią poziomą 3D
9.Zmainy zostały dokonane na ostatniej klatce Motion tween. Przetestuj filmik. Zobaczysz logo Androida obracające się w przestrzeni 3D.
"Rzeczywiste" 3D we Flashu na urządzeniach mobilnych
Są dwa sposoby dodania kompletnego modelu 3D do filmików Flasha. Narzędzem tym jest Swift 3D. Jego siła pochodzi od wielu sposobów w jaki można eksportować modele 3D. Wiele razy trzeba obiektu 3D aby poprawić projekt we Flashu. W tym celu Swift 3D pozwala na eksport projektu 3D jako filmiku 2D. Filmik jest skonstruowany z wielu klatek obrazów 2D. Kiedy go odtwarzasz, będzie wyglądał jak model 3D. Jest to fałszywe podejście do 3D ,ale jedynym, które będzie działało dla wielu scenariuszy. Jeśli potrzebujesz w pełni interaktywnego modelu 3D, Swift 3D również jest pomocny. Chociaż Flash natywnie nie wspiera rzeczywistego 3D, siła ActionScript pozwala na dodawanie 3D poprzez projekt open source o nazwie PaperVision 3D. PaperVisoin 3D jest środowiskiem klas, jakie możesz dodawać do filmików Flash. Zbiór tych klas pozwala ci ładować modele 3D w popularnym formacie plików Collada (pliki typu DAE). Swift 3D eksportuje pliki Collada do PaperVision 3D.





Statystyka generowana przez Reggi-Stat - www.reggi.pl