Efeito DRAG

[techno 0]

Bom dia galera.

 

Estou desenvolvendo um projeto que faça o efeito "DRAG", como nesse site:clique aqui

 

Eu estou buscando as imagens de um xml, pois futuramente buscarei swf também. O xml ficou básico, "trabalhos.xml:

<?xml version="1.0"?>
<dataroot>
            <subitem name="imagem01.jpg" width="320" height="428"></subitem>
            <subitem name="imagem02.jpg" width="320" height="428"></subitem>
            <subitem name="imagem03.jpg" width="320" height="428"></subitem>
            <subitem name="imagem04.jpg" width="320" height="428"></subitem>
            <subitem name="imagem05.jpg" width="320" height="428"></subitem>   
            <subitem name="imagem06.jpg" width="320" height="428"></subitem>
</dataroot>

E o AS3 que desenvolvi (tudo dinâmico), ficou assim até o momento:

import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.events.MouseEvent;
import gs.*;
import gs.TweenMax;


var _odstep:Number = 10;
var container:MovieClip;
var lo:Loader;
var mc:MovieClip;
var xmlLoader:URLLoader;
var xmlList:XMLList;
var startX:Number = 0;
var xml:XML;
var startY:Number;

this.xmlLoader = new URLLoader();
this.xmlLoader.addEventListener(Event.COMPLETE, this.xmlLoaded);
this.xmlLoader.load(new URLRequest("trabalhos.xml"));
this.container = new MovieClip();
this.container.x = 0;
this.container.y = stage.stageHeight / 2 -110;
this.container.cacheAsBitmap = true;
addChild(this.container);

function xmlLoaded(param1:Event) : void{
   var loc_2:Number;
    var loc_3:Number;
    this.xml = new XML(this.xmlLoader.data);
    this.xmlList = this.xml.children();
    var loc_1:int;
    while (loc_1 < this.xmlList.length()){
       loc_2 = this.xmlList[loc_1].@width;
        loc_3 = this.xmlList[loc_1].@height;
        this.mc = new MovieClip();
        this.lo = new Loader();
        this.lo.load(new URLRequest(this.xmlList[loc_1].@name));
        addChild(this.mc);
        this.mc.addChild(this.lo);
        this.container.addChild(this.mc);
        this.mc.x = this.startX;
        this.startX = this.mc.x + loc_2 + this._odstep;
        this.startY = (stage.stageHeight / 2 - loc_3) / 2;
        this.mc.y = this.startY;
      this.mc.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
      this.mc.addEventListener(MouseEvent.MOUSE_UP, stopDragging);      
        this.mc.buttonMode = true;
        loc_1++;
   }
    return;
}


var offsetX:Number;
var offsetY:Number;
var posicaoInicial:Number;
var posicaoAtual:Number

function tween(){
   if(posicaoAtual > posicaoInicial){
      TweenMax.to(container, 1, {x:container.x + 150});
   }else if(posicaoAtual < posicaoInicial){
      TweenMax.to(container, 1, {x:container.x - 150});
   }
}

function startDragging(event:MouseEvent):void{
    offsetX = event.stageX - container.x;
   posicaoInicial = container.x;
   stage.addEventListener(MouseEvent.MOUSE_MOVE, dragContainer);
} 

function stopDragging(event:MouseEvent):void{
    posicaoAtual=container.x;
   stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragContainer);
   tween();
}

function dragContainer(event:MouseEvent):void{
    container.x = event.stageX - offsetX;
    event.updateAfterEvent();
}

Ta quase lá, certo?

Aqui eu ja consigo mover para os lados quando precionamos o mouse e ao soltar eu mando dar um TWEEN.

 

Agora não sei como fazer ele chegar até o fim, e fazer a animação de BATER E VOLTAR. Ah, e aqui quando eu arrasto uma pouco mais rápido, ele meio q desapare e aparece bem rapido, como uma piscada!

 

Se alguem poder dar um força, fico grato!

 

PS.: referente a mudar a forma do mouse (o ponteiro), isso eh suce!

[Galder 0]

Como você fez para mudar o ponteiro, para aquela mão pressionada ?

O flash faz isso ou tem que criar um custom cursor ?