Bits & Bytes

Posts Tagged ‘tutorial’

Creating a Simple Animation in Actionscript 3.0

In this example, I create a red rectangle the moves back and forth across the screen. The primary purpose of this example is to show how to create a callback function for animation. So, I will not bother to explain too much about the coordinate calculations that are used for motion.

To create an animation, I could use a Timer object to set an time interval for the animation speed. However, it is better to use the frame rate of the application for controlling the animation. In this manner, the speed of the animation can be altered via the “Properties” window, and should be set to a level that is appropriate for the complexity of the program. The typical setting that is currently used for Flash is 24 frames per second. In order to set a callback that is called every frame, we can use the event ENTER_FRAME, as shown below.

addEventListener(Event.ENTER_FRAME, NextFrame);

// Create rect for sprite and add to stage
var qRect:Sprite = new Sprite();
var uiColor:uint = 0x00c00000;
qRect.graphics.beginFill(uiColor);
    qRect.graphics.drawRect(0, 0, 100, 75);
qRect.graphics.endFill();
addChild(qRect);

// Variables for motion control
var uiX:uint = 0;
var uiDeltaX:uint = 4;
var kuiMaxX:uint = 220;

// Animation callback
function NextFrame(e:Event) : void {
	uiX = ((uiX + uiDeltaX) % (kuiMaxX + 1));
	qRect.x = uiX;
	if (uiX == kuiMaxX || uiX == 0) {
		uiDeltaX = (kuiMaxX - uiDeltaX);
	}
}

Here, we have the code to move a rectangle back and forth across the screen. The first line of code sets the function NextFrame() as a callback that responds to the event that is generated at the start of a frame. After this, we have some code that creates a Sprite, draws a red rectangle on it, and adds the Sprite to the stage so that it will be displayed. In the next, three lines, we initialize the variables that will control the motion of the rectangle. Finally, we define the callback function, NextFrame(), which may seem confusing. We want to focus on the fact that this function sets the x-coordinate of the Sprite, qRect.x, to control the motion, while the rest of the code is just used for calculating the value of x.

Creating a Simple Motion Tween in Adobe Flash

In this post, I demostrate how to create a simple motion tween, which is an interpolated animation in Flash. This example creates a rectangle that moves across the screen, just like the one above.

1. Left-click the Adobe Flash icon under the Start menu to Open Adobe Flash.

2. Under “Create New,” left-click “Flash File” with the latest version of Actionscript.

3. Left-click the “Rectangle Tool” from the tools toolbar.

4. Left-click and drag to create a rectangle in the stage area.
5. Left-click “Selection Tool” in the tools toolbar.

6. Right-click the first frame in the Timeline an left-click “Create Motion Tween” in the pop-up menu.

7. This will pop up a dialog that says “The selected item cannot be tweened. …” Left-click the “OK” button to create the tween.
8. Now you can left-click and drag the right end of the tween region to stretch it over as many frames as you wish. We will leave it at the default length of 24 frames, which is 1 second.

9. Right-click the last frame, the 24th in our case, and mouse over “Insert Keyframe” and left-click “Position” in the submenu. You should now see a dot in that frame to indicate a keyframe.

10. Grab and drag the rectangle to a desired destination and you should a path of dots from the original position to the new position.
11. These dots represent when the rectangle will be at the intermediate frames.
12. To see the animation, left-click “Control” in the menubar and “Test Movie” in the submenu. You should now see a new window with the animation running in it.

UML Class Diagrams – part 5

Continued . . .

For this section, we pull together the material for modeling operations and attributes to give a specification of the full form and then discuss modeling for the appropriate level of detail. For attributes and operations, the name is always used, but the rest of the elements are optional. By convention, the class name is in the top box, followed by attributes and operations, respectively. This is the common convention that we have used and it is highly recommended, but UML does allow for any ordering.

For attributes, we have full form shown below. The name is mandatory, and the rest of the optional elements are shown in C++ template-style brackets ( < > ) to indicate that they are optional. First, we have the visibility, which is shown as +, #, –, or ~ for public, protected, private, or package level visibility, respectively. Then we have the name. The attribute could contain multiple instances of its type; the allowed range of multiplicity can be specified in bracket notation like this [0..1], [n], or [0..*], which correspond to {0, 1}, {n}, or {0, 1, 2, … } in set notation, respectively. After this, we have a colon followed by the type. Then an “=” and an initial value. Finally, we have a the properties list, each of which may have a value setting.

Attributes

<visibility> name <Multiplicity> <: Type> <= InitialValue> <{Properties}>

Properties

Property1 <= Value1>, ...

For operations, the full form is shown below. Again, the optional elements are show in C++ template-style brackets. Just as with attributes, we have the visibility followed by the name. Inside the parentheses, we have the arguments, which can have a direction, name, type, and default value, as shown under the Arguments heading. After the arguments, we have a colon and the return type. Finally, we have the properties in braces, just as with the attributes.

Operations

<Visibility> Name(Arguments) <: ReturnType> <{Properties}>

Arguments

<Direction1> <ArgName1> <: ArgType1> <= DefaultValue1> ; ...

Properties

Property1 <= Value1> , ...

Below, we have a class for creating cubic polynomials. These are polynomials of the form

F(x) = c₀x⁰ + c₁x¹ + c₂x² + c₃x³

= c₀ + c₁x + c₂x² + c₃x³,

where c_i is a constant coefficient of the appropriate degree. The function F() is used to evaluate the polynomial at a particular value of x. For this class, we will assume that a constructor exists (not shown) that initializes the cubic to be the zero polynomial (all zero coefficients).

class CCubic
{
public:
    double F(double dX = 0.0) const;
private:
    double mdaC[4];
};

This class can be diagramed in UML, as shown below, with in the fullest form for attributes and operations. Here, we use the assumption that the cubic is initialized in a constructor somewhere to be the zero polynomial; of course, that make the polynomial a constant and not a cubic. The coefficients can be changed, so we indicate that with the “changeable” property. Also, the function F() is “const” because does not change the values of the coefficients. Moreover, it is statically bound. Therefore, we have modeled it with the property specifications “isQuery” and “leaf” to indicate these properties.

This an elaborate specification, but is reasonable for modeling a simple class like this. However, for a diagram with many attributes and operations, this level of detail can get messy and difficult to read. Moveover, many of the details may not be relevant in a given context. For example, when designing this class it is probably not very important what the initial values of the coefficients are or the default value of dX in the function F(). So, we might use the cleaner version below.

Likewise, the fact that the coefficients are “changeable” is probably obvious as are the properties of the function F(). Furthermore, the use of doubles is probably clear and may not even be material to the design. So, we can throw those out as well as the obvious fact that dX is an input parameter. Our greatly simplified diagram now looks like this.

Finally, in a larger context, we may only be concerned that a cubic class exists and we can throw out the attributes and operations entirely, as we demostrate below. Notice that our diagram has three compartments, even though two ar empty. In this case, we could use simply one compartment with the class name or we could use three like this to indicate that it is important to keep in mind that this class has attributes and operations.

Categories

Recent Posts

Bits & Bytes

Posts Tagged ‘tutorial’

Creating a Simple Animation in Actionscript 3.0

Creating a Simple Motion Tween in Adobe Flash

UML Class Diagrams – part 5

Attributes

Properties

Operations

Arguments

Properties