Article Tutorials/The MovieClip animation class

Animated Movieclips

Gideros Studio provides Movieclips as a way to animate your graphics. First, create your image list, then create a Movieclip to animate them.

Download the images for this post from here: File:Jason-Oakley Animated Movieclips SmileyFaces.zip (15 Kb)

We’ll start with a simple one to animate two frames indefinitely: <syntaxhighlight lang="lua"> -- Set up our images into frames to animate local anim1 = {} anim1[1] = Bitmap.new(Texture.new("images/Smile1.png")) anim1[2] = Bitmap.new(Texture.new("images/Smile2.png")) -- Create an animation with 2 images spread over a timeline of 20 frames -- First 10 frames are anim[1], the rest are anim[2] local mc1 = MovieClip.new{ {1, 10, anim1[1]}, {10, 20, anim1[2]}, } -- Set the location and add it to the stage mc1:setPosition(150,150) stage:addChild(mc1) -- Create a movie clip. If animation reaches frame 20, go to frame 1 -- Set looping of mc1 mc1:setGotoAction(20, 1) -- Start animating mc1 mc1:gotoAndPlay(1) </source>

This time, we have 4 images to animate and will end on the last frame: <syntaxhighlight lang="lua"> local anim2 = {} anim2[1] = Bitmap.new(Texture.new("images/Smile1.png")) anim2[2] = Bitmap.new(Texture.new("images/Smile2.png")) anim2[3] = Bitmap.new(Texture.new("images/Smile3.png")) anim2[4] = Bitmap.new(Texture.new("images/Smile4.png")) -- Create a new movie clip -- First 5 frames are the first image. Next 5 frames are the second image, etc local mc2 = MovieClip.new{ {1, 40, anim2[1]}, {40, 50, anim2[2]}, {50, 60, anim2[3]}, {60, 70, anim2[4]}, } -- Set the location and add it to the stage mc2:setPosition(250,250) stage:addChild(mc2) -- Start animating mc2 mc2:gotoAndPlay(1) </source>

This one will do a few bounces: <syntaxhighlight lang="lua"> local anim3 = {} anim3 = Bitmap.new(Texture.new("images/Smile1.png")) -- create a bouncing movieclip using frame[2]'s image local mc3 = MovieClip.new{ {1, 200, anim3, {x = 50, y = {200, 50, "inBounce"}}} } stage:addChild(mc3) mc3:gotoAndPlay(1) </source>

Two images, the second one starts while the first is still moving: <syntaxhighlight lang="lua"> -- Set up our images into frames to animate local anim4 = {} anim4[1] = Bitmap.new(Texture.new("images/Smile1.png")) anim4[2] = Bitmap.new(Texture.new("images/Smile4.png")) -- 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 mc4 = MovieClip.new{ {1, 100, anim4[1], {x = {0, 200, "linear"}}}, {50, 150, anim4[1], {y = {0, 100, "linear"}}, {alpha = {0, 1, "easeOut"}}}, {100, 200, anim4[2], {x = {0, 200, "linear"}}}, } stage:addChild(mc4) mc4:gotoAndPlay(1) </source>

Note: This tutorial was written by Jason Oakley and was originally available here: http://bluebilby.com/2013/05/12/gideros-mobile-tutorial-animated-movieclips/.