Corona – transition

Corona provides a simple solution to making things move. The best way to learn is try it for yourself.

Start by creating a folder for your new project. Create a new text file and save it your folder as main.lua. Add an image to your folder. make this image something small, about 100 px by 100 px.

In main.lua add the following code to get the image to show up on the screen.

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

Test your project at this point to make sure your image shows. The image should appear in the upper left of the screen.

Transition

Now add a transition. Add the following code below the code from above.

transition.to( square, {time=3000, x=160, y=240} )

Test your project. The image should move to the center of the screen over 3 seconds. Note, the motion has a constant speed. The object neither speeds up or slows down from the beginning to the end of the motion.

The transition “to” method takes two parameters. The first is the reference to the object that will be animated. In my case I used the variable square. Second is a “table” containing properties that describe the motion.

Note: Lua uses “tables” which are similar to Arrays and Objects in other languages. Though, the syntax is different!

The table I created above {time=3000, x=160, y=240} contains three properties: time, x and y. Notice the table is defined with the {}. Each property and value pair is separated by a comma. Each property and value has an = between the two.

The time property sets the length of the motion. This is set in milliseconds. There 1000 milliseconds in every second. The motion above would last 3 seconds.

The x and y properties animate the x and y properties of the display object, square. You can animate any properties using transition.to. Try animating the rotation property.

transition.to( square, {time=3000, x=160, y=240, rotation=360} )

Test again, this time the image rotates a full 360 degrees while moves to the center of the screen.

Preset properties

Imagine you wanted the box to move on to the stage from outside the edge of the stage. In this case you’d want to set the position of the object to it’s starting location before calling transtion.to().Try adding the following line before transition.to()

square.x = -100
square.y = -100

Test your project again. This time object moves into view from the upper left. Since x of 0 is the left edge of the stage and y of 0 is the top edge of the stage, negative x values place the object off the edge of the stage to the left. While negative y values would place the object off the top edge of the stage.

Other properties

Try experimenting with these properties.

  • alpha – Sets the transparency of the object. Use a range of 0 (transparent) to 1 (opaque).
  • xScale – Sets the horizontal scale. A value of 2 would make the object twice it’s original size.
  • yScale – Sets the vertical scale.

Easing

Obviously the default linear easing is not very exciting. Corona provides a few easing methods.

Use these in conjunction with the transition property in the table when calling transition.to(). For example:

transition.to(square, {time=3000, x=160, y=240, rotation=360, transition=easing.outExpo} )

This time the image starts of fast and slows to a stop at the end of it’s motion.

 

 

 

 

 

 

2011
10/30
CATEGORY
Corona
Write comment

Corona – Images

Creating an image and adding it to the stage with Corona is very easy. To get started create a folder where you will be working. Create an image to use for the example. Something small since we’ll be testing in the iPhone simulator. For the example assume the stage will be 320px by 480px. Save your image into the folder where you will be working. My image was named square.png.

Next we need to create our Corona project. Create a plain text file and save it into your folder. Name this file main.lua.

Create an image on the screen

Add the following to the top of main.lua

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

Open main.lua with Corona. The simulator should appear and your image appears in the upper left corner.

Position an image with x and y

Try positioning your image on the stage. The display object holding the image is saved in the variable “square”. Set the x and  y property of your image.

square.x = 160
square.y = 240

This should place the image in the center of the simulator. Assuming the width to 320 and height to be 480. The center would half of these numbers 160 and 240.

Notice the image appears in the exact center. This would mean that Corona considers registration point, or point of transformation, for the image to be in the center of the image.

Rotate an image with rotation

Test that out by rotating the image. Add the following line

square.rotation = 45

The square is still center and is rotated around it’s center.

Note! That means that the original position was not x = 0 and y = 0. Remember when the image was first placed it’s upper left corner was aligned with the upper left corner of the stage. If the x and y were 0, then the center of the image should have aligned with the upper left corner. Test it for yourself.

square.x = 0
square.y = 0

Test your work. Notice the center of the image is now in the upper left corner.

So, Corona positions objects initially setting their x and y to half the image height and width, to place the upper left corner of the image in the upper left of the stage.

Reference Point

The center of transformations for an object is called the reference point in Corona. You can position the reference point of an object using the xReference and yReference properties. Changing these values does not change the position of an object, instead it changes the center of transformation.

Think of the reference point as a pin holding your object to the stage. When you set the x and y it’s the pin that is placed at the new x and y coordinates. When the object rotates it rotates around the pin. By default the reference point is placed in the center. Imagine a pin stuck through the center of the object.

The reference point can be manipulated by changing the xReference and yReference. This is useful, since in some cases it will be more convenient to position or transform an object from the upper left corner or location other than the center.

Try it for yourself. Move the reference point to the upper left corner. In my example the image I used was 100px by 100px. By default xReference and yReference are 0 and 0. To move the reference point to the upper I’ll need to set the xReference and yReference to negative half the width and negative half the height, -50 and -50.

square.xReference = -50
square.yReference = -50

Change the x, y and rotation properties a few times each and test your project with each change. You’ll notice the image is transforming around a point in the upper left.

Alternately you can use the following method to set the reference point to the upper left corner of an object. Chnage object to the name of your object, square in my example.

object:setReferencePoint( display.TopLeftReferencePoint )

Removing images

It is important to remove objects when they are not in use. Bit map images take up large chunks of memory. Which, on mobile devices is a scarce resource.

To properly remove an object you need to remove it explicitly from it’s parent. This can be done in one of two ways.

image.parent:remove( image )
-- or --
image:removeSelf()

Sometimes this is not enough to free up memory used by the object. You also need to remove any references to the objects. These references are stored in variables. In the example above the variable square is assigned and holds a reference to a display object after this line:

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

After this line, square can be used reference the display object containing the image “square.png”. This variable also ensures that the memory used by the image”square.png” is not released.

To ensure that an object is released from memory when you are done with it you need to set the value of any variables referencing it to nil. The value nil is an empty, value think of it as no value. To remove square from the display and make sure it’s memory is freed you would want to do the following.

square.parent:removeSelf()
square = nil

 

 

 

 

 

 

2011
10/30
CATEGORY
Corona
Write comment

What’s ePub?

The ePub format is a popular and well supported format for creating electronic publications. This is a great format to get your work on to the iPad and iPhone and most other mobile devices.

How does it work?

The system is based on XHTML and XML. Without getting into the technical details let’s just say it’s similar to creating a web page.

To create an ePub file you’ll need all of the tools you might use to create a web page, an HTML editor or plain text editor. You’ll also need something to convert your final book into a zip file.

ePub files are organized in a folder named for the book. This folder contains a few other files and folders.

A folder named META-INF, which contains files describing your book and it’s content.

A file named mimetype which defines the file type as an epub file.

The OEBPS folder, which contains all of the content of your book. This folder will contain all of the HTML pages and images that will make up the actual book. This folder also contains a CSS style sheet file to format and style your book. Two last files stored in the OEBPS folder are the content.opf and toc.ncx files. These are plain text file containing XML. The content.opf contains a list of all of the content in your book. This lists all of the HTML, CSS and image files used in the book content. For each item it lists the file path of the source file and the files type and assigns each a an id. The toc.ncx file defines a table of contents for the book. This file lists all of the content and assigns each a navPoint and playOrder. These define the order the pages are displayed in the book. Think of this as linking all of the pages together in order.

Package and compress

Once all of the HTML files and other files are completed your ePub file needs to be packages and compressed. On the Mac you can use the ePub Zip. Just drag and drop the folder containing your book on to ePub Zip.

Reading ePub books

There are several reads for ePub books. On the iPad/iPhone you can use iBooks. On your desktop you can use Adobe Editions.

Sadly the Kindle doesn’t support ePub, though there seems to be a few work a rounds that allow the Kindle read ePub.

More information

Here’s a tutorial on creating a photo book in the epub format: http://next.blurb.com/2011/02/17/how-to-make-an-ipad-photo-book/

2011
10/13
CATEGORY
CSS
HTML
IOS
TAGS
Write comment

What’s new in Firefox 6

http://hacks.mozilla.org/2011/08/firefox6/

Looks like some new interesting things. Looks Firefox now supports touch events.

2011
08/17
CATEGORY
HTML
Javascript
Write comment

JQuery UI and JQTouch

On a current project I wanted to use the JQuery UI Slider in a JQTouch project. Turns out that Mobile Safari rewires all of the standard JS events. Think about it. A standard mouseDown event on mobile device has more implications. Did a user want to drag an element? Did they want to scroll the page? Did they want want to pinch zoom? It’s hard for mobile Safari to tell. From a quick look at the Apple Developer site it appears that Mobile Safari “flattens” all the mouse events into a single action. When you tap and lift your finger mobile Safari fires mouseOver, mouseMove, mouseDown, mouseUp and click. At this point you’ve lifted your finger and your drag action isn’t really going to work.

After a search I ran across a few fixes for this. Here’s a link to one

http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

This seemed to work well, though it had the problem of also nixing touch scrolling in my project. Since all of the mouse events were now rewired Mobile Safari was not getting the events it needed to scroll with a swipe.

Looking under issues on the Google Project site I found a few people had asked about this. The author had posted a fix which seemed to work well.

2011
08/12
CATEGORY
Javascript
Write comment