Difference between revisions of "MovieClip"

From GiderosMobile
Line 3: Line 3:
 
'''Available since:''' Gideros 2011.6<br/>
 
'''Available since:''' Gideros 2011.6<br/>
 
=== Description ===
 
=== Description ===
 +
<translate><br />
 +
The [[[MovieClip` class inherits from the following classes: `Sprite` > `EventDispatcher]]].<br />
 
<br />
 
<br />
The `MovieClip` class inherits from the following classes: `Sprite` > `EventDispatcher`.<br />
+
The [[[MovieClip]]] class is used create static timedlined animations. The timeline parameters are given as an array. <br />
<br />
 
The `MovieClip` class is used create static timedlined animations. The timeline parameters are given as an array. <br />
 
 
Each array element specifies one timeline element and consists of the starting frame, ending frame, sprite and <br />
 
Each array element specifies one timeline element and consists of the starting frame, ending frame, sprite and <br />
 
optional tweening parameters. Frame numbers start from 1.<br />
 
optional tweening parameters. Frame numbers start from 1.<br />
 
<br />
 
<br />
When a `MovieClip` object finishes it playing (by reaching its final frame or a frame with stop action), <br />
+
When a [[[MovieClip]]] object finishes it playing (by reaching its final frame or a frame with stop action), <br />
it dispatches an `Event.COMPLETE` event.<br />
+
it dispatches an [[[Event.COMPLETE]]] event.<br />
 
<br />
 
<br />
 
The following properties can be tweened:<br />
 
The following properties can be tweened:<br />
 
<br />
 
<br />
 
<ul>
 
<ul>
<li>`x`</li>
+
<li>[[[x]]]</li>
<li>`y`</li>
+
<li>[[[y]]]</li>
<li>`rotation`</li>
+
<li>[[[rotation]]]</li>
<li>`scale`</li>
+
<li>[[[scale]]]</li>
<li>`scaleX`</li>
+
<li>[[[scaleX]]]</li>
<li>`scaleY`</li>
+
<li>[[[scaleY]]]</li>
<li>`alpha`</li>
+
<li>[[[alpha]]]</li>
 
</ul>
 
</ul>
 
<br />
 
<br />
  
Additionally `MovieClip` uses set function to tween properties, so if you override provided object's set function by adding new parameters it can accept, then you can tween those new parameters too.
+
Additionally [[[MovieClip]]] uses set function to tween properties, so if you override provided object's set function by adding new parameters it can accept, then you can tween those new parameters too.
  
  
Line 32: Line 32:
 
The following easing functions can be used:<br />
 
The following easing functions can be used:<br />
 
<br />
 
<br />
  * `"inBack"`<br />
+
  * [[["inBack"]]]<br />
  * `"outBack"`<br />
+
  * [[["outBack"]]]<br />
  * `"inOutBack"`<br />
+
  * [[["inOutBack"]]]<br />
  * `"inBounce"`<br />
+
  * [[["inBounce"]]]<br />
  * `"outBounce"`<br />
+
  * [[["outBounce"]]]<br />
  * `"inOutBounce"`<br />
+
  * [[["inOutBounce"]]]<br />
  * `"inCircular"`<br />
+
  * [[["inCircular"]]]<br />
  * `"outCircular"`<br />
+
  * [[["outCircular"]]]<br />
  * `"inOutCircular"`<br />
+
  * [[["inOutCircular"]]]<br />
  * `"inCubic"`<br />
+
  * [[["inCubic"]]]<br />
  * `"outCubic"`<br />
+
  * [[["outCubic"]]]<br />
  * `"inOutCubic"`<br />
+
  * [[["inOutCubic"]]]<br />
  * `"inElastic"`<br />
+
  * [[["inElastic"]]]<br />
  * `"outElastic"`<br />
+
  * [[["outElastic"]]]<br />
  * `"inOutElastic"`<br />
+
  * [[["inOutElastic"]]]<br />
  * `"inExponential"`<br />
+
  * [[["inExponential"]]]<br />
  * `"outExponential"`<br />
+
  * [[["outExponential"]]]<br />
  * `"inOutExponential"`<br />
+
  * [[["inOutExponential"]]]<br />
  * `"linear"`<br />
+
  * [[["linear"]]]<br />
  * `"inQuadratic"`<br />
+
  * [[["inQuadratic"]]]<br />
  * `"outQuadratic"`<br />
+
  * [[["outQuadratic"]]]<br />
  * `"inOutQuadratic"`<br />
+
  * [[["inOutQuadratic"]]]<br />
  * `"inQuartic"`<br />
+
  * [[["inQuartic"]]]<br />
  * `"outQuartic"`<br />
+
  * [[["outQuartic"]]]<br />
  * `"inOutQuartic"`<br />
+
  * [[["inOutQuartic"]]]<br />
  * `"inQuintic"`<br />
+
  * [[["inQuintic"]]]<br />
  * `"outQuintic"`<br />
+
  * [[["outQuintic"]]]<br />
  * `"inOutQuintic"`<br />
+
  * [[["inOutQuintic"]]]<br />
  * `"inSine"`<br />
+
  * [[["inSine"]]]<br />
  * `"outSine"`<br />
+
  * [[["outSine"]]]<br />
  * `"inOutSine"`<br />
+
  * [[["inOutSine"]]]<br />
 
<br />
 
<br />
 
Following examples demonstrates the possible uses of MovieClip class.<br />
 
Following examples demonstrates the possible uses of MovieClip class.<br />
<br />
+
<br /></translate>
 
=== Examples ===
 
=== Examples ===
 
'''Example'''<br/>
 
'''Example'''<br/>
<source lang="lua">-- construct a 100 frame animation where x coordinate of sprite tweens from 0 to 200 linearly<br />
+
<source lang="lua">-- construct a 100 frame animation where x coordinate of sprite tweens from 0 to 200 linearly
local mc = MovieClip.new{<br />
+
local mc = MovieClip.new{
{1, 100, sprite, {x = {0, 200, "linear"}}}<br />
+
{1, 100, sprite, {x = {0, 200, "linear"}}}
}<br />
+
}
<br />
+
 
-- construct a 100 frame animation where x coordinate of sprite is 50 (constant) and <br />
+
-- construct a 100 frame animation where x coordinate of sprite is 50 (constant) and  
-- y coordinate of sprite tweens from 50 to 150 by using inBounce function<br />
+
-- y coordinate of sprite tweens from 50 to 150 by using inBounce function
local mc = MovieClip.new{<br />
+
local mc = MovieClip.new{
{1, 100, sprite, {x = 50, y = {50, 150, "inBounce"}}}<br />
+
{1, 100, sprite, {x = 50, y = {50, 150, "inBounce"}}}
}<br />
+
}
<br />
+
 
-- construct a 200 frame animation where sprite1 and sprite2 tweens differently<br />
+
-- construct a 200 frame animation where sprite1 and sprite2 tweens differently
-- here sprite1 is visible between frames [1, 150]<br />
+
-- here sprite1 is visible between frames [1, 150]
-- and sprite2 is visible between frames [100, 200]<br />
+
-- and sprite2 is visible between frames [100, 200]
local mc = MovieClip.new{<br />
+
local mc = MovieClip.new{
{1, 100, sprite1, {x = {0, 200, "linear"}}},<br />
+
{1, 100, sprite1, {x = {0, 200, "linear"}}},
{50, 150, sprite1, {y = {0, 100, "linear"}, alpha = {0, 1, "easeOut"}}},<br />
+
{50, 150, sprite1, {y = {0, 100, "linear"}, alpha = {0, 1, "easeOut"}}},
{100, 200, sprite2, {x = {0, 200, "linear"}}},<br />
+
{100, 200, sprite2, {x = {0, 200, "linear"}}},
}<br />
+
}
<br />
+
 
-- construct a looping 6 frame animation where each frame is a different sprite<br />
+
-- construct a looping 6 frame animation where each frame is a different sprite
local mc = MovieClip.new{<br />
+
local mc = MovieClip.new{
{1, 1, frame1}, <br />
+
{1, 1, frame1},
{2, 2, frame2}, <br />
+
{2, 2, frame2},
{3, 3, frame3}, <br />
+
{3, 3, frame3},
{4, 4, frame4}, <br />
+
{4, 4, frame4},
{5, 5, frame5}, <br />
+
{5, 5, frame5},
{6, 6, frame6},<br />
+
{6, 6, frame6},
}<br />
+
}
mc:setGotoAction(6, 1) -- if the animation reaches frame 6 then go to frame 1<br />
+
mc:setGotoAction(6, 1) -- if the animation reaches frame 6 then go to frame 1
<br />
+
-- construct a looping 6 frame animation playing 5 times slower than the previous example<br />
+
-- construct a looping 6 frame animation playing 5 times slower than the previous example
local mc = MovieClip.new{<br />
+
local mc = MovieClip.new{
{1, 5, frame1}, <br />
+
{1, 5, frame1},
{5, 10, frame2}, <br />
+
{5, 10, frame2},
{11, 15, frame3}, <br />
+
{11, 15, frame3},
{16, 20, frame4}, <br />
+
{16, 20, frame4},
{21, 25, frame5}, <br />
+
{21, 25, frame5},
{26, 30, frame6},<br />
+
{26, 30, frame6},
}<br />
+
}
 
mc:setGotoAction(30, 1) -- if the animation reaches frame 30 then go to frame 1</source>
 
mc:setGotoAction(30, 1) -- if the animation reaches frame 30 then go to frame 1</source>
 
{|-
 
{|-

Revision as of 14:32, 23 August 2018

Supported platforms: android, ios, mac, pc
Available since: Gideros 2011.6

Description


The [[[MovieClip` class inherits from the following classes: `Sprite` > `EventDispatcher]]].

The [[[MovieClip]]] class is used create static timedlined animations. The timeline parameters are given as an array.
Each array element specifies one timeline element and consists of the starting frame, ending frame, sprite and
optional tweening parameters. Frame numbers start from 1.

When a [[[MovieClip]]] object finishes it playing (by reaching its final frame or a frame with stop action),
it dispatches an [[[Event.COMPLETE]]] event.

The following properties can be tweened:

  • [[[x]]]
  • [[[y]]]
  • [[[rotation]]]
  • [[[scale]]]
  • [[[scaleX]]]
  • [[[scaleY]]]
  • [[[alpha]]]


Additionally [[[MovieClip]]] uses set function to tween properties, so if you override provided object's set function by adding new parameters it can accept, then you can tween those new parameters too.



The following easing functions can be used:

* [[["inBack"]]]
* [[["outBack"]]]
* [[["inOutBack"]]]
* [[["inBounce"]]]
* [[["outBounce"]]]
* [[["inOutBounce"]]]
* [[["inCircular"]]]
* [[["outCircular"]]]
* [[["inOutCircular"]]]
* [[["inCubic"]]]
* [[["outCubic"]]]
* [[["inOutCubic"]]]
* [[["inElastic"]]]
* [[["outElastic"]]]
* [[["inOutElastic"]]]
* [[["inExponential"]]]
* [[["outExponential"]]]
* [[["inOutExponential"]]]
* [[["linear"]]]
* [[["inQuadratic"]]]
* [[["outQuadratic"]]]
* [[["inOutQuadratic"]]]
* [[["inQuartic"]]]
* [[["outQuartic"]]]
* [[["inOutQuartic"]]]
* [[["inQuintic"]]]
* [[["outQuintic"]]]
* [[["inOutQuintic"]]]
* [[["inSine"]]]
* [[["outSine"]]]
* [[["inOutSine"]]]


Following examples demonstrates the possible uses of MovieClip class.

Examples

Example

-- construct a 100 frame animation where x coordinate of sprite tweens from 0 to 200 linearly
local mc = MovieClip.new{
	{1, 100, sprite, {x = {0, 200, "linear"}}}
}

-- construct a 100 frame animation where x coordinate of sprite is 50 (constant) and 
-- y coordinate of sprite tweens from 50 to 150 by using inBounce function
local mc = MovieClip.new{
	{1, 100, sprite, {x = 50, y = {50, 150, "inBounce"}}}
}

-- construct a 200 frame animation where sprite1 and sprite2 tweens differently
-- here sprite1 is visible between frames [1, 150]
-- and sprite2 is visible between frames [100, 200]
local mc = MovieClip.new{
	{1, 100, sprite1, {x = {0, 200, "linear"}}},
	{50, 150, sprite1, {y = {0, 100, "linear"}, alpha = {0, 1, "easeOut"}}},
	{100, 200, sprite2, {x = {0, 200, "linear"}}},
}

	-- construct a looping 6 frame animation where each frame is a different sprite
	local mc = MovieClip.new{
		{1, 1, frame1},	
		{2, 2, frame2},	
		{3, 3, frame3},	
		{4, 4, frame4},	
		{5, 5, frame5},	
		{6, 6, frame6},
	}
	mc:setGotoAction(6, 1)	-- if the animation reaches frame 6 then go to frame 1
						
-- construct a looping 6 frame animation playing 5 times slower than the previous example
local mc = MovieClip.new{
	{1, 5, frame1},	
	{5, 10, frame2},	
	{11, 15, frame3},	
	{16, 20, frame4},	
	{21, 25, frame5},	
	{26, 30, frame6},
}
mc:setGotoAction(30, 1)	-- if the animation reaches frame 30 then go to frame 1

Methods

MovieClip.new - creates a new MovieClip object
MovieClip:clearAction - clears the action at the specified frame
MovieClip:getFrame -
MovieClip:gotoAndPlay - goes to the specified frame and starts playing
MovieClip:gotoAndStop - goes to the specified frame and stops
MovieClip:play - starts playing the movie clip
MovieClip:setGotoAction - sets a "go to" action to the specified frame
MovieClip:setReverseAction - sets a "reverse" action to the specified frame
MovieClip:setStopAction - sets a "stop" action to the specified frame
MovieClip:stop - stops playing the movie clip

Events

Event.COMPLETE

Constants