Nato col nome di Thermo, Flash Catalyst è l'anello di congiunzione tra la fase di design e di sviluppo di un'applicazione Flash, ed è disponibile in versione beta presso gli Adobe Labs.
Già dal primo annuncio (Max 2007) c'è stata molta curiosità su questo strumento, che promette, in pochi e semplici passaggi, di trasformare un layout grafico in un'interfaccia interattiva, senza dover lavorare sul codice.
Il codice comunque c'è: viene generato del markup in formato MXML (compatibile quindi con Flex), il ché permette agli sviluppatori di effettuare modifiche o aggiunte con ActionScript e il nuovissimo Flash Builder (successore di Flex Builder e anch'esso in beta), senza intaccare illayout.
Abbiamo già parlato di questo progetto in un precedente articolo, ma questa volta possiamo iniziare a fare pratica realizzando un semplice progetto: vedremo come importare un layout di Photoshop o Illustrator in Flash Catalyst e come renderlo interattivo.
Download e installazione di Flash Catalyst
Anzitutto dobbiamo scaricare Flash Catalyst. Il software è disponibile sia per Windows che per Mac, con i relativi codici seriali. Per poter scaricare il prodotto è necessario essere registrati al sito Adobe.
Una volta effettuato il download avviamo il setup e seguiamo i pochi passi di installazione (al momento l'applicazione è disponibile solo in inglese e non possiamo quindi scegliere altre lingue).
I requisiti sono quelli di una macchina di potenza medio/alta con almeno 1GB di RAM. L'unico software richiesto per poter testare le applicazioni è l'ultima versione del Flash Player. Non è obbligatorio invece avere installata la CS4.
Schermata di benvenuto
Completata l'installazione, abbiamo Flash Catalyst nel menu dei programmi, avviamolo.
La schermata iniziale di Catalyst offre un numero piuttosto ridotto di opzioni: sulla sinistra troviamo la lista degli ultimi progetti creati mentre dalle opzioni a destra possiamo decidere di creare un nuovo progetto partendo da un layout di Photoshop (PSD), Illustrator (AI) o da un file FXG (Flash XML Graphics), infine abbiamo l'opzione Create new project che consente di creare un nuovo progetto senza utilizzare un layout grafico come base.
Scegliamo inizialmente quest'ultima opzione, che consente di creare un nuovo progetto e di impostare il wireframe, ovvero lo "scheletro" dell'applicazione, quindi senza partire da un layout completo ma iniziando con uno stage vuoto.
Ci verrà chiesto di immettere un nome per il progetto e impostare le dimensioni e il colore di sfondo dell'interfaccia: lasciamo impostazioni predefinite.
L'interfaccia
L'interfaccia di Flash Catalyst presenta nel pannello principale le pagine del progetto (o stati, come vedremo a breve), inizialmente solo una, al centro lo stage che conterrà tutti gli elementi della nostra applicazione.
In basso la timeline tramite cui impostare animazioni e transizioni e infine a destra una serie di pannelli, dove abbiamo la toolbar con gli strumenti di navigazione e disegno e i livelli (nel caso di un progetto vuoto ve ne sarà solo uno, mentre importando un layout esistente vedremo qui gli stessi livelli del file originale).
Appena sotto i layer troviamo una tab dedicata ai componenti:
- Wireframe components - contiene i componenti utilizzabili per impostare la struttura dell'applicazione
- Library - è la libreria degli elementi dell'applicazione
- Design-Time data - consente di impostare il binding, ovvero il collegamento tra componenti e fonti di dati
- Properties - da cui possiamo modificare le proprietà degli elementi
Pagine e stati
Il pannello principale in alto nell'interfaccia è chiamato Pages/States e il primo concetto importante da capire di Flash Catalyst è proprio quello di stato: ogni stato descrive un'area (o una maschera) della nostra applicazione o una pagina del nostro sito. Con questo strumento, possiamo definire l'aspetto e le caratteristiche dell'interfaccia per ogni stato dell'applicazione, inoltre possiamo impostare delle transizioni tra uno stato e l'altro.
Diverso è invece il discorso per gli stati dei componenti, questi ultimi infatti sono gli aspetti che un component può assumere in base ad un certo evento. Ad esempio lo stato over (il mouse passa sopra ad un elemento) può essere diverso dallo stato down; (l'utente tiene premuto il tasto del mouse sull'elemento) o dallo stato up (il mouse non è sul bottone).
Creare un bottone
Iniziamo il nostro esempio pratico, partendo proprio dalla realizzazione di un bottone: creiamo in Photoshop (o in Illustrator) il disegno di un pulsante e ipotizziamone 3 possibili stati (up, over, down) e rappresentiamo ognuno di essi su un diverso livello.
Torniamo quindi in Flash Catalyst e selezioniamo l'opzione Import Artwork dal menu File e selezioniamo il file PSD. Appare una maschera con le opzioni realtive ai livelli di immagine, forma e testo, per ognuna di queste categorie scegliamo se mantenerli modificabili (Keep editable) oppure importarli senza poterli modificare in seguito in Catalyst (Flatten). Possiamo anche importare i livelli nascosti del PSD.
Se clicchiamo su Advanced possiamo selezionare le opzioni per ogni singolo livello con un'interfaccia di importazione simile a quella disponibile in Flash. Nel nostro caso lasciamo tutto com'è e clicchiamo su Ok.
Ora abbiamo a disposizione il nostro bottone, con i diversi layer, nel pannello dei livelli raggruppati sotto la voce Layer 1. Clicchiamo su questo layer con il tasto destro e convertiamo gli elementi grafici in un componente di tipo Button.
A questo punto tramite un doppio click sul componente accediamo alla schermata di modifica dei suoi stati: in ognuno di essi possiamo impostare quale livello (o livelli) lasciare visibili e quali invece non mostrare, stabiliremo così l'aspetto grafico di ogni stato del componente.
Una volta impostati i vari stati, possiamo premere Ctrl+Invio per vedere il risultato.
Aggiunta di un nuovo stato
Abbiamo visto come convertire un elemento grafico in un componente. Ora vedremo come utilizzare questo pulsante per navigare tra due stati del filmato, per questo possiamo creare una seconda pagina nel progetto Catalyst: clicchiamo sul tasto New Blank State dal pannello State/Pages. Clicchiamo poi sulla miniatura della nuova pagina e ne otteniamo lo stage, inizialmente vuoto.
Replicare un elemento su più stati
Vogliamo utilizzare lo stesso pulsante per navigare da una pagina all'altra, associandogli diverse azioni a seconda della pagina in cui si trova. Perciò torniamo sul primo stato (Page1), clicchiamo con il tasto destro sul pulsante che abbiamo creato e, dal menu a comparsa scegliamo l'opzione Share to state -> Page2. Questa opzione è molto utile perché permette di replicare facilmente un elemento su più pagine dell'applicazione (o su tutte, grazie all'opzione All States) e risulta ovviamente più rapida del classico copia-incolla.
Per differenziare le due pagine, che ora contengono entrambe solo un pulsante, inseriamo uno o più elementi a piacere sulla seconda pagina, questo ci permetterà di verificare il cambio di pagina.
Navigazione tra più stati e azioni condizionali
Associare delle azioni ad un componente in Flash Catalyst è molto semplice: selezioniamo il componente che vogliamo rendere interattivo e il pannello di selezione evidenzierà il tipo di componente (nel nostro caso è Button).
Nel pannello notiamo la voce Custom interactions: cliccando sul pulsante [+] posto a destra di tale scritta abbiamo a disposizione tre eventi, precisamente onClick, onRollout e onRollover.
Selezioniamo onClick e appariranno tre campi che utilizziamo per scegliere:
- Do action - l'azione da eseguire - qui scegliamo
Play transition to state - To target - dove andare dopo l'azione - impostiamo
Page2 - when in any state - la condizione - impostiamo
Page1
In questo modo, cliccando sul pulsante, nella pagina Page1, viene eseguita la transizione verso Page2.
Creiamo anche il procedimento inverso selezionando nell'ordine Play transition to state - Page1 - Page2, che significa "se il pulsante viene premuto e mi trovo su Page2, eseguo la transizione verso Page1", quindi il procedimento di navigazione contrario al precedente.
Esportiamo l'applicazione premendo Ctrl+Invio: provando a cliccare il pulsante noteremo i cambi di pagina, accompagnati di default da una breve transizione di alcuni elementi.
Modifica delle transizioni tra gli stati
Proprio tali transizioni sono ampliabili e modificabili grazie alla Timeline. In questo pannello, sulla sinistra possiamo vedere le transizioni di stato attualmente presenti (nel nostro caso, da Page1 a Page2 e viceversa), selezionandone una vedremo al centro gli elementi coinvolti nella transizione e gli effetti ad essi applicati (di default viene applicato un Fade, ovvero una dissolvenza).
Vediamo come sia presente un elemento Text (che è un testo disposto sulla pagina 2) che ha come effetto un Fade In: volendo è possibile modificare la durata della transizione trascinando la barra posta vicino alla scritta, cambiarne i valori iniziale e finale (dal pannello Properties) oppure è possibile aggiungere altri effetti grazie all'opzione Add action.
