Flash Catalyst Beta Primul aspect

1 iunie 2009; data la care Adobe a lansat cel mai nou instrument pentru "designeri și dezvoltatori". Acesta a fost aproape sloganul pentru Flash Catalyst, codificat anterior cu numele "Thermo".

Să aruncăm o privire asupra acestei aplicații puternice, care promite proiectanților că vor putea participa acum la dezvoltarea aplicațiilor și site-urilor Flash.

Ce este Flash Catalyst?

Flash Catalyst, denumită anterior "Adobe Thermo", este o aplicație dezvoltată special pentru a aborda atât designerii, cât și dezvoltatorii. Se poate transforma ușor orice Photoshop sau Illustrator Layout într-un website complet, animat și interactiv sau Rich Internet Application bazat pe platforma Flash. Rezultatul final al Flash Catalyst poate fi importat și modificat de Flash Builder (anterior Flex Builder), permițând dezvoltatorilor să aibă un aspect frumos gata de codificare. Aplicația este dotată cu caracteristici care permit proiectanților să ia un layout simplu, să adauge efecte și apoi să publice în platforma flash fără a fi nevoit să scrie o singură linie de cod! Aceasta este puterea Flash Catalyst.

Conceptul! Evolutia!

După prima discuție MAX despre un nou instrument fantastic numit "Thermo", toate blogurile și forumurile RIA și Flash ale comunității au fost umplute cu câteva videoclipuri uimitoare. În aceste filme am putut vedea un layout static Adobe Illustrator transformat într-o aplicație complet funcțională în câteva minute. Adobe se pregătea să impresioneze și mai mult ...

Acest lucru a fost în octombrie 2007, între timp Thermo a devenit Catalyst, un alt an trecut și am putea găsi doar fotografii limitate la câteva conferințe. În același timp, Flex 4 a început să câștige atenția cu aproape știri săptămânale. Thermo pare să fi dispărut.

Noiembrie 2008; o dată neașteptată! Adobe a distribuit copii gratuite de previzualizare a Flash Catalyst, numai pentru MAC OS și Gumbo (Gumbo a fost numele de cod pentru Flash Builder 4). Dezvoltatorii și designerii au început să acorde mai multă atenție laboratoarelor Adobe, însă, din nefericire, până în iunie 2009, nu sa mai auzit nimic ...

Iunie. În prima zi a lunii (în cele din urmă), Adobe a lansat prima versiune beta a aplicației Flash Catalyst. Ei bine, lucrurile încep de aici!

Catalizatorul Flash Catalyst IDE

IDE este bine conceput și divizat, este intuitiv și elementele sunt ușor de găsit. Voi discuta aceste panouri mai departe. Rețineți că sistemul meu de operare este în franceză, deci dacă știți deja că FC și sistemul dvs. de operare se află într-o altă limbă, puteți găsi unele diferențe, dar le voi numi și în limba engleză.

În partea stângă sus, primul panou pe care îl vedem este "Statele / Pagini". Acestea sunt stările cererii. Imaginați-vă, la prima stare aveți un panou de conectare, pe cel de-al doilea aveți aplicația principală. Aceste stări sunt ușor de identificat după cum arată imaginile următoare!

Aplicația se va încărca pe prima stare și dacă vrei să mergi la cea de-a doua stare, va trebui să faci câteva trucuri (bine ... doar un truc - currentState = "Page2"), dar în Flash Catalyst lucrurile se fac cu un anumit stil . Am pus un buton simplu pe "Stage" și l-am transformat în "Page2" cu interacțiunea onClick.

Cel de-al doilea panou este locul unde ne-am pus toate lucrurile, dacă importăm un fișier Photoshop sau un fișier Illustrator, toate elementele vor apărea aici. Dacă lucrați cu Flash și Flex puteți considera acest lucru etapa principală. Vedeți cât de asemănătoare este:

De asemenea, puteți găsi un buton în colțul din dreapta sus, care reface scena. Acest lucru este util când etapa conține multe lucruri și, din anumite motive, Flash Catalyst uită să actualizeze automat modificările.

Cel de-al treilea panou este panoul "Timeline" și deține câteva surprize mari. Catalizatorul Flash are o cronologie, dar dacă vă așteptați ca acesta să funcționeze ca o cronologie Flash, veți descoperi că vă greșiți. Această cronologie este foarte limitată, iar scopul principal al acesteia este de a crea animații netede între pagini (trecerea de la Page 1 și invers), cu unele elemente și efecte simple cum ar fi decolorarea, mutarea, rotirea. Acest panou ar putea fi puțin greu de înțeles, dar într-un interval scurt de timp veți gândi altfel. Să aruncăm o privire la ea!

În acest panou, veți găsi în stânga tranzițiile de stat / pagină și secvențele de acțiune (nu, acest lucru nu a fost tradus în franceză), unde puteți crea acțiuni și efecte personalizate. Când o structură "reală" este încărcată și transformată în elemente, acestea vor apărea pe această cronologie. Puteți aplica un efect specific unei singure componente specifice. Această cronologie funcționează similar cu panoul de animație Flash, dar aici specificați timpul de începere și de sfârșit al efectului sau al tranziției. Veți vedea în următoarea imagine despre ce vorbesc, acest lucru a fost făcut cu un aspect simplu:

După cum am explicat, în stânga veți găsi componentele "Page1", în centrul cărora aveți cronologie de animație, iar în partea dreaptă (nu este afișat anterior) componentele "Page2". Puteți să aplicați un efect separat asupra fiecărei componente laterale; aici elementele "Page1" încep să FadeOut, apoi la jumătatea drumului elementele "Page2" încep să FadeIn, oferind un efect de tranziție foarte lină.

De asemenea, putem vedea una dintre cele mai bune caracteristici Flash Catalyst aici; butonul Preview (micul buton "Play" din mijloc). Dacă aveți unele tranziții, efecte sau secvențe, trebuie doar să apăsați acest buton și veți vedea animația pe scenă fără a părăsi IDE-ul. Acest lucru este cu adevărat util, crede-mă!

Următorul panou este panoul "Utils / Tools" și aici veți găsi câteva componente Flash / Flex native, cum ar fi formele, textul, instrumentele de mărire și selectare.

În partea de jos a acestuia, aveți panoul comun "Calques / Layers", unde puteți organiza elementele aplicației. Dacă deschideți un fișier PSD sau AI, ordinea straturilor va rămâne aceeași; totul va fi în același loc. Dacă aveți lucruri bine separate în Photoshop sau Illustrator, veți beneficia și de aici! Aveți aspectul dvs. importat aici. Dacă realizați un proiect dintr-un șablon gol, aici vor apărea lucrurile când vor fi adăugate la etapă. Consultați panoul:

Următorul panou este cel mai complet. Acesta conține trei părți principale, componentele, biblioteca și panoul "Date":

  • Componentele (Componente Wireframe): Unele dintre componentele comune Flash / Flex cum ar fi butoanele, barele de derulare, caseta de selectare, datalistul ... pot fi tras și plasate pe scenă.
  • Biblioteca (Biblioteca): componentele utilizate în aplicație. Acestea pot fi componente comune, dar și componente personalizate. Componentele personalizate pot fi facute din layout-ul nostru, cu panoul "Element Options", un panou gri, fara nume pe care il voi explica ultima data.
  • Panoul "Generarea de date Temp" (Creation-Donnes de Temps): Aici putem genera date personalizate pentru un datalist, acesta fiind utilizat în mod normal pentru a genera intrări de date (rânduri) pentru a previzualiza rezultatul final.

Vezi cum arată!

Ultimul panou este "Proprietăți / Proprietăți" unde puteți găsi informații despre un element selectat pe scenă. De exemplu, dacă faceți clic pe un element Text, aici puteți defini proprietățile acestuia, cum ar fi culoarea, fontul, mărimea ...

În cele din urmă, panoul magic "Nameless", panoul pe care l-am numit "Element Options" înainte. Acesta este de fapt cel mai important grup de toate; efectuează toate magiile în Flash Catalyst. Este un panou din spate / gri-negru care va apărea când faceți clic pe ceva pe scenă. Dacă faceți clic pe oricare parte a unui aspect, acesta va deschide acest panou și va conține 3 secțiuni majore:

  • "Lucrarea de artă", unde puteți converti elementul selectat (Conversia operelor de artă) în componente flash native ca o bară de derulare sau un buton de derulare. În mod alternativ, în cazul în care editați elemente de elemente atunci când opera de artă este deja convertită în element nativ (aspectul elementului Editare). Aici veți găsi stările unui element care pot fi editate (de exemplu, Peste, Out, Activat, Dezactivat, etc ...).
  • A doua secțiune este interacțiunile dintre aplicații. Aici puteți defini tipul de interacțiune care poate fi făcută cu elementul / componenta și aplicația, în general acțiunile onLoad.
  • În cele din urmă, panoul de interacțiuni personalizate. Acest lucru va fi disponibil numai atunci când elementul este deja o componentă comună a aplicației. Aici puteți efectua acțiuni în funcție de elemente precum RollOver, RollOut, Change, Click ... De asemenea, puteți apela animația Timeline schimbând starea.

Să aruncăm o privire la ea ...

Ei bine, în esență IDE-ul nostru este prezentat. Cu toate acestea, uităm un lucru, ceva care designerii ar putea să nu fie interesați, dar este important pentru dezvoltatori. Codul. În colțul din dreapta sus, aveți un combobox unde puteți selecta vizualizarea Design sau cod. Dacă faceți clic pe el și nu sunteți familiarizat cu flexul, probabil îl închideți imediat, dar dacă sunteți un dezvoltator Flex, veți dori să îl explorați cu atenție. Veți găsi multe lucruri noi (mai ales dacă vă dezvoltați în Flex 3) care sunt Flash Builder 4 orientate. Limba este MXML cu câteva elemente în ActionScript. De asemenea, veți vedea un Project Explorer unde veți găsi tot ce a fost deja convertit în elemente de aplicație MXML și componente gata pentru a fi utilizate în Flash Builder. Acesta este un alt subiect și dacă doriți să aflați mai multe vă recomandăm să citiți marele review scris de Jesse Freeman despre Flash Builder 4.

Unul dintre celelalte lucruri interesante este că proiectul este gata de utilizare și este gata de vizualizare. Mergeți la fișierul> Executare proiect (CTRL + ENTER pe Win), proiectul dvs. este compilat și deschis într-un browser.

Simplitatea.

Acest lucru poate fi înțeles greșit, Flash Catalyst nu este ușor de folosit și ar putea fi foarte confuz pentru început, dar da! Chiar face lucrurile simple. Doar proiectați aspectul dvs. sau obțineți aspectul designerului dvs. într-un fișier Photoshop sau Illustrator, selectați fișierul și creați un nou proiect Flash Catalyst din acesta. Lucrurile vor arăta exact la fel în Flash Catalyst. De aici trebuie doar să convertiți elementele la care doriți să adăugați un comportament, să generați câteva pagini, să efectuați anumite tranziții, să testați proiectul și să îl salvați. Asta e tot! E gata pentru mâinile dezvoltatorului!

Codul generat

Pentru designeri acest lucru nu este neapărat de interes, dar pentru dezvoltatori acest lucru ar putea fi punctul cel mai dificil în FC. Deoarece toate codurile de elemente și proprietăți sunt generate automat, codul va avea nevoie de o recenzie bună și probabil de unele modificări pentru a funcționa în funcție de nevoile dezvoltatorului. În Flash Catalyst putem vedea deja noul motor Flash vector în acțiune; dacă încărcați unele materiale vectoriale în catalizatorul Flash, veți găsi în cod unele elemente "Grupuri", "Stroke", "Rect", "Fill" și "Path" cu unele date. Acesta este modul în care Flash proiectează elemente vectoriale. O simplă săgeată de vector va produce acest cod:

Aceste elemente sunt implementarea noii specificații Flash 10 / Flex FXG care permit dezvoltatorilor să utilizeze elemente de stil XML sau grupuri de elemente pentru a desena în flash, utilizând nu numai elemente native ca cercuri, dreptunghiuri, text sau curbe, ci și grafică mai complexă indicând informații vectoriale.

Veți găsi multe stări și, în principal, codul Flex 4 MXML care este puțin diferit de Flex 3 și complet nou pentru dezvoltatorii Flash sau pentru începători flexibili.

Concluzie

Este o aplicație fantastică! Nu aveți nici o îndoială!

În primul rând, dezvoltatorii pot lucra împreună cu designerii, le-ar arăta punctul de vedere al dezvoltatorului și unele interacțiuni cu aplicațiile înainte de a merge la dezvoltarea aplicațiilor, accelerarea întregului proces. Va fi ușor să găsiți aplicații fantastice și site-uri construite cu FC, creativitatea va invada acum aplicațiile Rich Internet. Spunând că, dezvoltatorii vor trebui să acorde atenție. Codul generat este destul de extins și fiecare schimbare are un impact asupra aspectului. Plasarea lucrurilor în Flash Catalyst și generarea unui cod frumos generat este un lucru, dar codarea ceva conform codului FC va arde uneori creierul dezvoltatorului!

Catalizatorul Flash aduce multe lucruri noi de explorat, dar pentru a fi cinstit m-am așteptat mai mult. Biblioteca componentelor este redusă, interacțiunea cu elementele este de asemenea redusă, textul importat nu își păstrează întotdeauna calitatea originală și unele lucruri nu funcționează corect (mai ales în DataList cu câteva rânduri ...). Spunând că aceasta este doar o versiune beta, nu? Trebuie să așteptăm încă eliberarea finală.

Definitiv, Flash Catalyst va ajunge la mase, dar codul generat și interacțiunea cu Flash Builder 4 vor avea nevoie de ceva timp pentru a câștiga popularitate, în special datorită faptului că noile specificații Flex 4 sunt foarte diferite de Flex 3.

Pentru cei care doresc să afle mai multe despre Flash Catalyst, vizitați pagina Catalyst Tutorial on Adobe Labs.

Vă mulțumim pentru lectură, ar fi minunat să auziți ce trebuie să spuneți!

Cod