Come creare un effetto “pila” o “occhio di bue”? o pi√π banalmente, come creare una maschera sfumata con flash8 o superiori?

1. crea un movieclip da mascherare
2. crea un altro movieclip contenente una forma con riempimento a gradiente nel quale almeno un colore abbia alpha minore di 100
3. posiziona nello stage (fisicamente o via actionscript) i due clip: il mascherato e la maschera
4. via actionscript imposta a true la propriet√† “cacheAsBitmap” di ciascun movieclip
5. sempre via actionscript imposta la maschera del movieclip da mascherare (setMask in AS2 o mask in AS3)

ecco il risultato:

questo il fla dell’esempio (CS3) Download Source

Riporto il topic su wave9.it, leggetelo qui o andate direttamente alla fonte

Apro questo thread perch√® √® forte lo slancio che da un p√≤ di tempo a questa parte ha trascinato l’attenzione di molti “flasher” su AS3, e diverse sono le opinioni a riguardo tra gli addetti ai lavori e non solo.

Actionscript 3 ha portato insieme gioie e perplessità,
ha sicuramente accentuato le differenze tra le figure “flash coder” e “flash designer” marcando pi√π strettamente il territorio di confine.
Forse ha incrinato la figura del “flasher” come “colui che sviluppa in flash” e ha attirato (soprattutto con la sempre maggiore diffusione di flex) una valanga di coders a cimentarsi con actionscript.

C’√® chi pensa che AS3 abbia solo complicato le cose, o meglio turbato l’equilibrio che si era andato a creare con l’avvento di flash mx,
che con AS3 serva scrivere molto pi√π codice per fare le stesse cose che si facevano in AS2, e quindi non serva a nulla,
che AS3 e la AVM2 (la virtual machine di flash player 8.5+) sia solo una strategia di marketing per stravolgere il mercato e vendere flash 9 (ehm…cs3) e flex builder ad una fetta pi√π ampia di coders….

C’√® anche chi pensa che AS3 sia il “futuro” ( anche se non ancora ben rodato),
che AS3 sia effettivamente pi√π valido di AS2, che la virtual machine sia nettamente pi√π performante della precedente…e via cos√¨…

…e intanto hanno presentato al MAX il flash player 10…

E voi cosa ne pensate?

Se la domanda che vi assilla è:
“Come si fa ad adattare un swf alle dimensioni della finestra del browser in modo che il risultato sia compatibile con i maggiori browser?” continuate pure a leggere

Partiamo dalle basi:

Dentro Flash:

Il flash player fornisce ad Actionscript una serie di API destinate all’interazione con lo stage del nostro swf fin dai tempi di flash mx.
Utilizzare questi appigli per determinare le dimensioni del nostro swf in esecuzione è piuttosto semplice e richiede davvero poche righe di codice:

Actionscript 2:

Stage.scaleMode = "noScale";
Stage.align = "TL";
var myListener:Object = new Object();
myListener.onResize = onScreenResize;
Stage.addListener(myListener);
 
function onScreenResize():Void
{
	trace(Stage.width);
	trace(Stage.height);
}

Actionscript 3:

import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.*;
 
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
//assegno la funzione al gestore evento
stage.addEventListener(Event.RESIZE,onScreenResize);
//funzione per gestire il resize
//(e=null di default per evitare errori a runtime)
function onScreenResize(e:Event=null):void
{
	trace(stage.stageWidth);
	trace(stage.stageHeight);
}

La logica come potete vedere è la medesima:

• si blocca il ridimensionamento automatico dello stage (ossia lo “zoom” indesiderato)
• si allinea lo stage in una delle 9 posizioni possibili (da top-left a bottom-right)
• si va a gestire l’evento onResize dell’oggetto Stage in una funzione che esegue del codice a nostro uso e consumo

Cambia un pochino la sintassi, ma è solo questione di abitudine
Nel codice HTML e nel foglio di stile CSS:

ora possiamo passare alla parte xhtml e css, ossia quella parte che effettivamente va a gestire le dimensioni del player all’interno del browser.

Gli elementi della ricetta sono i seguenti:

• un div
• le direttive di stile per gli elementi del DOM “html”, “body” e “#nomediv”
• SWFObject a piacere per scrivere il nostro swf in #nomediv

Il nostro CSS apparirà simile a questo:

html {
	height: 100%;
	overflow: hidden;
}
#flashdiv {
	height: 100%;
}
body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
}

Conclusione e Sorgenti

Questo è solo uno dei vari modi in cui si può ottenere un swf grande quanto la finestra del browser e compatibile con la maggior parte dei browser in circolazione.

Ad ogni modo, nel file zip ci sono i vari casi elencati in questo mini “tutorial”,

stay tuned

La risposta è:
esiste un hack a riguardo fin dai tempi di flash mx.

Funziona così:
si maschera un movieclip direttamente da timeline, gli si assegna un nome istanza (ad esempio “myClip”).
Una volta mascherato si può procedere con la parte di script.

myClip.attachMovie("movieclipinlibreria","nome",myClip.getDepth()-1);

così facendo il nuovo clip inserito nello stage sarà mascherato esattamente come myClip.

Quanto vale per attachMovie vale anche per createEmptyMovieClip, baster√† mantenere il livello “myClip.getDepth()-1″ per rientrare nel caso.

Ma, se volessi mascherare direttamente il mio clip via actionscript senza doverlo mascherare da timeline?
Qui casca l’asino.
Con questo “hack” non si elude il metodo setmask della classe MovieClip, √® solo un modo per raggirarlo facendo leva sui livelli.
Un modo per ovviare al problema però esiste.
Nessuno ha detto che myClip debba essere visibile o non vuoto.
Creando in libreria un movieclip “mc_mascherato” nel quale posiziono una maschera e un “myClip” vuoto si potrebbe replicare la situazione all’infinito utilizzando come timeline di riferimento proprio quella di mc_mascherato anzich√® quella principale.
Le applicazioni di questo “hack” per il multi masking sono davvero tante, dalla image gallery all’intro animata, ad una semplice transizione.

Quasi dimenticavo, qui potete scaricarvi un esempio base.qui potete scaricarvi un esempio base

var myInstance:MyClass = new MyClass();
myInstance.myVar = 1;

la propriet√† “myVar” dell’istanza di classe myInstance assume il valore 1.

Ma forse non è così immediato capire cosa può nascondere la stessa riga di codice.

public var
E’ possibile che nell’ipotetica classe MyClass di cui myInstance √® un’istanza nella mia timeline ci sia effettivamente una variabile pubblica di nome “myVar”, di tipo Number (AS2\AS3) o int\uint (AS3) come mostrato dal codice qui sotto

class MyClass{
public var myVar:Number;
}

In questa situazione la variabile myVar √® accessibile, veloce ma accessibile…forse troppo accessibile.
Poniamo il caso che si verifichi la situazione per cui erroneamente venisse associato a myVar un valore di tipo errato…

var myInstance:MyClass = new MyClass();
 
myInstance.myVar = "ciao";

..si genererebbe un errore grossolano…
Ecco uno dei motivi principali per cui esistono i cosiddetti “getters” o “setters”.

getters setters
Sicuramente alla maggior parte di chi sta leggendo questo articolo su FlashFuck sarà capitato di incappare su del codice simile a questo

//Void AS2 | void AS3
private var _myVar:Number;
public function set myVar (n:Number):void{
_myVar = n;
}
public function get myVar ():Number{
return _myVar ;
}

Questo tipo di approccio permette di gestire con le due funzioni get e set il recupero e l’assegnazione di dati alla variabile privata _myVar.

In termini di utilizzo non cambia nulla, si potrà continuare ad usare la notazione

var myInstance:MyClass = new MyClass();
myInstance.myVar = 1;

per assegnare il valore alla variabile.. (solo che in questo caso il valore viene assegnato alla variabile privata _myVar, mentre myVar è solo il nome del getter\setter)

In termini di controllo del codice l’utilizzo di get e set √® notevolmente migliore rispetto all’utilizzo di una variabile pubblica,
tuttavia in termini di prestazioni una variabile pubblica √® notevolmente pi√π veloce di una funzione (non dimentichiamo che get e set sono appunto delle funzioni, quindi richiedono l’allocazione di pi√π memoria).

Quindi, quando usare get e set al posto di una variabile pubblica?
La risposta √® presto detta anche se piuttosto banale: quando se ne richiede l’uso.

• se √® possibile che il codice generi degli errori dovuti all’assegnazione di valori ambigui ad una variabile…
• se √® necessario che all’assegnazione del valore venga eseguita qualche altra funzione…
• se √® necessario eseguire il dispatch di un evento…

potrebbe rendersi preferibile l’uso dei getter\setter piuttosto che utilizzare variabili pubbliche…

Uno dei metodi utilizzati per il posizionamento di siti fortemente aggrappati alle tecnologie client √® creare delle “landing pages” che rimandino in qualche modo al sito flash \ ajax \ flex \ ecc.. ma il buon esito non √® certo assicurato, anzi.

Da come ho impostato l’inizio dell’articolo sembra quasi che voglia vendervi un rimedio miracoloso per il seo su siti “client”
invece no, tutto gratuito, ed oltre tutto open source! In Bulgaria c’√® un’aziendina, la “asual“, che si √® inventata l’ SWFAddress, ossia un sistema basato su javascript e fortemente legato a SWFObject che permette il deep linking con flash, ajax e le altre tecnologie lato client.

Come si usa e come è stato fatto
La logica √® quella dell’url rewriting e dei permalink, ma questi vengono creati runtime dagli script residenti sul client.

Le classi per Actionscript 2 e 3 di SWFAddress forniscono delle API al player per interagire con l’oggetto “asual” nella libreria javascript che si andr√† ad includere nella pagina.

Nel codice html della pagina baster√† includere SWFObject e SWFAddress (ricordarsi, prima uno e poi l’altro, altrimenti non funzia)

<script src="swfobject/swfobject.js" type="text/javascript"></script>
<script src="swfaddress/swfaddress.js" type="text/javascript"></script>

Nel codice actionscript bisognerà importare ed istanziare la classe SWFAddress e definire i pattern di navigazione desiderati.
In linea di massima ogni qual volta si “cambier√† sezione” del sito baster√† aggiungere alla funzione qualcosa tipo

SWFAddress.setValue('/nomesezione/');

e nella barra del browser cambier√† l’url.
Per quanto riguarda il processo inverso (ossia forzare una sezione del sito in flash partendo da un url digitato sulla barra del browser) invece √® necessario definire gli stessi pattern all’interno del metodo

SWFAddress.onChange

in modo che venga a crearsi una reciproca corrispondenza tra funzioni flash e url nel browser.

SWFAddress per flash √® basato su “ExternalInterface” disponibile dal flash player 8 (classe dedita all’interazione tra actionscript e javascript).
L’oggetto javascript asual dichiarato nella libreria di SWFAddress definisce varie funzioni che permettono di riscrivere secondo la sintassi desiderata l’url della pagina in permanenza partendo da un url dinamico, di decodificare un URL riscritto precedentemente e addirittura di inserire gli indirizzi codificati a runtime delle pagine nella history del browser.
Il tutto √® reso possibile dalla rivalutazione del token html “#”. Il cancelletto # indica le ancore all’interno di una pagina html, cliccando su un’ancora la pagina si “sposta” focalizzando sul punto visibile pi√π vicino all’ancora ma non viene ricaricata la pagina bench√® l’URL della pagina stessa venga riscritto.

IMHO
Il difetto maggiore di SWFAddress a mio avviso √® la mancanza di link effettivi. Questo “hack delle ancore” (passatemi il termine) non risolve il problema principale in materia SEO di piattaforme RIA come Flash: l’assoluta assenza di collegamenti. Sicuramente SWFAddress √® un passo da giganti per flash, il “novello” flex, e ajax, tanto che aziende affermate come 2advanced sfruttano questo tipo di hack per la navigazione del proprio sito, tuttavia ribadisco che la mancanza di link tra le pagine √® una forte limitazione in termini di ottimizzazione per i motori di ricerca.

come muovere un movieclip lungo una guida\percorso\path che dir si voglia direttamente da actionscript?

Dovendo affrontare il problema per fini lavorativi ho scandagliato la rete finchè ho trovato una proto su layer51 del prode senocular.
“Problema risolto” direte voi, naaa. Ho tradotto la proto in una classe, niente di ch√®, ma cos√¨ facendo √® (a mio avviso) pi√π utilizzabile.

Intanto scaricatevi la classe

Ok, come si usa?

importo la classe e creo un percorso con le funzioni che emulano le api

1

import it.utils.Path;

1

var myPath:Path = new Path(0,0);

1

//parto da x=0 e y=0

1
2
3
4
5
6
7

myPath.lineTo(100,0);//creo una linea retta
 
myPath.circleCWTo(100,100,0.5);
 
//creo una curva in senso orario (ClockWise).
 
//il terzo valore oscilla tra 0 e 1

1
2
3
4
5
6
7
8
9

//e stabilisce l'ampiezza della curva
 
myPath.lineTo(0,100);
 
myPath.circleCCWTo(0,0,0.5);
 
//torno al punto di partenza con una
 
//curva creata in senso antiorario

ok, adesso guardiamo il nostro percorso disegnandolo su un mc con la funzione draw

1

var percorso:MovieClip = this.createEmptyMovieClip("path_container",0);

1
2
3
4
5

percorso.lineStyle(0,0x000000,100);
 
//imposto la linea con la quale sarà disegnato il percorso
 
myPath.draw(percorso);

bello no?

ora da flash creiamo un nuovo simbolo movieclip, disegnamoci un pacman con la bocca verso l’alto, lo chiamer√≤ “pacman” user√≤ lo stesso nome per il concatenamento.

tornando allo script….
facciamo girare il pacman sul percorso disegnato precedentemente:

1

var pac:MovieClip = this.attachMovie("pacman","pacman",1);

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

var traverse_perc:Number=0;
 
pac.onEnterFrame = function(){
 
myPath.traverse(pac,traverse_perc%100/100, true);
 
/*
 
traverse è il metodo di Path
 
che permette di muoversi attraverso il path creato,
 
gli si passano 3 parametri: il mc che deve muoversi,
 
il punto di destinazione del mc (compreso tra 0 e 1,
 
dove 0 è l'inizio e 1 la fine), un valore booleano che
 
indica se orientare il clip alla direzione del percorso
 
o meno (in questo caso il nostro pacman seguirà la
 
direzione del path con la bocca)*/
 
traverse_perc++;
 
}

Presto pubblicher√≤ anche un fla con degli esempi pratici…stay tuned