Flash CS3 - Flash CS4

Free tutorials and scripts for all.
Actionscript 3.0

Componente Slider di Flash CS3

This is a discussion on Componente Slider di Flash CS3 within the Articoli e tutorials forums, part of the Flash CS3 e Actionscript 3.0 category; Il componente Slider di Flash CS3 lo trovo davvero utile. Quanti di voi si erano chiesti: ma per creare una ...


Go Back   Forum Flash CS3 Flash CS4 > Flash CS3 e Actionscript 3.0 > Articoli e tutorials

Register Blogs FAQ Members List Calendar Search Today's Posts Mark Forums Read
  #1 (permalink)  
Old 20-09-07, 12:01
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,354
Blog Entries: 1
Rep Power: 6
Flep is on a distinguished road
Componente Slider di Flash CS3

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:
Code:
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 !

__________________

 


I recommend: Essential Actionscript 3.0

- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !
- I do not reply technicians pvt messages. Open a thread !
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Reply

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is On
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads

Thread Thread Starter Forum Replies Last Post
The Slider component of Flash CS3 Flep Tutorials 14 07-07-08 22:41
JellyMenu - componente per Flash CS3 Flep Componenti di FlepStudio 4 25-04-08 13:54
NumericStepper - componente di Flash CS3 Flep Articoli e tutorials 0 29-10-07 05:43
RadioButton - componente di Flash CS3 Flep Articoli e tutorials 0 21-09-07 09:40
Componente ProgressBar di Flash CS3 Flep Articoli e tutorials 0 20-09-07 13:42


All times are GMT. The time now is 07:08.


Powered by vBulletin versione 3.7.3
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC4
Forum SiteMap


FlepStudio
by Filippo Lughi
P.IVA 03605860406