Componente Slider di Flash CS3

[Flep]

Il componente Slider di Flash CS3 lo trovo davvero utile.
Quanti di voi si erano chiesti: ma per creare una scrollBar personalizzabile a mio gusto, devo per forza poi applicare tutta la matematica che ho visto applicare nell' articolo Le proporzioni matematiche
La risposta è: con Flash CS3 no !
La nuova versione di Adobe mette a disposizione il componente Slider che si può dire implementa di suo tutti quei calcoli.
Come ? Specialmente con le sue 3 proprietà: .minimum, .maximum e .value .
Ho preparato un esempio perchè come al solito non mi piace fare troppe chiacchere ma vorrei passare le mie esperienze con Flash a tutti voi con esempi concreti.

Eccolo...

Creo un FLA che salvo con nome ' slider.fla ', al cui interno:
- una MovieClip a cui assegno nome istanza ' circle_mc '
- una MovieClip a cui assegno nome istanza ball_mc
- due istanze del componente Slider a cui assegno i rispettivi nomi ' slider_0_mc ' e ' slider_1_mc '

Creo la Document Class, un file AS che salvo con nome ' Proporzioni.as ', implementata in questo modo:

package
{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import fl.controls.SliderDirection;
	import flash.events.Event;
	
	public class Proporzioni extends MovieClip
	{
		private var clip:MovieClip;
		
		public function Proporzioni()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			slider_0_mc.width=300;
			slider_0_mc.move(stage.stageWidth/2-slider_0_mc.width/2,stage.stageHeight-30);
			slider_0_mc.minimum=1;
			slider_0_mc.maximum=200;
			slider_0_mc.value=slider_0_mc.maximum;
			
			slider_1_mc.width=300;
			slider_1_mc.direction=SliderDirection.VERTICAL;
			slider_1_mc.move(stage.stageWidth-30,stage.stageHeight/2-slider_1_mc.width/2);
			slider_1_mc.minimum=1;
			slider_1_mc.maximum=200;
			slider_1_mc.value=slider_1_mc.maximum;
			
			createClips();
			initListeners();
		}
		
		private function createClips():void
		{
			clip=new MovieClip();
			addChild(clip);
		}
		
		private function initListeners():void
		{
			clip.graphics.moveTo(stage.stageWidth/2,stage.stageHeight/2);
			clip.addEventListener(Event.ENTER_FRAME,proporzioni);
		}
		
		private function proporzioni(e:Event):void
		{
			e.target.graphics.clear();
			clip.graphics.lineStyle(2,0x333333,1);
			e.target.graphics.drawEllipse
			(stage.stageWidth/2-slider_0_mc.value/2,
			stage.stageHeight/2-slider_1_mc.value/2,
			slider_0_mc.value,slider_1_mc.value);
			
			var rapporto:Number=360/slider_0_mc.maximum;
			var proporzione:Number=rapporto*slider_0_mc.value;
			circle_mc.rotation=proporzione;
			
			var rapporto2:Number=stage.stageWidth/slider_0_mc.maximum;
			var proporzione2:Number=rapporto2*slider_0_mc.value;
			var arrX:Number=stage.stageWidth-proporzione2;
			var dx:Number=arrX-ball_mc.x;
			var ax:Number=dx*.1;
			ball_mc.x+=ax;
		}
	}
}

Ecco il risultato:

Analizziamo il codice.

Proprietà:
una istanza della classe MovieClip che utilizzerò per disegnare l' ellisse.
private var clip:MovieClip;



Metodi:
init();
imposto la velocità del frame rate
stage.frameRate=31;
imposto una larghezza ad una una delle due Slider
slider_0_mc.width=300;
posiziono la Slider
slider_0_mc.move(stage.stageWidth/2-slider_0_mc.width/2,stage.stageHeight-30);
imposto un valore minimo ed uno massimo della Slider
slider_0_mc.minimum=1;
slider_0_mc.maximum=200;
assegno un valore alla Slider ( il trascinatore andrà a posizionarsi sul valore che imposto )
slider_0_mc.value=slider_0_mc.maximum;
stessa cosa con la seconda Slider, ma dico alla Slider di posizionarsi verticalmente utilizzando la classe SliderDirection e la sua proprietà statica VERTICAL
slider_1_mc.width=300;
slider_1_mc.direction=SliderDirection.VERTICAL;
slider_1_mc.move(stage.stageWidth-30,stage.stageHeight/2-slider_1_mc.width/2);
slider_1_mc.minimum=1;
slider_1_mc.maximum=200;
slider_1_mc.value=slider_1_mc.maximum;

chiamo i metodi createClips() e iniListener()
createClips();
initListeners();


createClips();
assegno alla proprietà clip lo stato di nuova MovieClip ( creo una nuova MovieClip )
clip=new MovieClip();
aggiungo clip al DisplayObject o non sarebbe visibile
addChild(clip);



initListeners();
sposto le grafiche della clip al centro dello stage
clip.graphics.moveTo(stage.stageWidth/2,stage.stageHeight/2);
creo un intervallo ENTER_FRAME che chiama il metodo proporzioni()
clip.addEventListener(Event.ENTER_FRAME,proporzion i);



Proporzioni();
nella prima parte di questo metodo agisco sulla ' clip ' appena creata
inizializzo le sue grafiche
e.target.graphics.clear();
clip.graphics.lineStyle(2,0x333333,1);
tramite il metodo drawEllipse, che vuole 4 parametri x, y, width, height. Come X passo il centro della larghezza dello stage meno il valore della Slider orizzontale ( questo perchè il disegno in questo modo mi rimane sempre al centro ), come Y passo il centro dell' altezza dello stage meno il valore della Slider verticale, come width passo il valore della Slider orizzontale, come Height passo il valore della Slider verticale.
e.target.graphics.drawEllipse(stage.stageWidth/2-slider_0_mc.value/2,stage.stageHeight/2-slider_1_mc.value/2,slider_0_mc.value,slider_1_mc.value);

in questa parte agisco su ' circle_mc ' che è sullo stage
creo una variabile in cui costantemente inserisco il valore di rapporto tra 360 ( i gradi massimi di rotazione di una MovieClip ) ed il valore massimo della Slider orizzontale
var rapporto:Number=360/slider_0_mc.maximum;
creo una variabile cui assegno il valore della variabile rapporto moltiplicato per il valore attuale delle Slider orizzontale
var proporzione:Number=rapporto*slider_0_mc.value;
assegno alla proprietà .rotation di circle_mc il valore della variabile proporzione
circle_mc.rotation=proporzione;

in questa ultima parte agisco su ' ball_mc ' che è sullo stage
creo una variabile in cui costantemente inserisco il valore di rapporto tra la larghezza dello stage ed il valore massimo della Slider orizzontale
var rapporto2:Number=stage.stageWidth/slider_0_mc.maximum;
creo una variabile cui assegno il valore della variabile rapporto2 moltiplicato per il valore attuale delle Slider orizzontale
var proporzione2:Number=rapporto2*slider_0_mc.value;
quì applico l' effetto Inerzia ( vedi articolo: Inerzia con Flash CS3 ) e come punto di arrivo imposto un valore della larghezza dello stage meno proporzione2 ( in modo che la pallina vada dalla parte opposta rispetto al senso della Slider orizzontale )
var arrX:Number=stage.stageWidth-proporzione2;
var dx:Number=arrX-ball_mc.x;
var ax:Number=dx*.1;
ball_mc.x+=ax;

Scarica i files sorgente dalla sezione downloads di questo sito.

Stay tuned !