Beginner guide til Powerflasher er FDT
Del
Del
14
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Flash Professional er ikke det eneste verktøyet du kan bruke for å lage Flash-applikasjoner og spill. Tidligere i år har vi sett på FlashDevelop; nå, vil vi ta en titt på FDT 4, en kraftig IDE designet spesielt for Actionscript, MXML og Haxe utvikling. Les videre for å finne ut hva det kan tilby deg!
FDT Great tidsbesparende funksjoner
Forskjellen mellom FDT og Flash Professional kode editor eller andre verktøy er at det gir tonnevis av tidsbesparende funksjoner som lar deg fokusere på logikken i koden din, slik at du ikke trenger å bry deg med syntaks problemer som en manglende lukking brakett eller et feilstavet funksjon samtale. Som en stavekontroll, gir FDT deg umiddelbar tilbakemelding om koden din og identifiserer problemer før du kompilere prosjektet. Før vi installere og begynne å jobbe med FDT Jeg vil gjerne gi deg en smak av noen av sine mest spennende funksjoner.
Kode Ferdigstillelse
Den viktigste funksjonen i FDT, som du vil sannsynligvis bruker oftest, er kodefullføring, også kalt auto ferdigstillelse. Du vil aldri trenger å skrive inn hele navnet på en variabel eller funksjon igjen. Bare begynne å skrive og trykke CTRL + Space for å få opp en liste over forslag. Du kan endre autofullfør atferd for å bli utløst på hvert tastetrykk (som FlashDevelop gjør) ved å gå til Innstillinger > FDT > Editor > Kode Assist Hotell og slå på "Hver Key". Fortsett å skrive for å avgrense listen over valg. Bruk musen til å velge et forslag fra listen eller bruke "Up" og "Down" piltastene etterfulgt av å trykke "Return". Du kan også bruke "kamel case automatisk fullføring" - for eksempel vil someMovieClip.gap tilby funksjonen gotoAndPlay () Min favoritt funksjon i FDT bruker sin Quick Fix. funksjonalitet. FDT vil ikke bare umiddelbart fortelle deg hva som er galt i koden din, men også gir deg muligheten til å fikse det automatisk ved å sette inn den manglende kode. Hvis du for eksempel ringe deg en funksjon som ikke er tilgjengelig ennå, vil FDT legge en feil markør på venstre side av denne linjen. Den gule lyspære indikerer at det er en Quick Fix tilgjengelig for dette problemet. Hit CMD /CTRL + 1 og sjekke ut forslaget i Quick Fix popup: FDT tilbyr deg å lage funksjonen sayHello (). Hit "Return" og FDT vil automatisk sette inn funksjonen. Bruk "Tab" -tasten for å bla gjennom programinstruksjoner omgitt av de blå rektangler og endre dem. Igjen treffer "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 koding arbeidsflyt. Du vil begynne å tvinge problemer med å gjøre bruk av en Quick Fix Bruke snarvei CMD /CTRL + SHIFT + O eller velge Kilde >!; Organiser Importen fra menyen vil legge alle manglende import uttalelser på toppen av klassen. Du trenger ikke å legge noen import manuelt lenger. De fineste ting om FDT oss organisere Import funksjonen er at det også vil fjerne ubrukte importen automatisk. Jeg vil gjerne ha en lilla etikett i min Flex app, men hva hex farge koden er lilla ha? Uten å måtte bytte til Flash Pro eller Photoshop kan du bare bruke FDT fargevelgeren til å velge en farge. Sett markøren over hex-kode og aktivere Quick Fix (CMD /CTRL + 1). Velg "Velg farge" og bruke fargevelgeren. Som utvikler du finner deg selv å skrive i periodiske kodebiter igjen og igjen, som en "for loop" for eksempel. I FDT kan vi bare bruke kode maler for det. Skriv inn fori, bruker automatisk fullføring (CTRL + SPACE) og velg "fori - iterere over array". Dette vil sette inn kodebiten for deg. Gjør endringer ved å bruke "Tab" tasten og trykk "Return" for å avslutte Hvis du vil bla gjennom kode maler som fulgte med FDT gå til Innstillinger >.; FDT Editor > Maler FDT har to store refactoring funksjoner:. Flytt Hotell og Gi nytt navn Hvis du vil endre navn på en klasse, funksjon eller variabel, bruker du 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 til å navigere: FDT startet som den første profesjonelle Actionscript to redaktør i 2004. det er en stor og meget aktiv fellesskap rundt FDT, som bidrar opplæring, blogger om ved hjelp av de nye funksjonene som blir stadig lagt til, hjelper ut på Twitter og innlegg har forespørsler og feilrapporter. FDT utviklingsteam gir tilbake denne kjærligheten til fellesskapet ved å lytte til deres ønsker og integrere samfunnet verktøy som Joa Ebert er Apparat eller Haxe. For å bli en del av FDT samfunnet sjekke ut bloggen og følge FDT på Twitter eller Facebook. Installere FDT er rett frem. Følg disse 3 trinnene for å konfigurere din FDT utviklingsmiljø: for å installere FDT bare gå til http://fdt.powerflasher.com og gå til nedlastingssiden. Velg ett av installatører for Windows, Mac eller Linux. Hvis du ønsker å prøve FDT og ikke har en lisens ennå, fyll ut skjemaet ovenfor for å registrere for en 30 dagers prøveversjon. Etter nedlasting følg instruksjonene for å fullføre installasjonen. FDT er distribuert uten Flex SDK. Flex SDK er i utgangspunktet en mappe som inneholder kompilatorer, core klasser og andre verktøy for å kompilere Action Script og Flex-kode til en SWF. Du kan utvikle både rene action script prosjekter samt Flex prosjekter ved hjelp av Adobes Flex SDK. Gå til Adobe Open Source og laste ned SDK du vil bruke i FDT. Etter nedlasting og utpakking SDK gå til FDT > Innstillinger > Installerte SDK For å feilsøke Flash-applikasjoner ved hjelp av FDT visuelle debugger, må du sørge for at Debug Flash Player er installert på din system. Gå til Adobe Flash Player Last ned: Gratulerer, du har nå satt opp FDT utviklingsmiljø og kan nå begynne koding! panelene som er beskrevet ovenfor er kalt "visninger" i FDT. Du kan lukke utsikt, minimere dem eller omorganisere dem ved å dra en visning til en annen plassering. Hvis du ønsker å tilbakestille utsikten til standardposisjoner gå til Vindu > Tilbake Perspektiv FDT kan integreres i hvert Flash /Flex utvikling arbeidsflyt, om du vil bruke FDT i kombinasjon med Flash Pro, bruker FDT uten andre verktøy, eller bruke FDT som en kode redaktør for Flash Pro. Dette kapittelet beskriver de tre populære arbeidsflyter som er mest brukt 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 Søt installert. Vi vil bare bruke FDT å skrive kode og kompilere den til en SWF Komme i gang ved å høyreklikke et sted i Flash Explorer og velg Ny >.; Ny Flash Project. Den "Flash Project Wizard" vises. Denne veiviseren lar deg velge fra en liste over prosjektmaler for web, mobil og desktop. Vi vil skape en ren Action Script prosjekt på dette tidspunktet. Skriv inn prosjektnavnet "HelloFDT", velger du Web > AS3 Hotell og klikk på "Finish". I Flash Explorer på venstre side ser vi nå opprettet prosjektet med noen filer og mapper. Dobbeltklikk på Main.as klassen i src-mappen for å åpne den. FDT lagrer noen prosjektspesifikke innstillinger i .settings La oss legge til noen linjer med kode før vi kompilere vårt prosjekt. For å kompilere og feilsøke vår enkelt program, høyreklikker du på Main.as klassen i Flash Utforsker, og velg Debug Som > FDT SWF Application For å legge inn en ressurs som en JPEG-bilde i vår SWF vi kan bruke den [Bygg] Metadata Tag. Først av alt opprette en ny pakke som heter eiendeler i src-mappen og dra et bilde fra Finder /Explorer til eiendeler pakken. Nå kan vi bruke følgende linjer med kode for å legge inn JPEG i vår SWF og vise det på scenen: Vi kan nå bruke Debug eller Slipp knappen i verktøylinjen på toppen for å lansere vår søknad. De vil alltid starte tidligere lansert programmet. Debugging din søknad ved hjelp av stoppunkter og spor () uttalelser fungerer bare hvis du velger Debug. Etter samling er ferdig skal du se din SWF med innebygd bilde. Gratulerer Denne arbeidsflyten er ideelt hvis du jobber sammen med en designer, som skaper grafikk og animasjoner i Flash Pro, mens du er legge logikken ved hjelp av Actionscript. I denne arbeidsflyten, vil vi lage en animert MovieClip i Flash Pro og styre den ved hjelp av Actionscript i FDT. Dette er fremgangsmåten: La oss komme i gang! Først av alt vil vi skape en ny Flash prosjekt i FDT. For å gjøre dette, må du følge nøyaktig samme instruksjoner som beskrevet i Arbeidsflyt 1: FDT Only > Opprette et nytt prosjekt I dette eksempelet vil jeg lage en veldig enkel nøkkel ramme animasjon med en sprettende ball. Start Flash Pro og opprette en ny Flash-fil (Actionscript 3). Velg Sett > New Symbol Ikke glem å sjekke "Export for Action" boksen, ellers vil vi ikke kunne bruke denne eiendelen senere på. Neste opp, skal jeg lage en enkel nøkkel frame animasjon for å la ballen sprette. Det skal se slik ut. (I utgangspunktet du kan lage hva animasjonen du vil i dette trinnet, det trenger ikke å være en sprettende ball) Nå er det tid for å redde FLA.. Gå til Fil > Lagre som La oss nå gå tilbake til FDT. Vårt prosjekt skal se slik ut: Legg merke til at hvis du utvider Assets.swc biblioteket, vil du se BouncingBall MovieClip klasse med i det biblioteket. Dette er en flott funksjon av FDT, som lar deg kontrollere en SWC bibliotek for å se hvilke aktivaklassene den inneholder. Det siste trinnet i denne arbeidsflyten er på å bruke den sprettende ball animasjon og legge det til scenen. Åpne Main.as klassen og sett følgende linjer med kode: Det er det! Trykk på "Kjør" -knappen, og du bør se sprettende ball på scenen Den siste arbeidsflyten jeg ønsker å vise deg er ved hjelp av FDT som en kode redaktør for en Flash Pro prosjekt. Du vil skrive kode i FDT men kompilere prosjekt ved hjelp av Flash Pro. FDT har en flott funksjon for å bytte automatisk til Flash Pro og begynne samling med bare ett klikk. Vi vil ta en titt på denne lille tidsbesparende også. Igjen, vil vi begynne med å lage prosjektet i FDT. Bare gå til New > Ny Flash Prosjekt og velg Web > Flash Professional fra listen over prosjektmaler. Sett prosjektnavnet til "FDTforFlashPro" og klikk "Finish" FDT trenger å vite plasseringen av Flash Pro installasjonen. Gå til Innstillinger > FDT > Verktøy > Flash Hotell og angi banen til Flash Pro installasjonen ved å klikke på "Bla gjennom" -knappen. Velg din kopi av Flash Pro og lukke vinduet Innstillinger. Neste åpne Main.as klassen og legge et spor uttalelse til konstruktøren som trace ( "Hello Flash Pro"). Nå dobbeltklikker du FDTforFlashPro.fla fil fra Flash Explorer til å åpne den. Legg merke til at hovedklassen er allerede satt i Properties panelet i Flash Pro. Du kan klikke på blyanten for å kontrollere at klassen virkelig eksisterer Den største klassen er på plass, slik at vi kan nå starte prosjektet i Flash Pro ved å velge Debug >.; Debug Movie Flott, nå kan vi bytte frem og tilbake mellom FDT og Flash Pro. Skriv noen linjer med kode i FDT, legge klasser og logikk og bytte til Flash Pro til å skape verdier og feilsøke prosjektet. For å forsterke denne arbeidsflyten, det er en stor funksjonen i FDT, som lar deg bytte til Flash Pro ved bare å trykke på knappen "Kjør" innenfra FDT å kompilere og feilsøke prosjektet. I FDT velge Run > Kjør konfigurasjoner I Kjør konfigurasjoner panelet dobbeltklikk på "FDT Flash IDE" oppføring fra menyen til venstre. Dette vil skape en ny tom konfigurasjon. Nå bare sette prosjektet og FLA filen ved hjelp av "Bla gjennom" knappen og velg TestMovie. Det er det, trykke "Kjør" -knappen vil bytte til Flash Pro og vil lansere prosjektet! Fra nå av kan du bare trykke på knappen "Kjør" i FDT menylinjen for å lansere prosjektet i Flash Pro. Hvis du ønsker å lære mer om FDT og det er funksjoner besøke FDT Dokumenter siden. Du vil finne et stort antall veiledninger, videoer, snarveier, prosjektmaler og mye mer der. Glad koding!
Quick Bestemmer
Organiser Importen
Color Velger
Code Maler
. Dette er stedet hvor du kan også lage dine egne maler! Bare ta en titt på de andre maler, og du vil raskt lære å lage dem og bruke de kraftige variabler for å gjøre dem enda smartere
Refactoring
. Hvis du ønsker å flytte en klasse til en annen pakke, du vanligvis må endre import uttalelser i alle klasser som bruker den. Flytt ommøblerer i FDT tar seg av dette automatisk. Bare dra og slipp klasse fra en pakke til en annen i Flash Explorer og FDT vil ta seg av resten.
Kodenavigasjonsegenskaper
F2 - Show klasse i Flash Explorer
F3 - Open erklæring
Alt + (CMD) + Venstre Key - Gå tilbake i historien
CMD /CTRL + T - Hurtig Type Hierarki
CMD /CTRL + O - Hurtig Outline
CMD /CTRL + R - Søk etter referanser
FDT fellesskapet
Installere FDT 4
Last ned og installer FDT
Last ned Flex SDK
Installer Debug Flash Player
og klikk på "Legg til" knappen for å legge til en Flex SDK.
Mac: Last ned og installer Flash Player Plugin innhold debugger
Windows: Last ned og installer Flash Player Active X kontroll innhold debugger samt Flash Player Plugin innholdet debugger
FDT Workbench
Toolbar (øverst): Finn de viktigste tiltakene som å lage nye filer eller kompilere programmet i verktøylinjen
Flash Explorer (venstre): Dette er hvor du vil organisere prosjektene , filer og mapper
Outline (venstre): en liste over egenskaper og funksjoner av tiden åpnet klassen
Editor (midten): Hvis du åpner en fil, vil det bli vist i editoren området
Problems (nederst): en liste over problemer og advarsler i kildekoden
. For å åpne flere visninger gå til Vindu > Vis Vis Hotell og velge den du mangler. Visninger er gruppert i såkalte "Perspectives".
velg Arbeidsflyt
Arbeidsflyt. 1: FDT Bare
Opprette et nytt prosjekt
mappen og i .project
fil. Fordi du ikke må ta de filene la oss gjemme dem ved å klikke på den lille pil ned i øvre høyre hjørne av Flash Explorer og velge "Filter". Sjekk nå ". *" Filter og trykk "OK". Den .settings mappe og .project filen skal nå være skjult
Testing og Kompilering prosjekt
Pakke {import flash .display.Sprite; public class Hoved strekker Sprite {offentlig funksjon main () {graphics.beginFill (0x0000ff); graphics.drawCircle (100, 100, 40); trace ( "Hello FDT"); }}}
. Etter samlingen fullføres, vil FDT starte programmet som bruker "External SWF Viewer". Ta en titt på "Console"; bør du også se "Hello FDT" spor uttalelse der. (Hvis du ikke ser det, sørg for at du har den Debug Flash Player installert.)
embedding Eiendeler
pakke {import flash.display.Bitmap; import flash.display.Sprite; public class Hoved strekker Sprite {[Embed (kilde = "assets /image.jpeg")] privat Var ActiveTutsLogo: Class; offentlig funksjon main () {var logo: Bitmap = new ActiveTutsLogo (); addChild (logo); }}}
Arbeidsflyt to! FDT med Flash Pro Eiendeler
Oppsett og forberede prosjektet i FDT
Opprett en ny FLA fil og en animert MovieClip i Flash Pro
Eksporter FLA som SWC bibliotekfilen
instantiate og kontrollere MovieClip bruker AS3 i FDT
Sette opp prosjektet i FDT
. Som prosjektnavn vil jeg bruke "FDTwithFlashPro" denne gangen.
Opprette FLA og en MovieClip
fra menyen. Skriv inn navnet BouncingBall Hotell og sjekke "Export for Action" boksen. Hvis du ikke ser den, klikk på "Avansert" -knappen.
og velg libs mappen fra tidligere opprettet FDT prosjektet. Velg Assets.fla som filnavn og trykk "Lagre". For å bruke den animerte ballen MovieClip innenfor vår FDT kode prosjekt, må vi eksportere Flash Pro-prosjektet som en SWC bibliotekfilen. La oss gjøre dette ved å gå til Fil > Publish Settings Hotell og finne den "Export SWC» i publisere dialogen. Klikk "Publiser" og Flash Pro vil generere SWC-filen for deg.
Bruke MovieClip i FDT
pakke {import flash.display.Sprite; public class Hoved strekker Sprite {offentlig funksjon main () {var bouncingBall: BouncingBall = new BouncingBall (); bouncingBall.y = 200; addChild (bouncingBall); }}}
Arbeidsflyt. 3: FDT som Flash Pro Code Editor
Sette opp prosjektet i FDT
fra menyen eller ved å bruke snarveien. I utgangspanel Flash Pro bør du nå se spor utgang:
Lansering From Within FDT
fra menyen.
Neste trinn