Skip to main content
Known Participant
February 20, 2013
Question

Friction to motion from keyboard

  • February 20, 2013
  • 1 reply
  • 770 views

http://disneydigitalbooks.go.com/tron/

If you go to the site above, they allow using the keyboard to navigate between panes. But when it does that, it has some easing or fricition. My question is how does it do that? The friction works whether you use the mouse or keyboard. Can anyone help?

This topic has been closed for replies.

1 reply

Nabren
Inspiring
February 20, 2013

The easiest way to do easing is to start with full velocity if from a keyboard press and reduce the velocity by 10% each time.

velocity = velocity * 0.9;

There are more advanced formulas that will get you more fluid results but I have found that simple technique works for most cases.

Known Participant
February 21, 2013

Below is my code. Most of this was code I found online but modified to use more space. How would apply velocity to the keyboard actions in this code?

package{

   

import flash.display.Sprite;

import flash.events.*;

import flash.events.KeyboardEvent;

import flash.geom.Rectangle;

import util.MouseSpeed;

import flash.ui.Keyboard;

[SWF(width="800", height="600", frameRate="30", backgroundColor="#FFFFFF")]

public class ScrollByDrag extends Sprite

{

    var ms:MouseSpeed=new MouseSpeed();

    var xSpeed:Number=0;

    var ySpeed:Number=0;

    var friction:Number=0.96;

    var offsetX:Number=0;

    var offsetY:Number=0;

    var bounds:Rectangle;

    //clip we are going scroll by dragging

    var content:Sprite;

    /**

     * Constructor

     */

    public function ScrollByDrag()

    {

        addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);

    }

    /**

     * Display object has been added to the on stage display list

     * @param event

     */

     private function onAddedToStage(event:Event):void

    {

        init();

    }

    /**

     * Create stage assets to scroll and add to the display list.

     */

    private function init():void

    {

        //draw test content to scroll by dragging

        var circ:Sprite=new Sprite;

        circ.graphics.beginFill(0x000000);

        circ.graphics.drawRect(500,200,600,25);

        circ.graphics.endFill();

       

        content=new Sprite();

        addChild(content);

       

        content.graphics.beginFill(0xFFFFF3);

        content.graphics.drawRect(0, 144, stage.stageWidth, 112);

        content.graphics.endFill();

       

        content.addChild(circ);

        content.buttonMode=true;

        content.useHandCursor=false;

        circ.useHandCursor=false;

        //define the bounds of how far we can drag the content.

        bounds=new Rectangle(stage.stageWidth - content.width, content.y, content.width);

        //handlers

        content.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

        content.addEventListener(Event.ENTER_FRAME, throwcontent);

        stage.addEventListener(KeyboardEvent.KEY_DOWN, throwcontentKey);

    }

    /**

     * Mouse button is pressed

     * @param e

     */

    private function mouseDownHandler(e:Event):void

    {

            stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

            offsetX=mouseX - content.x;

            startScroll();

    }

    /**

     * Mouse button is released

     * @param e

     */

    private function mouseUpHandler(e:MouseEvent):void

    {

        stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

        xSpeed=ms.getXSpeed();

        stopScroll();

    }

    /**

     * Drag the content

     */

    private function startScroll():void

    {

        content.startDrag(false, bounds);

    }

    /**

     * Stop dragging the content

     */

    private function stopScroll():void

    {

        content.stopDrag();

    }

    /**

     * Apply inertia when we stop dragging the content

     * @param e

     */

  private function throwcontent(e:Event):void

    {

          // move content and apply friction

        content.x+=xSpeed;

        content.y+=ySpeed;

        xSpeed*=friction;

        ySpeed*=friction;

        if (content.x > 0)

        {

            content.x=0

        }

        if ((content.x + content.width) < stage.stageWidth)

        {

            content.x=stage.stageWidth - content.width;

        }

    }

   

    private function throwcontentKey(e:KeyboardEvent):void

    {

        // move content and apply friction

            if (e.keyCode==Keyboard.LEFT)

            {

                content.x-=50;

   

                if (content.x > 0)

                {

                    content.x=0;

                }

       

                if ((content.x + content.width) <= stage.stageWidth)

                {

                    content.x=stage.stageWidth - content.width;

                }

            }

           

           

            if (e.keyCode==Keyboard.RIGHT)

            {

                content.x+=50;

               

                if (content.x > 0)

                {

                    content.x=0;

                }

       

                if ((content.x + content.width) <= stage.stageWidth)

                {

                    content.x=stage.stageWidth - content.width;

                }

            }

           

    }

}

}

Inspiring
February 21, 2013

You want to get rid completley of these two funtions:

    /**

     * Drag the content

     */

    private function startScroll():void

    {

        content.startDrag(false, bounds);

    }

    /**

     * Stop dragging the content

     */

    private function stopScroll():void

    {

        content.stopDrag();

    }

as they interfere with your mouse DOwn/mouse up events.

The native start/stop Drag is useless if you have to want smooth dragging, because its in principal nothing else than a merged MouseEvent.MOUSE_DOWN, MouseEvent.MOUSE_MOVE, MouseEvent.MOUSE_UP black box,

that gives you no real access to tweak the mouse move.

This solution is pretty much forward without the use of Tweens/Timers and performs well (even with alpha blends and masks)