I am chugging right along on this application- and, you guessed it, a cootie catcher. The next step is to create a simple animation of the paper toy opening and closing (based on user selection).

The task: based upon a button click, animate 3 images to simulate the opening and closing of the toy. Slightly more complex than the last application- Airplane Pie (an image revealed by a button).

To simplify this even more, I’m pretending the user selects “Blue”. For those of you that don’t know the game, that means the toy opens and closes 4 times (the number of letters in Blue). So we have a static number- 4, and one button to manage the input. We don’t have to handle passing parameters to objective-c classes (for this example, at least).

1. Create a View-Based application in xCode. Let’s call it Example.

2. In the ViewController.h, we will call the method:

- (IBAction)clickBlue:(id)sender;


3. In the ViewController.m, add the code for the method:

- (IBAction)clickBlue:(id)sender;
{

}


We’ll fill in that code later.
For shits and giggles, build & run. You should see a gray screen on your emulator iPhone.

4. Open up Interface Builder (IB), the ViewController.xib file. Open the View.

5. If you want, setup an initial image. Add an image to the View.

Note: To add an image to your project, go to your finder, and find a photo, drag it over to xCode’s “Resources” folder for your Project. It’s now available in the Library/Media pane of Interface Builder.

Add 2 more images to the xCode properties folder, for the animation. Don’t add them to the View, though, in Interface Builder.

6. Create a button, call it “BlueButton” and put it somewhere on your View.

7. Now, we are going to connect our interface objects to the classes and methods of our code. So Ctrl-Click on the Button, and drag to the “File Owner”- this is the object in a separate window represented by a yellow box. At that point you should see “ClickBlue” action name pop up. Yay!

8. Ctrl- Click from “File Owner” to the View (anywhere gray on your View). You are now associating inherited objects from the View as outputs from your code.

9. Save, go back to xCode. We are now going to setup our variables and objects and expand the BlueClick method.

10. In the ExampleViewController.h file, add the button variable to the interface block:

IBOutlet UIButton *BlueButton;


13. Add property variables to the bottom before @end:

@property (nonatomic, retain) IBOutlet UIButton *BlueButton;


14. In the implementation file (ExampleViewController.m) we will synthesize the objects:

@synthesize BlueButton;


15. Let’s add the animation! So now we’re going to do a couple of things:

• Create an image view in line, without bothering to do it throughout the project
• Also create image objects as we go- this is an interesting aspect of Objective-C, that you can create variables in otherwise local contexts and use them throughout. I’m just doing it here because it’s less code. The button had to be declared as it’s an interface object.

First we’re going to create our own animation method, so we can call it from various points.

-(void) animateCootie{

}


Now we’re animating an ImageView, which is a kind of view container that holds various images. We will define an array that has the images in it.


NSArray *myImages = [NSArray arrayWithObjects:
[UIImage imageNamed:@"tall.png"],
[UIImage imageNamed:@"closed.png"],
[UIImage imageNamed:@"wide.png"],
[UIImage imageNamed:@"closed.png"],
nil];


Don’t forget to leave that last item in the array as nil. Also, you can pass already created image variables in there instead of creating them on the fly. I repeat “closed” because this is how it looks in real life, when you play the game.

Create the ImageView. Image Views are view containers specifically for Images, and also have this neat quick animation methods – instead of getting too deep into the animation options (which is fascinating, btw).

UIImageView *myAnimatedView = [UIImageView alloc];


I had to redefine the rectangle so it overlays the earlier ImageView more precisely, then associated the frame with the ImageView. You can also do a simple initWithFrame: [self bounds], instead. If you know how to do this better, I’m all ears. Values are: x, y (starting points), and width & height.

CGRect myImageRect = CGRectMake(3,43, 300,320);
[myAnimatedView initWithFrame:myImageRect];
[myAnimatedView initWithImage:[UIImage imageNamed:@"closed.png"]];

The last line above starts the animation off with an initial image.

There are various settings, but these ones directly concern me:

myAnimatedView.animationDuration = 1.0;// seconds
myAnimatedView.animationRepeatCount = 2; // number of times repeated


Remember to associate your array with the ImageView:

myAnimatedView.animationImages = myImages;


And the final command to get it going! First one starts the animation, second pops it into existing context and view, and third releases the memory object after it’s finished.

[myAnimatedView startAnimating];
[self.view addSubview:myAnimatedView];
[myAnimatedView release];


16. There’s one last bit: getting it to run with the Click touch. So from your BlueClick method:

[self animateCootie];


17. Build and Run!

Troubleshooting

Here are some common problems:

• I got this error quite a bit: unrecognized selector sent to instance. It’s because: I wasn’t in the right context. I moved the animation block out to its own, and then referenced it from the Click method. That solved *a lot * of problems.
• I tried to animate within a Window, or a Delegate, and not a ViewController. Once I re-made my app from a basic View class, and used the ViewController class to put my animate methods in it, it all worked a lot better.
• Interactive problems- setting up the objects in the View to be outlets from the ViewController (“File Owner”). Ctrl-Click on the objects to see the ownership properties, and relationships.
• Odd emulator crashes. I figured out the IB console- ctrl-shift-R, which can give you specific errors. Whew!

Helpful Sources / More Reading

• Learning Objective-C
  IphoneExamples.com– Most of this animation code block is cribbed from the simple “animation example” which is great.

• Core Animation Programming Guide More than you want to know about Apple’s Animation options for the iPhone, and Cocoa apps
• Cocoa Touch tutorial: iPhone Application Example I love this simple explanation of interactivity using Interface Builder, great screen shots too.
• Creating an iPhone Application I keep on coming back to this page – it’s varied and has lots of good stuff in it. Kind of overwhelming for the beginner, though.

Next Steps

– Get user input to set the colors & variables
– Passing parameters to the method (not locking them into “Blue”, ha!)
– Shorter animation cycle, with alternating image