Share
Twee keer per maand bekijken we enkele van onze favoriete lezers uit de geschiedenis van Activetuts +. Deze tutorial werd voor het eerst gepubliceerd in augustus 2009.
In deze zelfstudie maken we een Drawing-applicatie met basisfuncties en een eenvoudig te gebruiken interface. Je artistiek voelen? Laten we gaan?
Deze applicatie bevat een reeks tools zoals potlood, gum, tekstgereedschap en ook de mogelijkheid om je tekening op te slaan in png-formaat met de Adobe PNG Encoder.
Open Flash en maak een nieuw Flash-bestand (ActionScript 3).
Stel de stage in op 600x350 px en de framesnelheid op 25 fps.
Teken een witte rechthoek van 600x290px en converteer deze naar MovieClip. Zet de naam van het exemplaar op "board" en lijn het uit naar de linkerbovenhoek van het werkgebied.
Dit zal het gebied zijn waarop we kunnen tekenen.
Maak een 600px breed 60px hoog grijs (#DFDFDF) rechthoek en lijn deze uit onderin het werkgebied. Dit wordt onze achtergrond voor het deelvenster Gereedschappen.
Ik ga het maken van de gereedschapspictogrammen niet bedekken, want dat is niet de bedoeling van het turorial, toch kun je zien hoe ze zijn gemaakt in het Fla-bestand dat is opgenomen in de bron.
Zoals je in de afbeelding kunt zien, gebruiken we twee pictogrammen, de ene in een grijze en de andere in kleur.
Converteer het grijze potloodpictogram naar een Button (F8) en noem het "pencilTool", dubbelklik om het te bewerken en voeg een KeyFrame (F6) toe in de "over" -status. Hier gaan we de kleurenversie van het pictogram plaatsen.
Voeg ten slotte nog een KeyFrame toe in de status "hit" en teken een vierkant van 30x30px om het hitgebied van de knop te gebruiken.
Herhaal dit proces met al uw gereedschapspictogrammen, vergeet niet om ze de juiste instantienamen te geven (eraserTool, textTool, saveButton, clearTool).
Om het actieve gereedschapspictogram weer te geven, gebruiken we de kleurenversie van het pictogram en plaatsen we deze in dezelfde positie als de knop die we eerder hebben gemaakt. De instantienamen zijn "potlood", "gum" en "tekst".
We zullen deze pictogrammen later verbergen met ActionScript.
Wanneer we de opslagoptie gebruiken, zullen we een bericht "opslaan geslaagd" weergeven.
Maak een zwarte rechthoek van 600 x 350 pixels met 50% alfa om als achtergrond te gebruiken.
Voeg een zwarte afgeronde rechthoek toe in het midden met het pictogram voor de knop Opslaan en een tekst die aangeeft dat het opslaan is voltooid.
Maak een knop Sluiten en lijn deze uit in de linkerbovenhoek van de afgeronde rechthoek, noem deze "closeBtn". Zoals u zich kunt voorstellen, zal deze knop het dialoogvenster Opslaan sluiten.
Converteer alle elementen naar een enkele MovieClip en vink het selectievakje "Exporteren voor ActionScript" aan. Zet het Class-tekstveld op "SaveDialog".
We zullen deze klasse instantiëren wanneer de gebruiker op de SaveButton drukt en het opslaan is voltooid.
Het formaatvenster is het gedeelte waar u de grootte van het potlood, de gum en het tekstgereedschap kunt wijzigen. U kunt dat doen door in het paneelgebied of het ovaal erin te klikken.
Selecteer het Primitive Tool Rechthoek, stel de hoekradius in op 4 en maak een #EFEFEF 80x50px-rechthoek. Converteer het naar een MovieClip en noem het "sizePanel".
Open het paneel Filters en voeg een Slagschaduw toe met de volgende waarden:
Gebruik nu het gereedschap Ovaal om een zwarte cirkel van 5x5px te maken en deze te centreren in het formaatvenster, converteer het naar MovieClip en stel de instantienaam in op "shapeSize".
We maken een standaardkleurenpalet in plaats van het onderdeel Kleurkiezer te gebruiken.
Maak een cirkel van 22x22px met behulp van het gereedschap Ovaal, stel de kleur in op #EEEEEE en converteer deze naar MovieClip. Voeg hetzelfde slagschaduwfilter toe dat we in het groottepaneel hebben gebruikt.
Teken een tweede cirkel van 16x16px en gebruik deze keer zwart voor de kleur. Centreer de cirkels en herhaal dit proces door de laatste cirkelkleur als volgt te wijzigen:
Lijn ze uit om zoiets als dit te krijgen:
Converteer alle kleuren naar een enkele MovieClip, noem die "kleuren" en zorg ervoor dat het Registratiepunt zich links bovenin bevindt, want we krijgen pixelgegevens met behulp van de Bitmapklasse.
Om de Save-functie te gebruiken, hebben we de Adobe PNG Encoder nodig die deel uitmaakt van de as3corelib die u kunt vinden in Google Code.
Als u deze klasse buiten het pakket wilt gebruiken, wordt standaard één regel gewijzigd. Open het bestand PNGEncoder.as en wijzig de regel "package com.adobe?" In "package". Dit laat ons de klasse in de directory bellen waar het Fla-bestand is.
Een enkele klas zal deze applicatie afhandelen. Open het eigenschappenvenster in het Fla-bestand en stel de documentklasse in als "hoofd".
Maak een nieuw ActionScript-document en sla het op als "Main.as" in dezelfde map als het Fla-bestand.
Dit zijn de lessen die we in deze app nodig hebben. Vergeet niet om de Flash Help (F1) te raadplegen als u niet zeker bent van een specifieke klasse.
pakket import PNGEncoder; import flash.display.MovieClip; import flash.display.Shape; import flash.display.DisplayObject; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFieldType; import flash.text.TextFieldAutoSize; import flash.display.BitmapData; import flash.geom.ColorTransform; import flash.events.MouseEvent; import flash.events.Event; import flash.utils.ByteArray; import flash.net.FileReference;
We breiden de MovieClip-klasse uit omdat we de specifieke eigenschappen en methoden van deze klasse gebruiken.
public class Main breidt MovieClip uit
Dit zijn de variabelen die we zullen gebruiken. Ze worden allemaal uitgelegd in de opmerkingen over de code.
/ * Vorm van het potloodgereedschap, alles dat met dit gereedschap is getekend en het gumtool wordt in de board.pencil bewaardDraw * / var pencilDraw: Shape = new Shape (); / * Tekstformaat * / var textformat: TextFormat = new TextFormat (); / * Kleuren * / var colorsBmd: BitmapData; // We gebruiken deze bitmapgegevens om de RGB-pixelwaarde te krijgen wanneer erop wordt geklikt var pixelValue: uint; var activeColor: uint = 0x000000; // Dit is de huidige gebruikte kleur, weergegeven door de shapeSize MC / * Opslaan dialooginstantie * / var saveDialog: SaveDialog; / * Actieve var, om te controleren welk gereedschap actief is * / var active: String; / * Shape size color * / var ct: ColorTransform = new ColorTransform ();
De hoofdfunctie zorgt ervoor dat het tekstformaat van het tekstgereedschap wordt ingesteld en de kleuren MovieClip worden omgezet naar bitmapgegevens, zodat we de Pixel RGB-waarde kunnen extraheren, de toehoorders kunnen toevoegen en de actieve pictogrammen kunnen verbergen.
public function Main (): void textformat.font = "Quicksand Bold Regular"; // U kunt elk lettertype gebruiken dat u wilt textformat.bold = true; textformat.size = 16; / * We maken deze functies later * / convertToBMD (); addListeners (); / * Verberg hulpmiddelen hoogtepunten * / pencil.visible = false; hideTools (gum, txt);
De hulpmiddelenacties zijn elk opgesplitst in vier functies.
De eerste stelt de tool in op de actieve status, de tweede en derde zullen de muisgebeurtenissen (zoals tekenen of wissen) afhandelen en de vierde zal die gebeurtenissen stoppen.
Deze functies behandelen de Pencil Tool, lees de opmerkingen in de code voor een beter begrip.
De set-to-active functie:
private function PencilTool (e: MouseEvent): void / * Sluit actieve tool * / quitActiveTool (); // Deze functie wordt later aangemaakt / * Stel in op Actief * / actief = "Potlood"; // Stelt de actieve variabele in op "Potlood" / * Voegt de luisteraars toe aan het bord MovieClip, om er gewoon in te tekenen * / board.addEventListener (MouseEvent.MOUSE_DOWN, startPencilTool); board.addEventListener (MouseEvent.MOUSE_UP, stopPencilTool); / * Markeer, stelt het Pencil Tool-pictogram in op de kleurenversie en verbergt elk ander hulpmiddel * / highlightTool (potlood); hideTools (gum, txt); / * Stelt de actieve kleurvariabele in op basis van de Kleurtransformatie-waarde en gebruikt die kleur voor de shapeSize MovieClip * / ct.color = activeColor; shapeSize.transform.colorTransform = ct;
De start-functie; deze functie wordt aangeroepen wanneer de Board MovieClip wordt ingedrukt.
private function startPencilTool (e: MouseEvent): void pencilDraw = new Shape (); // We voegen een nieuwe vorm toe om altijd bovenaan te tekenen (in geval van tekst- of gumtekeningen) board.addChild (pencilDraw); // Voeg die vorm toe aan het bord MovieClip pencilDraw.graphics.moveTo (mouseX, mouseY); // Verplaatst de tekenpositie naar de muis Position pencilDraw.graphics.lineStyle (shapeSize.width, activeColor); // Stelt de lijndikte naar ShapeSize MovieClip in en stelt de kleur in op het actieve actieve kleurenbord.addEventListener (MouseEvent.MOUSE_MOVE , drawPencilTool); // Voegt een luisteraar toe aan de volgende functie
De Draw-functie; aangeroepen wanneer de gebruiker op de Board MovieClip drukt en de muis beweegt.
private functie drawPencilTool (e: MouseEvent): void pencilDraw.graphics.lineTo (mouseX, mouseY); // Tekent een lijn van de huidige positie van de muis naar de bewogen positie van de muis
Stop-functie, uitgevoerd wanneer de gebruiker de muis loslaat.
private function stopPencilTool (e: MouseEvent): void board.removeEventListener (MouseEvent.MOUSE_MOVE, drawPencilTool); // Stopt de tekening
Het wisserhulpmiddel is vrijwel hetzelfde als het potloodgereedschap, behalve dat we geen andere kleuren dan wit gebruiken.
private functie EraserTool (e: MouseEvent): void / * stop actief hulpmiddel * / quitActiveTool (); / * Stel in op Actief * / actief = "Gum"; / * Luisteraars * / board.addEventListener (MouseEvent.MOUSE_DOWN, startEraserTool); board.addEventListener (MouseEvent.MOUSE_UP, stopEraserTool); / * Markeer * / highlightTool (gum); hideTools (potlood, txt); / * Gebruik White Color * / ct.color = 0x000000; shapeSize.transform.colorTransform = ct; private function startEraserTool (e: MouseEvent): void pencilDraw = new Shape (); board.addChild (pencilDraw); pencilDraw.graphics.moveTo (mouseX, mouseY); pencilDraw.graphics.lineStyle (shapeSize.width, 0xFFFFFF); // White Color board.addEventListener (MouseEvent.MOUSE_MOVE, drawEraserTool); private functie drawEraserTool (e: MouseEvent): void pencilDraw.graphics.lineTo (mouseX, mouseY); function stopEraserTool (e: MouseEvent): void board.removeEventListener (MouseEvent.MOUSE_MOVE, drawEraserTool);
Zoals je kunt zien, is de code hetzelfde, behalve de witte kleurwijzigingen.
Het gereedschap Tekst heeft slechts twee functies; een die verantwoordelijk is voor het instellen van het actief, en de andere voor het verwerken van het schrijven van de tekst. Laten we kijken:
private function TextTool (e: MouseEvent): void / * Sluit actieve tool * / quitActiveTool (); / * Stel in op Actief * / actief = "Tekst"; / * Listener * / board.addEventListener (MouseEvent.MOUSE_UP, writeText); / * Markeer * / highlightTool (txt); hideTools (potlood, gum); private functie writeText (e: MouseEvent): void / * Maak een nieuw TextField-object, op deze manier vervangen we geen oudere instanties * / var textfield = new TextField (); / * Set Indelingen, positie en focus * / textfield.type = TextFieldType.INPUT; textfield.autoSize = TextFieldAutoSize.LEFT; textfield.defaultTextFormat = textformat; textfield.textColor = activeColor; textfield.x = mouseX; textfield.y = mouseY; stage.focus = tekstveld; / * Tekst toevoegen aan bord * / board.addChild (tekstveld);
Deze was gemakkelijk, onthoud dat je de grootte en kleur kunt wijzigen met de shapeSize en de Colors MovieClips.
De opslagoptie die wordt behandeld door de saveButton maakt gebruik van Adobe's PNGEnconder Class om de illustratie op te slaan als een PNG-bestand.
private function export (): void var bmd: BitmapData = nieuwe BitmapData (600, 290); // Creëert een nieuwe BitmapData met de bordgrootte bmd.draw (board); // Tekent de board MovieClip in een BitmapImage in de BitmapData var ba: ByteArray = PNGEncoder.encode (bmd); // Creëert een bytearray van de BitmapData, gecodeerd als PNG var-bestand: FileReference = new FileReference (); // Start een nieuw bestandsverwijzingsobject om het bestand save.addEventListener (Event.COMPLETE, saveSuccessful) te verwerken; // Voegt een nieuwe luisteraar toe om te luisteren wanneer het opslaan voltooid is file.save (ba, "MyDrawing.png"); // Slaat de ByteArray op als een PNG persoonlijke functie saveSuccessful (e: Event): void saveDialog = new SaveDialog (); // Instantates een nieuwe SaveDialog Class addChild (saveDialog); // Voegt de SaveDialog MovieClip toe aan het werkgebied saveDialog.closeBtn.addEventListener (MouseEvent.MOUSE_UP, closeSaveDialog); // Voegt een luisteraar toe aan de knop Sluiten van het dialoogvenster persoonlijke functie closeSaveDialog (e: MouseEvent): void removeChild (saveDialog) ; // Verwijdert het dialoogvenster van het werkgebied privéfunctie opslaan (e: MouseEvent): void export (); // Roept de exportfunctie op om het opslaan te starten
Het gereedschap Wissen voegt een wit scherm toe voor alle elementen om het bord weer gereed te laten voor tekenen.
private functie clearBoard (e: MouseEvent): void / * Maak bovenaan een witte rechthoek * / var blank: Shape = new Shape (); blank.graphics.beginFill (0xFFFFFF); blank.graphics.drawRect (0, 0, board.width, board.height); blank.graphics.endFill (); board.addChild (spatie);
Om de waarde te krijgen van de kleuren die we gebruiken in de Colors MovieClip, zetten we het om naar een BitmapData-object en gebruiken we de methode getPixel om de RGB-waarde van de geselecteerde pixel te verkrijgen.
private function convertToBMD (): void colorsBmd = nieuwe BitmapData (colors.width, colors.thight); colorsBmd.draw (kleuren); private function chooseColor (e: MouseEvent): void pixelValue = colorsBmd.getPixel (colors.mouseX, colors.mouseY); // Haalt de geklikte pixel-RGB-waarde activeColor = pixelValue; / * Gebruik een object ColorTransform om de shapeSize MovieClip-kleur * / ct.color = activeColor te wijzigen; shapeSize.transform.colorTransform = ct;
We zullen de chooseColor-listener in de addListeners-functie later in de code toevoegen.
Eerder hebben we een variabele gedeclareerd om het actieve of huidige gereedschap in gebruik te stellen, en we noemen deze functie om de bijbehorende luisteraars te verwijderen om slechts één actief hulpmiddel te hebben.
Kortom, de functie controleert de "actieve" variabele in een switch-lus, en vervolgens, afhankelijk van de waarde, worden de luisteraars verwijderd.
private function quitActiveTool (): void switch (actief) case "Pencil": board.removeEventListener (MouseEvent.MOUSE_DOWN, startPencilTool); board.removeEventListener (MouseEvent.MOUSE_UP, stopPencilTool); case "Eraser": board.removeEventListener (MouseEvent.MOUSE_DOWN, startEraserTool); board.removeEventListener (MouseEvent.MOUSE_UP, stopEraserTool); hoofdletter "Tekst": board.removeEventListener (MouseEvent.MOUSE_UP, writeText); standaard :
We moeten ook de actieve tool markeren en de andere verbergen:
private function highlightTool (tool: DisplayObject): void tool.visible = true; // Markeringstool in de parameter / * Verbergt de gereedschappen in de parameters * / private function hideTools (tool1: DisplayObject, tool2: DisplayObject): void tool1.visible = false; tool2.visible = false;
We klikken op het formaatvenster of de ShapeSize MovieClip om het formaat van het potlood, de gum en het tekstgereedschap te wijzigen. De grootte wordt gewijzigd in intervallen van 5 en wordt gereset als de maat groter is of gelijk is aan 50. Bekijk de code:
private function changeShapeSize (e: MouseEvent): void if (shapeSize.width> = 50) shapeSize.width = 1; shapeSize.height = 1; / * TextFormat * / textformat.size = 16; else shapeSize.width + = 5; shapeSize.height = shapeSize.width; / * TextFormat * / textformat.size + = 5;
Een functie om alle luisteraars toe te voegen.
persoonlijke functie addListeners (): void pencilTool.addEventListener (MouseEvent.MOUSE_UP, PencilTool); eraserTool.addEventListener (MouseEvent.MOUSE_UP, EraserTool); textTool.addEventListener (MouseEvent.MOUSE_UP, TextTool); saveButton.addEventListener (MouseEvent.MOUSE_UP, opslaan); clearTool.addEventListener (MouseEvent.MOUSE_UP, clearBoard); colors.addEventListener (MouseEvent.MOUSE_UP, chooseColor); sizePanel.addEventListener (MouseEvent.MOUSE_UP, changeShapeSize); shapeSize.addEventListener (MouseEvent.MOUSE_UP, changeShapeSize);
Test uw app door op cmd + return te drukken en controleer of alles werkt zoals verwacht.
Gebruik alle gereedschappen, kleuren en functies en begin met het tekenen van je scène!
Deze Flash-film kan eenvoudig worden aangepast als een tekentoepassing voor kinderen, het heeft een gebruiksvriendelijke gebruikersinterface en basishulpmiddelen die kunnen leren hoe de muis werkt, terwijl ze wat kleurrijk plezier in het proces hebben.
Je kunt ook de rest van de as3corelib verkennen en de documentatie lezen om een aantal nieuwe ActionScript-functies te leren.
Bedankt voor het lezen!
Accentsconagua