This is a discussion on Mouse e proporzioni con Actionscript 3.0 within the Articoli e tutorials forums, part of the Flash CS3 e Actionscript 3.0 category; Ciao a tutti !
Torniamo a parlare un po di effettistica ( vogliamo chiamarla area di ricreazione? ).
Abbiamo visto in un articolo ...
Ciao a tutti !
Torniamo a parlare un po di effettistica ( vogliamo chiamarla area di ricreazione? ).
Abbiamo visto in un articolo come applicare lo spostamento del mouse ad un' animazione utilizzando inerzia e frizione.
Entriamo nel vivo...*
Creo un FLA che salvo con nome ' main.fla ' .
Al suo interno:
- 4 livelli, con nomi: ( dal più alto al più basso ) code, container1, gradient, container2
- 2 keyframe per livello
Livello code:
primo keyframe - ho un campo di testo dinamico con nome ' info_txt ' e uno stop();
secondo keyframe - ho uno stop(); ed una chiamata ad una funzione: lets_go();
Livello container1:
primo keyframe - vuoto
secondo keyframe - una MovieClip con nome istanza ' container_mc ' e al suo interno 20 MovieClip di qualsiasi forma
Livello gradient:
primo keyframe - vuoto
secondo keyframe - una MovieClip con nome istanza ' gradient_mc ' e al suo interno una forma rettangolare gradiente
Livello container2:
primo keyframe - vuoto
secondo keyframe un' altra istanza di container_mc ma con nome ' container2_mc ' ( quindi sempe con 20 movieClip al suo interno ).
Creo la Document Class, un file AS che salvo con nome ' Main.as ', implementata in questo modo:
Code:
package
{
import flash.display.MovieClip;
import flash.display.DisplayObjectContainer;
import flash.text.TextField;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.events.MouseEvent;
public class Main extends MovieClip
{
private var clips_array:Array;
private var clips_array2:Array;
public function Main()
{
init();
}
private function init():void
{
stage.frameRate=31;
this.addEventListener(Event.ENTER_FRAME,checkProgress);
}
private function checkProgress(_progress:Event):void
{
var bytes_loaded:Number=_progress.target.loaderInfo.bytesLoaded;
var bytes_total:Number=_progress.target.loaderInfo.bytesTotal;
var percent:Number=Math.round(bytes_loaded/bytes_total*100);
info_txt.text=percent.toString()+' %';
if(percent>=100)
{
this.removeEventListener(Event.ENTER_FRAME,checkProgress);
this.gotoAndPlay(2);
}
}
public function lets_go():void
{
initContainer();
initContainer2();
initGradient();
container_mc.addEventListener(Event.ENTER_FRAME,movement);
}
private function initContainer():void
{
clips_array=new Array();
for(var i:int=0;i < container_mc.numChildren;i++)
{
clips_array.push(container_mc.getChildAt(i));
clips_array[i].width=100;
clips_array[i].height=100;
clips_array[i].x=clips_array[i].width*i+20*i;
clips_array[i].y=stage.stageHeight/2;
clips_array[i].id=i;
clips_array[i].buttonMode=true;
clips_array[i].addEventListener(MouseEvent.CLICK,onClick);
}
}
private function initContainer2():void
{
clips_array2=new Array();
for(var j:int=0;j < container2_mc.numChildren;j++)
{
clips_array2.push(container2_mc.getChildAt(j));
clips_array2[j].width=100;
clips_array2[j].height=100;
clips_array2[j].x=clips_array2[j].width*j+20*j;
clips_array2[j].y=stage.stageHeight/2+clips_array2[0].height-10;
}
}
private function initGradient():void
{
gradient_mc.x=0;
gradient_mc.y=clips_array2[0].y-clips_array2[0].height/2;
container2_mc.alpha=.2;
}
private function movement(evt:Event):void
{
var rapporto:Number=evt.currentTarget.width/stage.stageWidth;
var arrX:Number=-mouseX*rapporto+stage.stageWidth/2;
var dx:Number=arrX-evt.currentTarget.x;
var ax:Number=dx*.1;
evt.currentTarget.x+=ax;
container2_mc.x+=ax;
}
private function onClick(evt:MouseEvent):void
{
trace(evt.currentTarget.id);
}
}
}
risultato:
Analizziamo il codice:
Proprietà
due arrays in cui inserirò le MovieClip che si trovano all' interno dei due contenitori
private var clips_array:Array;
private var clips_array2:Array;
Funzione costruttrice
chiamo il metodo init()
init();
Metodi
init();
imposto una velocità di frame rate
stage.frameRate=31;
aggiungo un listener in ascolto dell' evento ENTER_FRAME che chiamerà il metodo checkProgress tante volte al secondo pari al numero del frame rate. Sto creando un preloader, esattamente come in questo tutorial.
this.addEventListener(Event.ENTER_FRAME,checkProgr ess);
checkProgress();
calcolo la percentuale tra i bytes caricati e quelli totali
var bytes_loaded:Number=_progress.target.loaderInfo.by tesLoaded;
var bytes_total:Number=_progress.target.loaderInfo.byt esTotal;
var percent:Number=Math.round(bytes_loaded/bytes_total*100);
assegno il valore della percentuale al campo di testo che ho sullo stage: info_txt
info_txt.text=percent.toString()+' %';
if(percent>=100)
{
se la percentuale è maggiore o uguale a 100 fermo ENTER_FRAME
this.removeEventListener(Event.ENTER_FRAME,checkPr ogress);
sposto la timeline al secondo frame nel quale c'è una chiamata ad una funzione che si chiama lets_go() che è quì sulla Document Class
this.gotoAndPlay(2);
}
lets_go();
chiamo in sequenza i metodi initContainer, initContainer2 e initGradient
initContainer();
initContainer2();
initGradient();
aggiungo a container_mc un listener in ascolto dell' evento ENTER_FRAME che chiamerà il metodo movement
container_mc.addEventListener(Event.ENTER_FRAME,mo vement);
initContainer();
inizializzo ( preparo l' array a contenere ciò che gli dirò ) l' array clips_array
clips_array=new Array();
tramite un ciclo con iterazione massima il numero delle MovieClp contenute in container_mc ( che recupero tramite la sua proprietà numChidren ) inserisco tali MovieClip in clips_array
for(var i:int=0;i < container_mc.numChildren;i++)
{
clips_array.push(container_mc.getChildAt(i));
gli imposto una larghezza ed un' altezza ad ognuna
clips_array[i].width=100;
clips_array[i].height=100;
le posiziono orizzontalmente un in riga all' altra
clips_array[i].x=clips_array[i].width*i+20*i;
clips_array[i].y=stage.stageHeight/2;
gli assegno una proprietà in runtime con nome id ( questo perchè vedremo che poi recupero la corrpispettiva proprietà al click di ogni MovieClip e potrei recuperare altri valori da un Array come ad esempio assegnare un url ad ogni clip ( lascio a voi la scelta )
clips_array[i].id=i;
imposto buttonMode a true, in modo cha al rollover sulle MovieClip la manina del mouse sia visibile
clips_array[i].buttonMode=true;
assegno un listener in ascolto ad ogni MovieClip dell' evento CLICK della classe MouseEvent che chiamerà il metodo onClick quando la MovieClip verrà cliccata
clips_array[i].addEventListener(MouseEvent.CLICK,onClick);
}
initContainer2();
stessa identica cosa del metodo initContainer che abbiamo appena visto, solo che la logica viene applicata a container2_mc e le sue MovieClip inserite in clips_array2
clips_array2=new Array();
initGradient();
posiziono la MovieClip gradiente ' gradient_mc ' in modo da ottenere un effetto specchio
gradient_mc.x=0;
gradient_mc.y=clips_array2[0].y-clips_array2[0].height/2;
container2_mc.alpha=.2;
movement();
calcolo un rapporto che è il risultato della divisione tra il width di container_mc e la larghezza dello stage
var rapporto:Number=evt.currentTarget.width/stage.stageWidth;
applico l' effetto inerzia tenendo come punto di arrivo la posizione X del mouse moltiplicata per il rapporto pù la metà della larghezza dello stage
var arrX:Number=-mouseX*rapporto+stage.stageWidth/2;
var dx:Number=arrX-evt.currentTarget.x;
var ax:Number=dx*.1;
evt.currentTarget.x+=ax;
aggiungo il valore risultante anche a container2_mc
container2_mc.x+=ax;
onClick();
recupero la proprietà id della MovieClip che è stata cliccata
trace(evt.currentTarget.id);
Allego i files sorgente:
Molto interessante,sono alle prime armi ma ho capito.
e' un po' che seguo i tuoi tutorial e gli spunti sul blog/sito.
Complimenti.
Mi piace il tuo approccio didattico.
Mi chiedevo essendo testardo due cose.
Mi piace questo slideshow e valorizza (almeno potrebbe) molto i lavori.
Mi occupo di graphic design e per quanto concerne il web utilizzo xhtml/css spesso e senza problemi.
Ora desideravo sviluppare un po' flash poche sicuramente ha ottime potenzialità.
Detto questo mi piacerebbe moltissimo che questo script facesse due cose per me fondamentali:
1. il rollover avvenisse al click.
2. le immagini al 100%.
Questo sito mi ha ispirato e vorrei lavorare in questa direzione:
21-09-07, 16:31
Linear Mode
