as2 drag elastico fluido

[scmatteo]

salve a tutti, non ci salto più fuori,
non riesco a crare uno script che funzioni come il drag di questo sito:

http://journey-to-zero.com/#/RSW

entrate nella sezione gialla...
Vorrei trascinare uno sfondo sul mio stage avendo un effetto elastico al release del mouse...
ho abbozzato questo script ma trovo difficoltà nel punto di registrazione dopo il primo drag, in pratica

onClipEvent (enterFrame) {
    if (_root.attivo) {
        dify = _root._ymouse-_y;
        difx = _root._xmouse-_x;

        _x = _x+(difx/5);
        _y = _y+(dify/5);
    }
}
on (press) {
    _root.attivo = true;
}
on (release) {
    _root.attivo = false;
}
on (releaseOutside) {
    _root.attivo = false;
} 

se provate a fare un test, io trascino l'oggetto, poi rilascio il drag quindi l'oggetto si ferma, poi riprendo l'oggetto e lo ritrascino, ma a quel punto lo stesso mi si riposiziona esattamente dove il puntatore del mouse si trova in quel momento...
Essendo il mio clip molto grande, tipo 4500 pixel per 2500pixel, vorrei ottenere un effetto di navigazione a drag

Grazie a tutti

[and80]

Mmh, il movimento non è preciso quanto quello dell'esempio, ma ecco cosa ho ottenuto usando le caurina.

bg.onPress = function () {
    this.prevX = this._xmouse;
    this.prevY = this._ymouse;
    this.onEnterFrame = function () {
        caurina.transitions.Tweener.addTween(this, {_x:this._xmouse-this.prevX+this._x, _y:this._ymouse-this.prevY+this._y, time:0.5, transition:"easeoutcirc"});
    }
}
bg.onRelease = bg.onReleaseOutside = function () {
    this.onEnterFrame = undefined;
} 

Ovviamente bg è il nome di istanza del clip che si sposta.

[and80]

Voglio approfittare del thread per condividere una classe AS3 realizzata per gestire la situazione richiesta. Considerato anche che ormai molti cellulari leggono nativamente i filmati swf per flash player 10 potrebbe essere interessante utilizzare questo sistema nei propri siti (anche questo usa le caurina)

/**
 * @class     KineticDrag
 *  La classe KineticDrag è un elemento displayobject 
 *  che consente di gestire lo scorrimento verticale e
 *  orizzontale di elementi visuali più lunghi dello stage, associati 
 *  alla classe attraverso addChild o addChildAt
 *  con lo stesso sistema degli smartphone touchscreen tipo IPhone
 * ---------------------------------------------------------------
 * @file KineticDrag.as
 * @version 0.0.1 - Actionscript 3.0
 * @available Flash Player 9.0.0
 * @author Andrea Milillo
 * @date 24/03/2010
 * @site [url]http://www.v2online.it[/url]
 **/

/**
Licensed under the MIT License

Copyright (c) 2010 Andrea Milillo

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
 */

package {
    import caurina.transitions.Tweener;
    import flash.display.DisplayObject;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Rectangle;
    import flash.system.Capabilities;
    public class KineticDrag extends Sprite {
        protected var R:Rectangle;
        protected var C:Sprite;
        protected var X:Number;
        protected var Y:Number;
        public function KineticDrag (r:Rectangle = null):void {
            R = r;
            C = addChild(new Sprite()) as Sprite;
            addEventListener(Event.REMOVED_FROM_STAGE, upHandler);
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
        public function getChild ():Sprite { 
            return C;
        }
        protected function init (evt:Event = null):void {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
            scrollRect = R ? R : new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
        }
        protected function downHandler (evt:MouseEvent):void {
            X = getChild().mouseX;
            Y = getChild().mouseY;
            addEventListener(Event.ENTER_FRAME, enterFrameHandler);
            stage.addEventListener(MouseEvent.MOUSE_UP, upHandler);
        }
        protected function enterFrameHandler (evt:Event):void {
            if (getChild().width > scrollRect.width && getChild().height > scrollRect.height) Tweener.addTween(getChild(), { x:getChild().mouseX - X + getChild().x, y:getChild().mouseY - Y + getChild().y, time:0.5, transition:"easeoutcirc" } );
            else if (getChild().width > scrollRect.width && getChild().height <= scrollRect.height) Tweener.addTween(getChild(), { x:getChild().mouseX - X + getChild().x, time:0.5, transition:"easeoutcirc" } );
            else if (getChild().width <= scrollRect.width && getChild().height > scrollRect.height) Tweener.addTween(getChild(), { y:getChild().mouseY - Y + getChild().y, time:0.5, transition:"easeoutcirc" } );
        }
        protected function upHandler (evt:MouseEvent):void {
            removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
            stage.removeEventListener(MouseEvent.MOUSE_UP, upHandler);
            verifyLimit();
        }
        protected function verifyLimit ():void {
            if (getChild().height > scrollRect.height) {
                if (getChild().y < -getChild().height + scrollRect.height || getChild().y > 0) {
                    Tweener.removeTweens(getChild(), "y");
                    var goes:Number = (getChild().y < -getChild().height + scrollRect.height) ? -getChild().height + scrollRect.height : 0;
                    Tweener.addTween(getChild(), { y:goes, time:0.5, transition:"easeoutcirc"});
                }
            }
            if (getChild().width > scrollRect.width) {
                if (getChild().x < -getChild().width + scrollRect.width || getChild().x > 0) {
                    Tweener.removeTweens(getChild(), "x");
                    var goesX:Number = (getChild().x < -getChild().width + scrollRect.width) ? -getChild().width + scrollRect.width : 0;
                    Tweener.addTween(getChild(), { x:goesX, time:0.5, transition:"easeoutcirc"});
                }
            }
        }
        override public function addChild(child:DisplayObject):DisplayObject {
            return C.addChild(child);
        }
        override public function addChildAt(child:DisplayObject, index:int):DisplayObject {
            return C.addChildAt(child, index);
        }
        override public function contains(child:DisplayObject):Boolean {
            return C.contains(child);
        }
        override public function getChildAt(index:int):DisplayObject {
            return C.getChildAt(index);
        }
        override public function getChildByName(name:String):DisplayObject {
            return C.getChildByName(name);
        }
        override public function getChildIndex(child:DisplayObject):int {
            return C.getChildIndex(child);
        }
        override public function get numChildren():int {
            return C.numChildren;
        }
    }
}