Web New Media notes and ramblings

Often you will want to create a short animated clip. This is good for a lots of things especially games. A movieClip is an object that contains a series of images. Movieclips can play display their images in succession to create animated effect.

MovieClips are really a series of images loaded into to Corona and played in sequence. You could accomplish this with a Group containing all of the images and an array. Then writing an enterFrame function to cycle through the images in the array making each one visible in turn.

You could do all of that but, you don’t need to since someone over at Corona has all ready done it for you! This example uses the movieclip.lua file. You can find this in CoronaSDK/SampleCode/Graphics/MovieClip.

Create a new Corona project.

1. Create a folder to work in
2. Copy the movieclip.lua file from CoronaSDK/SampleCode/Graphics/MovieClip into the folder where you will be working
3. Create a new text file and save it into the folder an name it main.lua
4. Create a series of small images to use for the animated sequence. Imagine these images as frames in a movie. Save the images into the project folder

Add the following code to main.lua

-- Import an external library
local movieclip = require("movieclip")

-- Since we're importing a library we need to make a main function
-- to run after the library has loaded

-- Define the main function to initialize this program
function main()
 -- This line makes a new animated "movieClip" from the saucer images in the table
 saucer = movieclip.newAnim{"saucer_01.png", "saucer_02.png", "saucer_03.png"}

 saucer.x = display.contentWidth / 2
 saucer.y = display.contentHeight / 2

 -- Start the animation playing
 saucer:play()
end 

-- Call main to start the program
main()

Think of notifications from the program about things that have happened in the program. Use events to determine when an object is tapped or when period of time has passed. Use events to animate things and react to user interaction.

Listeners and Handlers

Listeners are objects that have been assigned to respond to an event. Handlers are the functions that are run when an event occurs. Think of listeners as waiting for and notifying their handlers when the event occurs.

Most objects in Corona can be assigned a listener. Use the addEventListener() method to assign the listener. For example imagine you want a create an event is fired when you tap an image. You might write the following. Try it for yourself.

1. Create a new folder to work in
2. Open a new text file and save it to your folder with the name main.lua
3. Copy an image to use in the example to your folder

Add the following code to main.lua:

-- Create an image and position it in the center of the screen
local invader = display.newImage("invader_04.png")

invader.x = display.contentWidth / 2
invader.y = display.contentHeight / 2

-- Define a handler
local function tapInvader( event )
 transition.to(invader, {time=1000, rotation=invader.rotation+360})
end 

-- Add an event listener to the invader
invader:addEventListener("tap", tapInvader)

I added a few comments to the code to explain what is going on. Any line that begins with “–” is ignored and the rest of the line can be used to write a message or description of your code.

Test your project and tap the invader. With each tap it rotates 360!

Once you’ve created more than one object the order in which they stack will be come important. What I mean by “stacking order” is which object is in front and which is behind, imagine layers in Photoshop.

Corona stacks or layers objects in the order that they are created. In other words the first object created would be on the bottom. While each newer object created would stack on top of the previous.

Try this out for yourself. Create a new Corona project.

1. Make a new Folder to work in.
2. Make a new text file, save it to the folder as main.lua.
3. Add three small images to your folder.

Create three images in your Corona project. Use the following to load your images. In my example the images were named square.png, circle.png and hexagon.png.

local square = display.newImage("square.png")
local circle = display.newImage("circle.png")
local hexagon = display.newImage("hexagon.png")

Notice the square is behind the other images. The circle “stacks” or looks like it’s on a layer between the other two. And, the hexagon is on top of the others.

Note: If any of the upper are larger than the images below, the images may not be visible.

The stacking order is determined by the order the images were created. With newer images being placed on top of images that were created earlier.

Corona provides a few methods that allow you to manipulate the stacking order. To move an object to the front use object:toFron(). For example, the following would move the circle to the front.

circle:toFront()

Use the object:toBack() method to move an object to the back. For example, the following moves the hexagon to the back.

hexagon:toBack()