Skapa en Paint i Flash CS3
Söndag 10 februari, 2008 Som förklaras i Flash ActionScript tävling: radera verktyget är inte möjligt att "radera" ett särskilt område Sprite en eller Shape MovieClip som har dragit linjerna eller rektanglar med hjälp av pekaren grafik. Det är faktiskt den enda metod clear() som dock träda i kraft på området för vårt ämne. Lösningen på problemet ligger i möjligheten att använda föremål Bitmap och BitmapData. Vi får se hur vi kan direkt tillgång och manipulera data Bitmap för att "radera" de egenskaper med ett riktigt instrument "Avbryt".
Kommer att presentera två olika metoder för att uppnå "ta bort". Den första "tavla" (klart) data direkt i BitmapData, enligt den metod fillRect() kan också användas setPixel() Den andra metoden, den jag föredrar, använder metoder för fusioner (blendMode).
Först och främst ser vi vilken typ av organisering är minimalt krävs för att uppnå en enkel Painter i Flash. I det utkast som presenteras nedan gäller båda förslagen i "ta bort":
Jag skapade tre skikt: den första, MovieClip eller Sprite, och fungerar som en bakgrund händelsehanterare (MouseDown, MouseMove och MouseUp). Den andra, Bitmap, är vår viktigaste skikt, som faktiskt innehåller grafik konstruerade och som också kommer att synas på "Avbryt". Den tredje och sista lagret, form, löser två problem: för det första, som ger dig möjlighet att direkt använda de funktioner som finns från den grafiska pekaren (som lineStyle drawRect() osv ...). Också ökar prestanda under spårning diagram, som förklaras i detalj nedan.
METOD 1 - Direkt tillgång till uppgifter Bitmap
Detta "prov" använder metoden fillRect() direkt på BitmapData (lager 2) efter det att bilden har kopierats (med hjälp av metoden draw() av Shape (Layer 3) att Bitmap (lager 2).
För att förstå hur detta är samma film med lager och brutet i pseudo 3D - som dras i färgad ruta - källa:
Som ni ser den drar på layer 3, formen. Om en händelse som MouseUp form av innehåll kopieras på Bitmap (och därmed uppgifterna i BitmapData) och formen är ren clear()
Obs: denna sista punkt är clear() Form inte underskattas. Några exempel på målare i Flash (nästan alla som är sant "Avbryt") dra direkt på en MovieClip eller form, hålla dem på uppgifter som tagits. Efter ett tag "som du drar ditt system bromsar, eftersom det område som" vektor "av MovieClip ökar. Den metod som jag lade fram det här problemet är löst eftersom vektor data av Shape, när kopieras till Bitmap är tasformati bit och formen raderas och frigör minne och smidighet restituiendo att arbeta!
Ctrl (Control) är "rensas" direkt genom BitmapData fillRect() Detta är möjligt eftersom fillRect() metoder att agera på BitmapData, kan du ställa in "färg" genom 0xARGB, där A är alfa värde, öppenhet.
Koden är följande - Källa:
- . MouseEvent ; import flash. evenemang. MouseEvent;
- . BitmapData ; import flash. displayen. BitmapData;
- . Bitmap ; import flash. displayen. Bitmap;
- . GradientType ; import flash. displayen. GradientType;
- / /
- . Matrix ; import flash. Geom. Matrix;
- / /
- = false ; var md: Boolean = false;
- / /
- Sprite ( ) ; var event_spr: Sprite = nya Sprite ();
- ; addChild (event_spr);
- / /
- = event_spr. stage . stageWidth ; var area_width: Antal = event_spr. skede. stageWidth;
- = event_spr. stage . stageHeight - 32 ; var area_height: Antal = event_spr. skede. stageHeight - 32;
- / /
- = GradientType. LINEAR ; var fillType: String = GradientType. linear;
- = [ 0xFF0000, 0x00FF00, 0x0000ff ] ; var färger: Array = [0xFF0000, 0x00FF00, 0x0000ff];
- = [ 1 , 1 , 1 ] ; var Alpha: Array = [1, 1, 1];
- = [ 0 , 128 , 255 ] ; var nyckeltal: Array = [0, 128, 255];
- = SpreadMethod. PAD ; var spreadMethod: String = SpreadMethod. PAD;
- Matrix ( ) ; var matrix: Matrix = new Matrix ();
- area_width, area_height, 1 , 0 , 0 ) ; matris. createGradientBox (area_width, area_height, 1, 0, 0);
- / /
- event_spr. graphics ) { med (event_spr. grafik) (
- fillType,colors,alphas,ratios,matrix,spreadMethod ) ; beginGradientFill (fillType, färger, Alpha, nyckeltal, matris, spreadMethod);
- , 0 ,area_width, area_height ) ; drawRect (0, 0, area_width, area_height);
- ; endFill ();
- )
- / / Paint händelse
- MouseEvent. MOUSE_DOWN , _onMouseDown ) ; event_spr. addEventListener (MouseEvent. MOUSE_DOWN, _onMouseDown);
- MouseEvent. MOUSE_MOVE , _onMouseMove ) ; event_spr. addEventListener (MouseEvent. MOUSE_MOVE, _onMouseMove);
- MouseEvent. MOUSE_UP , _onMouseUp ) ; event_spr. addEventListener (MouseEvent. MOUSE_UP, _onMouseUp);
- MouseEvent. MOUSE_OUT , _onMouseUp ) ; event_spr. addEventListener (MouseEvent. MOUSE_OUT, _onMouseUp);
- / /
- BitmapData ( event_spr. width ,event_spr. height , true , 0 ) ; var bmpd: BitmapData = nya BitmapData (event_spr. bredd, event_spr. höjd, sant, 0);
- Bitmap ( bmpd ) ; var bmp: = new Bitmap Bitmap (bmpd);
- ; addChild (bmp);
- / / Tillfälliga form
- Shape ( ) ; var draw_shape: Shape = new Form ();
- ; addChild (draw_shape);
- / /
- e :MouseEvent ) : void { _onMouseDown funktion (e: MouseEvent): void (
- ) ; debug ( "_onMouseDown");
- var c: UINT = 0xffffff;
- ( 10 ,c, 1 ) ; draw_shape. grafik. LineStyle (10, c, 1);
- ( e . localX , e . localY ) ; draw_shape. grafik. Flytta (e. localX, och. localY);
- Md = true;
- )
- / /
- e :MouseEvent ) : void { _onMouseUp funktion (e: MouseEvent): void (
- Md = false;
- ( draw_shape ) ; bmp. BitmapData. draw (draw_shape);
- ( ) ; draw_shape. grafik. tydlig ();
- )
- / /
- e :MouseEvent ) : void { _onMouseMove funktion (e: MouseEvent): void (
- ) ; debug ( "_onMouseMove");
- md && ! e . ctrlKey ) { om (MD & &! och. ctrlKey) (
- ( e . localX , e . localY ) ; draw_shape. grafik. lineTo (e. localX och. localY);
- ( md && e . ctrlKey ) { ) Else om (E & & md. CtrlKey) (
- ( new Rectangle ( e . target . mouseX - 10 , e . target . mouseY - 10 , 20 , 20 ) , 0 ) ; bmp. BitmapData. fillRect (ny rektangel (e. mål. mouseX - 10, och. målet. BLYG - 10, 20, 20), 0);
- )
- )
- / /
- v: String ) : void { debug-funktionen (v: String): void (
- = new Date ( ) ; var d: Datum = new Date ();
- d. getMinutes ( ) + ":" +d. getSeconds ( ) + ":" +d. getMilliseconds ( ) + ": " +v ) ; spåra (d. getMinutes () + ":" + D. getSeconds () + ":" + D. getMilliseconds () + ":" + v);
- )
Linje 61, som visas i koden ovan körs när knappen trycks in. Som du kan se denna del av koden görs direkt i BitmapData med en färg 0, eller 0x0000!
METOD 2 - Använda metoder för fusion
Detta förmodligen är det bästa när det gör att du kan använda någon typ av "Avbryt". Till skillnad från den tidigare metoden inte har direkt åtkomst till uppgifter i bitmapp BitmapData, men du använda metoder för fusion (blendMode) och kopian av Bitmap på det sätt du draw().
Utgåva 3D - Källa:
Exakt samma sätt som du skulle kopiera data från Bitmap form, "ta bort" är "samtidigt" genom att kopiera data från formen Bitmap men denna gången fastställer de blendMode metod draw() erase att erase
Koden är följande - källa:
- . MouseEvent ; import flash. evenemang. MouseEvent;
- . BitmapData ; import flash. displayen. BitmapData;
- . Bitmap ; import flash. displayen. Bitmap;
- . GradientType ; import flash. displayen. GradientType;
- / /
- . Matrix ; import flash. Geom. Matrix;
- / /
- = false ; var md: Boolean = false;
- / /
- Sprite ( ) ; var event_spr: Sprite = nya Sprite ();
- ; addChild (event_spr);
- / /
- = event_spr. stage . stageWidth ; var area_width: Antal = event_spr. skede. stageWidth;
- = event_spr. stage . stageHeight - 32 ; var area_height: Antal = event_spr. skede. stageHeight - 32;
- / /
- = GradientType. LINEAR ; var fillType: String = GradientType. linear;
- = [ 0xFF0000, 0x00FF00, 0x0000ff ] ; var färger: Array = [0xFF0000, 0x00FF00, 0x0000ff];
- = [ 1 , 1 , 1 ] ; var Alpha: Array = [1, 1, 1];
- = [ 0 , 128 , 255 ] ; var nyckeltal: Array = [0, 128, 255];
- = SpreadMethod. PAD ; var spreadMethod: String = SpreadMethod. PAD;
- Matrix ( ) ; var matrix: Matrix = new Matrix ();
- area_width, area_height, 1 , 0 , 0 ) ; matris. createGradientBox (area_width, area_height, 1, 0, 0);
- / /
- event_spr. graphics ) { med (event_spr. grafik) (
- fillType,colors,alphas,ratios,matrix,spreadMethod ) ; beginGradientFill (fillType, färger, Alpha, nyckeltal, matris, spreadMethod);
- , 0 ,area_width, area_height ) ; drawRect (0, 0, area_width, area_height);
- ; endFill ();
- )
- / / Paint händelse
- MouseEvent. MOUSE_DOWN , _onMouseDown ) ; event_spr. addEventListener (MouseEvent. MOUSE_DOWN, _onMouseDown);
- MouseEvent. MOUSE_MOVE , _onMouseMove ) ; event_spr. addEventListener (MouseEvent. MOUSE_MOVE, _onMouseMove);
- MouseEvent. MOUSE_UP , _onMouseUp ) ; event_spr. addEventListener (MouseEvent. MOUSE_UP, _onMouseUp);
- MouseEvent. MOUSE_OUT , _onMouseUp ) ; event_spr. addEventListener (MouseEvent. MOUSE_OUT, _onMouseUp);
- / /
- BitmapData ( event_spr. width ,event_spr. height , true , 0 ) ; var bmpd: BitmapData = nya BitmapData (event_spr. bredd, event_spr. höjd, sant, 0);
- Bitmap ( bmpd ) ; var bmp: = new Bitmap Bitmap (bmpd);
- ; addChild (bmp);
- / / Tillfälliga form
- Shape ( ) ; var draw_shape: Shape = new Form ();
- ; addChild (draw_shape);
- / /
- e :MouseEvent ) : void { _onMouseDown funktion (e: MouseEvent): void (
- ) ; debug ( "_onMouseDown");
- ! e . ctrlKey ?0xffffff:0x000000 ) ; var c: UINT = (! och. ctrlKey? 0xffffff: 0x000000);
- ( 10 , c, 1 ) ; draw_shape. grafik. LineStyle (10, c, 1);
- ( e . localX , e . localY ) ; draw_shape. grafik. Flytta (e. localX, och. localY);
- Md = true;
- )
- / /
- e :MouseEvent ) : void { _onMouseUp funktion (e: MouseEvent): void (
- Md = false;
- ( draw_shape, null , null , ( e . ctrlKey ? "erase" : "normal" ) ) ; bmp. BitmapData. draw (draw_shape, null, null, (e. ctrlKey? "radera", "normal"));
- ( ) ; draw_shape. grafik. tydlig ();
- )
- / /
- e :MouseEvent ) : void { _onMouseMove funktion (e: MouseEvent): void (
- ) ; debug ( "_onMouseMove");
- md ) { om (MD) (
- ( e . localX , e . localY ) ; draw_shape. grafik. lineTo (e. localX, och. localY);
- )
- )
- / /
- v: String ) : void { debug-funktionen (v: String): void (
- = new Date ( ) ; var d: Datum = new Date ();
- d. getMinutes ( ) + ":" +d. getSeconds ( ) + ":" +d. getMilliseconds ( ) + ": " +v ) ; spåra (d. getMinutes () + ":" + D. getSeconds () + ":" + D. getMilliseconds () + ":" + v);
- )
Denna kod är inte mycket skiljer sig från föregående år. Den verkliga skillnaden i rad 52! Detta bestämmer läget för fusion "när du kopierar från formen Bitmap, när knappen trycks in används en blandning erase
Med detta är det! Kom tillbaka för att tala om Bitmap så snart som möjligt och skillnader mellan MovieClip, Sprite, form och Bitmap ... Alla objekt som bilder!
Undolog.com »Blog Archive» Hur spara bilder i Flash CS3 sa:
[...] Att spara bilder i Flash CS3 Tags: ActionScript 3.0, Bitmap, BitmapData, Flash CS3, GD, GD Bibliotek, Internet, PHP, Flash Spara bild, utveckling, TutorialsCon Flash CS3 använder Bitmap är det bättre att du bara vill skapa en liten Paint. Vi har redan sett hur en liten Paint (se Skapa en € ™ Målning i Flash CS3 och Painter: enkel ansökan om ritningen i Flash CS3 Pro) som klarar en "Avbryt" - ta bort funktionen genom att använda särskilt skikt av Form och Bitmap. Vi säger nu att Flash (till skillnad från Flex) inte ger dem möjlighet kodning (typ JPG eller PNG) kommer automatiskt att spara bilder Bitmap. Men du kan komma runt de hinder med hjälp av en server-side-scripting och förmågan att skicka data till Flash i POST. [...]
Guide ActionScript 3 i Flash CS3: händelserna den mus | Marcello Surdo sa:
[...] Skapa en Paint i Flash CS3 [...]
Gianni sa:
Utmärkt lösning, som lämpar sig för innnumerevoli lösningar för webb grafik ansökan.
Giovambattista Fazioli sa:
@ Gianni: tack! Se även Painter: enkel ansökan om ritningen i Flash CS3 Pro