.
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 we 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ęć.
- Zaznaczamy katalog z warstwami przycisków.
- Z menu które się pojawia po zaznaczeniu jakiegoś obiektu (Window -> HUD / F7) wybieramy Convert Artwork to Component i zaznaczamy opcję Button.
- 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.
- 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:
- Możemy to zrobić menu HUD oraz menu kontekstowego (p-klik) katalogu warstw nazwanego scrollBar -> Convert Artwork to Component -> Vertical Scrollbar.
- W tym momencie pojawi nam się problem, ponieważ Flash Catalyst nie wie jeszcze który element za co ma odpowiadać. Musimy nacisnąć Edit Parts.
- 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.
- 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ą:
- Zaznaczamy cały katalog warstw
- Konwertujemy go do Data List z menu HUD.
- Znowu pojawi nam się błąd, więc Edit Parts.
- 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:
- list:
- Wyłącz widoczność katalogu warstw RightPanel.
- shortDesc:
- Wyłącz widoczność katalogu warstwy RightPanel->extendedContent.
- longDesc:
- Przesuń w pionie przycisk expandBtn do krawędzi listy po lewej.
- 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.
Flexible AIR 
dobry poczatek
Cieszę się bardzo :)