Couple of weeks back we published an article which introduced the wonderful world of iPhone programming. This article takes a step further and explains how to create animation using the image sequences.

Downloading Image Sequences:

This article is based on the CampFire iPhone application demo published on http://www.appsamuck.com website. You can download the complete code and the images used in the article using the link provided on their website

Creating Campfire Application:

Open XCode and start a new project. Select View based application from the project templates. Name your application "Campfire", this will create appropriate files using the application name. Open xib file and drag a UIImageView on the screen. The UIImageView control is used to display images on the iPhone screen.

Next, open the CampfireViewController.h file and implement the following code:



The CampfireViewController declares the UIImageView control and expose it using the "imageView" property. The implementation file is shown below:



The viewDidLoad is fired when the View is loaded successfully. The imageView.animationImages is a NSArray which contains the information about the images. The images are kept in the NSArray in the form of UIImage instance. UIImage is used to display image. The imageNamed property of the UIImage class is mapped to the image names. The animationDuration represents the total time the animation will run. The animationRepeatCount is assigned zero which means the animation will run continuously. Finally, we call the startAnimation method to start the animation. The animation shows the fire and since it is looping through the images very quickly it seems like a movie is being played on the iPhone.

In the implementation above we have hard-coded the images. This is reasonable if you have 10-20 images but as soon as you have hundreds of images this technique will become a big headache. In the next section we will demonstrate how to fetch the images from the resources folder an perform the animation.

Fetching Images from Folder:

First, create a new folder called "BonFireImages" under the Resources folder and place all the images in it. The code below shows how to fetch images from the "BonFireImages" folder and then start the animation.  



The NSBundle is used to locate different resources in the project structure. The pathsForResourcesOfType method is used to fetch the resources of type "gif" contained in the "BonFireImages" folder. You can also supply "nil" to the inDirectory property and it will work fine but it is a good idea to narrow down the search for the resources you are looking for by providing the directory name. We then loop through the NSArray and create UIImage instances. The imageNamed property is set to the name of the file. The UIImage instances are finally added to the images NSMutableArray collection.

Run the application and you will see that now the images are fetched from the directory and the animation runs perfectly as before.

Resources:

1) www.appsamuck.com
2) Introduction to IPhone Development

Conclusion:

In this article we learned how to animate a sequence of images. We also learned how to structure the application property by putting all the images in the directory instead of hard-coding the image names in the code.