Simple Animation in Flex

Animation!! I think most people are interested in. But the theory behind it is far away from MY understanding. Presented here is some simple thing, that gives a illusion of some object's movement.

The definition goes like, "a sequence of images, each one displayed for a small amount of time". So what we are up to? The one I did is not a sequence of images, may be in the future I will try to do one. 


To make an illusion, I think, it is enough to move some objects, but in a meaningful way. Just wanted to share my experience about my first animation using Flex.



Before proceeding, I think the reader is a bit familiar with Flex controls or at least he/she is able to understand the code below. 

The idea is here, I want to create some illusion that a wall made of bricks (red ones! that's the color of it), is moving. Moving where? The answer is no where. Have an illusion of moving infinitely, but actually after some time, the pattern is repeated. Yes! it should repeat.


As I said, no Images concept. The whole design is as follows

  • Create the layout [the wall in our case]
  • Make some part of the layout movable [you will see how]
  • Move it. Loop it. [Infinite or Key Control? As you wish]

Create the layout
As we have already decided to move a wall (a brick wall), the layout should resemble a brick wall. Isn't it?

A wall is indeed a Rectangle, geometrically. Lets draw the outline of the wall first.

<s:Rect x="50" y="50" height="100" width="300">
    <s:stroke>
        <s:SolidColorStroke color="0xffffff" weight="2" caps="square"/>
    </s:stroke>
    <s:fill>
        <s:SolidColor color="0xB22222"/>
    </s:fill>
</s:Rect>


So, a rectangle of height 100 width 300, is drawn at (50, 50), outline white, filled with Brick red and of course on a black background (use backgroundColor property in s:Application, to set a background color), to be more visible. The output of the above piece of code would be


You can ask "It is just a brick, not wall.". Lets make the brick a wall. The second part of the layout is drawing bricks in the wall. But how many rows of bricks is big question. Have it big, have just four rows. My mind is saying:)

Theoretically, four rows of bricks, technically three (we need only three as outline is already drawn) straight lines at equal distance from each other.

So, draw the lines.

<s:Line x="50" y="75" width="300">
    <s:stroke>
        <s:SolidColorStroke color="0xffffff" weight="2" caps="square"/>
    </s:stroke>
</s:Line>

<s:Line x="50" y="100" width="300">
    <s:stroke>
        <s:SolidColorStroke color="0xffffff" weight="2" caps="square"/>
    </s:stroke>
</s:Line>

<s:Line x="50" y="125" width="300">
    <s:stroke>
         <s:SolidColorStroke color="0xffffff" weight="2" caps="square"/>
    </s:stroke>
</s:Line>

And now the layout is done and it would look like



Make some part of the layout movable
The crucial part in animation, I think the movables. To the user, the brick moves, to us, the vertical lines across the rectangle moves. Right?

Brick walls have some common appearance, or would say a pattern. Odd numbered rows have same arrangement of bricks, while the even ones have different arrangement. Stories apart, the movable part in our case is bunch of lines. How many? Again to make it simple, assume six lines (each at a distance of 50, covering the width 300). There are total of 6 * 4 = 24 lines. Calculating the exact location manually seems a bit harder. Lets write as usual an init function to put the lines in place.

The init function actually places the lines at exact locations, a simple math. I tried it to be simple, very simple to code and understand. Lets have a look at the init function.


public function init():void
{
    var i:Number;

    a2d  = new Array();
    row1 = new Array();
    row2 = new Array();
    row3 = new Array();
    row4 = new Array();

    row1.push(v1, v2, v3, v4, v5, v6);
    row2.push(v7, v8, v9, v10, v11, v12);
    row3.push(v13, v14, v15, v16, v17, v18);
    row4.push(v19, v20, v21, v22, v23, v24);

    a2d.push(row1, row2, row3, row4);

    for (i = 0; i < 6; i++) {
        row1[i].x = 50 + i * 50;
        row3[i].x = 50 + i * 50;

        row1[i].y = 50;
        row3[i].y = 100;
    }

    for (i = 0; i < 6; i++) {
        row2[i].x = 75 + i * 50;
        row4[i].x = 75 + i * 50;

        row2[i].y = 75;
        row4[i].y = 125;
    }

    t = new Timer(100, 0);
    t.addEventListener(TimerEvent.TIMER, move_bricks);
    stage.addEventListener(KeyboardEvent.KEY_DOWN, start_timer);
    stage.addEventListener(KeyboardEvent.KEY_UP, stop_timer);
}


The timer is used here to move the lines at a particular interval and of course the animation is played upon a Key press. Just like an object (say a car) moves on pressing the UP key. After this piece of code has been added. The actual brick wall is ready.



Move it
Move the lines in a meaningful way to create some sort of illusion. I have hard-coded few things, just to make it work more smooth. The movement code is rather simple

public function move_bricks(event:TimerEvent):void
{
    var arr:Array;
    var line:Line;
    for each (arr in a2d) {
        for each (line in arr) {
            line.x -= 5;
            if (line.x < 50)  
                line.x = 345;
        }
    }  
}

public function start_timer(event:KeyboardEvent):void
{
    if (event.keyCode == Keyboard.RIGHT)
        t.start();
}

public function stop_timer(event:KeyboardEvent):void
{
    if (event.keyCode == Keyboard.RIGHT)
        t.stop();
}

So, if my RIGHT key is pressed, then the wall will start moving, and when I take my hands off, it stops.

ITS MOVING REALLY:)

Related


See also 

1 comment:

  1. Now that's a hardcore way to make a moving brick wall....

    ReplyDelete