Flash Catalyst, ma chi è questo illustre sconosciuto?
di Marcello Ruta
Proviamo a conoscere un pò meglio questo illustre sconosciuto, Flash Catalyst nome in codice "Thermo". In questo articolo parleremo di questo nuovo tool che Adobe mette a disposizione dei designer al fine di integrare il lavoro dei grafici con il lavoro degli sviluppatori nel miglior modo possibile. Nel momento in cui sto scrivendo questo articoletto, Flash Catalyst e gli altri prodotti della suite CS5 sono in beta pubblica su Adobe Labs e quindi alcune features di cui parleremo in questo tutorial possono essere soggette a cambiamento o non si potrebbero trovare nella release finale del software.
Flash Catalyst è stato creato per migliorare il workflow tra designer-developer. Puntualizziamo che questo "illustre sconosciuto" non è nato per sostituire Flash o la prossima versione di Flash.
Flash continuerà ad essere l'applicativo per creare animazioni che hanno una certa enfasi o applicazioni per device mobili, o per sviluppare siti che abbiano un certo appeal. Catalyst è invece destinato ai designer che hanno bisogno di lavorare sull'interfaccia di un applicazione e che non hanno conoscenze specifiche del codice. FC introduce un workflow che permette al designer e al developer di lavorare insieme e creare applicazioni in base alle loro specifiche conoscenze. Il designer tende a lavorare meglio con la creazione di grafica ovvero di elementi che da un certo punto di vista possono essere considerati elementi statici, tali artwork possono essere essere creati con altri programmi come: Photoshop, Fireworks o Illustrator. A questo punto sopraggiunge in soccorso del designer Catalyst che da la possibilità di partire da questi elementi statici creati con una delle applicazioni citate in precedenza e dare a questi elementi dei comportamenti di base come le transitions o applicare gli states o dare altri comportamenti.
Un esempio che ci potrebbe aiutare a comprendere meglio tutto ciò potrebbe essere quello di un artwork dichiarato come pulsante, a questo punto il designer ha due opzioni. La prima è quella di permettere allo sviluppatore di assegnare le azioni del pulsante, la seconda opzione è quella che è il designer a scegliere le azioni del pulsante scegliendole tra quelle che esistono già in Catalyst.
Un'altra considerazione che mi preme fare è quella che quando si inizia a creare un'interfaccia o un artwork, sarebbe giusto avere una precisa organizzazione delle informazioni o di quello che l'interfaccia dovrebbe mostrare, quindi sarebbe utile avere uno sketch della struttura dell'applicativo, dopodiché si passa alla fase esecutiva del lavoro ovvero la creazione dell'artwork. Finito questa fase si passa all'importazione della grafica dentro Catalyst.
Dopo aver fatto questa premessa ci sembra di aver le idee un pò più chiare, ma non tanto perché sorge spontaneo chiedersi che motivo c'era di fare questo programma? Per integrarsi con chi?
Rispondiamo subito a queste domande, lo scopo di Flash Catalyst è quello di facilitare l'integrazione degli elementi grafici con le applicazioni prodotte in Flex (o meglio Flash Builder in quanto si chiamerà cosi il nuovo Flex 4). Com'è noto ad oggi non risulta molto agevole fare lo skinning delle applicazioni create in Flex, da qui l'esigenza di questo software, quindi il fine unico è quello di migliorare il workflow tra designer e developer e permettergli di lavorare in base alle loro conoscenze e quindi integrarsi al meglio durante la fase di sviluppo, almeno i propositi di questo nuovo programma sono questi.
Adesso facciamo una breve introduzione a quella che è l'interfaccia del programma.
L'ide di Catalyst è composto da:
- Pages/States
- nella parte centrale uno Stage
- nella parte inferiore abbiamo la Timeline
- nella parte destra abbiamo dei pannelli: Tools, Layers, e poi un pannello con dei tab (Wireframe Components, Library e Design Time-Data) ed infine il panello Properties
- abbiamo due viste Design e Code.
 [IDE di Catalyst] |
Ma cosa ci permette di fare Catalyst?
Importare l'artwork dentro Catalyst. Questa operazione si può fare dalla welcome screen di Catalyst. Eseguire l'import scegliendo From Adobe Photoshop PSD File... se si ha un file prodotto con Photoshop oppure se si ha un file AI si sceglie From Adobe Illustrator AI File... altrimenti si crea un nuovo progetto da Create New Project from Design File.
 [Welcome Screen] |
Creare Pages/States. Una volta aver importato correttamente i vostri artwork è il gruppo dei livelli, siamo pronti per creare le pagine(o meglio gli States), naturalmente l'importazione segue l'impostazione che è stata data durante la creazione del file. Per fare ciò andiamo sul tab Pages/States e facendo doppio click su Page1 possiamo rinominare la pagina, possiamo anche duplicare le Pages/States e successivamente rinominarle.
Aggiungere interattività. Si ha la possibilità di aggiungere interattività ai vostri artwork, ad esempio un pulsante può essere convertito in un componente Button, ciò è reso possibile attraverso Convert Artwork to Component e dagli appositi menu che ci sono nel pannelino di conversione si possono assegnare dei comportamenti.
Creare Animazioni basate sulle Transitions. Si possono creare animazioni sugli States e quindi applicare degli effetti per il passaggio da uno stato all'altro.
Il formato di salvataggio di Flash Catalyst è l'FXP, tale formato poi può essere importato in un progetto Flex, una volta importato dentro Flex non può essere aperto con Catalyst, ma può essere aggiornato in un momento successivo.
Catalyst scrive codice MXML e si basa sul nuovo framework Spark.
 [Vista Codice] |
Lo scopo dell'articolo è quello di fare conoscere questo nuovo tool che Adobe ha aggiunto alla gamma dei prodotti che fanno parte della Flash Platform, più in là faremo dei tutorial per addentrarci nell'uso del programma, adesso ci basta conoscerlo e chiamarlo per nome...