Categoria ‘ActionScript’


Adobe AIR FAQ: tutto quello che c’è da sapere

Girando su vari Blog (thanks Frank) e grazie alle discussioni con Julius, mi sono accorto che, oltre all’estremo interesse per Adobe AIR, esiste anche molta confusione, e non a torto. Sia gli sviluppatori che gli utilizzatori continuano ad non avere ben chiaro cosa sia, a che cosa serva e come si sviluppi in Adobe AIR. Ho deciso, quindi, di raccogliere le varie discussioni in questa sorta di FAQ per cercare di chiare un po’ quello che si nasconde effettivamente dietro ad Adobe AIR.

Continua...

Tutto quello che avete sempre sognato di fare con Actionscript 3

Una fantastica innovazione introdotta con Actionscript 3.0 è quella di poter enumerare tutti gli oggetti (anche shape disegnate al momento) presenti in un contenitore (DisplayObjectContainer). In effetti era ora che Adobe introducesse questa feature. Mi ero sempre lamentato di questa mancanza, soprattutto perchè andando in debug l’ambiente Flash era in grado di svolgerla tranquillamente ma rimaneva completamente inaccessibile da codice!

Continua...

Flash CS3 Professional: non formattate il codice

Chissà perchè immagino Adobe con una lista di bugs in continuo aumento!?. Il baco che ho trovato, nella versione CS3 Professional in italiano, è alquanto fastidioso e pericoloso. Occhio al seguente codice:

1
2
3
private function getRandRange (min:uint,max:uint):uint{
    return( uint(Math.floor(Math.random() * (max - min +1)) + min) );
}

Dopo la formattazione automatica:

1
2
3
private function getRandRange (min:uint,max:uint):uint {
    return uint(Math.floor(Math.random() * max - min + 1) + min);
}

Ha tolto le parentesi nel calcolo max-min+1!! Che, ovviamente, non restituisce più il valore corretto!! La parentesi, infatti, è vitale in quanto permette di moltiplicare Math.random() per l’intero risultato dell’espressione (max-min+1). Nel secondo caso, dopo che il codice è stato “sformattato”, Math.random() viene moltiplicato “solo” per max e poi, al risultato di questa moltiplicazione, viene sottratto (min+1)!! L’ho spiegato solo per esigenze di completezza… ma credo che era chiaro a tutti…

Evidentemente in casa Adobe pensano davvero che la matematica sia un opinione!?
Questo è un baco pericoloso su codici corposi… se la formattazione “sconvolge” il codice, diventa un serio problema andare a rimettere tutto a posto!! Spero che Adobe fornisca al più presto una patch!!! Quindi ATTENZIONE!! Fatemi sapere se lo fa anche a voi, alla vostra versione…

Continua...

UMap Flash Component (Beta v0.6)

image

È stata rilasciata la beta 0.6 del componente UMAP per Flash CS3 (Actionscript 3.0) – nel pacchetto è presente anche la versione per Flex. Tra le novità notiamo l’adozione di OpenStreetMap come provider predefinito. Inoltre è stato aggiunto un avanzato gestore dei Marker e una serie di ottimizzazioni varie.

Continua...

Adobe AIR 1.0, Adobe Flex 3.0 e il nuovo Adobe Open Source

Adobe AIR Grandi novità per gli sviluppatori AIR. È stata rilasciata finalmente la versione 1.0! Fine della beta quindi! Nuove SDK (vitali per la compilazione in ambienti come Aptana Studio, Eclipse, etc…) e aggiornamento delle estensioni per Dreamweawer e Flash CS3 Professional in italiano! Fino a ieri, infatti, non era possibile sviluppare un’applicazione AIR con Flash CS3 Professione in italiano. Ora il nuovo menu per la creazione di RIA AIR è disponibile e funzionante! Potete trovare tutte gli aggiornamenti (fix della sicurezza ed estensioni) direttamente sul sito.

Adobe Open Source Altra novità è il lancio ufficiale di Adobe Open Source, il nuovo sito che terrà traccia di tutte le novità nell’ambito dell’open source Adobe e non solo. Diventa questo, quindi, il punto di riferimento degli sviluppatori che potranno travare interessanti contributi con demo, codici sorgente e molto altro, come il supporto per i progetti open Tamarin e BlazeDS.

Prossimamente vedremo come sviluppare una semplice applicazione AIR con Flash e Dreamweaver!

Continua...

Painter: semplice applicazione per disegno in Flash CS3 Pro

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!

Loading Flash Player...

Scarica il sorgente per Adobe Flash CS3 Professional

Continua...

Painting Flash CS3: real time erase tool

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.

Loading Flash Player...

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()):

1
2
3
...
// shape, non visibile, usata per la "cancellazione"
var erase_shape:Shape = new Shape();

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");

Continua...

Creare un’applicazione Paint in Flash CS3

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”:

schema-bitmap

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.

Continua...

Paint-o-matic

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:

Loading Flash Player...

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.

Continua...

Painting Flash CS3: effetti con le matrici Matrix

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:

Continua...



Stop SOPA