Flash Catalyst Beta First Look

1 juni 2009; de datum waarop Adobe zijn nieuwste tool publiceerde, gericht op "zowel ontwerpers als ontwikkelaars". Dit was bijna de slogan voor Flash Catalyst, voorheen de code genaamd "Thermo".

Laten we een eerste glimp opvangen van deze krachtige applicatie die ontwerpers belooft dat ze nu kunnen deelnemen aan de ontwikkeling van Flash-applicaties en websites.

Wat is Flash Catalyst?

Flash Catalyst, voorheen "Adobe Thermo" genaamd, is een applicatie die speciaal is ontwikkeld om zowel ontwerpers als ontwikkelaars te benaderen. Het kan elke Photoshop- of Illustrator-lay-out eenvoudig omzetten in een complete, geanimeerde en interactieve website of Rich Internet Application op basis van het Flash-platform. Het uiteindelijke resultaat van Flash Catalyst kan worden geïmporteerd en gewijzigd door Flash Builder (voorheen Flex Builder), waardoor ontwikkelaars een prachtige lay-out kunnen maken die klaar is om te worden gecodeerd. De applicatie zit boordevol functies waarmee ontwerpers een eenvoudige lay-out kunnen nemen, effecten kunnen toevoegen en vervolgens in flash-platform kunnen publiceren zonder een enkele regel code te hoeven schrijven! Dit is de kracht van Flash Catalyst.

Het concept! De evolutie!

Na de allereerste MAX-lezing over een nieuwe fantastische tool met de naam "Thermo", waren alle RIA- en Flash-communityblogs en -forums gevuld met een aantal fantastische video's. In deze video's konden we zien dat een statische Adobe Illustrator-lay-out in enkele minuten werd omgezet in een volledig functionele toepassing. Adobe was erop voorbereid om nog meer indruk te maken ...

Dit was in oktober 2007, ondertussen werd Thermo Catalyst, nog een jaar voorbij en we konden nog steeds slechts schaars foto's vinden op een paar conferenties. Tegelijkertijd begon Flex 4 aandacht te krijgen met bijna wekelijks nieuws. Thermo leek verdwenen.

November 2008; een onverwachte datum! Adobe distribueerde gratis voorbeeldkopieën van Flash Catalyst, alleen voor MAC OS en Gumbo (Gumbo was de codenaam voor Flash Builder 4). Ontwikkelaars en ontwerpers begonnen meer aandacht te besteden aan Adobe-laboratoria, maar tot juni 2009 werd er helaas niets meer gehoord ...

Juni. 2009. Op de eerste dag van de maand (eindelijk) publiceerde Adobe de eerste public beta van Flash Catalyst. Nou, de dingen beginnen hier!

De Flash Catalyst IDE

De IDE is goed ontworpen en verdeeld, het is intuïtief en elementen zijn gemakkelijk te vinden. Ik zal deze panelen een beetje verder bespreken. Houd er rekening mee dat mijn besturingssysteem in het Frans is, dus als u FC al kent en uw besturingssysteem in een andere taal is, kunt u enkele verschillen vinden, maar ik zal ze ook in het Engels noemen.

Linksboven is het allereerste paneel dat we zien de 'Staten / pagina's'. Dit zijn de toestanden van de applicatie. Stel je voor, in de eerste staat heb je een inlogpaneel, op de tweede heb je de hoofdtoepassing. Deze toestanden worden gemakkelijk geïdentificeerd als de volgende afbeelding laat zien!

De applicatie wordt in de eerste staat geladen en als je naar de tweede staat wilt gaan, moet je wat trucs uitvoeren (goed ... maar één truc - currentState = "Page2"), maar in Flash Catalyst zijn dingen gemaakt met een bepaalde stijl . We plaatsen een eenvoudige knop in het "werkgebied" en veranderen deze in "Pagina2" met onClick-interactie.

In het tweede paneel plaatsen we al onze spullen. Als u een Photoshop-bestand of een Illustrator-bestand importeert, verschijnen hier alle elementen. Als je met Flash en Flex werkt, kun je dit als het hoofdpodium beschouwen. Zie hoe vergelijkbaar het is:

Je vindt ook een knop in de rechterbovenhoek, waarmee het podium wordt vernieuwd. Dit is handig als de fase veel dingen bevat en om de een of andere reden vergeet Flash Catalyst de wijzigingen automatisch bij te werken.

Het derde paneel is het paneel "Tijdlijnen" en bevat enkele grote verrassingen. Flash-katalysator heeft een tijdlijn, maar als u verwacht dat deze zal functioneren als de tijdlijn van Flash, zult u merken dat u zich vergist. Deze tijdlijn is zeer beperkt en het belangrijkste doel ervan is om vloeiende animaties te maken tussen Pages (overgang van pagina 1 naar pagina 2 en omgekeerd) met enkele elementen en eenvoudige effecten zoals vervagen, verplaatsen, roteren. Dit paneel is misschien een beetje moeilijk te begrijpen, maar binnen een korte tijd zul je anders denken. Laten we er eens naar kijken!

In dit paneel vindt u links de status- / pagina-overgangen en de actiesequenties (nee, dit werd niet in het Frans vertaald), waar u aangepaste acties en effecten kunt maken. Wanneer een "echte" lay-out wordt geladen en omgezet in elementen, verschijnen deze op deze tijdlijn. U kunt een specifiek effect op slechts één specifiek onderdeel toepassen. Deze tijdlijn werkt op dezelfde manier als het Flash-animatiepaneel, maar hier geeft u de begin- en eindtijd van het effect of de overgang op. Je ziet in de volgende afbeelding waar ik het over heb, dit is gemaakt met een eenvoudige lay-out:

Zoals ik heb uitgelegd, vindt u aan de linkerkant de 'Pagina1'-componenten, in het midden heeft u de animatie-tijdlijn en aan de rechterkant (niet eerder weergegeven) de' Pagina2'-componenten. U kunt een afzonderlijk effect op elke zijcomponent plaatsen; hier beginnen de "Pagina1" -elementen met FadeOut en halverwege beginnen de "Page2" -elementen met FadeIn, wat een zeer soepel overgangseffect geeft.

We kunnen ook een van de beste Flash Catalyst-functies hier bekijken; de knop Voorbeeld (de kleine knop "Afspelen" in het midden). Als je wat overgangen, effecten of sequenties hebt, druk je gewoon op deze knop en je ziet de animatie op het podium zonder de IDE te verlaten. Dit is echt handig, geloof me!

Het volgende paneel is het paneel "Utils / Tools" en hier vindt u enkele originele Flash / Flex-componenten, zoals vormen, tekst, de zoom- en selectiegereedschappen.

Onderaan deze, hebt u het algemene paneel "Calques / Lagen", waar u uw applicatie-elementen kunt organiseren. Als u een PSD- of AI-bestand opent, blijft de volgorde van de lagen ongewijzigd; alles zal op dezelfde plaats zijn. Als je dingen goed gescheiden hebt in Photoshop of Illustrator, zul je hier ook van profiteren! Je hebt je geïmporteerde lay-out hier allemaal. Als u een project maakt vanuit een lege sjabloon, worden de dingen hier weergegeven wanneer ze aan het werkgebied worden toegevoegd. Zie het paneel:

Het volgende paneel is het meest compleet. Het bevat drie hoofdonderdelen, de componenten, de bibliotheek en het paneel "Gegevens":

  • De componenten (Wireframe-componenten): enkele van de gangbare Flash / Flex-componenten zoals knoppen, schuifbalken, checkbox, datalist ... ze kunnen worden versleept naar het podium.
  • The Library (Bibliotheque): de componenten die in de applicatie worden gebruikt. Dit kunnen algemene componenten zijn, maar ook aangepaste componenten. Aangepaste componenten kan ik maken vanuit onze lay-out, met het paneel "Elementopties", het is een grijs, naamloos paneel dat ik als laatste zal uitleggen.
  • Het paneel "Temp Data Generation" (Creation-Donnes de Temps): hier kunnen we aangepaste gegevens genereren voor een datalist, dit wordt normaal gesproken gebruikt om datalist-ingangen (rijen) te genereren om een ​​voorvertoning van het eindresultaat te bekijken.

Zie hoe het eruit ziet!

Het laatste paneel is de "Eigenschappen / Propriétés" waar u informatie kunt vinden over een geselecteerd element op het podium. Als u bijvoorbeeld op een tekstelement klikt, kunt u hier de eigenschappen definiëren, zoals kleur, lettertype, grootte ...

Ten slotte, het magische "Naamloze" paneel, het paneel dat ik eerder "Elementopties" noemde. Dit is eigenlijk het belangrijkste paneel van allemaal; het voert alle magie uit in Flash Catalyst. Het is een grijs / zwart paneel dat verschijnt als je op iets op het podium klikt. Als u op een willekeurig onderdeel van een lay-out klikt, wordt dit paneel geopend en het bevat 3 hoofdsecties:

  • De "illustratie", waar u het geselecteerde element (illustratie Converteren) kunt omzetten in native flash-componenten als een schuifbalk of knop. Als alternatief kunt u hier elementonderdelen bewerken wanneer de illustratie al is geconverteerd naar het oorspronkelijke element (elementelement bewerken). Hierin vindt u de toestanden van een element die kunnen worden bewerkt (bijv. Over, Uit, Inschakelen, Uitgeschakeld, enz ...).
  • De tweede sectie is de interacties van de toepassing. Hier kunt u het type interactie definiëren dat kan worden gemaakt met het element / component en de toepassing, meestal de onLoad-acties.
  • Eindelijk het paneel met aangepaste interacties. Dit is alleen beschikbaar als het element al een algemeen onderdeel van de toepassing is. Hier kunt u acties uitvoeren op basis van het element zoals RollOver, RollOut, Wijzigen, Klik ... U kunt ook de tijdlijnanimatie oproepen door de status te wijzigen.

Laten we er eens naar kijken ...

Nou, eigenlijk wordt onze IDE gepresenteerd. We vergeten echter één ding, iets waar ontwerpers mogelijk niet in geïnteresseerd zijn, maar het is belangrijk voor ontwikkelaars. De code. In de rechterbovenhoek hebt u een combobox waarin u de ontwerp- of codeweergave kunt selecteren. Als u erop klikt en niet bekend bent met flex, sluit u deze waarschijnlijk onmiddellijk, maar als u een Flex-ontwikkelaar bent, wilt u dit zorgvuldig verkennen. Je zult veel nieuwe dingen vinden (vooral als je ontwikkelt in Flex 3) die op Flash Builder 4 zijn georiënteerd. De taal is MXML met een paar elementen in ActionScript. U ziet ook een projectverkenner waarin u alles kunt vinden dat al is geconverteerd naar MXML-elementen en componenten van de toepassing die klaar zijn om te worden gebruikt in Flash Builder. Dit is een heel ander onderwerp en als je meer wilt weten, raad ik je aan de geweldige recensie te lezen die Jesse Freeman schreef over Flash Builder 4.

Een van de andere toffe dingen is dat het project gebruiksklaar is en ook klaar om te worden gevisualiseerd. Ga gewoon naar Bestand> Uitvoeren project (CTRL + ENTER op Win), uw project wordt gecompileerd en geopend in een browser.

De eenvoud.

Dit kan verkeerd worden begrepen, Flash Catalyst is niet gemakkelijk te gebruiken en kan in de eerste plaats verwarrend zijn, maar ja! Het maakt de dingen echt eenvoudig. Ontwerp uw lay-out of neem de lay-out van uw ontwerper in een Photoshop- of Illustrator-bestand, selecteer uw bestand en maak er een nieuw Flash Catalyst-project van. De dingen zien er in Flash Catalyst hetzelfde uit. Converteer vanaf hier de elementen waaraan u gedrag wilt toevoegen, genereer enkele pagina's, enkele overgangen, test het project en sla het op. Dat is alles! Het is klaar voor de handen van de ontwikkelaar!

De gegenereerde code

Voor ontwerpers is dit niet noodzakelijk van belang, maar voor ontwikkelaars zou dit het moeilijkste punt in FC kunnen zijn. Omdat alle elementen en eigenschappencode automatisch wordt gegenereerd, heeft de code een goede beoordeling nodig en waarschijnlijk een aantal aanpassingen om te werken volgens de behoeften van de ontwikkelaar. In Flash Catalyst kunnen we de nieuwe Flash-vectorengine al in actie zien; als je wat vectorspullen in Flash-katalysator laadt, vind je in de code enkele elementen "Groepen", "Lijn", "Rect", "Vul" en "Pad" met wat gegevens. Dit is hoe Flash vectorelementen ontwerpt. Een eenvoudige vectorpijl produceert deze code:

Deze elementen zijn de implementatie van de nieuwe Flash 10 / Flex FXG-specificatie waarmee ontwikkelaars XML-stijlelementen of groepen elementen kunnen gebruiken om in flash te tekenen, waarbij niet alleen native elementen als cirkels, rechthoeken, tekst of krommen worden gebruikt, maar ook complexere grafische afbeeldingen van het aangeven van vectorinformatie.

Je zult veel toestanden en vooral Flex 4 MXML-code vinden die een beetje verschilt van Flex 3 en volledig nieuw is voor Flash-ontwikkelaars of Flex-beginners.

Conclusie

Het is een fantastische applicatie! Twijfel er niet aan!

Om te beginnen kunnen we ontwikkelaars nu echt samenwerken met ontwerpers, hen het ontwikkelaarstandpunt en enkele applicatie-interacties laten zien voordat ze naar de applicatie-ontwikkeling gaan, waardoor het hele proces versneld wordt. Het zal gemakkelijk zijn om fantastische applicaties en sites te vinden die gebouwd zijn met FC, de creativiteit zal nu Rich Internet Applications binnenvallen. Zeggen dat, ontwikkelaars moeten opletten. De gegenereerde code is behoorlijk uitgebreid en elke wijziging heeft invloed op de lay-out. Het plaatsen van dingen in Flash Catalyst en het hebben van mooie gegenereerde code is één ding, maar het coderen van iets volgens de FC-code zal soms het brein van een ontwikkelaar verbranden!

Flash Catalyst biedt veel nieuwe dingen om te ontdekken, maar om eerlijk te zijn verwachtte ik meer. De componentenbibliotheek wordt gereduceerd, de interactie met elementen wordt ook beperkt, geïmporteerde tekst behoudt niet altijd de oorspronkelijke kwaliteit en sommige dingen werken niet correct (vooral in DataList met een paar rijen ...). Zeggen dat, dit is slechts een beta, toch ?! We moeten nog wachten op de definitieve release.

Definitief Flash Catalyst zal de massa bereiken, maar de gegenereerde code en Flash Builder 4-interactie zullen enige tijd nodig hebben om aan populariteit te winnen, vooral omdat de nieuwe Flex 4-specificaties sterk verschillen van Flex 3.

Als u meer wilt weten over Flash Catalyst, bezoekt u de Catalyst Tutorial-pagina op Adobe Labs.

Bedankt voor het lezen, het zou geweldig zijn om te horen wat je te zeggen hebt!