Salve a Tutti Ragazzi,
In Anzitutto mi Presento:
Mi Chiamo Stefano, ho 18 anni è sono un Programmatore.
Ora Premetto che devo Ringraziare molto FlepStudio e quindi Flep(Filippo) per le guide, che mi hanno Facilitato il Compito nel Passaggio da AS2 ad AS3...
Passiamo ora al Motivo del Thread:
Creare uno Scroller di MovieClip, Disegnato Completamente da noi, e senza usare Componenti!
Allora,
Apriamo Flash e creiamo un file .fla che chiamiamo scroller,
inseriamo all'interno dello stage un nuovo MovieClip, con nome di Istanza "
mcScroller".
Poniamoci All'interno di mcScroller, e creiamo 5 Livelli:
bottoni,
scrollFace, [/b]scrollTrack[/b], un livello maschera chiamato "
maschera" ed il suo mascherato chiamato "[/b]contenuto[/b]".
Ora, nel Livello Bottoni disegnamo i due bottoni per scrollare su e giu, li trasformiamo in Movieclip con allineamento in alto a sinistra, e gli diamo il nome di istanza
btnUp per il pulsante che scrolla in su, e
btnDown per quello che scrolla in giu!
Nel Livello scrollTrack disegnamo la traccia sulla quale scorrerà la nostra scrollFace(la parte trascinabile della scroll), che naturalmente sta tra un pulsante e l'altro.
Trasformiamo in MovieClip con allineamento in alto a sinistra e diamo il nome di istanza:
scrollTrack
Nel Livello scrollFace disegnamo la parte trascinabile della scroll, trasformiamo in MovieClip con allineamento in alto a sinistra, e diamo il nome d'istanza:
scrollFace
Posizioniamolo in alto alla scrollTrack(la posizione di partenza della scroll!)
Nel Livello Maschera, disegniamo una maschera che sarà la parte che sarà mostrata della scroll!
Trasformiamo in MovieClip con allineamento in alto a sinistra e diamo il nome d'istanza:
ciste
Infine, nel Livello contenuto, creiamo un movieClip con nome di Istanza: [b]contentMain[b/]
ed inseriamo il Contenuto a partire dal centro del MovieClip verso il basso (in modo che l'allineamento del MC finale sia in alto!)
Quando avremo finito, posizioniamo il MovieClip contentMain, esattamente sotto la maschera...
Dopo aver Disegnato creiamo la Nostra Classe:
Creiamo un File Scroller.as e assegniamolo come Document Class dal file: scroller.fla
Scriviamo il Codice della Classe:
Code:
package
{
import flash.display.MovieClip;
import fl.transitions.Tween;
import fl.transitions.easing.Strong;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
public class Scroller extends MovieClip
{
private var scrollHeight:Number;
private var contentHeight:Number;
private var scrollFaceHeight:Number;
private var maskHeight:Number;
private var initPosition:Number;
private var initContentPos:Number;
private var finalContentPos:Number;
private var left:int;
private var top:int;
private var right:int;
private var bottom:int;
private var dy:Number = 0;
private var speed:Number = 10;
private var speedScroll:Number = 2;
private var moveVal:Number;
private var controllo:Tween;
private var area:Rectangle;
public function Scroller()
{
stage.frameRate = 31;
mcScroller.scrollTrack.buttonMode = true;
mcScroller.scrollFace.buttonMode = true;
mcScroller.btnUp.buttonMode = true;
mcScroller.btnDown.buttonMode = true;
scrollHeight = mcScroller.scrollTrack.height;
contentHeight = mcScroller.contentMain.height;
scrollFaceHeight = mcScroller.scrollFace.height;
maskHeight = mcScroller.ciste.height;
initPosition = mcScroller.scrollFace.y = mcScroller.scrollTrack.y;
initContentPos = mcScroller.contentMain.y;
finalContentPos = maskHeight - contentHeight + initContentPos + 1;
left = mcScroller.scrollTrack.x;
top = mcScroller.scrollTrack.y;
right = mcScroller.scrollTrack.x;
bottom = mcScroller.scrollTrack.height - scrollFaceHeight + mcScroller.scrollTrack.y;
moveVal = (contentHeight - maskHeight) / (scrollHeight-scrollFaceHeight);
scrolling();
}
public function scrolling():void
{
mcScroller.scrollFace.addEventListener(MouseEvent.MOUSE_DOWN, sfPress);
mcScroller.scrollFace.addEventListener(MouseEvent.MOUSE_UP, sfUp);
mcScroller.scrollFace.addEventListener(MouseEvent.MOUSE_OUT, sfUp);
mcScroller.btnUp.addEventListener(MouseEvent.MOUSE_DOWN, bpPress);
mcScroller.btnUp.addEventListener(MouseEvent.MOUSE_UP, bpDo);
mcScroller.btnUp.addEventListener(MouseEvent.MOUSE_OUT, bpDo);
mcScroller.btnDown.addEventListener(MouseEvent.MOUSE_DOWN, bdPress);
mcScroller.btnDown.addEventListener(MouseEvent.MOUSE_UP, bdDo);
mcScroller.btnDown.addEventListener(MouseEvent.MOUSE_OUT, bdDo);
if(contentHeight<maskHeight)
{
mcScroller.scrollFace.visible = false;
mcScroller.bntUp.enabled = false;
mcScroller.btnDown.enabled = false;
}
else
{
mcScroller.scrollFace.visible = true;
mcScroller.btnUp.enabled = true;
mcScroller.btnDown.enabled = true;
}
mcScroller.scrollTrack.addEventListener(MouseEvent.MOUSE_DOWN, stPress);
mcScroller.scrollTrack.addEventListener(MouseEvent.MOUSE_OUT, stDo);
mcScroller.scrollTrack.addEventListener(MouseEvent.MOUSE_UP, stDo);
mcScroller.addEventListener(MouseEvent.MOUSE_WHEEL, wheel);
}
private function wheel(e:MouseEvent):void
{
if(e.delta < 0)
{
if(mcScroller.scrollFace.y < bottom-1)
{
mcScroller.scrollFace.y -= (e.delta * speedScroll);
easeScroll();
}
else
{
mcScroller.scrollFace.y = bottom;
easeScroll();
}
}
else
{
if(mcScroller.scrollFace.y > top + 1)
{
mcScroller.scrollFace.y -= (e.delta * speedScroll);
easeScroll();
}
else
{
mcScroller.scrollFace.y = top;
easeScroll();
}
}
}
private function stDo(e:MouseEvent):void
{
e.target.removeEventListener(Event.ENTER_FRAME, stEf);
}
private function stPress(e:MouseEvent):void
{
var clickY:Number = mouseY-mcScroller.scrollTrack.height;
var spB:Number = bottom-mcScroller.scrollFace.height+(mcScroller.btnDown.height*2);
var spT:Number = top+mcScroller.scrollFace.height-(mcScroller.btnUp.height*2);
if(clickY > spT && clickY < spB)
{
mcScroller.scrollFace.y = clickY;
}
else if(clickY > spB)
{
mcScroller.scrollFace.y = bottom;
}
else if(clickY < spT)
{
mcScroller.scrollFace.y = top;
}
e.target.addEventListener(Event.ENTER_FRAME, stEf);
}
private function stEf(e:Event):void
{
easeScroll();
}
private function bdDo(e:MouseEvent)
{
e.target.removeEventListener(Event.ENTER_FRAME, bdEf);
}
private function bdPress(e:MouseEvent):void
{
e.target.addEventListener(Event.ENTER_FRAME, bdEf);
}
private function bdEf(e:Event):void
{
if(mcScroller.contentMain.y-speed>finalContentPos)
{
if(mcScroller.scrollFace.y>=bottom)
{
mcScroller.scrollFace.y = bottom;
}
else
{
mcScroller.scrollFace.y += speed/moveVal;
}
easeScroll();
}
else
{
mcScroller.scrollFace.y = bottom;
e.target.removeEventListener(Event.ENTER_FRAME, bdEf);
}
}
private function bpDo(e:MouseEvent):void
{
e.target.removeEventListener(Event.ENTER_FRAME, bpEf);
}
private function bpPress(e:MouseEvent):void
{
e.target.addEventListener(Event.ENTER_FRAME, bpEf);
}
private function bpEf(e:Event):void
{
if(mcScroller.contentMain.y+speed<mcScroller.ciste.y)
{
if(mcScroller.scrollFace.y<=top)
{
mcScroller.scrollFace.y = top;
}
else
{
mcScroller.scrollFace.y -= speed/moveVal;
}
easeScroll();
}
else
{
mcScroller.scrollFace.y = top;
e.target.removeEventListener(Event.ENTER_FRAME, bpEf);
}
}
private function sfUp(e:MouseEvent):void
{
e.target.stopDrag();
e.target.removeEventListener(MouseEvent.MOUSE_MOVE, sfMove);
}
private function sfPress(evt:MouseEvent):void
{
var larg:Number = 0;
var alt:Number = mcScroller.scrollTrack.height - mcScroller.scrollFace.height;
area = new Rectangle(left,top,larg,alt);
var currPos:Number = this.y;
evt.target.startDrag(false,area);
evt.target.addEventListener(MouseEvent.MOUSE_MOVE, sfMove);
}
private function sfMove(e:MouseEvent):void
{
easeScroll();
}
private function easeScroll():void
{
dy = Math.abs(initPosition - mcScroller.scrollFace.y);
controllo = new Tween(mcScroller.contentMain,"y", Strong.easeOut,mcScroller.contentMain.y, Math.round(dy*-1*moveVal+initContentPos),30, false);
}
}
}
Ed Ecco il Risultato:
ImageShack - Hosting :: scrollerjp4.swf
La Scroll può essere mossa tramite: i pulsanti, il drag della scrollFace, il click sulla scrollTrack, lo scroll del mouse.
La velocità di scroll del mouse, può essere cambiata modificanto la variabile:
speedScroll
La velocità di scroll con i pulsanti, tramite la variabile
speed
In Allegato i Sorgenti da Scaricare compreso .fla, .as, .swf:
@Flep: Sono Accettati Commenti, Critiche, Bestemmie, e quant'altro!
07-10-07, 12:25
Scroller di MovieClip senza Componenti
Linear Mode
