GUI Concept #1 - Mouse-Directed Interface

by hemingway
subtle rotation of GUI elements to point towards the mouse; implying to the user a mouse-driven interface...

> element.yaw = ((element.x - mouse.x) / rotationMagnitude)
> element.pitch = ((mouse.y - element.y) / rotationMagnitude)

examples:
Crysis 3 (PC) - Main Menu GUI

EDIT:
added buffer between panels & canvas to provide each panel a centered pivot point, rather than a top-left one
♥10 | Line 151 | Modified 2013-03-28 00:27:29 | MIT License
play

ActionScript3 source code

/**
 * Copyright hemingway ( http://wonderfl.net/user/hemingway )
 * MIT License ( http://www.opensource.org/licenses/mit-license.php )
 * Downloaded from: http://wonderfl.net/c/gHBd
 */

package
{
    import flash.display.*;
    import flash.filters.*;
    import flash.events.*;
    import flash.utils.*;
    import flash.geom.*;

    public class Main extends Sprite
    {
        private var _output :Output;
        private var _panelBuffer :Sprite;
        private var _panel :Panel;

        protected var _rotDenom :int;
        protected var _prevMouse :Point;
        protected var _currMouse :Point;
        
        public function Main()
        {
            addEventListener(Event.ADDED_TO_STAGE, addedToStage);
        
            _output = new Output("GUI Concept #1\n----------------------\n\nMove your mouse across the canvas to observe\nthe panels subtly rotating in the direction of the mouse\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe solution for this can be applied to n-dimensional objects\nand implements as follows for two-dimensional objects:\n\n> element.yaw = ((element.x - mouse.x) / rotationMagnitude)\n> element.pitch = ((mouse.y - element.y) / rotationMagnitude)");
            
            _rotDenom = 16;
            _prevMouse = new Point();
            _currMouse = new Point();
        }
        
        public function addedToStage($e:*) :void
        {
            removeEventListener(Event.ADDED_TO_STAGE, addedToStage);    
            
            addChild(_output);
            
            for (var $x:int = 1; $x<=3; $x++)
            {
                for (var $y:int = 1; $y<=3; $y++)
                {
                    _panelBuffer = new Sprite();
                    _panelBuffer.x = ($x*93+46.5);
                    _panelBuffer.y = ($y*93+46.5);
                    _panel = new Panel(); 
                    _panel.x -= 46.5;
                    _panel.y -= 46.5;
                    
                    _panelBuffer.addChild(_panel);                    
                    addChild(_panelBuffer); 
                }
            }

            stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
        }
        
        public function onMouseMove($e:MouseEvent) :void
        {
            _currMouse = new Point($e.stageX, $e.stageY);

            if (_prevMouse != null)
            {
                for (var $:int = 1; $<numChildren; $++)
                {
                    var $panel :Object = getChildAt($);
                
                    $panel.rotationY = int(($panel.x-_currMouse.x)/_rotDenom);
                    $panel.rotationX = int((_currMouse.y-$panel.y)/_rotDenom);
                }
            }    
            
            _prevMouse = _currMouse;
        }
    }
}

import flash.display.*;
import flash.filters.*;
import flash.events.*;
import flash.utils.*;
import flash.geom.*;
import flash.text.*;

class Panel extends Sprite
{
    protected var _color :Number;
    
    public function Panel()
    {
        addEventListener(Event.ADDED_TO_STAGE, addedToStage);
        
        _color = 0xCCCCCC;
    }
    
    public function addedToStage($e:*) :void
    {
        removeEventListener(Event.ADDED_TO_STAGE, addedToStage);
        
        init();
        
        addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
        addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
        stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
        stage.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
    }
    
    public function init() :void
    {
        graphics.clear();
        graphics.beginFill(_color);
        graphics.drawRect(0, 0, 88, 88);
        graphics.endFill();
    }
    
    public function onMouseOver($e:MouseEvent) :void
    {
        (color != 0x999999) ? color = 0xBBBBBB : null;
    }
    
    public function onMouseDown($e:MouseEvent) :void
    {
        color = 0x999999;
    }
    
    public function onMouseOut($e:MouseEvent) :void
    {
        (color != 0x999999) ? color = 0xCCCCCC : null;  
    }
    
    public function onMouseUp($e:MouseEvent) :void
    {
        color = 0xCCCCCC;
    }
    
    public function get color() :Number
    {return _color}
    
    public function set color($:Number) :void
    {_color = $; init()}
}

class Output extends TextField
{
    private var textFormat :TextFormat;
        
    protected var _x :Number;
    protected var _y :Number;
    protected var _font :String;
    protected var _content :String;
        
    public function Output($content:String, $x:Number = 1, $y:Number = 0, $font:String = "Helvetica")
    {
        addEventListener(Event.ADDED_TO_STAGE, addedToStage);
            
        _x = $x;
        _y = $y;
        _font = $font;
        _content = $content;
            
        multiline = true;
        autoSize = "left";
        selectable = mouseEnabled = false;
        antiAliasType = AntiAliasType.ADVANCED;
    }
        
    public function _init() :void
    {
        x = _x;
        y = _y;
        text = _content;
            
        textFormat = new TextFormat(_font);
        setTextFormat(textFormat);
    }
        
    public function addedToStage($e:Event) :void
    {
        removeEventListener(Event.ADDED_TO_STAGE, addedToStage);
            
        _init(); 
    }
        
    public function get font() :String
    { return _font }
    public function get nWidth() :Number
    { return width }
        
    public function set font($:String) :void
    { _font = $; _init() }
    public function set content($:String) :void
    { _content = $; _init() }
}