Difference between revisions of "Article Tutorials/The MovieClip animation class"
m (formatting) |
m (Text replacement - "<source" to "<syntaxhighlight") |
||
| Line 5: | Line 5: | ||
We’ll start with a simple one to animate two frames indefinitely: | We’ll start with a simple one to animate two frames indefinitely: | ||
| − | < | + | <syntaxhighlight lang="lua"> |
-- Set up our images into frames to animate | -- Set up our images into frames to animate | ||
local anim1 = {} | local anim1 = {} | ||
| Line 27: | Line 27: | ||
This time, we have 4 images to animate and will end on the last frame: | This time, we have 4 images to animate and will end on the last frame: | ||
| − | < | + | <syntaxhighlight lang="lua"> |
local anim2 = {} | local anim2 = {} | ||
anim2[1] = Bitmap.new(Texture.new("images/Smile1.png")) | anim2[1] = Bitmap.new(Texture.new("images/Smile1.png")) | ||
| Line 49: | Line 49: | ||
This one will do a few bounces: | This one will do a few bounces: | ||
| − | < | + | <syntaxhighlight lang="lua"> |
local anim3 = {} | local anim3 = {} | ||
anim3 = Bitmap.new(Texture.new("images/Smile1.png")) | anim3 = Bitmap.new(Texture.new("images/Smile1.png")) | ||
| Line 61: | Line 61: | ||
Two images, the second one starts while the first is still moving: | Two images, the second one starts while the first is still moving: | ||
| − | < | + | <syntaxhighlight lang="lua"> |
-- Set up our images into frames to animate | -- Set up our images into frames to animate | ||
local anim4 = {} | local anim4 = {} | ||
Revision as of 16:35, 12 July 2023
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/.
