Share
1 giugno 2009; la data in cui Adobe ha rilasciato il suo ultimo strumento rivolto a "designer e sviluppatori". Questo era quasi lo slogan di Flash Catalyst, precedentemente chiamato "Thermo".
Diamo una prima occhiata a questa potente applicazione che promette ai designer di essere in grado di partecipare allo sviluppo di applicazioni e siti Web Flash.
Flash Catalyst, in precedenza chiamato "Adobe Thermo", è un'applicazione sviluppata specificamente per avvicinare progettisti e sviluppatori. Può facilmente trasformare qualsiasi layout di Photoshop o Illustrator in un sito Web completo, animato e interattivo o Rich Internet Application basato sulla piattaforma Flash. Il risultato finale di Flash Catalyst può essere importato e modificato da Flash Builder (in precedenza Flex Builder), consentendo agli sviluppatori di avere un bellissimo layout pronto per essere codificato. L'applicazione è dotata di funzionalità che consentono ai progettisti di adottare un layout semplice, aggiungere effetti e quindi pubblicare in una piattaforma flash senza dover scrivere una singola riga di codice! Questa è la potenza di Flash Catalyst.
Dopo il primissimo MAX parla di un nuovo fantastico strumento chiamato "Thermo", tutti i blog e i forum della comunità RIA e Flash sono stati riempiti con alcuni video straordinari. In questi video abbiamo potuto vedere un layout di Adobe Illustrator statico trasformato in un'applicazione completamente funzionale in pochi minuti. Adobe si preparava a stupire ancora di più ...
Era nell'ottobre del 2007, nel frattempo Thermo è diventato Catalyst, è passato un altro anno e in alcune conferenze abbiamo potuto trovare solo scarse foto. Allo stesso tempo, Flex 4 ha iniziato a guadagnare attenzione con notizie quasi settimanali. Thermo sembrava essere scomparso.
Novembre 2008; una data inaspettata! Adobe ha distribuito gratuitamente copie di anteprima di Flash Catalyst, solo per MAC OS e Gumbo (Gumbo era il nome in codice per Flash Builder 4). Gli sviluppatori e i designer hanno iniziato a prestare maggiore attenzione ai laboratori Adobe, ma sfortunatamente, fino a giugno 2009, non si è più sentito nulla ...
Giugno. 2009. Il primo giorno del mese (finalmente) Adobe ha rilasciato la prima beta pubblica di Flash Catalyst. Bene, le cose iniziano qui!
L'IDE è ben progettato e diviso, è intuitivo e gli elementi sono facili da trovare. Discuterò questi pannelli un po 'oltre. Nota che il mio sistema operativo è in francese, quindi se conosci già FC e il tuo sistema operativo è in un'altra lingua potresti trovare alcune differenze, ma le chiamerò anche in inglese.
In alto a sinistra, il primo pannello che vediamo è "Stati / Pagine". Questi sono gli stati dell'applicazione. Immagina, al primo stato hai un pannello di login, sul secondo hai l'applicazione principale. Questi stati sono facilmente identificabili come mostra l'immagine seguente!
L'applicazione si caricherà sul primo stato e se vuoi andare al secondo stato, dovrai eseguire alcuni trucchi (beh ... solo un trucco: currentState = "Pagina2"), ma in Flash Catalyst le cose sono fatte con un certo stile . Inseriamo un semplice pulsante sullo "Stage" e lo trasformiamo in "Pagina2" con l'interazione onClick.
Il secondo pannello è dove mettiamo tutte le nostre cose, se si importa un file di Photoshop o un file di Illustrator tutti gli elementi verranno visualizzati qui. Se lavori con Flash e Flex puoi considerare questo il palco principale. Guarda come è simile:
Puoi anche trovare un pulsante nell'angolo in alto a destra, che aggiorna il palco. Ciò è utile quando lo stage contiene molte cose e per qualche motivo Flash Catalyst si dimentica di aggiornare automaticamente le modifiche.
Il terzo pannello è il pannello "Timelines" e contiene alcune grandi sorprese. Il catalizzatore Flash ha una timeline, ma se ti aspetti che funzioni come la Timeline di Flash, scoprirai che ti stai sbagliando. Questa linea temporale è molto limitata e il suo scopo principale è creare animazioni fluide tra le pagine (passaggio dalla Pagina 1 alla Pagina 2 e invertire) con alcuni elementi ed effetti semplici come dissolvenza, spostamento, rotazione. Questo pannello potrebbe essere un po 'difficile da capire, ma in un breve lasso di tempo penserai diversamente. Diamo un'occhiata a questo!
In questo pannello, troverai a sinistra le transizioni State / Page e le sequenze d'azione (no, questo non è stato tradotto in francese) dove puoi creare azioni ed effetti personalizzati. Quando un layout "reale" viene caricato e trasformato in elementi, apparirà su questa linea temporale. È possibile applicare un effetto specifico a un solo componente specifico. Questa timeline funziona in modo simile a Flash Animation Panel ma qui si specifica l'ora di inizio e di fine dell'effetto o della transizione. Vedrai nella prossima immagine di cosa sto parlando, questo è stato realizzato con un layout semplice:
Come ho spiegato, a sinistra troverai i componenti "Pagina1", al centro la cronologia dell'animazione e a destra (non mostrati prima) i componenti "Pagina2". Puoi mettere un effetto separato su ciascun componente laterale; qui gli elementi "Pagina1" iniziano a FadeOut, quindi a metà, gli elementi "Pagina2" iniziano a FadeIn, dando un effetto di transizione molto fluido.
Possiamo anche vedere una delle migliori funzioni di Flash Catalyst qui; il pulsante Anteprima (il piccolo pulsante "Riproduci" al centro). Se hai alcune transizioni, effetti o sequenze, basta premere questo pulsante e vedrai l'animazione sul palco senza lasciare l'IDE. Questo è davvero utile, credimi!
Il pannello successivo è il pannello "Utils / Tools" e qui troverai alcuni componenti Flash / Flex nativi come forme, testo, zoom e strumenti di selezione.
In fondo a questo, hai il pannello "Calques / Layers" comune, dove puoi organizzare i tuoi elementi dell'applicazione. Se apri un file PSD o AI, l'ordine dei livelli rimarrà lo stesso; tutto sarà nello stesso posto. Se hai cose ben separate in Photoshop o Illustrator, ne beneficerai anche qui! Hai il tuo layout importato tutto qui. Se stai realizzando un progetto da un modello vuoto, è qui che le cose appariranno quando saranno aggiunte allo stage. Vedi il pannello:
Il seguente pannello è il più completo. Contiene tre parti principali, i componenti, la libreria e il pannello "Dati":
Guarda come appare!
L'ultimo pannello è "Proprietà / Propriétés" dove puoi trovare informazioni su un elemento selezionato sul palco. Ad esempio, se fai clic su un elemento di testo, qui puoi definire le sue proprietà come colore, carattere, dimensione ...
Infine, il magico pannello "Senza nome", il pannello che ho chiamato prima "Opzioni elemento". Questo è in realtà il pannello più importante di tutti; esegue tutta la magia in Flash Catalyst. È un pannello posteriore / grigio-nero che apparirà quando clicchi qualcosa sul palco. Facendo clic su una qualsiasi parte di un layout si aprirà questo pannello e contiene 3 sezioni principali:
Diamo un'occhiata a questo ...
Bene, in pratica viene presentato il nostro IDE. Tuttavia, stiamo dimenticando una cosa, qualcosa a cui i designer potrebbero non interessare, ma è importante per gli sviluppatori. Il codice. Nell'angolo in alto a destra, hai una casella combinata in cui puoi selezionare la vista Progettazione o Codice. Se fai clic su di esso e non hai familiarità con Flex, probabilmente lo chiuderai immediatamente, ma se sei uno sviluppatore Flex dovrai esplorarlo attentamente. Troverai molte cose nuove (specialmente se sviluppi in Flex 3) che sono orientate con Flash Builder 4. La lingua è MXML con alcuni elementi in ActionScript. Vedrai anche un Project Explorer dove troverai tutto ciò che è già stato convertito in elementi e componenti MXML dell'applicazione pronti per essere utilizzati in Flash Builder. Questo è un altro argomento e se vuoi saperne di più ti consiglio di leggere la grande recensione che Jesse Freeman ha scritto su Flash Builder 4.
Una delle altre cose interessanti è che il progetto è pronto all'uso e pronto per essere visualizzato. Basta andare su File> Esegui progetto (CTRL + INVIO su Win), il progetto è compilato e aperto in un browser.
Questo può essere frainteso, Flash Catalyst non è facile da usare e potrebbe essere fonte di confusione per cominciare, ma sì! Rende davvero le cose semplici. Basta progettare il layout o ottenere il layout dal tuo designer in un file Photoshop o Illustrator, selezionare il file e creare un nuovo progetto Flash Catalyst. Le cose saranno esattamente le stesse in Flash Catalyst. Da qui basta convertire gli elementi a cui si desidera aggiungere il comportamento, generare alcune pagine, alcune transizioni, testare il progetto e salvarlo. È tutto! È pronto per le mani dello sviluppatore!
Per i progettisti questo non è necessariamente di interesse, ma per gli sviluppatori questo potrebbe essere il punto più difficile in FC. Poiché tutti gli elementi e il codice delle proprietà sono generati automaticamente, il codice richiederà una buona revisione e probabilmente alcune modifiche per funzionare in base alle esigenze dello sviluppatore. In Flash Catalyst possiamo già vedere in azione il nuovo motore vettoriale Flash; se carichi del materiale vettoriale in catalizzatore Flash, nel codice troverai alcuni elementi "Gruppi", "Tratto", "Rettangolo", "Riempimento" e "Tracciato" con alcuni dati. Ecco come Flash progetta elementi vettoriali. Una semplice freccia vettoriale produrrà questo codice:
Questi elementi sono l'implementazione della nuova specifica Flash 10 / Flex FXG che consente agli sviluppatori di utilizzare elementi di stile XML o gruppi di elementi per disegnare in flash, utilizzando non solo elementi nativi come cerchi, rettangoli, testo o curve ma anche grafiche più complesse di indicando le informazioni vettoriali.
Troverai molti stati e principalmente il codice MXML Flex 4 un po 'diverso da Flex 3 e completamente nuovo per gli sviluppatori Flash o i principianti di Flex.
È un'applicazione fantastica! Non ho dubbi!
Per cominciare, ora gli sviluppatori possono davvero collaborare con i progettisti, mostrare loro il punto di vista dello sviluppatore e alcune interazioni applicative prima di passare allo sviluppo dell'applicazione, accelerando l'intero processo. Sarà facile trovare applicazioni e siti fantastici creati con FC, la creatività invaderà ora Rich Internet Applications. Detto questo, gli sviluppatori dovranno prestare attenzione. Il codice generato è piuttosto esteso e ogni modifica ha un impatto sul layout. Mettere le cose in Flash Catalyst e avere un bel codice generato è una cosa, ma la codifica di qualcosa in base al codice FC a volte brucerà il cervello di uno sviluppatore!
Flash Catalyst offre molte cose nuove da esplorare, ma ad essere onesti mi aspettavo di più. La libreria dei componenti viene ridotta, l'interazione con gli elementi viene ridotta, il testo importato non mantiene sempre la sua qualità originale e alcune cose non funzionano correttamente (specialmente in DataList con poche righe ...). Detto questo, questa è solo una beta, giusto ?! Dobbiamo ancora aspettare la versione finale.
Definitivamente, Flash Catalyst raggiungerà le masse ma il codice generato e l'interazione con Flash Builder 4 necessiteranno del tempo per guadagnare popolarità, principalmente perché le nuove specifiche Flex 4 sono molto diverse da Flex 3.
Per coloro che vogliono saperne di più su Flash Catalyst, visitare la pagina Catalyst Tutorial su Adobe Labs.
Grazie per la lettura, sarebbe bello sentire cosa hai da dire!
Accentsconagua