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.

-- 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)

This time, we have 4 images to animate and will end on the last frame.

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)

This one will do a few bounces.

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)

Two images, the second one starts while the first is still moving.

-- 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)

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