Flash Catalyst Beta First Look

1. juni 2009; datoen som Adobe lanserte sitt nyeste verktøy rettet mot "både designere og utviklere". Dette var nesten slagordet for Flash Catalyst, tidligere kode kalt "Thermo".

La oss ta et første glimt på dette kraftige programmet som lover designere at de nå kan delta i utviklingen av Flash-applikasjoner og nettsteder.

Hva er Flash Catalyst?

Flash Catalyst, tidligere kalt "Adobe Thermo", er et program som er utviklet for å nærme seg både designere og utviklere. Det kan enkelt forvandle eventuelle Photoshop eller Illustrator Layout til et komplett, animert og interaktivt nettsted eller Rich Internet Application basert på Flash-plattformen. Det endelige resultatet av Flash Catalyst kan importeres og modifiseres av Flash Builder (tidligere Flex Builder), slik at utviklere har et vakkert layout klar til å bli kodet. Søknaden er fullpakket med funksjoner som tillater designere å ta et enkelt layout, legge til effekter og deretter publisere i flashplattform uten å skrive en enkelt linje med kode! Dette er kraften til Flash Catalyst.

Konseptet! Evolusjonen!

Etter den aller første MAX-snakk om et nytt fantastisk verktøy kalt "Thermo", ble alle RIA og Flash-fellesskapets blogger og fora fylt med noen fantastiske videoer. I disse videoene kunne vi se en statisk Adobe Illustrator Layout bli transformert til et fullt funksjonelt program på få minutter. Adobe ble forberedt på å imponere enda mer ...

Dette var i oktober 2007, mens Thermo ble Catalyst, et år gikk videre, og vi kunne fortsatt bare finne knappe bilder på noen konferanser. Samtidig begynte Flex 4 å få oppmerksomhet med nesten ukentlige nyheter. Thermo syntes å ha forsvunnet.

November 2008; en uventet dato! Adobe distribuerte gratis forhåndsvisningskopier av Flash Catalyst, bare for MAC OS og Gumbo (Gumbo var kodenavnet for Flash Builder 4). Utviklere og designere begynte å være mer oppmerksom på Adobe Labs, men dessverre, til juni 2009, ble det ikke hørt noe mer ...

Juni. 2009. På den første dagen i måneden (til slutt) ga Adobe ut Flash Catalystens første offentlige beta. Vel, ting starter her!

Flash Catalyst IDE

IDE er godt utformet og delt, det er intuitivt og elementene er enkle å finne. Jeg diskuterer disse panelene litt lenger. Merk at operativsystemet mitt er på fransk, så hvis du allerede kjenner FC og operativsystemet ditt er på andre språk, kan det hende du finner noen forskjeller, men jeg vil også nevne dem på engelsk.

Øverst til venstre er det aller første panelet vi ser er "State / Pages". Dette er søknadens tilstand. Tenk deg, på første stat har du et påloggingspanel, på den andre har du hovedapplikasjonen. Disse tilstandene er lett identifisert som følgende bilde viser!

Søknaden vil lastes på den første tilstanden, og hvis du vil gå til den andre staten, må du utføre noen triks (vel ... bare ett triks - currentState = "Page2"), men i Flash Catalyst blir det laget noen stil . Vi legger en enkel knapp på "Stage" og gjør den til «Page2» med onClick-samhandling.

Det andre panelet er der vi legger alle våre ting, hvis du importerer en Photoshop-fil eller Illustratorfil, kommer alle elementene til å vises her. Hvis du jobber med Flash og Flex, kan du vurdere dette som hovedfasen. Se hvordan det er slik:

Du kan også finne en knapp øverst til høyre, som oppdaterer scenen. Dette er nyttig når scenen inneholder mange ting, og av en eller annen grunn glemmer Flash Catalyst å oppdatere endringer automatisk.

Det tredje panelet er "Timelines" -panelet, og det har noen store overraskelser. Flash-katalysator har en tidslinje, men hvis du forventer at den skal fungere som Flashs tidslinje, vil du oppdage at du tar feil. Denne tidslinjen er svært begrenset, og hovedformålet er å skape glatte animasjoner mellom Sider (overgang fra side 1 til side 2 og omvendt) med enkelte elementer og enkle effekter som fade, flytte, rotere. Dette panelet kan være litt vanskelig å forstå, men innen kort tid vil du tenke annerledes. La oss ta en titt på det!

I dette panelet finner du til venstre statussiden / sideovergangene og handlingssekvensene (nei, dette var ikke oversatt til fransk) der du kan opprette egendefinerte handlinger og effekter. Når en "ekte" layout lastes og forvandles til elementer, vises de på denne tidslinjen. Du kan bruke en bestemt effekt på bare en bestemt komponent. Denne tidslinjen fungerer på samme måte som Flash Animation Panel, men her angir du start- og sluttidspunktet for effekten eller overgangen. Du ser i neste bilde hva jeg snakker om, dette ble laget med et enkelt oppsett:

Som jeg har forklart, til venstre finner du komponentene "Page1", i midten har du tidslinjen for animasjon og til høyre (ikke vist før) komponentene "Page2". Du kan legge en separat effekt på hver sidekomponent; her begynner elementene "Side1" å FadeOut, så halvveis gjennom, begynner elementene "Page2" å FadeIn, noe som gir en meget jevn overgangseffekt.

Vi kan også se en av de beste Flash Catalyst-funksjonene her; Forhåndsvisningsknappen (den lille "Spill" -knappen i midten). Hvis du har noen overganger, effekter eller sekvenser, trykker du bare på denne knappen, og du vil se animasjonen på scenen uten å forlate IDE. Dette er veldig nyttig, tro meg!

Det neste panelet er "Utils / Tools" -panelet, og her finner du noen innfødte Flash / Flex-komponenter, for eksempel figurer, tekst, zoom og velg verktøy.

På bunnen av denne har du det felles "Calques / Layers" -panelet, der du kan organisere dine applikasjonselementer. Hvis du åpner en PSD- eller AI-fil, vil lagrekkefølgen forbli den samme; alt vil være på samme sted. Hvis du har ting godt skilt i Photoshop eller Illustrator, vil du også ha glede av det her! Du har ditt importerte layout alt her. Hvis du lager et prosjekt fra en tom mal, er det her tingene vil vises når de legges til scenen. Se panelet:

Følgende panel er den mest komplette. Den inneholder tre hoveddeler, komponentene, biblioteket og "data" -panelet:

  • Komponenterne (Wireframe Components): Noen av de vanlige Flash / Flex-komponentene som knapper, rullebjørker, avkrysningsboks, datalist ... de kan dra og slippe ned på scenen.
  • Biblioteket: Komponentene som brukes i søknaden. Disse kan være vanlige komponenter, men også tilpassede komponenter. Egendefinerte komponenter kan jeg lage fra vår layout, med panelet "Element Options", det er et Grå, navnløst panel som jeg skal forklare sist.
  • "Temp Data Generation" (Creation-Donnes de Temps) panelet: Her kan vi generere egendefinerte data for en datalist, dette brukes vanligvis til å generere dataoppføringer (rader) for å forhåndsvise det endelige resultatet.

Se hvordan det ser ut!

Det siste panelet er "Properties / Propriétés" hvor du kan finne informasjon om et valgt element på scenen. Hvis du for eksempel klikker på et tekstelement, kan du her definere egenskaper som farge, skrift, størrelse ...

Til slutt, det magiske "Nameless" Panel, panelet jeg ringte "Element Options" før. Dette er faktisk det viktigste panelet av alle; Den utfører all den magiske i Flash Catalyst. Det er et bak / grå-svart panel som vises når du klikker noe på scenen. Hvis du klikker på en del av en layout, åpnes dette panelet og det inneholder 3 hovedavsnitt:

  • "Illustrasjonen", der du kan konvertere det valgte elementet (Konverter kunstverk) til innfødte flashkomponenter som en rullefelt eller en knapp. Alternativt, dette hvor du redigerer elementdeler når kunstverket allerede er omgjort til innfødt element (Rediger elementutseende). Her finner du et elements stater som kan redigeres (f.eks. Over, Ut, Aktiver, Deaktivert, etc ...).
  • Den andre delen er applikasjonsinteraksjonene. Her kan du definere hvilken type interaksjon som kan gjøres med elementet / komponenten og applikasjonen, vanligvis onLoad-handlingene.
  • Til slutt, det egendefinerte interaksjonspanelet. Dette vil bare være tilgjengelig når elementet allerede er en vanlig komponent for applikasjonen. Her kan du utføre handlinger i henhold til elementet som RollOver, RollOut, Change, Click ... Du kan også ringe Timeline-animasjonen ved å endre staten.

La oss ta en titt på det ...

Vel, i utgangspunktet presenteres vår IDE. Men vi glemmer en ting, noe som designere kanskje ikke er interessert i, men det er viktig for utviklere. Koden. I øverste høyre hjørne har du en combobox hvor du kan velge design eller kodevisning. Hvis du klikker på det og ikke er kjent med flex, vil du sannsynligvis lukke det umiddelbart, men hvis du er en Flex-utvikler, vil du undersøke dette nøye. Du finner mange nye ting (spesielt hvis du utvikler i Flex 3) som er Flash Builder 4 orientert. Språket er MXML med noen få elementer i ActionScript. Du vil også se en Project Explorer der du finner alt som allerede er konvertert til applikasjons MXML-elementer og komponenter klar til bruk i Flash Builder. Dette er et helt annet tema, og hvis du vil lære mer, anbefaler jeg at du leser den flotte anmeldelsen som Jesse Freeman skrev om Flash Builder 4.

En av de andre kule tingene er at prosjektet er klar til bruk og også klar til å bli visualisert. Bare gå til File> Run prosjekt (CTRL + ENTER on Win), prosjektet ditt er kompilert og åpnet i en nettleser.

Enkelheten.

Dette kan misforstås, Flash Catalyst er ikke lett å bruke og kan vel være forvirrende til å begynne med, men ja! Det gjør virkelig tingene enkle. Bare utform layoutet, eller få layoutet fra designeren din i en Photoshop- eller Illustrator-fil, velg filen og opprett et nytt Flash Catalyst-prosjekt fra den. Ting vil se akkurat ut i Flash Catalyst. Herfra konverterer du bare elementene du vil legge til oppførsel, generere noen sider, noen overganger, teste prosjektet og lagre det. Det er alt! Den er klar for utviklerens hender!

Den genererte koden

For designere er dette ikke nødvendigvis av interesse, men for utviklere kan dette være det vanskeligste punktet i FC. Siden alle elementene og egenskapskoden er automatisk generert, vil koden trenge en god anmeldelse og sannsynligvis noen modifikasjoner for å fungere i henhold til utviklerens behov. I Flash Catalyst kan vi allerede se den nye Flash-vektormotoren i aksjon; Hvis du laster inn noen vektorfiler i Flash-katalysator, finner du i koden noen "Grupper", "Stroke", "Rect", "Fyll" og "Sti" -elementene med noen data. Dette er hvordan Flash designer vektorelementer. En enkel vektorpile vil produsere denne koden:

Disse elementene er implementeringen av den nye Flash 10 / Flex FXG-spesifikasjonen som tillater utviklere å bruke XML-stilelementer eller grupper av elementer for å tegne i flash, ikke bare ved hjelp av innfødte elementer som sirkler, rektangler, tekst eller kurver, men også mer komplisert grafikk ved indikerer vektorinformasjon.

Du finner mange stater og hovedsakelig Flex 4 MXML-kode som er litt forskjellig fra Flex 3 og helt ny for Flash-utviklere eller Flex-nybegynnere.

Konklusjon

Det er et fantastisk program! Har ingen tvil!

Til å begynne med kan utviklere nå virkelig samarbeide med designere, vise dem utviklerens synspunkt og noen applikasjonsinteraksjoner før de går til applikasjonsutviklingen, og påskynder hele prosessen. Det vil være enkelt å finne fantastiske applikasjoner og nettsteder bygget med FC, og kreativiteten vil nå invadere Rich Internet Applications. Å si at utviklere må ta hensyn. Den genererte koden er ganske omfattende og alle endringer har innvirkning på oppsettet. Plassering av ting i Flash Catalyst og å ha god generert kode er en ting, men koding av noe i henhold til FC-koden vil noen ganger brenne en utviklers hjerne!

Flash Catalyst bringer mange nye ting å utforske, men for å være ærlig forventet jeg mer. Komponenter biblioteket er redusert, samspillet med elementer er også redusert, importert tekst beholder ikke alltid sin opprinnelige kvalitet, og noen ting fungerer ikke riktig (spesielt i DataList med noen få rader ...). Å si at dette er bare en beta, ikke sant? Vi må fortsatt vente på den endelige utgivelsen.

Definitivt Flash Catalyst vil nå massene, men den genererte koden og Flash Builder 4-interaksjonen vil trenge litt tid for å få popularitet, hovedsakelig fordi de nye Flex 4-spesifikasjonene er svært forskjellige fra Flex 3.

For de som ønsker å lære mer om Flash Catalyst, kan du besøke katalogen Tutorial Page på Adobe Labs.

Takk for at du leser, det ville være flott å høre hva du har å si!