Article Tutorials/The MovieClip animation class

From GiderosMobile
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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/


Written Tutorials