Build en Custom File Extension AIR App
Del
Del
Del
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Denne opplæringen vil forklare hvordan du kan lage dine egne filtyper i Adobe AIR. Jeg skal vise deg hvordan du bygger et lite program, lagre posisjonene til et par movieclips i det, og legg dem når programmet startes.

Følg med og se om du kan komme opp med egne bruksområder for Custom filtyper ..

Vennligst oppgrader Flash Player

Trinn 1: Sette opp Document

Åpne en ny Flash Air dokument, you name it "savefile", og lagre den i en ny mappe. Deretter åpner en ny Actionscript-fil, gi den samme navn, og lagre den i samme mappe som den nyopprettede Flash dokument.

Hvis du blir bedt om skjermen ikke vises når Flash starter, bare lage en ny Flash Actionscript 3 dokument. Lagre filen, og deretter gå til kommandoer > AIR - Søknad og Installer innstillinger. Flash vil konvertere filen til en Air dokument.

I egenskapsvinduet av Flash dokument, type "savefile" i Dokument klassen feltet. Dette vil knytte den nye Actionscript-fil (vår dokument klasse) med Flash dokumentet

Trinn 2:. Legge kontrollene

Lag en svart firkant med en høyde på 52, satt bredden til å være scenen bredde, og justere den til nederste venstre av scenen. Gi plassen en alpha av 33. I komponenter panel, drar ut tre knapper og plassere dem på toppen av den svarte firkanten.

Gi en av knappene en forekomst navnet "åpne" og endre etiketten til sier "Open". Den neste knappen vil ha en forekomst navnet "lagre" og etiketten vil være "Lagre". Den tredje knapper navnet vil være "image" og har en etikett med "Image". Spre dem ut slik du vil, velge alle tre knapper og den svarte firkanten og gjøre dem til en enkelt MovieClip som har en forekomst navnet "footer"

Trinn 3:. Litt Circles

På scenen, lage en rød sirkel med en høyde og bredde på 50 piksler. Konvertere den til en MovieClip, deretter i dialogboksen, trykk på "Advanced" -knappen. Under "Kobling" sjekke "Export for Action" boksen. Gi den en klasse navnet "Red" og klikk "OK".

Deretter oppretter du en blå sirkel som er samme størrelse som den røde sirkelen. Konvertere den til en MovieClip, eksportere den for Actionscript og gi den en klasse navnet "Blue". Slett de to sirklene fra scenen, slik at den eneste gjenværende MovieClip er bunnteksten MovieClip

Trinn 4:. Last ned Adobe JPEG Encoder

Gå til http://code.google.com /p /as3corelib /og laste ned as3corelib zip mappen. Med JPEG encoder, vil vi være i stand til å lagre et bilde av vår lille Kretsene

Trinn 5:. Dokument Class Skeleton

Dette er den grunnleggende ramme der vi vil legge all vår kode
pakke {import flash.display.Sprite.; public class savefile strekker Sprite {offentlig funksjon savefile () {}}}
Trinn 6: Importen

Her er import uttalelser for å gjøre Air søknaden arbeid. Disse vil gå i filen rett under pakken erklæringen og over public class uttalelse
import com.adobe.images.JPGEncoder.; import flash.desktop.NativeApplication; import flash.display.BitmapData; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.InvokeEvent; import flash.events.MouseEvent; import flash.filesystem.File; import flash.filesystem.FileMode; import flash.filesystem.FileStream; import flash.net.FileFilter; import flash.utils.ByteArray;
Trinn 7: Variabler og konfigurere funksjoner

Her er de variablene som vi bruker for å lage de to små sirkler på scenen. Offset variabler vil bli brukt senere for å dra og slippe av sirklene.

Jeg har også tildelt en påberope hendelse lytteren til NativeApplication. Dette vil brann når programmet enten startes eller når den egendefinerte filen er klikket. Den påberope funksjonen vil sjekke for å se hvordan programmet ble lansert. Hvis det var fra en fil, vil den laste ned filen. Hvis ikke, vil det ringe init funksjon
public class savefile strekker Sprite {private Var rødt. MovieClip; private Var blå: MovieClip; private Var currentClip: MovieClip; private Var xOffset: Number; private Var yVerdi: Number; offentlig funksjon savefile () {NativeApplication.nativeApplication.addEventListener (InvokeEvent.INVOKE, onInvoke); movieclips (); lyttere (); } Private funksjon init (): void {var sw: int = stage.stageWidth; Var sh: int = stage.stageHeight-footer.height; red.x = sw * Math.random (); red.y = sh * Math.random (); blue.x = sw * Math.random (); blue.y = sh * Math.random (); } Private funksjon movieclips (): void {rød = new Red (); blå = nye Blue (); this.addChildAt (rød, 0); this.addChildAt (blå, 1); this.addChildAt (bunntekst, 2); }
Trinn 8: De Lyttere Funksjon

Denne funksjonen bare setter opp hendelsen lyttere for alle knapper og sirkler på scenen
private funksjons lyttere (). void {red.addEventListener (MouseEvent .MOUSE_DOWN, onDown); blue.addEventListener (MouseEvent.MOUSE_DOWN, onDown); footer.open.addEventListener (MouseEvent.CLICK, openClick); footer.save.addEventListener (MouseEvent.CLICK, saveClick); footer.image.addEventListener (MouseEvent.CLICK, imageClick); }
Trinn 9:. Flytting av små sirkler

Her har vi satt opp de funksjonene å flytte sirkler rundt scenen
privat funksjon onDown (event: MouseEvent): void {currentClip = event.target som MovieClip; xOffset = mouseX - currentClip.x; yVerdi = mousey - currentClip.y; currentClip.removeEventListener (MouseEvent.MOUSE_DOWN, onDown); this.addEventListener (MouseEvent.MOUSE_UP, onUp, falsk, 0, true); this.addEventListener (MouseEvent.MOUSE_MOVE, onMove, falsk, 0, true); } Private funksjon onMove (event: MouseEvent): void {currentClip.x = mouseX - xOffset; currentClip.y = mousey - yVerdi; event.updateAfterEvent (); } Private funksjon onUp (event: MouseEvent): void {this.removeEventListener (MouseEvent.MOUSE_MOVE, onMove); this.removeEventListener (MouseEvent.MOUSE_UP, onUp); currentClip.addEventListener (MouseEvent.MOUSE_DOWN, onDown, falsk, 0, true); }
Trinn 10: lagrer bildet

Når "Image" knappen klikkes, vil den kaller "imageClick" -funksjonen. Denne funksjonen åpner opp en dialogboks spare boksen, og du kan gi bildet et navn du ønsker. Når brukernavnene bildet, vil den kaller "imageSave" -funksjonen. Inni den funksjonen, bruker vi JPGEncoder klassen å lage bildet. The Air app deretter lagrer bildet og lytter etter den "onClose" -funksjonen. Den funksjonen reassigns bare de små sirkler til scenen fra temp sprite som ble opprettet
privat funksjon imageClick (event: MouseEvent): void {var file:. File = File.desktopDirectory; file.browseForSave ("Lagre bilde"); file.addEventListener (Event.SELECT, imageSave); } Private funksjon imageSave (hendelse: Hendelse): void {var temp: Sprite = new Sprite (); Var len: int = this.numChildren; temp.addChild (red); temp.addChild (blå); Var bitmapData: BitmapData = new BitmapData (stage.stageWidth, stage.stageHeight); bitmapData.draw (temp); Var jpg: JPGEncoder = new JPGEncoder (100); Var byteArray: ByteArray = jpg.encode (bitmapData); Var savefile: File = Fil (event.target); Var katalogen: String = saveFile.url; if (directory.indexOf ("jpg".) == -1) {katalogen + = ".jpg"; } Var fil: File = new File (); file = file.resolvePath (katalog); Var Filestream: Filestream = new Filestream (); fileStream.addEventListener (Event.CLOSE, onClose); fileStream.openAsync (fil, FileMode.WRITE); fileStream.writeBytes (byteArray); fileStream.close (); } Private funksjon onClose (hendelse: Hendelse): void {this.addChildAt (rød, 0); this.addChildAt (blå, 1); }

(Red.anm:.. Commenter Jesse har fortelle oss at måten File klasse verkene har endret seg siden denne opplæringen ble publisert Se hans kommentar for mer informasjon om hvordan du kan gjøre koden kompatibelt) Anmeldelser

Trinn 11: lagre filen

Etter at vi har flyttet de små sirkler rundt en bit, kan vi deretter lagre deres plassering for videre redigering. Her skaper vi vår egendefinert fil. Først satt vi koordinatene inn i en matrise, så arrays blir satt inne i et objekt. Hensikten er skrevet til en fil med vår skikk filtypen. Du kan gi den en eventuell forlengelse du ønsker

Etter det setter vi programmet til å være standardprogrammet for den nyopprettede filtypen
privat funksjon saveClick (hendelse: Hendelse):.. Void {var fil : File = File.desktopDirectory file.browseForSave ("Save"); file.addEventListener (Event.SELECT, onSaveSelect); } Private funksjon onSaveSelect (hendelse: Hendelse): void {var objekt: Object = {}; Var redArray: Array = [red.x, red.y]; Var blueArray: Array = [blue.x, blue.y]; object.RED = redArray; object.BLUE = blueArray; Var savefile: File = Fil (event.target); Var katalogen: String = saveFile.url hvis (directory.indexOf (". tuts") == -1) {katalogen + = ".tuts"; } Var fil: File = new File (); file = file.resolvePath (katalog); Var Filestream: Filestream = new Filestream (); fileStream.open (fil, FileMode.WRITE); fileStream.writeObject (objekt); fileStream.close (); NativeApplication.nativeApplication.setAsDefaultApplication ("tuts"); }
Trinn 12: Åpne File

Hvis du ønsker å åpne den nyopprettede filen, klikker du bare på "Open" -knappen. Det vises en dialogboks som ser bare for at filtypen. Applikasjonen vil da lese objekt i filen og plasserer de små sirkler tilsvar
privat funksjon openClick (event: MouseEvent): void {var file:. File = File.desktopDirectory; file.addEventListener (Event.SELECT, onSelect); file.browseForOpen ("Open", [nye Filefilter ("Tuts filer (* .tuts)", "* .tuts")]); } Private funksjon onSelect (hendelse: Hendelse): void {var file: File = Fil (event.target); Var Filestream: Filestream = new Filestream (); fileStream.open (fil, FileMode.READ); Var objekt: Object = fileStream.readObject (); red.x = object.RED [0]; red.y = object.RED [1]; blue.x = object.BLUE [0]; blue.y = object.BLUE [1]; fileStream.close (); }
Trinn 13: Starte App

Dette er Invoke-funksjonen. Uten denne funksjonen, hvis du skulle starte programmet fra den nye filen, det ville ikke vite for å laste den. Denne funksjonen sjekker for å se hva som fortalte det til å åpne. Hvis det var en fil, så det vil laste denne filen. Hvis det ikke var, så er det rett og slett kaller "init" -funksjon som gir sirklene en tilfeldig plassering
privat funksjon onInvoke (event: InvokeEvent):.! Void {if (event.currentDirectory = null & & event .arguments.length > 0) {var katalogen: File = event.currentDirectory; Var fil: File = directory.resolvePath (event.arguments [0]); Var Filestream: Filestream = new Filestream (); fileStream.open (fil, FileMode.READ); Var objekt: Object = fileStream.readObject (); red.x = object.RED [0]; red.y = object.RED [1]; blue.x = object.BLUE [0]; blue.y = object.BLUE [1]; fileStream.close (); } Else {init (); }}
Trinn 14: Publish Settings

Når filen er testet og fungerer som den skal, er vi klare til å publisere. Gå til kommandoer > AIR - Søknad og Installer Innstillinger, og få opp de publiserer innstillinger

Trinn 15: Sette opp Custom File Extension

In the Air publisere innstillingene, klikk på de avanserte innstillingene
..

Det vil bringe opp en annen dialogboks. Klikk på "pluss" knappen for å legge til en filtype.

Fyll ut filbeskrivelse, velg dine tilpassede ikoner, og klikk "OK" til du er tilbake til det første publisere innstillingsvinduet. Anmeldelser
Trinn 16: Publiser File

Den siste tingen å gjøre er å publisere filen. Klikk på "Publiser AIR File" -knappen. Du må opprette et sertifikat for å signere app med. Bare klikk "Opprett" for å få opp innstillingene.

Fyll ut skjemaet og klikk på "OK". Flash vil be deg når sertifikatet er opprettet. Når sertifikatet er gjort, skriver du inn passordet og filen vil bli opprettet.

Konklusjon

Dette var bare en grunnleggende eksempel på hva som kan gjøres med denne teknikken. Du kan også lage en slags tegning program der du kan enten lagre ut hva du har tegnet, eller holde redigere den. Eller hvis du ønsket å lage en tilpasset MP3-spiller, og har din egen spilleliste filformat. Mulighetene er uendelige ..

Jeg håper du likte å følge tut.