com.gestureworks.cml.element.Panoramic

Package	com.gestureworks.cml.element
Class	public class Panoramic
Inheritance	Panoramic Container ContainerFactory ElementFactory flash.display.Sprite

The Panoramic element provides a touch-enabled, 3-Dimensional panorama using the Away3D 4 library.

The Panoramic element has two projection types: sphere, or cube, which may be set using the projectionType attribute/property.

For a sphere projectionType, a single, spherical panoramic image needs to be provided in an Image element. The maximum size of the panorama's longest edge can be no greater than 2048, and this may be set in the CML or Actionscript rather than resizing the actual image file itself. If using CML, this Image element tag should be added between the open and close tags of the Panoramic element to make it a child of the Panoramic; in AS3 the Image should be added to the Panoramic element object as a child, and the object should be initialized after the image's Event.Complete is called.

For a cube projectionType, six cubic panorama images need to be provided in CML or AS3 in the same way as the sphere. In AS3 each image should have its Event.Complete called and added to the Panoramic element's display list before the init() method is called. Cubic faces must be sized in powers of 2. The maximum size for cubic faces is 2,048 pixels wide, and 2,048 tall. Cubic faces should be perfectly square.

The Panoramic element will actually consist of two objects, the Away3D projection/view, and a TouchContainer which holds the projection and provides the enabled touch interaction.

     
        var pano = new Panoramic();
        pano.projectionType = "cube";
        pano.cubeFace = true;
        pano.width = 700;
        pano.height = 500;
        pano.x = 500;
        pano.fovMin = 30;
        pano.fovMax = 200;
        pano.mouseChildren = true;
        
        var touchC:TouchContainer = new TouchContainer();
        touchC.nestedTransform = false;
        touchC.gestureEvents = true;
        touchC.mouseChildren = false;
        touchC.disableAffineTransform = true;
        touchC.disableNativeTransform = true;
        touchC.gestureList = { "n-drag":true, "n-scale":true };
        touchC.init();
        
        var imageRight:Image = new Image();
        imageRight.width = 1024;
        imageRight.open("../../../../assets/panoramic/30kabah_r.jpg");
        imageRight.addEventListener(Event.COMPLETE, imageComplete);
        
        var imageLeft:Image = new Image();
        imageLeft.width = 1024;
        imageLeft.open("../../../../assets/panoramic/30kabah_l.jpg");
        imageLeft.addEventListener(Event.COMPLETE, imageComplete);
        
        var imageUp:Image = new Image();
        imageUp.width = 1024;
        imageUp.open("../../../../assets/panoramic/30kabah_u.jpg");
        imageUp.addEventListener(Event.COMPLETE, imageComplete);
        
        var imageDown:Image = new Image();
        imageDown.width = 1024;
        imageDown.open("../../../../assets/panoramic/30kabah_d.jpg");
        imageDown.addEventListener(Event.COMPLETE, imageComplete);
        
        var imageFront:Image = new Image();
        imageFront.width = 1024;
        imageFront.open("../../../../assets/panoramic/30kabah_f.jpg");
        imageFront.addEventListener(Event.COMPLETE, imageComplete);
        
        var imageBack:Image = new Image();
        imageBack.width = 1024;
        imageBack.open("../../../../assets/panoramic/30kabah_b.jpg");
        imageBack.addEventListener(Event.COMPLETE, imageComplete);
        
        function imageComplete(e:Event):void {
            e.target.removeEventListener(Event.COMPLETE, imageComplete);
            e.target.init();
            
            if ( counter == 5 ) {
                
                pano.addChild(imageRight);
                pano.addChild(imageLeft);
                pano.addChild(imageUp);
                pano.addChild(imageDown);
                pano.addChild(imageFront);
                pano.addChild(imageBack);
                
                pano.addChild(touchC);
                
                pano.init();
                
                addChild(pano);
            }
            else { counter++; }
        }

See also

Gigapixel

Public Properties

Hide Inherited Public Properties

Show Inherited Public Properties

	Property		Defined By
		alpha : Number [override] [write-only] sets the alpha for display objects	ElementFactory
		blur : Boolean Sets the drop shadow effect	ElementFactory
		bottom : Number sets the bottom value	ElementFactory
		childList : ChildList [read-only] store the child list	ContainerFactory
		class_ : String Object's css class;	ElementFactory
		className : String sets the class name of displayobject	ElementFactory
		cmlIndex : int sets the cml index	ElementFactory
		cubeFace : Boolean Sets default projection geometry	Panoramic
		debugStyle : * sets the debug style	ElementFactory
		dimensionsTo : String sets the dimensions of the container	ContainerFactory
		displayEvents : String Use for dispatch completes.	ElementFactory
		dropShadow : Boolean Sets the drop shadow effect	ElementFactory
		fovMax : Number Sets maximum spread of the field of view.	Panoramic
		fovMin : Number Sets the minimum spread of the field of view.	Panoramic
		height : Number [override] Sets width of the display object in pixels	ElementFactory
		heightPercent : String sets the height percent of display object	ElementFactory
		horizontalCenter : Number sets the horizontal center of display object	ElementFactory
		id : String sets the id of child	ElementFactory
		index : int sets the index of display object	ElementFactory
		infoSource : String sets info source	ContainerFactory
		layout : * Sets the layout of the container	Container
		layoutComplete : Function Sets the function to call when the layout is complete	Container
		layoutList : Dictionary Defines the layoutlist	Container
		layoutUpdate : Function Sets the function to call when the layout updates	Container
		left : Number sets left value	ElementFactory
		paddingBottom : Number Sets the number of pixels between the container's bottom border and the bottom of its content area.	Container
		paddingLeft : Number Sets the number of pixels between the component's left border and the left edge of its content area.	Container
		paddingRight : Number Sets the number of pixels between the component's right border and the right edge of its content area.	Container
		paddingTop : Number Sets the number of pixels between the container's top border and the top of its content area.	Container
		position : String Sets the position	Container
		projectionType : String Sets default projection geometry	Panoramic
		propertyStates : Array Deprecated: Please Use state	ElementFactory
		right : Number sets the right value	ElementFactory
		scale : Number Sets both the x and y scale values	ElementFactory
		scaleX : Number [override] Sets width of the display object in pixels	ElementFactory
		scaleY : Number [override] Sets width of the display object in pixels	ElementFactory
		state : Array property states array	ElementFactory
		top : Number sets top value	ElementFactory
		verticalCenter : Number sets the vertical center of display object	ElementFactory
		width : Number [override] Sets width of the display object in pixels	ElementFactory
		widthPercent : String sets the percent of width of display object	ElementFactory

Public Methods

Hide Inherited Public Methods

Show Inherited Public Methods

	Method		Defined By
		Panoramic() Constructor	Panoramic
		addAllChildren():void This method searches the childlist and add the children	ContainerFactory
		addChild(child:DisplayObject):DisplayObject [override] Adds child to display list and, if not already added, the child list TODO: This mechanism should be abstracted to better syncrhonize child and display lists	Container
		applyLayout(value:* = null):void Apply the containers layout	Container
		childToList(id:String, child:*):void this method append to the childlist	ContainerFactory
		clone():* Returns clone of self	ElementFactory
		displayComplete():void [override] CML callback Initialisation	Panoramic
		dispose():void [override] Dispose methods to nullify children	Panoramic
		getIndex(index:int):* returns childlist index	Container
		getKey(key:String):* returns the childlist key	Container
		hideIndex(index:int):void hides the childlist index	Container
		hideKey(key:String):void hides the childlist key	Container
		init():void [override] Initialisation method	Panoramic
		parseCML(cml:XMLList):XMLList [override] Parse cml for local layouts.	Container
		postparseCML(cml:XMLList):void post parses the cml file	ElementFactory
		searchChildren(value:, returnType:Class = null): This method does a depth first search of childLists.	Container
		setDimensionsToChild():void This method sets the dimensions of childlist	ContainerFactory
		showIndex(index:int):void shows the childlist index	Container
		showKey(key:String):void shows the childlist key	Container
		update(e:GWEvent):void updates camera angle	Panoramic
		updateProperties(state:Number = 0):void this method updates the properties	ElementFactory

Property Detail

cubeFace

property

cubeFace:Boolean

Sets default projection geometry

The default value is false.

Implementation
public function get cubeFace():Boolean
public function set cubeFace(value:Boolean):void

fovMax

property

fovMax:Number

Sets maximum spread of the field of view. This is how wide the viewing angle can be. Larger means more of the panorama is seen at once, but too large can mean things can look skewed or warped, or even get turned inside out.

The default value is 150.

Implementation
public function get fovMax():Number
public function set fovMax(value:Number):void

fovMin

property

fovMin:Number

Sets the minimum spread of the field of view. This is how narrow the viewing angle can be. Smaller means less total area of the panorama can be seen, but the viewing area that is available is in much greater detail, and appears "foved" in.

The default value is 50.

Implementation
public function get fovMin():Number
public function set fovMin(value:Number):void

projectionType

property

projectionType:String

Sets default projection geometry

The default value is "cube".

Implementation
public function get projectionType():String
public function set projectionType(value:String):void

Constructor Detail

Panoramic

()

Constructor

public function Panoramic()

Constructor

Method Detail

displayComplete

()

method

override public function displayComplete():void

CML callback Initialisation

dispose

()

method

override public function dispose():void

Dispose methods to nullify children

init

()

method

override public function init():void

Initialisation method

update

()

method

public function update(e:GWEvent):void

updates camera angle

Parameters

e:GWEvent

Tue Apr 16 2013, 03:24 PM -06:00

Gestureworks Flash 3.6	All Packages \| All Classes \| Index \| Frames No Frames
Panoramic	Properties \| Methods