Animated Images

Hi, I am Troy McClure! You may remember me from such tutorials as “Where have my pointers gone!” or “Creating a Klingon translator with Cobol”.

Today we will learn to use Cell·SDK to create a special kind of images: the Animated Images. Movement proves walking, so create a new project and call it AnimatedImages:

First thing you need to know is: what is an animated image? Well, an animated image is having an image file like this one:

This is the image we will use in this tutorial, and you can find it within the Resources directory.

And you may guess that we will animate by dividing the image in frames and showing them ordered, and you are right. There are some things you will need to know to get this animation working:

- The height and width of the complete image.

- The height and width of each individual frame.

- The number of frames the animated image has.

Important: due to efficiency you cannot create an animated image bigger than 2048×2048 pixels, so talk to your designer and make him know.

Now adds this image to the Content project.

This image dimensions are:

- Complete file: 1020×868

- Frames: 204×217

- Frames number: 19.

Now we have all the information we need to create the animation. Let go, and add this code to theInitialize() method:

StripAnimation animation = new StripAnimation(1020, 868, 204, 217, 19);
 

StripAnimation class is located in the namespace Syderis.CellSDK.Core.Animations and it is used to iterate over different components in an image.

Instantiate now an AnimatedImage variable:

AnimatedImage img = ResourceManager.CreateAnimatedImage("ball");

 And add the StripAnimation variable you created early:

img.AddAnimation("bounce", animation);

 I am sure you remember the different constructor flavors the class Label has, don’t you? There was a constructor that receives an AnimatedImage parameter, so use that constructor to create a Label to add it to the application:

AddComponent(new Label(img), 10, 100);

 Just build and run your application:

Umm, but this is not animaton… I see you are a clever boy/girl.

Now you will learn the very first method you need to know to play with an animated image:

- void Play(bool looped): This method initiates the animation, it receives a bool parameter indicating whether the animation will be looped … once again, you are clever.

So our Initialize() method should look like:

public override void Initialize()
{
    base.Initialize();
     
    // TODO: Replace these comments with your own poetry, and enjoy!
    StripAnimation animation = new StripAnimation(1020, 868, 204, 217, 19);
    AnimatedImage img = ResourceManager.CreateAnimatedImage("ball");
    img.AddAnimation("bounce", animation);
    AddComponent(new Label(img), 10, 100);
    img.Play(true);
}

If you build and run you will see a bouncing ball.

AnimatedImage class has some useful methods you should now:

- NextFrame(): Which lets go to the next frame in the animation

- PreviousFrame(): Which lets you go to the previous frame in the animation.

- Pause(): Which lets you pause the animation.

- Stop(): Which lets you stop the animation.

- EndedCurrentStripAnimation: This is an event thrown every time the animation ends.

Ass you can guess you can use NextFrame() and PreviousFrame() to control manually some things of the animation, as the velocity.

Now we are going to add three buttons, one for each function: play, pause and stop.

We will add a label where we will be incrementing the number of times the animation ends doing this by subscribing to EndedCurrentStripAnimation.

The complete code should look like this:

class MainScreen : Screen
{
    private AnimatedImage img;
    int numberPlayed;
    Label playNumbers;
    public override void Initialize()
    {
        base.Initialize();
        SetBackground(ResourceManager.CreateImage("bg_mobile"), Adjustment.CENTER);
        // TODO: Replace these comments with your own poetry, and enjoy!
        StripAnimation animation = new StripAnimation(1020, 868, 204, 217, 19);
        animation.FramesPerSecond = 40;
        img = ResourceManager.CreateAnimatedImage("ball");
        img.AddAnimation("bounce", animation);
        img.EndedCurrentStripAnimation += new EventHandler(img_EndedCurrentStripAnimation);
        numberPlayed = 0;
        AddComponent(new Label(img), 10, 100);
        Button play = new Button("Play");
        Button stop = new Button("Stop");
        Button pause = new Button("Pause");
        play.Released += new Component.ComponentEventHandler(play_Released);
        stop.Released += new Component.ComponentEventHandler(stop_Released);
        pause.Released += new Component.ComponentEventHandler(pause_Released);
        playNumbers = new Label("0");
        AddComponent(play, 150, 100);
        AddComponent(stop, 150, 150);
        AddComponent(pause, 150, 200);
        AddComponent(playNumbers, 10, 50);
    }
    void img_EndedCurrentStripAnimation(object sender, EventArgs e)
    {
        numberPlayed++;
        playNumbers.Text = numberPlayed.ToString();
    }
    void play_Released(Component source)
    {
        img.Play(true);
    }
    void stop_Released(Component source)
    {
        img.Stop();
    }
    void pause_Released(Component source)
    {
        img.Pause();
    }
    public override void BackButtonPressed()
    {
        base.BackButtonPressed();
    }
}

You can build and run and play just a little.

Last thing you could do is add this line to make the animation more beautiful:

animation.FramesPerSecond = 40;

Sumary

You have learned how to create an animated image and added to a label. If you remember the buttons constructors, it is the same.

You have learned the basics methods an animated image has, and how to use them to manipulate the animation.

Troy Mcclure: See you in the other tutorials.

“Keep on cool-coding.”