Bouw een AIR-app met een aangepaste bestandsuitbreiding

In deze zelfstudie wordt uitgelegd hoe u uw eigen bestandsextensies kunt maken in Adobe AIR. Ik laat je zien hoe je een kleine applicatie bouwt, bewaar de posities van een paar filmclips erin en herlaad ze wanneer de applicatie wordt gestart.

Volg mee en kijk of je kunt komen met je eigen gebruik voor aangepaste bestandsextensies ...


Voer een upgrade van uw Flash Player uit


Stap 1: Het document instellen

Open een nieuw Flash Air-document, noem het "saveFile" en sla het op in een nieuwe map. Open vervolgens een nieuw ActionScript-bestand, geef het dezelfde naam en sla het op in dezelfde map als het nieuwe Flash-document.

Als het promptscherm niet verschijnt wanneer Flash wordt gestart, maakt u eenvoudig een nieuw Flash ActionScript 3-document. Sla het bestand op en ga vervolgens naar Opdrachten> AIR - Applicatie- en installatie-instellingen. Flash converteert het bestand naar een Air-document.

Typ "saveFile" in het eigenschappenvenster van het Flash-document in het veld Documentklasse. Hiermee wordt het nieuwe ActionScript-bestand (onze documentklasse) gekoppeld aan het Flash-document.

Stap 2: de bedieningselementen toevoegen

Maak een zwart vierkant met een hoogte van 52, stel de breedte in als de breedte van het werkvlak en lijn het uit op de linkerbenedenhoek van het werkgebied. Geef het vierkant een alfa van 33. Sleep in het deelvenster Componenten drie knoppen naar links en plaats ze op het zwarte vierkant.

Geef een van de knoppen een instantienaam "open" en wijzig het label in "Open". De volgende knop heeft de naam "opslaan" en het label is "Opslaan". De derde naam van de knop zal "afbeelding" zijn en een label van "Afbeelding" hebben. Spreid ze uit zoals je wilt, selecteer alle drie de knoppen en het zwarte vierkant en verander ze in een enkele filmclip met de instantienaam "footer".

Stap 3: Little Circles

Creëer op het podium een ​​rode cirkel met een hoogte en breedte van 50px. Converteer het naar een filmclip en klik vervolgens in het dialoogvenster op de knop "Geavanceerd". Vink onder "Koppelingen" het vakje "Exporteren voor ActionScript" aan. Geef het een klassenaam van "Rood" en klik op "OK".

Maak vervolgens een blauwe cirkel met dezelfde grootte als de rode cirkel. Converteer het naar een filmclip, exporteer het voor ActionScript en geef het een klassenaam van "Blauw". Verwijder de twee cirkels uit het werkgebied, zodat de enige overgebleven filmclip de voettekstclip is.

Stap 4: Download de Adobe JPEG-coderingsprogramma

Ga naar http://code.google.com/p/as3corelib/ en download de zipmap van as3corelib. Met de JPEG-encoder kunnen we een afbeelding van onze kleine kringen opslaan.

Stap 5: Het documentklasse skelet

Dit is het basisframe waar we al onze code zullen plaatsen.

 pakket import flash.display.Sprite; public class saveFile breidt openbare functie saveFile ()  uit

Stap 6: De invoer

Hier zijn de importstatements om de Air-toepassing te laten werken. Deze gaan in het bestand direct onder de pakketdeclaratie en boven de publieke klassenverklaring.

 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;

Stap 7: De variabelen en instelfuncties

Dit zijn de variabelen die we gebruiken om de twee kleine cirkels op het podium te maken. De offsetvariabelen worden later gebruikt voor het slepen en neerzetten van de cirkels.

Ik heb ook een listener van de gebeurtenis aan de NativeApplication toegewezen. Deze wordt geactiveerd wanneer de toepassing wordt gestart of wanneer op het aangepaste bestand wordt geklikt. De invoke-functie controleert of de app is gestart. Als het uit een bestand komt, wordt het bestand geladen. Als dit niet het geval is, wordt de init-functie aangeroepen.

 public class saveFile breidt Sprite uit private var rood: MovieClip; privé var blauw: MovieClip; privé var currentClip: MovieClip; privé var xOffset: Number; privé var yOffset: Number; public function saveFile () NativeApplication.nativeApplication.addEventListener (InvokeEvent.INVOKE, onInvoke); MovieClips (); luisteraars ();  private function 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 function movieClips (): void red = new Red (); blauw = nieuw Blauw (); this.addChildAt (rood, 0); this.addChildAt (blauw, 1); this.addChildAt (voettekst, 2); 

Stap 8: De functie Luisteraars

Deze functie stelt eenvoudig de gebeurtenislisteners in voor alle knoppen en cirkels op het podium.

 luisteraars met persoonlijke functie (): 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); 

Stap 9: De kleine cirkels verplaatsen

Hier stellen we de functies in om de cirkels rond het podium te verplaatsen.

 private function onDown (event: MouseEvent): void currentClip = event.target as MovieClip; xOffset = mouseX - currentClip.x; yOffset = mouseY - currentClip.y; currentClip.removeEventListener (MouseEvent.MOUSE_DOWN, onDown); this.addEventListener (MouseEvent.MOUSE_UP, onUp, false, 0, true); this.addEventListener (MouseEvent.MOUSE_MOVE, onMove, false, 0, true);  private function onMove (event: MouseEvent): void currentClip.x = mouseX - xOffset; currentClip.y = mouseY - yOffset; event.updateAfterEvent ();  private function onUp (event: MouseEvent): void this.removeEventListener (MouseEvent.MOUSE_MOVE, onMove); this.removeEventListener (MouseEvent.MOUSE_UP, onUp); currentClip.addEventListener (MouseEvent.MOUSE_DOWN, onDown, false, 0, true); 

Stap 10: de afbeelding opslaan

Wanneer op de knop "Afbeelding" wordt geklikt, wordt de functie "imageClick" aangeroepen. Met deze functie opent u een dialoogvenster voor het opslaan van een dialoogvenster en kunt u uw afbeelding elke gewenste naam geven. Wanneer de gebruiker de afbeelding een naam geeft, wordt de functie "imageSave" aangeroepen. Binnen die functie gebruiken we de JPGEncoder-klasse om de afbeelding te maken. De Air-app slaat vervolgens de afbeelding op en luistert naar de functie "onClose". Die functie wijst eenvoudigweg de kleine cirkels toe aan het werkgebied van de temp-sprite die is gemaakt.

 persoonlijke functie imageClick (event: MouseEvent): void var file: File = File.desktopDirectory; file.browseForSave ("Afbeelding opslaan"); file.addEventListener (Event.SELECT, imageSave);  persoonlijke functie imageSave (event: Event): void var temp: Sprite = new Sprite (); var len: int = this.numChildren; temp.addChild (rood); temp.addChild (blauw); var bitmapData: BitmapData = nieuwe BitmapData (stage.stageWidth, stage.stageHeight); BitmapData.draw (temp); var jpg: JPGEncoder = nieuwe JPGEncoder (100); var byteArray: ByteArray = jpg.encode (bitmapData); var saveFile: Bestand = Bestand (event.target); var directory: String = saveFile.url; if (directory.indexOf (". jpg") == -1) directory + = ".jpg";  var-bestand: Bestand = nieuw bestand (); bestand = bestand.resolvePath (map); var fileStream: FileStream = nieuwe FileStream (); fileStream.addEventListener (Event.CLOSE, onClose); fileStream.openAsync (bestand, FileMode.WRITE); fileStream.writeBytes (byteArray); fileStream.close ();  private function onClose (event: Event): void this.addChildAt (red, 0); this.addChildAt (blauw, 1); 

(Opmerking van de redacteur: commentator Jesse heeft ons laten weten dat de manier waarop de klasse File werkt sinds de introductie van deze tutorial is gewijzigd. Zie zijn opmerking voor meer informatie over het compatibel maken van uw code.)

Stap 11: het bestand opslaan

Nadat we de kleine cirkels een beetje hebben verplaatst, kunnen we hun locatie opslaan voor verdere bewerking. Hier maken we ons aangepaste bestand. Eerst plaatsen we coördinaten in een array, waarna de arrays in een object worden geplaatst. Het object is naar een bestand geschreven met onze aangepaste bestandsextensie. Je kunt het elke gewenste extensie geven.

Daarna hebben we de app ingesteld als de standaardtoepassing voor de zojuist gemaakte bestandsextensie.

 persoonlijke functie saveClick (event: Event): void var file: File = File.desktopDirectory file.browseForSave ("Save"); file.addEventListener (Event.SELECT, onSaveSelect);  private functie onSaveSelect (event: Event): void var object: Object = ; var redArray: Array = [red.x, red.y]; var blueArray: Array = [blue.x, blue.y]; object.RED = redArray; object.BLUE = blueArray; var saveFile: Bestand = Bestand (event.target); var directory: String = saveFile.url if (directory.indexOf (". tuts") == -1) directory + = ".tuts";  var-bestand: Bestand = nieuw bestand (); bestand = bestand.resolvePath (map); var fileStream: FileStream = nieuwe FileStream (); fileStream.open (bestand, FileMode.WRITE); fileStream.writeObject (object); fileStream.close (); NativeApplication.nativeApplication.setAsDefaultApplication ( "tuts"); 

Stap 12: Het bestand openen

Als u uw nieuw gecreëerde bestand wilt openen, klikt u eenvoudig op de knop "Openen". Er verschijnt een dialoogvenster dat alleen naar die bestandsextensie kijkt. De app leest vervolgens het object in het bestand en plaatst de kleine cirkels dienovereenkomstig.

 persoonlijke functie openClick (event: MouseEvent): void var file: File = File.desktopDirectory; file.addEventListener (Event.SELECT, onSelect); file.browseForOpen ("Open", [new FileFilter ("Tuts Files (* .tuts)", "* .tuts")]);  private function onSelect (event: Event): void var file: File = File (event.target); var fileStream: FileStream = nieuwe FileStream (); fileStream.open (bestand, FileMode.READ); var-object: 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 (); 

Stap 13: De app aanroepen

Dit is de invoke-functie. Zonder deze functie zou het, als u de toepassing vanuit uw nieuwe bestand zou starten, niet weten om het te laden. Deze functie controleert om te zien wat hem is verteld om te openen. Als het een bestand was, zal het dat bestand laden. Als dat niet het geval was, roept het gewoon de "init" -functie aan die de cirkels een willekeurige plaatsing geeft.

 private function onInvoke (event: InvokeEvent): void if (event.currentDirectory! = null && event.arguments.length> 0) var directory: File = event.currentDirectory; var file: File = directory.resolvePath (event.arguments [0]); var fileStream: FileStream = nieuwe FileStream (); fileStream.open (bestand, FileMode.READ); var-object: 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 (); 

Stap 14: De publicatie-instellingen

Wanneer het bestand allemaal is getest en correct werkt, zijn we klaar om te publiceren. Ga naar Opdrachten> AIR - Instellingen voor toepassing en installer en breng de publicatie-instellingen naar voren.

Stap 15: De aangepaste bestandsextensie instellen

Klik in de Air-publicatie-instellingen op de geavanceerde instellingen.

Er verschijnt een nieuw dialoogvenster. Klik op de knop "plus" om een ​​bestandsextensie toe te voegen.

Vul de bestandsomschrijvingen in, selecteer uw aangepaste pictogrammen en klik op "OK" totdat u weer bij het eerste instellingenvenster voor publicatie bent.

Stap 16: Publiceer uw bestand

Het laatste wat u moet doen, is uw bestand publiceren. Klik op de knop "AIR-bestand publiceren". U moet een certificaat maken om de app te ondertekenen. Klik eenvoudig op "Create" om de instellingen te openen.

Vul het formulier in en klik op "OK". Flash zal u vragen wanneer het certificaat wordt aangemaakt. Wanneer het certificaat is aangemaakt, voert u het wachtwoord in en wordt uw bestand aangemaakt.

Conclusie

Dit was slechts een eenvoudig voorbeeld van wat er met deze techniek kan worden gedaan. Je kunt ook een soort tekenprogramma maken waarin je kunt opslaan wat je hebt getekend, of het kunt blijven bewerken. Of als u een aangepaste MP3-speler wilt maken en uw eigen bestandsindeling voor de afspeellijst wilt hebben. De mogelijkheden zijn eindeloos…

Ik hoop dat je het leuk vond om de tut te volgen.