asFamous

actionscript like famous

This project is an attend to script html5 DOM with the ease, speed and consistency what flashplayer was able to provide. It's based on the infamous [Famo.us] famous framework, comes with some extra depth handling, event system, transform order and xyz... Ex-flash developers will surely love it, web evangelists probably will hate. Even though it's an immature project it's really shows some powerful features (thanks to the strong daddy mostly) and it also suits to the philosophy of Famo.us that everyone should use it... flash designers, well, your time has came. The lessons of [Famo.us] famous university are strongly recommended.

One of the beauty of asFamous is that you can also use your [beloved libs] tweenLite with its property based structure.

[Famo.us] famous is on a consistent move and we will try to keep up with the fresh releases and include new features/solutions as quick as possible. Huge thanks to the famous team for playing that much with messy matrixes!

Contributors are more than welcome.

Happy coding!

#sharp_team;

0.1 Version notes

• Compatible with famous 0.2.2 (You will need to replace element.style.zIndex to element.style['z-index'] in Surface.js for correct depth handling in firefox)
• Needs a lot of testing, specially according to the property settings order (there is a known malfunction with drag prop if the object hasn't been added to the root structure before the property was set true) We are trying to make it as async as it's naturally in actionscript but the devil never sleeps. Use addChild() straight after a new object was created until the next stable version.
• coming soon: asShape with drawing functionalities like beginBitmapFill() and lineTo() based on canvas.

Docs

In asFamous you will find 2 core elements, asRoot and asSprite, which only exists in javascript and doesn't have DOM "mirror" in the html and also many functional elements like asImage or asVideo which has "real" DOM tag attached.
AsFamous objects always inherit their famous pair's methods, although it's sometimes risky to override.

Building Bricks

asRoot

↬ inherited from famous Context

This is the basic engine of asFamous. You cannot do much with except you can set 3D perspective and FramePerSec. There is a link to the base famous engine where you can access some events and famo.us features eg. root.Engine.on("resize", fn);. (Examples are coming soon)
When the documentation reads "Any asFamous objects" asRoot doesn't included.

Public properties

perspective = Number
Default:1000
◦ Set and get The 3D perspective globally.
◣

fps = Number
Default:60
◦ Set the cap of engine's frame rate.
◦ Get the the actual frame rate.
◣

asSprite

↬ inherited from famous View

A sprite a virtual group of elements you can twist and turn. Very powerful "virtual" tool as it's much quicker than manipulating the "real" html document. You can do almost everything with it except some properties according to DOM manipulation.

Public properties

all universal properties except mask, doubleSided
◣

Public methods

all universal methods and functions except addContent()
◣

asSurface

↬ inherited from famous Surface

Represents a <div/> tag. The asSurface object can display a piece of text or html script. Also can be used as background colour or as a surface for event triggering.

Public properties

all universal properties except children
◣

Public methods

all universal methods and functions except addChild(), removeChild(), removeAllChildren(), swapDepths()
◣

asImage

↬ inherited from famous ImageSurface

Represents an <img/> tag. An asImage can display any internet compatible image, bitmap or vector-graphic.

Public properties

all universal properties except children
◣

Public methods

all universal methods and functions except addChild(), removeChild(), removeAllChildren(), swapDepths()
◣

asVideo

↬ inherited from famous VideoSurface

Represents an <video/> tag. An asVideo can display any internet compatible video. If you are looking to make it auto play, there is a built in famous function for you video.setOptions({autoplay:true}). All other video manipulation should be done via standard JavaScript manipulation of the video DOM element.

Public properties

all universal properties except children
◣

Public methods

all universal methods and functions except addChild(), removeChild(), removeAllChildren(), swapDepths()
◣

asText

↬ inherited from famous TextSurface

Represents an <textarea/> tag. With asText you can get a block of text, just how you like it. For some extra functions have a look at TextareaSurface in [famous docs] docs.

Public properties

all universal properties except children
◣

Public methods

all universal methods and functions except addChild(), removeChild(), removeAllChildren(), swapDepths()
◣

asInput

↬ inherited from famous InputSurface

Represents an <input/> tag. With asInput you create a line of textfield the user can fill in or modify. If you need the user input use getValue() method on the asInput object. For some extra functions have a look at InputSurface in [famous docs] docs.

Public properties

all universal properties except children
◣

Public methods

all universal methods and functions except addChild(), removeChild(), removeAllChildren(), swapDepths()
plus native famous functions: setPlaceholder(), focus(), blur(), setValue(), getValue(), setType() *more info about these at [famous docs] docs
◣

asCanvas

↬ inherited from famous CanvasSurface

Represents an <canvas/> tag. With asCanvas you get a canvas context. We are looking to develop this class to asShape with extra methods so it's pretty much untested in depths. You have a handy native option here modify the dimensions (scale) on the canvas setSize(size, canvasSize) and getContext() to access the context you can draw on.

Public properties

all universal properties except children
◣

Public methods

all universal methods and functions except addChild(), removeChild(), removeAllChildren(), swapDepths(), setContent()
plus native famous functions: getContext(), setSize() *more info about these at [famous docs] docs
◣

asContainer

↬ inherited from famous ContainerSurface

Represents a <div/> wrapper. This asContainer is a weird creature you can use as Surface and also have can contain children. There were some rumors it may causes performance issues by nesting the DOM, so may use it when you really need to, for example cropping an asSprite child by setting container.css({overflow:"hidden"});.

Public properties

all universal properties
◣

Public methods

all universal methods and functions except setContent()
◣

Universal Methods

addChild( child )
Add the given child on the top of the render three of the actual object in the highest depth.

Parameters:
◦ child: Any asFamous object.
Returns:
◦ The owner object of the function.
◣

removeChild( child )
Remove the given child from the render three of the actual object.

Parameters:
◦ child: Any asFamous object.
Returns:
◦ The owner object of the function.
◣

removeAllChildren()
Remove all the children of the actual object.

Returns:
◦ The owner object of the function.
◣

swapDepths( child1, child2 )
Swapping the depths of the given children on the render three of the actual object.

Parameters:
◦ child1: Any asFamous object.
◦ child2: Any asFamous object.
Returns:
◦ The owner object of the function.
◣

addEventListener( type, fn )
Add event listener to the actual object. For the details of listener nesting see the Listen to the Event section.

Parameters:
◦ type: String
◦ fn: Function
Returns:
◦ The owner object of the function.
◣

removeEventListener( type, fn )
Stop listening to the specific event on the actual object. For the details of listener nesting see the Listen to the Event section.

Parameters:
◦ type: String
◦ fn: Function
Returns:
◦ The owner object of the function.
◣

removeAllListeners()
Stop listening to all events on the actual object.

Returns:
◦ The owner object of the function.
◣

kill()
Trying to free up as much processing capacity possible. (test stage)

Returns:
◦ The owner object of the function.
◣

dispatchEvent( type )
Trigger an event on the actual object. (test stage)

Parameters:
◦ type: String
Returns:
◦ The owner object of the function.
◣

css( attr )
Set CSS-style properties on the actual object with camelCase, like line-height:20px equals to {lineHeight:'20px'}

Parameters:
◦ attr: Object (with attributes)
Returns:
◦ The owner object of the function.
◣

getBounds()
Recursive function returning a rectangle of a space occupied by its children. (test stage)

Returns:
◦ A rectangle eg. {x:0, y:0, width:100, height:100}
◣

Universal Properties

children = Array
◦ Get the array of all children.
◣

listeners = Object
◦ Get the object of all listeners.
◣

parent = asFamous object
(internal) ◦ Set the parent object.
◦ Get the parent object.
◣

root = asFamous object
(internal)
◦ Set the root object.
◦ Get the root object.
◣

alpha = Number (0-1)
Default:1
◦ Set the transparency.
◦ Get the root object.
◣

visible = Boolean
Default:true
◦ Set visibility state.
◦ Get visibility state.
◣

x = Number
◦ Set the x coordinate.
◦ Get the x coordinate.
◣

y = Number
◦ Set the y coordinate.
◦ Get the y coordinate.
◣

z = Number
◦ Set the z coordinate.
◦ Get the z coordinate.
◣

width = Number
◦ Set the width of the object.
◦ Get the width of the object.
◦ Also set line-width css property on Surfaces for text wrapping.
◣

height = Number
◦ Set the height of the object.
◦ Get the height of the object.
◣

regX = Number (0-1)
◦ Set the horizontal registration point of the object according to the percentage of its width.
◦ Get the horizontal registration point.
◣

regY = Number (0-1)
◦ Set the vertical registration point of the object according to the percentage of its height.
◦ Get the vertical registration point.
◣

alignX = Number (0-1)
◦ Set the horizontal alignment of the object according to the percentage of the screen width.
◦ Get the horizontal registration point.
◣

alignY = Number (0-1)
◦ Set the vertical alignment of the object according to the percentage of the screen height.
◦ Get the vertical registration point.
◣

rotation = Number
◦ Set the rotation in angles.
◦ Get the rotation in angles.
◣

rotationX = Number
◦ Set the x axis rotation in angles.
◦ Get the x axis rotation in angles.
◣

rotationY = Number
◦ Set the y axis rotation in angles.
◦ Get the y axis rotation in angles.
◣

rotationZ = Number
◦ Set the z axis rotation in angles.
◦ Get the z axis rotation in angles.
◣

scaleX = Number
◦ Set the scale on the x axis.
◦ Get the scale on the x axis.
◣

scaleY = Number
◦ Set the scale on the y axis.
◦ Get the scale on the y axis.
◣

scaleZ = Number
◦ Set the scale on the z axis.
◦ Get the scale on the z axis.
◣

name = String
Default:item
◦ Set the id of the object.
◦ Get the id of the object.
◣

cursor = String
Default:auto
◦ Set the type of the cursor on hover to the object. [More about cursor types here.] cursor
◦ Get the type of the cursor.
◣

useHandCursor = Boolean
Default:false
◦ Set the type of the cursor to pointer.
◦ Get the type of the cursor.
◣

mouseEnabled = Boolean
Default:true
◦ Set the mouse reaction on the object. In case of false it prevents mouse actions, in case of true it allows them again.
◦ Get the mouse reaction on the object.
◣

mouseChildren = Boolean
Default:true
◦ Set the mouse reaction on children. In case of false it prevents mouse actions, in case of true it allows them again.
◦ Get the mouse reaction on children.
◣

doubleSided = Boolean
Default:false
◦ Set the controls of the backside of an object makes it visible 180 degree 3D rotation.
◦ Get the existence of the backside.
◣

doubleSided = Boolean
Default:false
◦ Set the backside of an object makes it visible 180 degree 3D rotation. (excluded asSprite)
◦ Get the existence of the backside.
◣

mask = Boolean
Default:false
◦ Set the clipping rectangle eg. {x:0, y:0, width:100, height:100}. (excluded asSprite)
◦ Get the clipping rectangle.
◣

drag = Boolean
Default:false
◦ Set the draggability of the object.
◦ Get the draggability.
◣

dragBounds = Boolean
Default:false
◦ Set the edges of the draggable area to the width an height of its parent.
◦ Get the existence of draggable area.
◦ In case the parent bounds are smaller than the actual object's bounds dragging will be disabled.
◣

scrollX = Boolean
Default:false
◦ Set the horizontal scrolling active the width of its parent.
◦ Get the horizontal scrolling.
◦ In case the parent width is greater than the actual object's width scrollX will be disabled.
◣

scrollY = Boolean
Default:false
◦ Set the vertical scrolling active the height of its parent.
◦ Get the vertical scrolling.
◦ In case the parent height is greater than the actual object's height scrollY will be disabled.
◣

Listener System

There is a bit of difference between the event handling system of asFamous and Flash. When you add a listener on an element it takes away the mouse activity on all it's children, while in asFamous you can still catch different events on the children as well. So for example (where asImage and asSurface are the children of asSprite) if you click on the image it calls both sayImage() and saySprite(), but if you click on asSurface it will call only saySprite().

//TODO

• Create asShape class with graphics property you can use eg. lineTo() and beginBitmapFill().
• Create asAnim class based on svg animation with gotoAndPlay() and stop().
• Add this.mouseX && this.mouseY
• Create stable drag functionality