dynapi.gui.ImageClip - Quick Reference

Inherit: DynLayer

Constructor

ImageClip(clipImage,x,y,w,h,color,cols,rows,speed)
clipImage - clipImage can be  either a string or an image object
Dictionary Input supported

Events

frameplay
...
framestop
...
framechange
...

Public Methods

Remarks
The ImageClip widget is used to create canvas animations using a sequence of animated frames from a still image. This widget inherits all methods and properties from DynLayer.
 
addImage(img,col,row)
...
getFrame()
...
playAnimation(boolean loop, string sequence)
...
setClipImage(clipImage, cols, rows)
...
setSpeed(int sp)
...
setFrame(int fn)
...
setFrameMartix(int col, int row)
...
stopAnimation()
...

Private Methods

nextSEQ
...
playSEQ
...

Static Methods

[none]

What is Canvas Animation?

This means that all the frames used by the animation stored in one image. The frames are separated by rows and columns and must be of the same height and width. Below is an example showing the layout of animated frames (rows by columns):

(2x4 layout)

[01][03][05][07]      
[02][04][06][08]

Or

(1x8 layout)

[01][02][03][04][05][06][07][08] 

Animations are played in sequences starting from the lowest to the highest frames (e.g. 1 to 8). The widget uses a set of commands which tells it how to display the frames:

x>y  - show frame x to y
x<y  - show frame y to x
x      - show frame x
pN    - sleep for N milliseconds

Example:

var img=dynapi.functions.getImage('penguin.gif');
myclip= new ImageClip(img,10,10,64,64,null,11,2,150)
myclip.playAnimation(false,'1>22,p500,1<22,11')
dynapi.document.addChild(myclip)