Ecco una dimostrazione di quanto è semplice sviluppare applicazioni in Flash CS3. Dopo le varie discussioni sullo sviluppo di uno strumento “erase”, propongo una semplice applicazione che implementa in modo completo alcune delle cose dette nei precedenti Post. In questo esempio ho inserito una ToolBar “draggabile”, la possibilità di scegliere il colore del pennello e quello di sfondo, la selezione dello strumento “erase” e un leggero effetto “blur” durante il disegno!
Partendo dai codici forniti in Creare un’applicazione Paint in Flash CS3, ed eseguendo piccole modifiche, si può migliorare notevolmente lo strumento di “erase”. Aggiungendo una Shape non visibile, è possibile usarla come “piano” per eseguire il draw() in modalità di fusione “erase”. Come mostrato nell’esempio qui sotto, dopo aver disegnato qualcosa, tenete premuto il tasto Ctrl e l’effetto di “cancellazione” appare ora in tempo reale.
Il codice è il seguente – sorgente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | import flash.events.MouseEvent; import flash.display.BitmapData; import flash.display.Bitmap; import flash.display.GradientType; // import flash.geom.Matrix; // var md:Boolean = false; // var event_spr:Sprite = new Sprite(); addChild (event_spr); // var area_width:Number = event_spr.stage.stageWidth; var area_height:Number = event_spr.stage.stageHeight-32; // var fillType:String = GradientType.LINEAR; var colors:Array = [0xFF0000, 0x00FF00, 0x0000ff]; var alphas:Array = [1, 1, 1]; var ratios:Array = [0, 128, 255]; var spreadMethod:String = SpreadMethod.PAD; var matrix:Matrix = new Matrix(); matrix.createGradientBox (area_width, area_height, 1, 0, 0); // with (event_spr.graphics) { beginGradientFill (fillType,colors,alphas,ratios,matrix,spreadMethod); drawRect (0,0,area_width, area_height); endFill (); } // paint event event_spr.addEventListener (MouseEvent.MOUSE_DOWN, _onMouseDown); event_spr.addEventListener (MouseEvent.MOUSE_MOVE, _onMouseMove); event_spr.addEventListener (MouseEvent.MOUSE_UP, _onMouseUp); event_spr.addEventListener (MouseEvent.MOUSE_OUT, _onMouseUp); // var bmpd:BitmapData = new BitmapData(event_spr.width,event_spr.height,true,0); var bmp:Bitmap = new Bitmap(bmpd); addChild (bmp); // // shape temporanea var draw_shape:Shape = new Shape(); addChild (draw_shape); // // shape, non visibile, usata per la "cancellazione" var erase_shape:Shape = new Shape(); // function _onMouseDown (e:MouseEvent):void { debug ("_onMouseDown"); draw_shape.graphics.lineStyle (10, 0xffffff, 1); erase_shape.graphics.lineStyle (20, 0xffffff, 1); draw_shape.graphics.moveTo (e.localX,e.localY); erase_shape.graphics.moveTo (e.localX,e.localY); md = true; } // function _onMouseUp (e:MouseEvent):void { md = false; bmp.bitmapData.draw (draw_shape); draw_shape.graphics.clear (); erase_shape.graphics.clear (); } // function _onMouseMove (e:MouseEvent):void { debug ("_onMouseMove"); if (md && !e.ctrlKey) { draw_shape.graphics.lineTo (e.localX,e.localY); } else if (md && e.ctrlKey) { erase_shape.graphics.lineTo (e.localX,e.localY); bmp.bitmapData.draw (erase_shape,null,null,"erase"); } } // function debug (v:String):void { var d:Date = new Date(); trace (d.getMinutes()+":"+d.getSeconds()+":"+d.getMilliseconds()+": "+v); } |
È stata aggiunta una nuova Shape, erase_shape, non visibile (non è stato effettuato nessun addChild()):
Nella parte di codice che si preoccupa di disegnare è stato introdotto il controllo per il tasto Ctrl e, se premuto, viene interessata proprio la Shape erase_shape e copiata sulla Bitmap:
1 2 3 | .... erase_shape.graphics.lineTo (e.localX,e.localY); bmp.bitmapData.draw (erase_shape,null,null,"erase"); |
Come esposto in Actionscript Flash contest: erase tool non è possibile “cancellare” una particolare zona di uno Sprite, MovieClip o Shape su cui sono state tracciate linee o rettangoli tramite il puntatore graphics. Esiste, infatti, il solo metodo clear() che, tuttavia, ha effetto sull’intera area del nostro oggetto. La soluzione al problema risiede nella possibilità di usare gli oggetti Bitmap e BitmapData. Come vedremo possiamo accedere direttamente ai dati Bitmap e manipolarli in modo da “cancellare” i tratti con un vero e proprio strumento “cancellino”.
Presenterò due metodi diversi per realizzare il “cancellino”. Il primo “disegna” (cancella) i dati direttamente nella BitmapData, sfruttando il metodo fillRect() – si può usare anche setPixel() per esempio. Il secondo metodo, quello che preferisco, sfrutta i metodi di fusioni (blendMode).
Prima di tutto vediamo che tipo di organizzazione minimale è necessaria per realizzare un semplice Painter in Flash. Lo schema presentato qui sotto vale per entrambe le proposte del “cancellino”:
Ho creato tre layer: il primo, MovieClip o Sprite, funziona da sfondo e gestore eventi (MouseDown, MouseMove e MouseUp). Il secondo, la Bitmap, è il nostro layer principale, quello che conterrà effettivamente la grafica disegnata e su cui sarà applicata la funzione “cancellino”. Il terzo e ultimo layer, lo Shape, risolve due questioni: la prima è che permette di utilizzare direttamente le funzioni messe a disposizione dal puntatore graphics (come lineStyle, drawRect(), ecc…). Inoltre aumenta le performance durante il tracciamento grafico, come spiegato in dettaglio più sotto.
Per completezza, in relazione a Painting Flash CS3: effetti con le matrici Matrix voglio sottolineare che le Matrix non sono necessarie per il comportamento indicato nel precedente post. Infatti vediamo nell’esempio qui sotto:
Il codice, leggermente diverso da quello precedente, è il seguente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | /* ** Actionscript 2.0 code */ import flash.events.MouseEvent; import flash.geom.Matrix; // flag per il detect del mousedown var md:Boolean = false; // creo una lavagna front var lvg1:Sprite = new Sprite(); lvg1.graphics.lineStyle(0,0xffffff); lvg1.graphics.beginFill(0x666666); lvg1.graphics.drawRect(0,0,199,199); lvg1.graphics.endFill(); addChild(lvg1); lvg1.x = lvg1.y = 30; // creo la lavagna inclinata var lvg2:Sprite = new Sprite(); lvg2.graphics.lineStyle(0,0xffffff); lvg2.graphics.beginFill(0x666666); lvg2.graphics.drawRect(0,0,199,199); lvg2.graphics.endFill(); lvg2.x = 400; lvg2.y = lvg1.y; lvg2.rotation = 45; lvg2.scaleX = lvg2.scaleY = .6; addChild(lvg2); // // paint event lvg1.addEventListener (MouseEvent.MOUSE_DOWN, _onMouseDown); lvg1.addEventListener (MouseEvent.MOUSE_MOVE, _onMouseMove); lvg1.addEventListener (MouseEvent.MOUSE_UP, _onMouseUp); // function _onMouseDown (e:MouseEvent):void { trace("_onMouseDown"); var c:uint = 0xffffff; e.target.graphics.lineStyle (10,c,1); lvg2.graphics.lineStyle (10,c,1); e.target.graphics.moveTo (e.localX,e.localY); lvg2.graphics.moveTo (e.localX,e.localY); md = true; } // function _onMouseUp (e:MouseEvent):void { md = false; } // function _onMouseMove (e:MouseEvent):void { trace("_onMouseMove"); if (md) { e.target.graphics.lineTo (e.localX,e.localY); lvg2.graphics.lineTo (e.localX,e.localY); } } |
In questo caso le righe dalla 22 alla 25 dimostrano che anche con semplici rotazione e spostamenti l’effetto si ripete.
Giocherellando con il potente e versatile oggetto Matrix (matrice), legato alla trasformazioni, è possibile fare cose bizzarre. Questi strumenti sono utilizzati per applicare particolari trasformazioni ad un oggetto visivo, come ad esempio un Sprite. È possibile, ad esempio, scalare, ruotare o distorcere (skew) uno Sprite. Mentre per le prime due funzioni (scala e rotazione) gli oggetti Sprite (e non solo) mettono a disposizione direttamente delle proprietà (scaleX/scaleY e rotation), per l’effetto Skew bisogna ricorrere direttamente alle matrici. Quello che vorrei sottolineare qui è che quando modifichiamo un oggetto grafico tutte le sue coordinate interne sono spostate:
Alcuni, e non a torto, discutono sull’utilità di Adobe AIR, Adobe Integrated Runtime (ex Apollo) proposto da Adobe. Di che stiamo parlando? Dopo tutto AIR è ancora una beta (l’ultima release è del 12/12/2007 – la beta 3) e il suo successo, vedremo se compreso o meno, dipende da molti fattori.
Premetto subito: non si vince nulla! A parte l’orgoglio – caso mai – di aver risolto il problema.
Come si realizza un tool per cancellare, eliminare, ripulire, una “porzione” della grafica disegnata con le API di Actionscript 3.0?
Con Actionscript 3.0 alcuni oggetti visivi, come i MovieClip o gli Shape, espongono la proprietà graphics, un puntatore ad un altro oggetto che “serve” tutte le funzioni grafiche di disegno runtime. Ad esempio è possibile sviluppare una semplice applicazione di disegno. Questo oggetto graphics permette di disegnare qualsiasi cosa, ad esempio su un oggetto Shape, in modo semplice e rapido. Il problema è che una volta disegnato qualcosa è possibile ripulire tutto ma non una singola parte.
Disegnare una linea è facilissimo:
1 2 3 4 5 6 |
Disegnato qualcosa è possibile ripulire tutto con la semplice chiamata al metodo clear():
1 | myShape.graphics.clear(); |
Ma se voglio “cancellare” solo un punto? Oppure dalle coordinate 50,50 a 100,100?
Cercando su Internet ho trovato numerosi esempi di “applicazioni di disegno” e, in effetti, nessuna supporta o propone lo strumento “cancella”.
Avete qualche soluzione?
Yahoo! ha appena rilasciata ASTRA, una suite di componenti per Adobe Flash e Flex. Devo dire che, almeno per quanto riguarda i componenti per Flash, ho avuto una mezza delusione (se non totale). Il più interessante, forse, è il TabBar… il resto lascia molto a desiderare. Sembrano componenti sviluppati per qualche loro progetto – interno – e ora rilasciati come prodotto open! Forse, in Yahoo!, si sono già allineati alle politiche Microsoft… visto che proprio oggi la software house fondata dal Bill ha offerto 44,6 miliardi di dollari per acquistare Yahoo!! 44,6 miliardi, non ho scritto male!
Tuttavia fatevi un giro sul sito dove si trovano svariate risorse utili. Confidiamo nel futuro prossimo venturo.
Sempre nell’ottica di “uniformare”, come già accaduto con gli eventi (vedi La nuova gestione degli eventi di Flash CS3 e Flash CS3: la nuova gestione degli eventi), una delle tante novità presenti in Actionscript 3.0 è la scomparsa di tutti quei metodi ad hoc dedicati alla creazione di particolari oggetti, come: createEmptyMovieClip() o il famosissimo attachMovie(). Con Actionscript 3.0 l’operatore new è sufficiente a svolgere tutte le operazioni di creazione. Un nuovo MovieClip, ad esempio, viene creato (runtime) con il seguente codice:
Ma veniamo al dunque! Se ho un simbolo nella libreria e voglio aggiungerlo runtime come procedo se attachMovie() è scomparso? La soluzione non è molto dissimile da quello che accadeva in Actionscript 2.0. Prima di tutto bisogna andare nel pannello di libreria, selezionare il simbolo e aprire la finestra proprietà. A questo punto spuntare la casella di concatenamento Esporta per ActionScript – come accadeva in Flash 8. Un simbolo di libreria ha sempre come Classe base flash.display.MovieClip, ma questo non ci interessa granchè. La cosa interessante, invece, è il parametro Classe che viene impostato di default (quando si spunta Esporta per ActionScript) con il nome del simbolo. Quello che è importante sottolineare è che questa è una nuova modalità di Flash CS3 (e quindi ActionScript 3.0). Il simbolo, per essere esportato, deve avere una Classe di riferimento. La curiosità risiede nel fatto che non siamo costretti a creare per forza una nostra Classe (estesa da flash.display.MovieClip), anche se potremmo farlo.
Ne avevo già parlato in Flash CS3: la nuova gestione degli eventi. Torno sulla questione per sottolieare la differenza di questo nuovo approccio rispetto alle precedenti versioni di ActionScript. Schematizzando abbiamo una situazione generale di questo tipo:
Ogni oggetto che supporta degli eventi, in definitiva, espone sempre il metodo addEventListener(). Nella documentazione, tra l’altro, leggiamo:
Novità per i listener di eventi in ActionScript 3.0
[...] Per aggiungere listener di eventi in ActionScript 2.0 si usa talvolta addListener() e talvolta addEventListener(), mentre in ActionScript 3.0 si usa addEventListener() in tutte le situazioni.
[..]
La gestione degli eventi, poi, è standardizzata anche a livello di listener vero e proprio. Tutte le “funzioni” di ascolto, infatti, hanno la seguente struttura:
1 2 3 | function eventResponse(eventObject:EventType):void { // Le azioni di risposta agli eventi vanno definite qui. } |
EvenType è sempre un oggetto della classe Event o una sua sottoclasse. Questo permette di ottenere sempre infomazioni specifiche per il particolare evento oltre a manipolare proprietà standard come target o currentTarget.
Un’importante differenza con le precedenti versioni di Actionscript, riguardo ai listener, è che:
In ActionScript 2.0, i listener di eventi possono essere funzioni, metodi oppure oggetti mentre in ActionScript 3.0 possono essere listener di eventi solo funzioni o metodi.
Insomma, avendo usato per un bel po’ di tempo la struttura ad eventi delle precedenti versioni di Flash, devo dire che questo nuovo approccio è davvero piacevole. È un po’ che sviluppo con Actionscript 3.0 e, dopo un piccolo smarrimento iniziale (giusto per ritrovare ciò che prima era scontato) ora non capisco proprio come facevo a sopportare il “vecchio” metodo degli eventi delle precedenti versioni.
Ultimi Commenti
Giovambattista Fazioli: @Nik: Sono contento! In bocca al lupo dunque!!
Nik: Lunedì ho l’esame di informatica su java, grazie mi sei stato utilissimo, il libro che ho era poco chiaro...
Marco: Ti ringrazio moltissimo, mi hai illuminato
ho risolto impostando [cc_objc] //OptionViewController.m -...
Giovambattista Fazioli: @Marco: Ti consiglio un approccio credo più corretto. Se hai eseguito il subclass del tab...
luigi: molto chiaro e semplice devo ammettere che anche scrivendo da un pà difficilmente uso delegati creati da...