Conosciamo l’IDE di Flash Catalyst
di Marcello Ruta
Tool utilizzati: Flash Catalyst CS5
Note *: utilizzerò il termine FC come abbreviativo di Flash Catalyst
Diciamo che questo primo tutorial su Flash Catalyst, non sarà un vero è proprio esercizio, bensì costituirà una rapida overview dell’IDE di FC. Infatti esploreremo l’area di lavoro di questo nuovo programma di casa Adobe, destinato principalmente ai web designer.
Qualche altra info su Flash Catalyst.
Catalyst è un tool pensato per il designer, infatti esso consente di avere un totale controllo sull’artwork creato con Adobe Photoshop, Adobe Fireworks e Adobe Illustrator.
Ci limiteremo a dire che FC permette di dare al nostro filmato delle interattività di base, attraverso i comportamenti che il programma ha già in dote, e quindi di creare un contenuto interattivo che a volte, può essere utile allo sviluppatore per capire l’user experience dell’applicativo che si andrà a sviluppare, pertanto possiamo affermare che Flash Catalyst ci permette di creare microsites e data-centric applications, per i microsites diciamo che non c’è bisogno di un ulteriore intervento dello sviluppatore e che quindi possono essere pubblicati direttamente da Catalyst mentre per le applicazioni data-centric occorre l’intervento dello sviluppatore al fine di connetterlo alle eventuali fonti di dati o web services.
FC permette al designer di creare contenuti interattivi senza scrivere nemmeno una riga di codice e di produrre SWF accessibili. Il codice prodotto da Catalyst è un MXML ovvero il linguaggio usato nello sviluppo di applicativi con Flex mentre Actinscript 3.0 è il linguaggio usato per controllare la logica client-side. Quando si pubblica un project sviluppato con Flash Catalyst, il codice MXML e Actinscript 3.0 sono compilati nel file SWF.
Alla fine possiamo dire che Catalyst è fortemente basato sul concetto degli “States” e che dovrebbe facilitare in maniera decisiva la collaborazione tra sviluppatore e designer nella creazione delle RIA.
I punti chiave di Flash Catalyst.
Faremo un breve elenco delle features più importanti del programma:
- FC permette di importare e memorizzare: immagini, video, suoni e file swf creati in Adobe Flash nella project library del programma.
- Permette di trasformare in maniera abbastanza veloce i propri artwork in componenti come Button, CheckBox, ScrollBars, etc.
- Permette di creare artwork con i tool di disegno vettoriale che ha a disposizione il programma.
- Permette di usare i built-in wireframe components per creare prototipi interattivi.
- I comportamenti predefiniti permettono di aggiungere azioni ai componenti e quindi interattività al formato.
- Permette di aggiungere smooth transitions tra pagine o i differenti stati, per esempio, gli “States” di un pulsanti quando si fa il click.
- Permette di fare modifiche in round-trip con Adobe Photoshop, Adobe Illustrator e Fireworks.
- FC crea come output file SWF, distribuibili per il web o file AIR distribuibili come applicazioni desktop.
I file prodotti da FC hanno come estensione .FXP e possono essere importati con Flex o Flash Builder.
La welcome screen di Flash Catalyst
Dalla welcome screen di Catalyst è possibile creare un nuovo progetto, editarne uno già esistente o creare un progetto a partire da un artwork.
Adesso apriremo Catalyst e creeremo un nuovo progetto, al fine di poter analizzare l’area di lavoro di Catalyst.
Welcome Screen [fig.1]
 (fig.1) |
Facendo clic sul pulsante Adobe Flash Catalyst Project… si aprirà la finestra di dialogo New Project dove possiamo impostare la Larghezza, l’Altezza e il colore del nostro filmato.
New Project [fig.2]
 (fig.2) |
Adesso andiamo ad esplorare l’interfaccia dell’area di sviluppo di Flash Catalyst.
L’area di lavoro di FC è composta di vari pannelli e strumenti che ci consentono di creare e editare i nostri progetti.
Area di lavoro [fig.3]
 (fig.3) |
Menu workspace
Tale menu ci consente di cambiare la vista Design in vista Codice senza però poter modificare il codice; quando si è nella vista Codice a destra apparirà il pannello Project Navigator e scompariranno i pannelli che ci sono in vista Design.
Pannello Strumenti
Questo pannello include gli strumenti necessari per creare, selezionare e trasformare gli oggetti sull’artboard come: testo, linee e forme grezze.
Procedendo nell’esplorazione dell’area di lavoro possiamo notare un gruppo di pannelli, dove sono compresi: i Livelli(Layers), la Libreria(Library), e il Wireframe Components.
Layers
Nel pannello Livelli sono organizzate tutte le risorse e gli oggetti dell’applicazione (come: components, artwork, video, e altro). Quando vengono importati degli artwork creati con Illustrator, Photoshop o Fireworks, Falsh Catalyst ne preserva la struttura dei livelli.
Library
Nella libreria sono mostrate una lista di tutte le risorse riguardanti il progetto.
Wireframe Components
In questo pannello troviamo i componenti built-in che hanno una grafica minimale, diciamo di default. Questi componenti possono essere utilizzati trascinandoli sull’artboard e successivamente possono essere modificati.
Pannello Interactions
Il pannello delle Interattività (Interactions) può essere usato per aggiungere interattività all’applicazione ovvero definire cosa accade quando l’utente interagisce con essa.
Pannello Properties
Dal pannello delle Proprietà (Properties) e possibile modificare le caratteristiche di un oggetto selezionato che si trova nell’artboard (ad esempio un: componente Button). Il pannello Properties cambia il suo aspetto in base al componente selezionato nell’artboard.
Pages/States
Il pannello Pagine/Stati (Pages/States) mostra una miniatura per ogni pagina presente nell’applicazione. Si possono Aggiungere, Duplicare, Rinominare ed Eliminare delle pagine. Inoltre se un componente è selezionato, da questo pannello è possibile vedere i vari stati di un componente (es.: un Button).
Artboard
Letteralmente tradotta sarebbe “tavola di disegno”, ma essa la si può immaginare come lo stage di Flash dove vengono messi i vari oggetti, componenti e artwork che compongono l’interfaccia dell’applicazione.
Pannello Timelines
Tale pannello fornisce i controlli per creare e modificare le transition o la sequenza delle azioni. Si può utilizzare questo pannello per controllare il playback di un video o di un SWF e aggiungere effetti sonori.
Pannello Design-Time Data
Questo pannello diciamo che entra in gioco dopo aver creato un component Data List, da qui è possibile popolare una lista di elementi.
Heads-Up Display (HUD)
La Heads-Up Display (HUD) ti permette di creare velocemente un componente a partire dall’artwork che hai selezionato nell’artboard. La HUD appare automaticamente in FC, se non dovesse apparire Window > HUD oppure fare clic su F7.
La HUD, dal suo menu a discesa, ti mostra tutte le azioni possibili relative all’oggetto che hai selezionato nell’artboard. (vedi fig.4)
HUD [fig.4]
 (fig.4) |
Infine esploriamo la vista Codice, che si divide in tre parti: il Code Panel, la Project Navigator Panel e il Problems Panel.
Code Panel
Nel Code Panel o Pannello del Codice è possibile prendere visione del codice che FC genera in maniera automatica, tale vista è di sola lettura (read only) in quanto non è possibile modificare il codice, per fare questa operazione bisogna utilizzare il Flash Builder (o Flex).
Project Navigator Panel
Questo pannello mostra la struttura del progetto Flex, infatti per chi ha un minimo di dimestichezza con Flex la comprensione risulta abbastanza semplice, comunque sia questo pannello non fa altro che rappresentare la struttura delle cartelle in cui vengono messi i file del progetto.
Problems Panel
In questo pannello vengono mostrati gli errori a livello di codice MXML. Facendo doppio clic sull’errore si va direttamente alla linea di codice affetta dall’errore.
 (fig.5) |
A questo punto possiamo dire che la missione conoscitiva dell’area di lavoro di Flash Catalyst è conclusa, adesso creeremo un semplice progetto, dove ci limiteremo ad aggiungere due pulsanti che fungono da barra di navigazione e una pagina, ai pulsanti daremo delle azioni attraverso il pannello Interactions.
Creazione di un nuovo progetto
Dalla Welcome Screen facciamo clic su:
- Adobe Flash Catalyst Project…
- Adesso nella finestra New Project assegniamo il nome FirstProject, lasciando invariato il resto della configurazione.
- Quindi facciamo File > Save.
- Adesso ci posizioniamo sull’artboard e con lo strumento di disegno rettangolo disegniamo un rettangolo delle seguenti dimensioni: 130 x 30, quindi lo selezioniamo e dal menu a discesa della HUD selezioniamo l’opzione Button. A questo punto è stato creato un component Button, la cui istanza la troviamo nella Library.
- Adesso facciamo doppio clic sul nostro componente per modificarlo. Il Button è costituito da quattro Stati, UP, OVER, DOWN e DISABLED. Ci posizioniamo sullo stato Up ed aggiungiamo un testo che fungerà da Label. Adesso con il testo ancora selezionato, dalla HUD selezioniamo il componente Label al fine di avere un’etichetta modificabile per il nostro componente Button. Fatto questo ci spostiamo su vari States del pulsante ed attraverso il pannello Layers abilitiamo la visibilità della Label per gli altri stati. (vedi fig.6)
 (fig.6) |
- Adesso da Library trasciniamo Button1 sull’artboard e con l’oggetto ancora selezionato cambiamo dal pannello Properties la Label mettendo “Chi siamo”
- Adesso dal pannello Interactions diamo un’azione attraverso i comportamenti pre-impostati del programma. Selezioniamo il Button “Chi Siamo” è facciamo clic su Add Interaction quindi apparirà un pannellino dove fare dei settaggi, quindi click sul pulsante OK per assegnare il comportamento al nostro Button. (vedi fig.7)
 (fig.7) |
- Adesso dal pannello Properties impostiamo per il pulsante “Chi Siamo” l’opzione di far apparire la manina, per fare ciò andiamo su Appereance e sull’opzione Hand Cursor, facciamo clic sul checkbox di scelta. Dopodiché selezioniamo il pulsante “Home” e facciamo si che l’aspetto del pulsante sia disabilitato, per fare ciò andiamo su Common e clicchiamo sul checkbox (che di default apparirà selezioniato) per deselezionarlo.
- Adesso andiamo su Page2 e ripetiamo i passaggi 7 e 8.
- A questo punto abbiamo finito il nostro esempietto, non ci resta che fare File > Run Project per testare il nostro esempio.
Terminiamo rimandandovi al prossimo esercizio dove faremo qualcosa di più complesso, in questo tutorial non abbiamo fatto nulla di eccezionale, poiché ci siamo limitati a esplorare il programma e a vedere l’uso di qualche pannello e azione.
File Allegato: Tutorial 1 Flash Catalyst