Share
Flash Professional er ikke det eneste verktøyet du kan bruke til å lage Flash-programmer og -spill. Tidligere på året så vi på FlashDevelop; Nå tar vi en titt på FDT 4, en kraftig IDE utviklet spesielt for ActionScript, MXML og haXe-utvikling. Les videre for å finne ut hva det kan tilby deg!
Forskjellen mellom FDT og Flash Professional-kodeditoren eller andre verktøy er at den tilbyr tonnevis av tidsbesparende funksjoner som lar deg konsentrere deg om logikken til koden din, slik at du ikke trenger å bry deg med syntaksproblemer som en manglende lukkebrakett eller en feilstavet funksjonsanrop. Som en stavekontroll gir FDT deg øyeblikkelig tilbakemelding om koden din og identifiserer problemer før du selv kompilerer prosjektet. Før vi installerer og begynner å jobbe med FDT, vil jeg gjerne gi deg en smak av noen av sine mest spennende funksjoner.
Den viktigste funksjonen til FDT, som du sannsynligvis vil bruke oftest, er kodenavslutning, også kalt automatisk fullføring. Du må aldri skrive inn hele navnet på en variabel eller funksjon igjen. Bare begynn å skrive og klikk CTRL + Space for å få opp listen over forslag. Du kan endre automatisk ferdigstillingsadferd som skal utløses på hvert tastetrykk (som FlashDevelop gjør) ved å gå til Innstillinger> FDT> Redigerer> Kodeassistent og slå på "Hver nøkkel".
Fortsett å skrive for å begrense listen over valg. Bruk musen til å velge et forslag fra listen eller bruk piltastene "Up" og "Down", etterfulgt av å trykke "Return". Du kan også bruke "camel case auto completion" - for eksempel, someMovieClip.gap vil tilby funksjonen gotoAndPlay ().
Min favorittfunksjon i FDT bruker sin Quick Fix-funksjonalitet. FDT vil ikke bare umiddelbart fortell deg hva som er galt i koden din, men gir deg også muligheten til å fikse det automatisk ved å sette inn den manglende koden. Hvis du for eksempel ringer en funksjon som ikke er tilgjengelig, vil FDT legge til en feilmarkør til venstre for denne linjen. Den gule lyspæren indikerer at det er en hurtig løsning tilgjengelig for dette problemet. Treff CMD / CTRL + 1 og sjekk ut forslaget i Quick Fix-popup-vinduet:
FDT tilbyr deg å opprette funksjonen si hei(). Hit "Return" og FDT vil automatisk sette inn funksjonen. Bruk "Tab" -tasten for å bla gjennom kodesetningene omgitt av de blå rektanglene og endre dem. Igjen treffer du "Return" for å fullføre Quick Fix-prosedyren.
Denne funksjonen er ikke bare bra for å fikse problemer med bare noen få tastetrykk, men vil også endre din kodende arbeidsflyt. Du vil begynne å tvinge problemer for å gjøre bruk av en Quick Fix!
Ved å bruke snarveien CMD / CTRL + SHIFT + O eller velge Kilde> Organiser import fra menyen, legger du til alle manglende importangivelser øverst i klassen. Du trenger ikke å legge til noen import manuelt lenger. Den fineste tingen om FDTs organiseringsimportfunksjon er at den også vil fjerne ubrukt import automatisk.
Jeg vil gjerne ha en lilla etikett i min Flex-app, men hvilken hex-fargekode har lilla? Uten å måtte bytte til Flash Pro eller Photoshop, kan du bare bruke FDTs fargeplukker til å velge en farge. Sett markøren over hex-koden og aktiver Quick Fix (CMD / CTRL + 1). Velg "Velg farge" og bruk fargevalgeren.
Som utvikler finner du deg selv å skrive i gjentatte kodebiter om og om igjen, som for eksempel "for loop". I FDT kan vi bare bruke kodemaler for det. Skriv inn fori, bruk automatisk fullføring (CTRL + SPACE) og velg "fori-iterate over array". Dette vil sette inn kodestykket for deg. Gjør endringer ved å bruke "Tab" -tasten og trykk "Return" for å fullføre.
For å bla gjennom kodemaler som leveres med FDT, gå til Innstillinger> FDT Editor> Maler. Dette er stedet der du også kan lage dine egne maler! Bare ta en titt på de andre malene, og du vil raskt lære å lage dem og bruke de kraftige variablene for å gjøre dem enda smartere.
FDT har to flotte refactoring funksjoner: Bevege seg og Gi nytt navn. Hvis du vil flytte en klasse til en annen pakke, trenger du vanligvis å endre importansettingene i alle klasser som bruker den. Flytt refactoring i FDT tar seg av dette automatisk. Bare dra og slipp klassen fra en pakke til en annen i Flash Explorer og FDT vil ta vare på resten.
Hvis du vil endre navn på en klasse, funksjon eller variabel, bruk bare Rename refactoring-funksjonen (ALT + SHIFT + R). FDT vil endre navnet overalt i hele prosjektet.
Navigering gjennom kildekoden er spesielt viktig i store prosjekter. Her er noen av de viktigste snarveiene for å navigere:
FDT startet som den første profesjonelle ActionScript 2-redaktøren i 2004. Det er et stort og veldig aktivt fellesskap rundt FDT, som bidrar med opplæringsprogrammer, blogger om bruk av de nye funksjonene som stadig legges til, hjelper ut på Twitter og innleggsfunksjoner og feilrapporter. FDTs utviklingsteam gir tilbake denne kjærligheten til samfunnet ved å lytte til deres forespørsler og integrere samfunnsverktøy som Joa Ebert's Apparat eller haXe.
For å bli en del av FDT-fellesskapet, sjekk ut bloggen og følg FDT på Twitter eller Facebook.
Installere FDT er rett fram. Følg disse tre trinnene for å sette opp ditt FDT-utviklingsmiljø:
For å installere FDT går du ganske enkelt til http://fdt.powerflasher.com og navigerer til nedlastingssiden. Velg en av installatørene for Windows, Mac eller Linux. Hvis du vil prøve FDT og ikke har en lisens ennå, fyll ut skjemaet ovenfor for å registrere deg for en 30-dagers prøve lisens. Etter nedlasting følger du instruksjonene for å fullføre installasjonen.
FDT er distribuert uten noen Flex SDK. Flex SDK er i utgangspunktet en mappe som inneholder kompilatorer, kjerneklasser og andre verktøy for å kompilere ActionScript og Flex-koden til en SWF. Du kan utvikle både rene Action Script-prosjekter og Flex-prosjekter ved hjelp av Adobes Flex SDK. Gå til Adobe Open Source og last ned SDK-ene du vil bruke i FDT. Etter å ha lastet ned og unzipping SDKs, gå til FDT> Innstillinger> Installerte SDKer og klikk på "Legg til" -knappen for å legge til en Flex SDK.
For å feilsøke Flash-programmene dine ved hjelp av FDTs visuelle feilsøkingsprogram, må du kontrollere at Debug Flash Player er installert på systemet. Gå til Adobe Flash Player Last ned:
Gratulerer, du har opprettet ditt FDT-utviklingsmiljø og kan nå starte kodingen!
Panelene beskrevet ovenfor kalles "Visninger" i FDT. Du kan lukke visninger, minimere dem eller omorganisere dem ved å bare dra en visning til en annen plassering. Hvis du vil tilbakestille visningene til standardposisjonene, går du til Vindu> Tilbakestill perspektiv. For å åpne flere visninger, gå til Vindu> Vis visning og velg den du mangler. Visninger er gruppert i såkalte "perspektiver".
FDT kan integreres i hver Flash / Flex-utviklings arbeidsflyt, uansett om du vil bruke FDT i kombinasjon med Flash Pro, bruk FDT uten noe annet verktøy, eller bruk FDT som kodeditor for Flash Pro. Dette kapittelet beskriver de tre populære arbeidsflytene som oftest brukes av Flash-utviklere.
I denne arbeidsflyten vil vi bruke FDT som et frittstående verktøy for å utvikle Flash / Flex-prosjekter. Du trenger ikke engang å ha Flash Pro eller Adobe Creative Sweet installert. Vi vil bare bruke FDT til å skrive kode og kompilere den til en SWF.
Start med å høyreklikke et sted i Flash Explorer og velg Nytt> Nytt Flash-prosjekt. "Flash Project Wizard" vises.
Denne veiviseren lar deg velge fra en liste over prosjektmaler for web, mobil og skrivebord. Vi vil opprette et rent Action Script-prosjekt på dette tidspunktet. Skriv inn prosjektnavnet "HelloFDT", velg Nett> AS3 og klikk på "Fullfør".
I Flash Explorer på venstre side ser vi nå det opprettede prosjektet med noen filer og mapper. Dobbeltklikk på Main.as-klassen i src-mappen for å åpne den.
FDT lagrer noen prosjektspesifikke innstillinger i .innstillinger mappe og i .prosjekt fil. Fordi du ikke bør berøre disse filene, la oss gjemme dem ved å klikke på den lille nedpilen i øverste høyre hjørne av Flash Explorer og velge "Filters". Sjekk nå ". *" Filteret og trykk "OK". Mappen .settings og .projektfilen skal nå være skjult.
La oss legge til noen kodelinjer før vi kompilerer prosjektet vårt:
Accentsconagua
pakke import flash.display.Sprite; offentlig klasse Hoved utvider Sprite offentlig funksjon Main () graphics.beginFill (0x0000ff); graphics.drawCircle (100, 100, 40); spor ("Hei FDT"); For å kompilere og feilsøke vårt enkle program, høyreklikk på Main.as-klassen i Flash Explorer og velg Feilsøking som> FDT SWF-applikasjon. Etter at kompileringen er ferdig, vil FDT starte programmet med "Ekstern SWF Viewer". Ta en titt på "Console"; Du bør også se "Hei FDT" sporoppsummering der. (Hvis du ikke ser det, må du sørge for at Debug Flash Player er installert.)
For å kunne legge inn en ressurs som et JPEG-bilde i vår SWF, kan vi bruke [Bygg] Metadata Tag. Først og fremst opprett en ny pakke som heter eiendeler i src-mappen og dra et bilde fra Finder / Explorer til aktivitetspakken.
Nå kan vi bruke følgende kodelinjer for å legge inn JPEG i vår SWF og vise den på scenen:
pakke import flash.display.Bitmap; importer flash.display.Sprite; offentlig klasse Main utvider Sprite [Embed (source = "assets / image.jpeg")] private var ActiveTutsLogo: Class; offentlig funksjon Main () var logo: Bitmap = ny ActiveTutsLogo (); addChild (logo);
Vi kan nå bruke Debug eller Release-knappen i verktøylinjen øverst for å starte programmet. De vil alltid lansere den tidligere lanserte applikasjonen. Feilsøking av søknaden din ved hjelp av breakpoints og spor () uttalelser fungerer bare hvis du velger Feilsøking.
Etter at kompileringen er ferdig, bør du se SWF med det innebygde bildet. Gratulerer!
Denne arbeidsflyten er ideell hvis du jobber sammen med en designer, som lager grafikk og animasjoner i Flash Pro, mens du legger til logikken ved hjelp av ActionScript. I denne arbeidsflyten vil vi lage en animert MovieClip i Flash Pro og kontrollere den ved hjelp av ActionScript i FDT. Dette er trinnene:
La oss komme i gang! Først av alt vil vi skape et nytt Flash-prosjekt i FDT. For å gjøre det, følg nøyaktig de samme instruksjonene som beskrevet i Workflow 1: Bare FDT> Opprett et nytt prosjekt. Som prosjektnavn vil jeg bruke "FDTwithFlashPro" denne gangen.
I dette eksemplet vil jeg lage en veldig enkel nøkkelramme animasjon med en hoppende ball. Start Flash Pro og opprett en ny Flash-fil (ActionScript 3). Å velge Sett inn> Nytt symbol fra menyen. Skriv inn navnet Sprettball og merk av for «Eksporter for ActionScript». Hvis du ikke ser avkrysningsboksen, klikker du på "Avansert" -knappen.
Ikke glem å merke av for "Export for ActionScript", ellers vil vi ikke kunne bruke denne aktiva senere. Neste opp, vil jeg lage en enkel nøkkelramme animasjon for å la ballen hoppe. Det skal se slik ut. (I utgangspunktet kan du lage hvilken animasjon du liker i dette trinnet, det trenger ikke å være en hoppende ball).
Nå er det på tide å lagre FLA. Gå til Fil> Lagre som og velg libs-mappen fra det tidligere opprettede FDT-prosjektet. Velg Assets.fla som filnavn og trykk "Lagre". For å bruke den animerte ballen MovieClip i vårt FDT-kodeprosjekt, må vi eksportere Flash Pro-prosjektet som en SWC-biblioteksfil. La oss gjøre dette ved å gå til Fil> Publiser innstillinger og finn avkrysningsboksen "Exporter SWC" i publiseringsdialogen. Klikk på "Publiser" og Flash Pro vil generere SWC-filen for deg.
La oss nå bytte tilbake til FDT. Vårt prosjekt bør se slik ut:
Legg merke til at hvis du utvider biblioteket Assets.swc, vil du se BouncingBall MovieClip-klassen som er inkludert i biblioteket. Dette er en flott funksjon av FDT, som lar deg inspisere et SWC-bibliotek for å se hvilke aktivaklasser den inneholder.
Det siste trinnet i denne arbeidsflyten er å skape den hoppende ballanimasjonen og legge den til scenen. Åpne Main.as-klassen og sett inn følgende kodelinjer:
pakke import flash.display.Sprite; offentlig klasse Main utvider Sprite offentlig funksjon Main () var bouncingBall: BouncingBall = new BouncingBall (); bouncingBall.y = 200; addChild (bouncingBall);
Det er det! Hit "Kjør" -knappen, og du bør se den hoppende ballen på scenen.
Den siste arbeidsflyten jeg vil vise deg bruker FDT som kodeditor for et Flash Pro-prosjekt. Du vil skrive kode i FDT, men kompilere prosjektet ditt ved hjelp av Flash Pro. FDT har en flott funksjon for å bytte automatisk til Flash Pro og starte kompilering med bare ett klikk. Vi vil også se på denne lille timesaveren.
Igjen vil vi starte med å skape prosjektet i FDT. Bare gå til New> New Flash Project og velg Web> Flash Professional fra listen over prosjektmaler. Sett prosjektnavnet til "FDTforFlashPro" og klikk "Fullfør"
FDT trenger å vite plasseringen av Flash Pro-installasjonen. Gå til Innstillinger> FDT> Verktøy> Flash og sett banen til Flash Pro-installasjonen ved å klikke på "Bla gjennom" -knappen. Velg din kopi av Flash Pro og lukk preferansevinduet. Deretter åpner du Main.as-klassen og legger til en sporoppgave til konstruktøren som spor ("Hello Flash Pro"). Dobbeltklikk nå FDTforFlashPro.fla filen fra Flash Explorer for å åpne den. Legg merke til at hovedklassen allerede er angitt i panelet Egenskaper i Flash Pro. Du kan klikke på blyantknappen for å bekrefte at klassen egentlig eksisterer.
Hovedklassen er på plass, så vi kan nå starte prosjektet i Flash Pro ved å velge Debug> Debug Movie fra menyen eller ved å bruke snarveien. I utgangspanelet til Flash Pro bør du nå se sporutgangen:
Flott, nå kan vi bytte frem og tilbake mellom FDT og Flash Pro. Skriv noen linjer med kode i FDT, legg til klasser og logikk og bytt til Flash Pro for å opprette aktiva og feilsøke prosjektet.
For å forbedre denne arbeidsflyten er det en flott funksjon i FDT, som lar deg bytte til Flash Pro ved å bare trykke på "Run" -knappen fra FDT for å kompilere og feilsøke prosjektet. I FDT velg Kjør> Kjør konfigurasjoner fra menyen.
I panelet Kjør konfigurasjoner dobbeltklikker du på "FDT Flash IDE" -oppføringen fra menyen til venstre. Dette vil opprette en ny tom konfigurasjon. Sett ganske enkelt prosjektet og FLA-filen ved hjelp av "Browse" -knappene og velg TestMovie. Det er det, å trykke på "Run" knappen vil bytte til Flash Pro og vil starte prosjektet! Fra nå av kan du bare trykke på "Kjør" -knappen i FDT-menylinjen for å starte prosjektet ditt i Flash Pro.
Hvis du vil lære mer om FDT, og det er funksjoner på FDT Docs-siden. Du finner et stort antall opplæringsprogrammer, videoer, snarveier, prosjektmaler og mye mer der. Glad koding!
