Flash Catalyst Beta: First Look
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av
1 juni 2009.; datoen som Adobe lanserte sin nyeste verktøy rettet mot "både designere og utviklere". Dette var nesten slagordet for Flash Catalyst, tidligere kodenavnet "Thermo".
La oss ta et første glimt på denne kraftige applikasjonen som lover designere som de nå vil være i stand til å delta i utviklingen av Flash-programmer og nettsteder.
Hva er Flash Catalyst?
Flash Catalyst, tidligere kalt "Adobe Thermo", er et program spesielt utviklet for å nærme seg både designere og utviklere. Det kan lett forvandle enhver 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 modifisert av Flash Builder (tidligere Flex Builder), slik at utviklere å ha en vakker layout klar til å bli kodet. Søknaden er fullpakket med funksjoner som lar designere til å ta en enkel layout, legge til effekter og deretter publisere i flash-plattformen uten å måtte skrive en eneste linje med kode! Dette er kraften av Flash Catalyst.
The Concept! The Evolution!
Etter den aller første MAX snakke om en ny fantastisk verktøy som heter "Thermo", all den RIA og Flash-samfunnet blogger og fora ble fylt med noen fantastiske videoer. I disse videoene kan vi se en statisk Adobe Illustrator Layout blir forvandlet til et fullt funksjonelt program i løpet av få minutter. Adobe var å komme forberedt til å imponere enda lenger ..
Dette var i oktober 2007, i mellomtiden Thermo ble Katalysator, et år gått, og vi kan fortsatt bare finne knappe bilder på noen konferanser. Samtidig, Flex 4 begynte å få oppmerksomhet med nesten ukentlig nyheter. Thermo syntes å ha forsvunnet
November 2008.; en uventet date! Adobe distribueres gratis forhåndsvisning kopier av Flash Catalyst, bare for MAC OS og Gumbo (Gumbo var kodenavnet for Flash Builder 4). Utviklere og designere begynte å betale mer oppmerksomhet til Adobe Labs, men dessverre, frem til juni 2009, ikke noe mer ble hørt ...
juni. 2009. På den første dagen i måneden (endelig) Adobe sluppet Flash Catalyst første offentlige beta. Vel, ting begynner her!
The Flash Catalyst IDE
IDE er godt designet og delt, det er intuitivt og elementene er lette å finne. Jeg vil diskutere disse panelene litt lenger. Legg merke til at mitt OS er på fransk, så hvis du allerede vet FC og operativsystemet ditt er i andre språk du kan finne noen forskjeller, men jeg vil nevne dem også på engelsk.
Øverst til venstre, det aller første panel vi ser er "Stat /Pages". Dette er statene i programmet. Tenk, på første staten du har et login panel, på den andre har du den viktigste applikasjonen. Disse statene er lett identifiseres som følgende bildeshow!
Programmet vil belastningen på den første staten, og hvis du ønsker å gå til den andre staten, må du utføre noen triks (vel ... bare én trick - currentState = "Side2"), men i Flash Catalyst ting er laget med en viss stil. Vi setter en enkel knapp på "Stage" og gjøre det endres til "Side2" med onClick samhandling.
Det andre panelet er der vi legger alle våre ting, hvis du importerer en Photoshop-fil eller Illustrator fil alle elementer vil vises her. Hvis du arbeider med Flash og Flex du kan vurdere dette på hovedscenen. Se hvordan lignende det er:
Du kan også finne en knapp øverst i høyre hjørne, som frisker scenen. Dette er nyttig når scenen inneholder mange ting og for noen grunn Flash Catalyst glemmer å oppdatere endringene automatisk.
Den tredje panel er "tidslinjer" panel og det holder noen store overraskelser. Flash katalysator har en tidslinje, men hvis du forventer at det skal fungere som Flash Tidslinje, vil du oppdage at du tar feil. Denne tidslinjen er svært begrenset, og dens viktigste formål er å skape jevne animasjoner mellom Pages (overgang fra side 1 til side 2 og omvendt) med noen elementer og enkle effekter som fade, flytte, rotere. Dette panelet kan være litt vanskelig å forstå, men i løpet av kort tid vil du tenke annerledes. La oss ta en titt på det!
I dette panelet finner du til venstre staten /Sideoverganger og actionsekvenser (nei, dette var ikke oversatt til fransk) der du kan opprette egendefinerte handlinger og effekter. Når en "ekte" layout er loadded og forvandlet til elementene, vil de vises på denne tidslinjen. Du kan bruke en bestemt effekt til bare ett bestemt komponent. Denne tidslinjen fungerer på samme måte som Flash Animation Panel men her du angir start- og sluttidspunkt for effekten eller overgang. Du vil se i neste bilde hva jeg snakker om, dette ble gjort med en enkel layout:
Som jeg har forklart, til venstre vil du finne "side1" komponenter, i sentrum du har animasjon tidslinje og på høyre side (ikke vist før) de "side2" komponenter. Du kan sette en egen effekt på hver side komponent; Her er "side1" elementer begynner å fadeout, så halvveis gjennom, de "side2" elementer begynner å FadeIn, noe som gir en svært myk overgang effekt
Vi kan også se en av de beste Flash Catalyst har her.; Forhåndsvis-knappen (den lille "Play" knappen i midten). Hvis du har noen overganger, effekter eller sekvenser, bare trykk på denne knappen og du vil se animasjonen på scenen uten å forlate IDE. Dette er virkelig nyttig, tro meg!
Det neste panelet er "utils /Tools" panel og her finner du noen innfødte Flash /Flex komponenter som figurer, tekst, zoom og velge verktøy.
På bunnen av denne, har du den vanlige "Calques /Layers" panel, der du kan organisere programelementer. Hvis du åpner en PSD eller AI-fil, vil laget for forbli den samme; alt vil være på samme sted. Hvis du har ting godt atskilt i Photoshop eller Illustrator, vil du også dra nytte av det her! Du har din importert layout alle her. Hvis du gjør et prosjekt fra en tom mal, er dette hvor ting vil dukke opp når de er lagt til scenen. Se panelet:
Følgende panel er den mest komplette. Den inneholder tre hoveddeler, komponenter, biblioteket og "data" panel:
komponentene (Rammeverk komponenter): Noen av de vanligste Flash /Flex komponenter som knapper, rullefelt, boksen, Datalist ... de kan være drag & slippes på scenen
The Library (Bibliotheque). Komponentene som brukes i søknaden. Disse kan være felles komponenter, men også tilpassede komponenter. Tilpassede komponenter kan jeg laget fra vår layout, med "Element Options" panel, det er en grå, navnløs panel som jeg skal forklare sist.
Se hvordan det ser ut!
Det siste panelet er "Properties /Propriétés" hvor du kan finne informasjon om et valgt element på scenen. For eksempel, hvis du klikker på et tekstelement, her kan du definere sine egenskaper som farge, font, størrelse ...
Til slutt, magic "Nameless" Panel, panel jeg kalt "element Options" før. Dette er faktisk det viktigste av alt panel; den utfører all magien i Flash Catalyst. Det er en back /grå-svart panel som vil vises når du klikker noe på scenen. Klikke noen del av en layout vil åpne dette panelet, og den inneholder 3 store seksjoner:
Den "kunstverk", der du kan konvertere den valgte element (Konverter kunstverk) inn innfødte flash komponenter som en scrollbar eller knapp. Alternativt, dette er hvor du redigere elementdeler når kunstverk er allerede konvertert til mors element (Rediger element utseende). Her finner du et element tilstander som kan redigeres (f.eks. Over, Out, Aktiverer, Deaktivert, etc ...).
La oss ta en titt på det ..
Vel, i utgangspunktet vår IDE er presentert. Men vi glemmer en ting, noe som designere ikke kan være interessert i, men det er viktig for utviklere. Koden. I øvre høyre hjørne, har du en kombinasjonsboks der du kan velge design eller kodevisning. Hvis du klikker på det og er ikke kjent med flex, vil du sannsynligvis lukke den med en gang, men hvis du er en Flex-utvikler vil du ønsker å utforske dette nøye. Du vil finne mange nye ting (spesielt hvis du utvikle i Flex 3) som er Flash Builder 4 orientert. Språket er MXML med noen elementer i Actionscript. Du vil også se et prosjekt Explorer der du finner alt som allerede har blitt omgjort til applikasjons MXML elementer og komponenter klar til å brukes i Flash Builder. Dette er et helt annet tema, og hvis du ønsker å lære mer Jeg anbefaler at du leser den flotte anmeldelsen som Jesse Freeman skrev om Flash Builder 4.
En av de andre kule ting er at prosjektet er klar til bruk og også klar til å bli visualisert. Bare gå til Fil > Kjør prosjektet (CTRL + ENTER på Win), er prosjektet utarbeidet og åpnet i en nettleser.
Enkelheten.
Dette kan bli misforstått, er Flash Catalyst ikke lett å bruke og kan godt være forvirrende til å begynne med, men ja! Det virkelig gjøre ting enkelt. Bare designe din layout, eller få oppsettet fra designer i et Photoshop eller Illustrator-fil, velg filen og opprette en ny Flash Catalyst prosjekt fra den. Ting vil se akkurat det samme i Flash Catalyst. Herfra bare konvertere de elementene som du vil legge til atferd, generere noen sider, noen overganger, teste prosjektet og lagre det. Det er alt! Det er klart for utviklerens hender!
Den genererte koden
For designerne dette er ikke nødvendigvis av interesse, men for utviklere dette kan være det vanskeligste punktet i FC. Som alle elementer og egenskaper kode er automatisk generert, vil koden trenger en god anmeldelse, og sannsynligvis noen modifikasjoner for å arbeide i henhold til utviklerens behov. I Flash Catalyst kan vi allerede se den nye Flash vektor motoren i aksjon; hvis du legger noen vektor ting i Flash Catalyst, finner du i koden noen "grupper", "Stroke", "Rect", "Fyll" og "sti" elementer med noen data. Dette er hvordan Flash design vektorelementer. En enkel vektor pilen vil produsere denne koden:
< s: Sti svingete = "null" ai: knockout = "0" data = "M 0 21,559 L 8,91 10,779 L 0 0 L 23,156 10,779 L 0 21,559 Z" >
Disse elementene er implementeringen av den nye Flash 10 /Flex FXG spesifikasjon som tillater utviklere å bruke XML stilelementer eller grupper av elementer for å tegne i flash, bruker ikke bare innfødte elementer som sirkler, rektangler, tekst eller kurver, men også mer komplekse grafikk av indikerer vektorinformasjon.
Du vil finne mange stater og i hovedsak Flex 4 MXML kode som er litt forskjellig fra Flex 3 og helt nytt for Flash Utviklere eller Flex nybegynnere.
Konklusjon
Det er et fantastisk program! Har ingen tvil!
Til å begynne med, vi utviklere kan nå virkelig jobbe sammen med designere, vise dem utvikleren point-of-view og noen program interaksjoner før du går til applikasjonsutvikling, påskynde hele prosessen opp. Det vil være lett å finne fantastiske programmer og nettsider bygget med FC, vil kreativiteten nå invadere Rich Internet Applications. Å si at vil utviklere må ta hensyn. Den genererte koden er ganske omfattende, og hver endring har en innvirkning på utformingen. Plassere ting i Flash Catalyst og ha hyggelig generert kode er én ting, men koding noe i henhold til FC koden vil noen ganger brenne en utvikler hjerne!
Flash Catalyst bringer mange nye ting å utforske, men for å være ærlig jeg forventet mer . Den komponenter biblioteket er redusert, samspillet med elementer er også redusert, betyr importerte teksten ikke alltid beholde sin opprinnelige kvalitet og noen ting ikke fungerer riktig (spesielt i Datalist med noen rader ...). Sier at dette er bare en beta, ikke sant ?! Vi har fortsatt å vente på den endelige versjonen.
Definitivt Flash Catalyst vil nå massene, men den genererte koden og Flash Builder 4 samhandling vil trenge litt tid for å vinne popularitet, hovedsakelig fordi de nye Flex 4 spesifikasjonene er svært forskjellig fra Flex 3.
For de som ønsker å lære mer om Flash Catalyst, besøke Catalyst Tutorial Page på Adobe Labs.
Takk for lesing, det ville være flott å høre hva du har å si!