Difference between revisions of "Article Tutorials/The MovieClip animation class"
From GiderosMobile
m (formatting) |
|||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| + | __TOC__ | ||
== Animated Movieclips == | == 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. | Gideros Studio provides Movieclips as a way to animate your graphics. First, create your image list, then create a Movieclip to animate them. | ||
| Line 5: | Line 6: | ||
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 24: | Line 25: | ||
-- Start animating mc1 | -- Start animating mc1 | ||
mc1:gotoAndPlay(1) | mc1:gotoAndPlay(1) | ||
| − | </ | + | </syntaxhighlight> |
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 46: | Line 47: | ||
-- Start animating mc2 | -- Start animating mc2 | ||
mc2:gotoAndPlay(1) | mc2:gotoAndPlay(1) | ||
| − | </ | + | </syntaxhighlight> |
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 58: | Line 59: | ||
stage:addChild(mc3) | stage:addChild(mc3) | ||
mc3:gotoAndPlay(1) | mc3:gotoAndPlay(1) | ||
| − | </ | + | </syntaxhighlight> |
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 = {} | ||
| Line 76: | Line 77: | ||
stage:addChild(mc4) | stage:addChild(mc4) | ||
mc4:gotoAndPlay(1) | mc4:gotoAndPlay(1) | ||
| − | </ | + | </syntaxhighlight> |
| − | '''Note: | + | '''Note: This tutorial was written by [http://bluebilby.com/author/waulokadmin/ Jason Oakley] and was originally available here: http://bluebilby.com/2013/05/12/gideros-mobile-tutorial-animated-movieclips/''' |
| + | |||
| + | |||
| + | '''[[Written Tutorials]]''' | ||
| + | {{GIDEROS IMPORTANT LINKS}} | ||
Latest revision as of 10:34, 26 August 2024
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/
