Introduction

 

This section will guide you how you can use Aspose.Flash to create flash animation from scratch. Before proceeding, some background knowledge of Flash file format will be useful.

 

Background knowledge of Flash File Format

 

Flash File Structure

 

The Flash File Format is a collection of tags (records). The first record is called Header, which header contains such information like signature, version, file length, frame size, frame rate, frame count.

 

Followed by Header comes a list of tags which end with a special tag called end tag. Please see the diagram below.

 

Flash (SWF) File Structure

 

Types of Tags

 

There are two types of tags

 

Definition Tag

 

These tags are used to define the content of the Macromedia Flash (SWF) movie e.g the shapes, text, bitmaps and sounds etc. Each definition tag assigns a unique ID called a character to the content it defines. The player then stores the character in a repository called the dictionary.

 

Aspose.Flash has number of classes for Definition Tags, few of them are.

• DefineShape2
• DefineSprite2

 

Control Tag

 

Control Tags are used to manipulate characters in the dictionary, and control the flow of the movie. For example, control tags can be used to place characters on the screen, start sounds, and to tell the player to go to another frame in the movie.

 

Aspose.Flash has number of classes for Control Tags, few of them are.

• PlaceObject2
• ShowFrame
• SetBackgroundColor

 

Dictionary

 

As mentioned earlier, Definition tags define contents of flash movie and assign them a unique id called Character ID. After being defined, these contents are called a Character. During playback, Flash Player copies all the Characters (contents defined by definition tag) inside a repository called Dictionary and makes them available for Control tags by their Character ID.

 

Control Tags then retrieve these characters from Dictionary using their IDs and perform some action on them e.g. displaying a shape, playing a sound etc.

 

Display List

 

Like Dictionary, Display List is also a repository of characters. It is also built by Flash Player during the playback of flash files. Flash player copies selected tags from the Dictionary to Display List for displaying them in the next frame. Which tags are to be displayed in next frame are determined by Control Tags discussed earlier.

 

Each character on the display list is assigned a depth value. The depth determines the stacking order of the character. Characters with lower depth values are displayed underneath characters with higher depth values. A character with a depth value of 1 is displayed at the bottom of the stack. A character may appear more than once in the display list, but at different depths. There can be only one character at any given depth.

 

Processing of Flash File

 

The player processes all the tags and builds the Display List of selected characters to be shown in next frame until it encounters ShowFrame tag. At this point, the Display List is copied to the screen and the player is idle until it is time to process the next frame.

 

Shapes

 

A Flash shape is defined by DefineShape2 tag. Its layout is shown in the figure below.

 

 

DefineShape2 is comprised of following elements.

 

CharacterId	A 16-bit value that uniquely identifies this shape as a ‘character’ in the dictionary. The CharacterId can be referred to in control tags such as PlaceObject. Characters can be re-used and combined with other characters to make more complex shapes.
Bounding Rect	The rectangle that completely encloses the shape.
Fill Styles	A list of all the fill styles used in a shape. A fill style can be a Solid Fill, Gradient Fill or Bitmap Fill and they are represented by Aspose.Flash classes namely SolidFill, GradientFill and BitmapFill respectively. A StyleChangeRecord discussed below has a member named FillStyle which is used as an index in this array to select a new fill style.
Line Styles	A list of all the line styles used in a shape. Aspose.Flash has a class named SolidLine for this array. A StyleChangeRecord discussed below has a member named LineStyle which is used as an index in this array to select a new line style.
Shape Records	A list of shape records. Shape records can define straight or curved edges, style changes, or move the current drawing position. Aspose.Flash has a class named StraightEdgeRecord for defining straight edges and CurvedEdgeRecord for curved edges and StyleChageRecord for changing line style or fill style or current drawing position. Each of these shape records are discussed below.

 

Shape Records

 

Style Change Record

 

This is a type of Shape Record and represented by Aspose.Flash.Shapes.StyleChangeRecord class.

 

This record is used to change the line style and fill style of the following shape records or to change the current drawing position.

 

To change the line style, change StyleChangeRecord.LineStyle property, which acts as an index into the line styles array of DefineShape2 discussed above.

 

To change the fill style, change StyleChangeRecord.FillStyle property, which acts as an index into the fill styles array of DefineShape2 discussed above.

 

To change the current drawing position, specify the delta X-Y of the new drawing position. Initially, current drawing position is set to (0, 0). Assume, our current drawing position is (20, 30) and we want to change it to (10, 40), it means the value of new delta X-Y will be (-10, 10). To specify delta-X and delta-Y, use StyleChangeRecord.DeltaX and StyleChangeRecord.DeltaY properties.

 

Straight Edge Record

 

This type of shape record holds the delta X-Y of the second end point of the edge. First end point is considered to be current drawing position. Suppose, current drawing position is (X, Y) and we want to draw line to (X’ , Y’), then delta X-Y will be calculated as below

 

delta-X=X’-X

delta-Y=Y’-X

 

To define straight edge record, use Aspose.Flash.Shapes.StraightEdgeRecord class. To specify delta-X and delta-Y, use StraighEdgeRecord.DeltaX and StraighEdgeRecord.DeltaY properties.

 

Curved Edge Record

 

Curved edges are represented by three points. Two of them are end points of the curve and called anchor points while the middle one is control point, because it controls the shape of the curve.

Curve Edge Record holds the delta X-Y positions of second and third point of the curved edge, which are called Control Delta and Anchor Delta respectively. First point of the curved edge is considered to be current drawing position.

 

[First Point] = [Current Drawing Position]

[Second Point] = [First Point] + [Control Delta]

[Third Point] = [First Point] + [Control Delta] + [Anchor Delta]

 

Flash supports Quadratic Bezier Curves rather than Cubic Bezier Curves which are supported by most vector graphics drawing applications.

 

Curved Edge Record is defined using Aspose.Flash.Shapes.CurvedEdgeRecord class.

 

Sprites

 

A sprite is a movie clip contained inside the Flash. It is defined by using DefineSprite2 tag. It consists of CharacterID, a frame Count and a series of control tags. All the characters referred by control tags must be defined before the defining sprite.

 

Sprite is defined using Aspose.Flash.Swf.DefineSprite class

 

Summary Background Knowledge

 

It is necessary to have some background knowledge of Flash files before we could create any Flash file using Aspose.Flash component. Flash files are composed of series of tags which are of two types i.e. Definition Tags, Control Tags.

 

Definition Tags define the contents of Flash files which are called Characters, while Control Tags define how these Characters will be displayed on the screen.

 

On playback, Flash Player copies all the Characters in a repository call Dictionary. Then it builds a Display List using Control tags which stores the contents that are to be displayed in next frame. As soon as it encounters ShowFrame tag, it shows the Display List on screen and sit idle until it is a time to process new frame.

 

Flash shapes are defined using DefineShape2 tag, which consists of series of shape records. Each shape record is one of three types

1. Style Change Record
2. Straight Edge Record
3. Curved Edge Record

 

Another definition tag is DefineSprite2, which is used to define the movie clip inside main Flash movie.

 

Creating Simple Shape

 

Before creating animated shape, it is a good idea to start with something simpler. So, let us learn how to draw a simple shape like rectangle. I assume, you have read the Background Knowledge section.

 

Steps

 

Following are the steps to create simple shape

 

1. Create a flash container using FlashContainer object
2. Define a rectangle character using DefineShape2 object.
3. Place the rectangle character on a display list using PlaceObject2 object
4. Show the frame using ShowFrame object
5. Write the flash container on disk

 

Sub-Steps

 

In the step 2 above, we define a rectangle using following sub-steps

 

1. Create a style change record using StyleChangeRecord object. Style change record is required to change the current drawing position and to select fill style and line style for the rectangle
2. Create four edges of rectangle using StraightEdgeRecord objects
3. Add all the shape records created above inside Shape object
4. Create fill styles array and line styles array
5. Create a definition tag using DefineShape2 object passing it fill styles and line styles array created in sub-step iv and shape object created in sub-step v

 

Example Code

 

Please see this code

 

C#

 

//  I    Create a Flash Container

//--------------------------------------------------------------------------

//  II   Define a Rectangle using Aspose.Flash.Shapes.DefineShape2 Class

//       After being defined, Rectangle will be referred as Character

//--------------------------------------------------------------------------

//  III  Place the Rectangle Character on Display List using

//       Aspose.Flash.Swf.PlaceObject2 to render it on next frame

//       by Flash Player

//--------------------------------------------------------------------------

//  IV   Display next frame using Aspose.Flash.Swf.ShowFrame

//--------------------------------------------------------------------------

//   V   Write Flash Container on disk

//--------------------------------------------------------------------------

 

 

//  ********************************************

//                    STEP I                 

//  ********************************************

 

//Create a flash container and set frame size and frame rate

FlashContainer fc = new FlashContainer();

fc.FrameRate = 12.0f;

fc.FrameSize = new Rect(0, 0, 4000, 4000);

 

//  ********************************************

//                    STEP II                 

//  ********************************************

 

//To define rectangle, we need to define four straigh edge records

//and one style change record to set its fill style and line style

 

//Define Style Change Record

//Change the current drawing position by (-1000, -1000)

//Select the first fill style and second line style from

//[fill styles] array and [line styles] array

//[fill styles] array having RED and BLUE colors and [line styles]

//array having GREEN and ORANGE colors are defined below

StyleChangeRecord scr = new StyleChangeRecord(-1000,-1000);

scr.FillStyle = 1;  //Select RED    see Below

scr.LineStyle = 2;  //Select YELLOW see Below

 

//Define four edges of Rectangle

//The four edges below define a rectangle which starts

//from current drawing position having width and height 2000 units

//----------------------------------------------------------------

//Suppose Current Drawing Position is (-1000, -1000)

//-----------------------------------------------------------------

//Move 2000 units right from (-1000,-1000)

//Current drawing position is (1000,-1000)

StraightEdgeRecord ser1 = new StraightEdgeRecord(2000, 0);

//Move 2000 units below from (1000, -1000)

//Current drawing position is (1000,1000)

StraightEdgeRecord ser2 = new StraightEdgeRecord(0, 2000);

//Move 2000 units left from (1000, 1000)

//Current drawing position is (-1000,1000)

StraightEdgeRecord ser3 = new StraightEdgeRecord(-2000, 0);

//Move 2000 units above from (-1000, 1000)

//Current drawing position is (-1000,-1000)

StraightEdgeRecord ser4 = new StraightEdgeRecord(0, -2000);

 

//Put all the five shape records in a Aspose.Flash.Shapes.Shape

//object, this is just a collection that will hold shape records

//for DefineShape2 tag

Shape shapeRect = new Shape();

shapeRect.Add(scr);

shapeRect.Add(ser1);

shapeRect.Add(ser2);

shapeRect.Add(ser3);

shapeRect.Add(ser4);

 

//Define fill styles array

//Add two colors RED and BLUE in fill styles array

ArrayList fillStyles = new ArrayList();

fillStyles.Add(new SolidFill(new RGB(255, 0, 0)));

fillStyles.Add(new SolidFill(new RGB(0, 255, 0)));

 

//Define line styles array

//Add two colors GREEN and YELLOW in line styles array

ArrayList lineStyles = new ArrayList();

lineStyles.Add(new SolidLine(10,new RGB(0, 0, 255)));

lineStyles.Add(new SolidLine(50, new RGB(255, 255, 0)));

 

//At this point we have all the things to create an instance of

//DefineShape2 class

DefineShape2 defineShape = new DefineShape2(fc.NewIdentifier(),

new Rect(-1500, -1500, 1500, 1500), fillStyles, lineStyles, shapeRect);

 

//Add DEFINITION TAG created above inside the flash container

fc.Add(defineShape);

 

//  ********************************************

//                    STEP III                 

//  ********************************************

 

//Place the Rectangle Character on Display List

PlaceObject2 placeObj = new PlaceObject2(defineShape.Id, 1);

 

//Translate the origin of newly placed object

placeObj.MatrixTransform = new MatrixTransform(2000, 2000);

 

//Add CONTROL TAG created above inside the flash container

fc.Add(placeObj);

 

//  ********************************************

//                    STEP IV                 

//  ********************************************

 

//Show the next frame using CONTROL TAG and add it inside the

//flash container

fc.Add(new ShowFrame());

 

//  ********************************************

//                    STEP V                 

//  ********************************************

 

//Now write the flash container on disk to show its output

fc.Write("c:\\out.swf");

 

 

Creating Animated Shape

 

Now we will animate the rectangle created previously. I assume, you have read the Background Knowledge section and Creating Simple Shape section.

 

To animate the Rectangle, we will use sprite. Sprite is just like a flash movie and added inside the main flash movie. Unlike main movie, sprite does not have Characters of its own. So its control tags refer the main movie Characters to display them on Sprite frames.

 

Steps

 

Following are the steps to animate the rectangle.

 

1. Define the rectangle character using DefineShape2
2. Define the sprite movie using DefineSprite2
3. Place the rectangle character on the Display List of sprite movie using PlaceObject2
4. Show the next frame of sprite movie using ShowFrame

 

5. Add the movie character created in step 2 inside the main flash movie
6. Place the movie character on the Display List of main movie using PlaceObject2
7. Show the next frame of main movie using ShowFrame

 

8. Rotate the character at depth 1 on the Display List of main movie
9. Show the next frame of main movie and repeat from above step for N-times

 

10. Write the flash container on disk

 

Example Code

 

Please see the code below

 

C#

 

// I    Define a Rectangle using Aspose.Flash.Shapes.DefineShape2

//-----------------------------------------------------------------------

// II   Define a sprite movie using Aspose.Flash.Swf.DefineSprite

//-----------------------------------------------------------------------

// III  Place the rectangle character defined in STEP I inside the

//      Display List of the movie created in STEP II using

//      Aspose.Flash.Swf.PlaceObject2

//-----------------------------------------------------------------------

// IV   Show the next frame [first frame in this case] of the movie

//      using Aspose.Flash.Swf.ShowFrame

//-----------------------------------------------------------------------

// V    Add the movie inside the main movie

//-----------------------------------------------------------------------

// VI   Place the movie at depth 1 on the Display List of main movie

//-----------------------------------------------------------------------

// VII  Show the next frame of the main movie

//-----------------------------------------------------------------------

// VIII Rotate the object placed at depth 1 on the Display List

//      of main movie. We know, Sprite movie is present at the depth 1

//      of Display List of main movie.

//-----------------------------------------------------------------------

// IX   Show the next frame of main movie and

//      repeat Step VIII and IX - [N Times]

//-----------------------------------------------------------------------

// X    Write the flash container to disk

//-----------------------------------------------------------------------

 

 

//*************************************************

//              STEP I

//*************************************************

 

//-------------------------------------------------

//  [START]>>>>>>>>>SAME CODE AS ABOVE

//-------------------------------------------------

FlashContainer fc = new FlashContainer();

fc.FrameRate = 12.0f;

fc.FrameSize = new Rect(0, 0, 4000, 4000);

 

StyleChangeRecord scr = new StyleChangeRecord(-1000, -1000);

scr.FillStyle = 1; 

scr.LineStyle = 2; 

 

StraightEdgeRecord ser1 = new StraightEdgeRecord(2000, 0);

StraightEdgeRecord ser2 = new StraightEdgeRecord(0, 2000);

StraightEdgeRecord ser3 = new StraightEdgeRecord(-2000, 0);

StraightEdgeRecord ser4 = new StraightEdgeRecord(0, -2000);

 

Shape shapeRect = new Shape();

shapeRect.Add(scr);

shapeRect.Add(ser1);

shapeRect.Add(ser2);

shapeRect.Add(ser3);

shapeRect.Add(ser4);

 

ArrayList fillStyles = new ArrayList();

fillStyles.Add(new SolidFill(new RGB(255, 0, 0)));

fillStyles.Add(new SolidFill(