Jeżeli ktoś chce się pobawić 3D we Flashu, Unity czy choćby w Photoshopie – na stronie BlackMoon’a można sobie ściągnąć low-poly model 3D. Darmowy, do wykorzystania prywatenie i komercyjnie. W sam raz do testowania i nauki.

Słowem wstępu

Od kiedy pojawiły się pierwsze wzmianki o środowisku które ujednolici proces tworzenia media playerów, wiedziałem że to będzie coś czym będzie warto się zainteresować. Dlaczego zabieram się do tego dopiero teraz, skoro używać tego można było już rok temu? Ano dlatego że niedawno wydano OSMF Sprint 10 (ver. 0.93), a w tym wydaniu nastąpił tzw API Lock-down, czyli API nie powinno się już zmieniać. To znaczy że przykłady pisane do tej wersji będą w pełni zgodne z następnymi wersjami. Zatem czym jest Open Source Media Framework (codename Strobe)? W uproszczeniu jest to framework który pomaga zająć się wszystkimi rzeczami, które powinno się zrobić raz i które powinny być stosowalne w każdym innym projekcie wykorzystującym media każdego typu. Bardziej konkretnie mówiąc to OSMF jest rozszerzalny za pomocą pluginów framework do tworzenia rozbudowanych odtwarzaczy różnego typu mediów, w różnych konfiguracjach, ze wsparciem predefiniowanych jak i własnych systemów reklam oraz wiele więcej. Został stworzony by ułatwić życie przy tworzeniu media playerów oraz skrócić czas ich developementu. Każdy kto tworzy video playery na pewno zna te problemy, z którymi się spotyka przy ich tworzeniu. Zabierają one czas, którego nie ma, a każdy następny video player, choć niby podobny to trzeba jak zawsze wiele rzeczy zmieniać

Podstawy

Teraz czas pokazać jak to się je. Może najpierw trochę o podstawowych elementach jakich użyjemy w przykładowym playerze.

• MediaElement – podstawowa klasa przechowująca informacje o medium, które chcemy odtworzyć. Wszystkie jej pochodne można dodać do MediaPlayer‘a. Oto kilka z subklas: VideoElement, AudioElement, SWFElement, ImageElement, ParallelElement oraz SerialElement.
• VideoElement – Jak napisałem w punkcie powyżej jest to podstawowy element tego co chcemy pokazać. Przy tworzeniu nowej instancji wystarczy podać URL video jako instancje URLResource.

  var videoElement:VideoElement = new VideoElement(new URLResource(VIDEO_URL));
  

• MediaPlayer – kontroler przez którego operujemy MediaElement‘em który załadowaliśmy. Ważnymi informacjami jakie możemy odczytać z mediaPlayer’a są tzw “traits”. Są to cechy mediaElement’u takie jak: canPlay, canPause, canSeek albo canLoad. Są one pomocne przy określaniu które elementy interfejsu mają być aktywne. Nowy element przypisujemy do właściwości media. Jeśli chcemy nasłuchiwać jak zmienia się stan naszego mediaElementu to wszystkie eventListenery przypisujemy przez MediaPlayer.

  var mediaPlayer:MediaPlayer = new MediaPlayer();
  mediaPlayer.media = videoElement;
  

• MediaContainer – Warto wspomnieć, że żadna z powyżej przedstawionych klas nie ma swojej wizualnej reprezentacji tzn nie dziedziczy po DisplayObject więc nie można jej dodać do sceny. I tutaj najwyższy czas na klasę która jest tym kontenerem, który renderuje wszystkie dodane media. MediaContainer dziedziczy po Sprite. MediaElement dodajemy przez metodę addMediaElement.

  var mediaContainer:MediaContainer = new MediaContainer();
  mediaContainer.addMediaElement(videoElement);
  addChild(mediaContainer);
  

User Interface

To tyle z takich najbardziej podstawowych elementów niezbędnych do stworzenia prostego video playera. Składając te elementy razem otrzymamy video wyświetlające podany film. Tylko nie mamy jeszcze możliwości operowania tym filmem. Cały UI musimy napisać sami gdyż jest to część niezależna od wyświetlanego video, a klasa MediaPlayer jest tylko interfejsem przez który sterujemy wyświetlanym kontentem. Dla mało wymagających jest biblioteka o nazwie ChromeLibrary która zawiera oprogramowany interfejs gotowy do wykorzystania. Można go znaleźć w ZIPie ze źródłami pod ścieżką: source/libs/ChromeLibrary/. Przykładowy player wykorzystujący ChromeLibrary jest do przejrzenia pod ścieżką: source/apps/samples/framework/OSMFPlayer. Wszystkie niezbędne informacje są w źródłach.

W moim przykładzie wykorzystuję MinimalComps autorstwa Keitha Petersa aka BIT-101. Jest to zestaw świetnych i bardzo prostych komponentów, które najlepiej sprawdzają się w aplikacjach testowych lub przykładowych. Dzięki temu do otworzenia tego przykładu nie potrzebujemy Flash’a. Wystarczy Flex SDK oraz wymagane biblioteki. Cały proces tworzenia UI jest wewnątrz funkcji createUI(). Wydaje mi się że opisywanie tej części nie jest potrzebne do zrozumienia tematu posta. Jeśli macie pytania, piszcie je w komentarzach.

Layout

OK, więc mamy już nasz film wyświetlony na scenie i gra. Współgra z nim user interface. Wygląda to tak:

Teraz chcemy sami określić w jaki sposób ma pojawiać się video w naszym playerze. Tutaj przychodzi z pomocą layoutMetadata. Jest to właściwość typu LayoutMetadata każdego obiektu ( implementującego ILayoutTarget. LayoutMetadata zawiera całą masę różnych parametrów, które ustawią nasz kontent.

Oto lista właściwości LayoutMetadata:

• horizontalAlign oraz verticalAlign (Przyjmują wartości stałych statycznych z klas HorizontalAlign orazVerticalAlign);
• x, y, width oraz height;
• percentX, percentY, percentWidth oraz percentHeight;
  
• scaleMode (Przyjmuje wartości stałych statycznych z klasy ScaleMode);
• layoutMode (Przyjmuje wartości stałych statycznych z klasy LayoutMode);
• left, right, top oraz bottom;
• paddingLeft, paddingRight, paddingTop oraz paddingBottom;
• snapToPixel
• includeInLayout
• synthesizer

Większości z tych właściwości nie trzeba wyjaśniać. Po resztę odsyłam do Language Reference.

W swoim przykładzie dodałem opcję dynamicznego zmieniania rodzaju skalowania video (kontrolka w prawym górnym rogu). Aby ustawić sposób wyświetlania jaki chcemy to musimy zmienić parametry właściwości layoutMetadata. W przypadku MediaElement musimy utworzyć nową instancję klasy LayoutMetadata, przypisać wszystkie wartości jakie chcemy, a na końcu skorzystać z metody addMetadata. Podany przykład wyłącza skalowanie (zoom = 100%) i ustawia video pośrodku kontenera:

//Przypisanie layoutMetadata do mediaContainera (MediaContaiener)
mediaContainer.layoutMetadata.width = videoCont.width;
mediaContainer.layoutMetadata.height = videoCont.height;
mediaContainer.layoutMetadata.scaleMode = ScaleMode.NONE;

//Przypisanie layoutMetadata do videoElementu przez addMetadata (MediaElement)
var layoutMetadata:LayoutMetadata = new LayoutMetadata();
layoutMetadata.scaleMode = ScaleMode.NONE;
layoutMetadata.width = videoCont.width;
layoutMetadata.height = videoCont.height;
layoutMetadata.horizontalAlign = HorizontalAlign.CENTER;
layoutMetadata.verticalAlign = VerticalAlign.MIDDLE;
videoElement.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layoutMetadata);

MediaElement

Teraz może trochę o klasach, które przechowują wszystkie informacje o tym, co chcemy wrzucić do media playera. Podstawową klasą jest MediaElement. Mając gotowe wszystkie elementy tj mediaPlayer oraz mediaContainer wystarczy tylko stworzyć nową instancję wybranej subklasy MediaElement‘u oraz dodać go do mediaPlayer‘a oraz mediaContainer‘a.

var myVideo:VideoElement = new VideoElement(new URLResource(VIDEO_URL))
mediaPlayer.media = myVideo
mediaContainer.addMediaElement(myVideo);

W ten sposób dodaliśmy video do mediaPlayer‘a, aby można było nim sterować, oraz do mediaContainer‘a, aby można było zobaczyć nasze video. Z tak niewielkim kawałkiem kodu dodaliśmy nowy element. Co ciekawe, równie łatwo możemy zmieniać aktualnie puszczane media. Należy tylko pamiętać aby usunąć poprzednio załadowane medium. Oto kod:

Przydałoby się również opisać po krótce resztę używanych tutaj MediaElement‘ów. Oto one:

• AudioElement - pozwala na odtwarzanie dzwięku zarówno streamingowanego jak i progresywnie ładowanego. Można załadować MP3 oraz AAC.
• ImageElement – dzięki niemu możemy pokazać obrazy wewnątrz naszego playera. Wspiera PNG, GIF oraz JPG.
• SWFElement – tutaj możemy załadować dowolny swf.
• ParallelElement – jak nazwa wskazuje, kilka elementów odtwarzanych jednocześnie. Np. zdjęcie z podkładem muzycznym albo wyciszone video z różnymi ścieżkami dźwiękowymi.
• SerialElement – element ten wyświetla dodane elementy jeden po drugim. Np. możemy połączyć kilka video w jedno.

Należy pamiętać że wszystkie ustawienia Layoutu opisane wcześniej, tyczą się również podanych tutaj MediaElement‘ów (jeśli jest taka możliwość, bo wiadomo że nie przeskalujemy odtwarzanej mp3 do wielkości kontenera). A właśnie. wyświetlając kilka różnych typów MediaElement‘ów możemy natrafić na taki problem. Chcemy wiedzieć tylko na podstawie MediaElement‘u jakie jego cechy są dostępne (Np. odtwarzanie/pauzowanie lub przewijanie)

Traits

Najwyższy czas na koncepcję Traits. Są to cechy danego elementu opisujące co on może robić. Mamy do nich łatwy dostęp przez serię właściwości MediaElement‘u. Oto kilka z nich: canPlay, canPause, canSeek oraz canLoad. Jeśli chcemy śledzić jak się one zmieniają i reagować na te zmiany (np aby wyłączyć elementy interfejsu niedostępne dla aktualnego elementu. Wystarczy dodać eventListenery do mediaPlayer‘a. Oto kod:

mediaPlayer.addEventListener(MediaPlayerCapabilityChangeEvent.CAN_PLAY_CHANGE, onCanPlayChange);
mediaPlayer.addEventListener(MediaPlayerCapabilityChangeEvent.CAN_SEEK_CHANGE, onCanSeekChange);

private function onCanPlayChange(e:MediaPlayerCapabilityChangeEvent):void
{
    playPauseBtn.enabled = e.enabled
    stopBtn.enabled = e.enabled
}

private function onCanSeekChange(e:MediaPlayerCapabilityChangeEvent):void
{
    progressBar.enabled = e.enabled
}

W ten sposób mamy pewność że każde odtwarzane medium ma poprawne dostępne kontrolki.

Źródła

Cały projekt nie wymaga posiadania Adobe Flash Professional CS4 ani żadnego innego. Wystarczy Flex SDK. Należy pamietać, że targetem jest Flash Player 10 i takiego wymaga OSMF. Oczywiście można skompilować go we Flashu. Wystarczy podać pełną nazwę klasy w Document Class oraz pamiętać aby dodać pliki SWC do Publish Settings.

Cała przykładowa aplikacja jest objęta licencją MIT, więc możecie dowolnie z niej korzystać w dowolnym celu.

Cała aplikacja (live): link;
Cała aplikacja (źródła): link;
OSMF: osmf.org;
OSMF downloads: link;
OSMF Language Reference: link;

Podsumowanie

Open Source Media Framework jest genialną rzeczą, która zwalnia nas z ciągłego zmagania się z tymi samymi problemami, pozwalając zająć się tym co ważne przy tworzeniu media playerów. Przyjazne oraz intuicyjne API zachęca do głębszego zapoznania się z ogromnymi możliwościami OSMF. Według mnie naprawdę warto! Jeśli jest coś co chcielibyście zobaczyć w kolejnym artykule, znaleźliście jakieś nieścisłości, niepełne wyjaśnienie albo cokolwiek co was intryguje, zostawcie mi wiadomość w komentarzu. Wszelkie pomysły oraz uwagi mile widziane.

Pozdrawiam,
Michał Wróblewski

Wprowadzenie

Adobe® Flash® Catalyst™ jest nowym narzędziem do szybkiego tworzenia interfejsów użytkownika bez potrzeby kodowania. Potrafi zamienić grafikę zaprojektowaną w jednym z popularnych narzędzi Adobe w aplikację z działającym interfejsem użytkownika, gotową do dalszej obróbki w Adobe® Flash® Builder™ 4.

Projektowanie

Pierwszą rzeczą jaką trzeba zrobić zanim użyjemy nowego narzędzia od Adobe jest zaprojektowanie wyglądu programu. Mamy kilka opcji do wyboru:

• Adobe Photoshop
• Adobe Illustrator
• Adobe Fireworks

Na początku spróbowałem zrobić to w Photoshopie. Po utworzeniu wszystkich efektów, cieniowania itp oraz wyeksportowaniu tego do Flash Catalyst, okazało się, że nowe filtry warstwowe wprowadzone w PS CS4 są w ogóle pomijane, wszystkie elementy wektorowe są rastrowane. Generalnie mówiąc – porażka. Radzę nie używać tej opcji do projektowania swoich aplikacji, chyba że chce mieć wszystko w nieskalowanych PNG (domyślacie się jak wygląda skalowany PNG). Niech Photoshop pozostanie do projektowania grafiki rastrowej.

Z tego powodu musiałem przenieść się do Illustratora. Nie używałem go wcześniej za często, więc zajęło mi to trochę więcej czasu. W końcu otrzymałem identyczny efekt jak w Photoshopie. Plik .ai przeniosłem do Flash Catalyst. Byłem zdumiony. Po pierwsze efekt, aplikacja wygląda tutaj identycznie jak w Illustratorze. Po drugie, w końcu mam wszystkie obiekty w wektorach, na których łatwo możemy robić animacje przejścia i skalowania. Po trzecie wynikowy plik nie waży już 2MB tylko 200kb (było kilka zaimportowanych plików PNG – które pozostały dostępne w bibliotece.

Pozostaje jeszcze jedna opcja – Adobe Fireworks. Ostatnio Adobe przygotowało spore uaktualnienie do wersji CS4. Dużo poprawek, co do ekspotowania do formatu FXG, o którym za chwilę. Został trochę pominięty w głównym oknie Flash Catalyst. Ma swoich przeciwników i zwolenników. Nie będę się wypowiadał na ten temat, bo po prostu nie znam możliwości Fireworks. Odsyłam za to do ostatniej części „Dowiedz się więcej”, do linku z oficjalną listą tutoriali na temat Adobe Flash Catalyst.

Jeszcze kilka uniwersalnych porad co do procesu projektowania. Co robić, aby jak najbardziej przyspieszyć i ułatwić sobie pracę w Flash Catalyst:

• Wszystkie elementy dziel na warstwy. Dotyczy to projektowania stanów przycisków, wszystkich elementów stron jakie mają się pojawić, jeśli mamy menu z różną zawartością. Przykładowe rozmieszczenie warstw możecie zobaczyć w plikach źródłowych i obrazku poniżej.
• Nie używaj Photoshopa.
• Dobrze przemyśl wszystkie elementy aplikacji. Mniej czasu zajmie Ci dodawanie nowych elementów w odpowiednie miejsca.

Adobe Flash Catalyst

Import

Otrzymany plik z zaprojektowanym wyglądem aplikacji możemy zaimportować po uruchomieniu Flash Catalyst klikając, w naszym przypadku, na pozycję pliku Illustratora:

Po zaimportowaniu pliku musimy sprawdzić czy wszystkie elementy są na swoim miejscu i czy wyglądają tak jak w oryginale. Jeśli wszystko jest OK, możemy zaczynać.

Prototypowanie przycisków

Najlepszą opcją dla przycisków jest przygotowanie wszystkich ich stanów tj. Up, Over, Down i ewentualnie Disabled. Następnie wrzucić je wszystkie do jednego folderu warstw i odpowiednio nazwać jak widać na rozkładzie warstw powyżej dla przycisku Exit. W takim przypadku utworzenie działającego przycisku sprowadza się do paru kliknięć.

1. Zaznaczamy katalog z warstwami przycisków.
   
2. Z menu które się pojawia po zaznaczeniu jakiegoś obiektu (Window -> HUD / F7) wybieramy Convert Artwork to Component i zaznaczamy opcję Button.
3. Teraz musimy przypisać odpowiednie warstwy do wszystkich stanów przycisków. Robimy to wybierając np. stan Over (u góry) i odznaczając widoczność warstw Up i Down. Robimy tak dla wszystkich stanów które przygotowaliśmy.
   
4. Przycisk gotowy!

W przycisku możemy dodać jeszcze jeden element, tj. Label. Musimy do tego mieć przygotowane pole tekstowe lub dodać je bezpośrednio w Flash Catalyst z narzędzi oraz mieć je widoczne na wszystkich warstwach. Zaznaczamy i z menu HUD i Convert Artwork to Button Part -> Label.

Dodatkowym przyciskiem do oznaczenia (bez stanów) jest ten, na dwu warstwach w RightPanel: expandBtn i expandBtnDots.

Jeszcze raz zaznaczę, że dobry rozkład i nazwy warstw znacznie przyspieszą pracę, jak widać na tym przykładzie.

Praca z prototypowaniem pozostałych komponentów wygląda dość podobnie.

• Zaznacz katalog z warstwami
• Skonwertuj do odpowiedniego komponentu
• Wyznacz wymagane elementy i/lub stany.

Prototypowanie paska przewijania i listy.

Pasek przewijania

Wszystko co znajduje się w katalogu Left Panel składa się na listę z tłem, element listy oraz pasek przewijania. Jeśli mamy zaprojektowany scrollbar musimy go najpierw skonwertować do komponentu Vertical Scrollbar:

1. Możemy to zrobić menu HUD oraz menu kontekstowego (p-klik) katalogu warstw nazwanego scrollBar -> Convert Artwork to Component -> Vertical Scrollbar.
2. W tym momencie pojawi nam się problem, ponieważ Flash Catalyst nie wie jeszcze który element za co ma odpowiadać. Musimy nacisnąć Edit Parts.
3. Najprościej jest, gdy każdy element jest dobrze nazwany. Wtedy z listy elementów edytowanego komponentu (tutaj: VerticalScrollbar2) zaznaczamy po kolei warstwy i określamy ich zadanie z menu HUD lub menu kontekstowego wybierając z listy Convert Artwork to Vertical Scrollbar Part odpowiednią część. Na obrazku mamy zaznaczony suwak (thumb) i wybieramy Thumb z listy.
4. Scrollbar gotowy! Możemy go przetestować tworząc plik .swf przez (Ctrl/Cmd)+Enter

Lista

Suwak niby działa, ale nie jest jeszcze przypisany do żadnej listy. Żeby to zrobić musi on być wewnątrz komponentu Data List. Aby utworzyć komponent z w pełni działającą listą:

1. Zaznaczamy cały katalog warstw
2. Konwertujemy go do Data List z menu HUD.
3. Znowu pojawi nam się błąd, więc Edit Parts.
4. Zaznaczamy katalog warstw renderItem i z menu HUD ustwiamy go jako Repeated Item.

Teraz powinno nam się pojawić kilka takich samych elementów jak widać na obrazku.

Element listy

W zaznaczonym elemencie listy (po konwersji) możemy zmienić rodzaj rozłożenia elementów listy. Do wyboru z pola Layout jest Vertical, Horizontal oraz Tile. Dla każdego możemy określić rodzaj wyrównania oraz odległości pomiędzy elementami.

Kiedy dwukrotnie naciśniemy element listy możemy edytować jego stany Normal, Hovered (Over) i Selected. Domyślnie do każdego elementu dodawane jest tło aby utworzyć prosty efekt. Żeby to wyglądało trochę lepiej możemy rozszerzyć pole rozjaśnienia tła do szerokości listy po bokach, do góry do krawędzi listy i do dołu do linii rozdzielającej. Oczywiście wszystko zależy od tego, jak wygląda wasz powtarzany element listy.

Póki co w tej wersji (Beta 1) jest jeszcze trochę problemów, więc wszystkie elementy trzeba dokładnie sprawdzić i ewentualnie ułożyć, jeśli zmienią swój rozmiar lub położenie. Trzeba pamiętać żeby nie kopiować i wklejać ponieważ mogą powstać z tego problemy. Np. zmieniony rozmiar pola tekstowego, po ponownym ustawieniu pozostanie zmieniony tylko w jednym stanie. Gdy go skopiujemy, usuniemy stary tekst i wkleimy nowy to spójrz poniżej, co się stanie w panelu z warstwami. Tekst w jednym i drugim stanie będzie osobnym i nie powiązanym ze sobą elementem.

Rozwiązania są dwa:

• Skopiuj i wklej w tym samym miejscu element i usuń stary. Wtedy będziesz miał skopiowany element na wszystkich stanach ale nie widoczny. Zmień wszędzie gdzie trzeba na widoczny.
• Druga opcja jest taka. Jeśli zmienisz rozmiar lub położenie jednego elementu, pamiętaj aby ustawić je we wszystkich stanach na takie same wartości.

Dane źródłowe do listy

Po sprawdzeniu wszystkich elementów, dopasowaniu rozmiarów i pozostałych rzeczy, lista działa łącznie z paskiem przewijania. Co zrobić gdy mamy za mało elementów w liście, aby przetestować scrollbar lub chcemy je zmienić? Gdy wyjdziemy do głównego kontenera listy i jej zaznaczeniu możemy wybrać panel Design-time Data. Jest to miejsce do modyfikowania danych dla wybranej listy. Kliknij kilka razy Add Row i po sprawie.

W tym momencie wszystkie elementy zostały poprawnie skonwertowane i działają poprawnie, co można sprawdzić przez (Ctrl/Cmd) + Enter. To co dalej musimy zrobić to określić wszystkie główne stany naszej aplikacji oraz przejścia pomiędzy nimi.

Adobe Flash Catalyst – Stany oraz przejścia (States and Transitions)

Określenie stanów

Wiadomo, że nasz program w każdym momencie nie będzie wyglądał tak samo, tzn. nie będzie miał takiego samego rozkładu elementów. Dla przykładu utworzymy 3 stany:

• Tylko lista z lewej strony
• Lista z krótkim opisem
• Lista z długim opisem

Dla pewności umieściłem to na obrazku:

To co wystarczy zrobić, to zadeklarować i nazwać nowe stany oraz ustawić widoczność wszystkich elementów zgodnie z potrzebami. Korzystamy z opcji Duplicate States.

Utworzone stany powinny wyglądać tak:

Dla każdego ze stanów musimy określić, które elementy chcemy w nim mieć. Zaznaczamy element i wygaszamy niepotrzebne elementy, tak jak na obrazku:

Oto lista rzeczy jakie trzeba zrobić dla każdego stanu:

1. list:
   1. Wyłącz widoczność katalogu warstw RightPanel.
2. shortDesc:
   1. Wyłącz widoczność katalogu warstwy RightPanel->extendedContent.
3. longDesc:
   1. Przesuń w pionie przycisk expandBtn do krawędzi listy po lewej.
   2. Rozciągnij elementy z warstw bg i bg_frame do przycisku expandBtn.

Stan longDesc zrób tak jak na obrazku. Przy dużym przybliżeniu można to zrobić bardzo dokładnie, bo pozycje i rozmiary program zaokrągla do całych pikseli.

Wprowadzenie gładkich przejść pomiędzy stanami

Ta część będzie robiona z użyciem listwy czasowej (timeline). Lecz nie ma ona niczego wspólnego z tym co jest we Flashu. Służy ona do połączenia jednego stanu z drugim. „Warstwy” na tym timeline’ie oznaczają wszystkie możliwe przejścia pomiędzy stanami. Skoro mamy 3 stany to powinno być 6 przejsć. I tak jest:

Najprostsze rozwiązanie teraz to dla każdego przejścia nacisnąć Smooth Transition. Domyśnie wszystkie ruchy, pojawianie się i znikanie będą trwały 0,5sec. O ile dla przejścia list -> shortDesc jest to do zaakceptowania, to dla przejścia shortDesc -> longDesc i odwrotnie już nie. Dlaczego? Użyjcie opcji Smooth Transition dla tych przejść i zobaczycie (użyj przycisku play na prawo od pola wyszukiwania w panelu Timelines.

Dla przejścia shortDesc -> longDesc najpierw tło musi się rozszerzyć, a później dopiero pojawia się tekst. Dlatego pola Fade In można przesunąć w prawo do uzyskania odpowiedniego efektu, np. tak jak na obrazku poniżej:

Tak samo postępujemy dla przejścia w drugą stronę. W tym przykładzie nie będziemy używać przejść poza tymi:

• list -> shortDesc
• shortDesc -> longDesc
• longDesc -> shortDesc

Przypisanie przejść do odpowiednich akcji.

Mamy zadeklarowane wszystkie stany, przejścia pomiędzy nimi. Brakuje tylko określenia kiedy te przejścia mają być wykonywane. Załóżmy, że przejście:

• list -> shortDesc – wykonywane będzie przy zaznaczeniu elementu listy
• shortDesc -> longDesc - kliknięciu przycisku extendBtn
• longDesc -> shortDesc – kliknięciu przycisku extendBtn

Więc zaznaczamy listę, i z menu HUD (F7) wybieramy Custom Operations -> On Selection Change. Tutaj wybieramy rodzaj akcji. W naszym przypadku jest to przejście pomiędzy stanami (Play transition to state). Teraz musimy określić stan docelowy (pierwsze menu rozwijane) i w którym stanie ma być to przejście aktywne (drugie menu rozwijane). Robimy tak jak na obrazku:

Teraz wystarczy oznaczyć akcje na extendBtn. Do jednego przycisku przypiszemy dwa przejścia, na tej samej akcji, w ten sposób, aby działały inaczej, będąc w różnych stanach. Robimy to analogicznie jak wcześniej, doprowadzając do takiego efektu:

Można przetestować działającą aplikację.

Zakończenie

W ten jakże prosty sposób udało nam się stworzyć z kawałka statycznej grafiki, działający interfejs programu z identycznym wyglądem jaki zaprojektowaliśmy wcześniej. Nigdy nie było to takie proste i szybkie. Wciąż jest sporo błędów do naprawienia oraz usprawnień do wprowadzenia.

Zapowiada się świetne narzędzie również dla tych, co nie będą używać tego dalej we Flash Builderze 4, lecz do szybkiego zamienienia projektu w coś działającego, jako demo dla klienta. Niemniej jednak, od dawna wielu oglądało, coraz to nowe zajawki związane z Thermo. Coś co w końcu połączy design z developementem (lub stworzy designerów – pomysł Lee Brimelow). Wersja Beta 1, którą możemy testować od jakiegoś czasu, okazała się świetnym narzędziem.

Oczywiście rozwiązanie to, nie mogło się obyć bez zmiany sposobu działania komponentów Flex’owych. Nowe komponenty Spark posiadają rozdzielenie pomiędzy wyglądem a sposobem działania, co powoduje, że są one jeszcze bardziej flexible

Ciąg dalszy nastąpi… a w nim zobaczymy, co Flash Builder 4 zrobi z efektem działań tego tutorialu.

Źródła:

app1.ai – Plik Illustratora – design do importu
app1.psd – Plik Photoshopa – do porównania
app_start.fxg – Plik Flash Catalysta zaraz po zaimportowaniu
app_end.fxg – Plik Flash Catalysta po ukończeniu

Wszystko tutaj: http://www.box.net/FlashCatalystTutorial

Dowiedz się więcej:

http://labs.adobe.com/technologies/flashcatalyst/ – oficjalna strona na temat Adobe Flash Catalyst

http://labs.adobe.com/technologies/flashcatalyst/tutorials/ – oficjalna lista materiałów dla początkujących i zaawansowanych na temat Adobe Flash Catalyst

http://www.gotoandlearn.com/ – są tu znakomite 2 video-tutoriale w języku angielskim prowadzone przez Lee Brimelow, na których po części się wzorowałem.