Introduction

 

In the previous article Creating Animation, we learnt how to draw a simple shape like Rectangle inside Flash File using Aspose.Flash.

             

In this article we again need to define a rectangle shape, so I would briefly explain the steps to draw a shape.

 

Shape

 

In Flash, any shape is defined by Shape structure. The shape structure contains a list of records which are of three types

1. StyleChangeRecord
2. StraightEdgeRecord
3. CurvedEdgeRecord

 

StyleChangeRecord

 

This record has following three purposes.

1. It specifies the starting position for drawing the shape.
2. It selects the fill style from fill styles array to fill the shape
3. It selects the line style from the line styles array for the shape border.

 

StraightEdgeRecord

 

This record defines a straight line

 

CurvedEdgeRecord

 

This record defines a curved line

 

All these three records collectively form a shape with a fill and border.

 

DefineShape

 

Once the shape is defined by a Shape structure, it must be converted into a character. A character is anything that is to be displayed by Flash Player. Flash Player keeps all the characters in a repository called Dictionary.  To convert the shape into a character, we use DefineShape object of Aspose.Slides.

 

PlaceObject2

 

In order to display the character, we need to tell Flash Player to copy our character from Dictionary to Display List. For this purpose we use PlaceObject2 object.

 

Display List is a list of characters which are to be displayed in current frame. Flash Player shows all the characters in the display list as soon as it encounters ShowFrame tag, then it clears the Display List and starts building it again for the next frame.

 

ShowFrame

 

The ShowFrame object simply tells the Flash Player to display all the characters in the Display List.

 

Filled Rectangle with Border

 

Here is the full code that draws a rectangle shape with blue fill and red border

 

C#

 

void DrawRectangle()

{

    FlashContainer flash = new FlashContainer();

    flash.FrameRate = 12.0f; //Play 12 Frames/Second

    flash.FrameSize = new Rect(0, 0, 11000, 8000); //Frame Size

 

    //Create an object of Aspose.Flash.Shapes.Shape

    Shape shp = new Shape();

 

    //Define RED and BLUE colors

    //RED=255, GREEN=0, BLUE=0 and ALPHA=255 (fully opaque)

    RGB rgbRedColor = new RGB(255, 0, 0, 255);

    //RED=0, GREEN=0, BLUE=255  and ALPHA=255 (fully opaque)

    RGB rgbBlueColor = new RGB(0, 0, 255, 255);

   

    //Create fill styles for this shape

    //for example we want to fill shape with blue color

    //our fill styles would look like this

    ArrayList fs = new ArrayList();

    fs.Add(new SolidFill(rgbBlueColor));

 

    //Create line styles for this shape

    //for example, we want to draw shape with border

    //which is 50 units wide and has red color

    int lineWidth = 50;

    ArrayList ls = new ArrayList();

    ls.Add(new SolidLine(lineWidth, rgbRedColor));

 

    //Create an object of StyleChangeRecord

    //The purpose of this object is threefold

    // - It moves the starting position for drawing

    // - It selects the fill from fill styles array

    // - It selects the line style from line styles array.

    int X = 100, Y = 100;

    //move the starting position to X,Y

    StyleChangeRecord scr = new StyleChangeRecord(X, Y);

    //Now (X,Y) is starting and current position

    //

    //Select the first fill from fill styles array

    scr.FillStyle = 1;

    //Select the first line style from line styles array

    scr.LineStyle = 1;

    //Add it inside the shape

    shp.Add(scr);     

 

   

    //To draw a Rectangle, we need four StraightEdgeRecords

    //Below, we draw a rectangle RECTWIDTH and RECTHEIGHT units

    //wide and high respectively from current position

    //---

    //---

    int RECTWIDTH = 3000;

    int RECTHEIGHT = 2000;

    //Draw line from current position to new position

    //by moving X to RECTWIDTH units RIGHT

    //and change the current position to new position

    shp.Add(new StraightEdgeRecord(RECTWIDTH, 0));

    //Draw line from current position to new position

    //by moving Y to RECTHEIGTH units DOWN

    //and change the current position to new position

    shp.Add(new StraightEdgeRecord(0, RECTHEIGHT));

    //Draw line from current position to new position

    //by moving X to RECTWIDTH units LEFT

    //and change the current position to new position

    shp.Add(new StraightEdgeRecord(-RECTWIDTH, 0));

    //Draw line from current position to new position

    //by moving Y to RECTHEIGTH units UP

    //and change the current position to new position

    shp.Add(new StraightEdgeRecord(0, -RECTHEIGHT));

 

    //Create an object of DefineShape to convert

    //the rectangle shape into a Character

    //

    //ID to be assigned to this shape character

    int shpID = flash.NewIdentifier();

    //Rectangle that bounds the shape completely

    Rect boundingRect = new Rect(X, Y, X + RECTWIDTH, Y + RECTHEIGHT);

    //Define the shape as a character and add into flash file

    flash.Add(new DefineShape(shpID, boundingRect, fs, ls, shp));

 

    //Create an object of PlaceObject2 to place

    //the shape character on display list at depth 1

    int depth = 1;

    flash.Add(new PlaceObject2(shpID, depth));

 

    //Show the Frame

    flash.Add(new ShowFrame());

 

    flash.Write("c:\\rect.swf");

}

 

Output – DrawRectangle method

 

 

Matrix Transformation

 

Matrix Transformation is used to transform the existing shape.  There are three forms of transformation.

 

Translation

 

Changes the origin of the shape or move the shape to some position

 

Scaling

 

Changes the size of the shape in X-Y direction. It is used to enlarge or shrink the shape.

 

Rotation

 

Rotates the shape clockwise/anti-clockwise by some angle.

 

Moving and Enlarging Rectangle

 

Now we will move and enlarge the rectangle shape created previously.

 

Steps

1. Create the transformation matrix
2. Specify translation, the number of coordinates to move the shape
3. Specify the scaling, the units of scale to enlarge the shape
4. Place the shape on the display list with the transformation matrix.

 

Code Example

 

C#

 

//Build the transformation matrix

int MOV_XPOS = 500, MOV_YPOS = 1000; //X and Y position to move

MatrixTransform mtx = new MatrixTransform();

mtx.Translate(MOV_XPOS, MOV_YPOS); //Translate  

mtx.Scale(3.0f, 3.0f); //Scale 3 units in both (X-Y) directions

 

//Create an object of PlaceObject2 to place

//the shape character on display list at depth 1

//with the transformation matrix

int depth = 1;

PlaceObject2 placeObj2 = new PlaceObject2(shpID, depth);

placeObj2.MatrixTransform = mtx;

flash.Add(placeObj2);

 

Below is complete code.

 

C#

 

void TransformRectangle()

{

    FlashContainer flash = new FlashContainer();

    flash.FrameRate = 12.0f; //Play 12 Frames/Second

    flash.FrameSize = new Rect(0, 0, 11000, 8000); //Frame Size

 

    //Create an object of Aspose.Flash.Shapes.Shape

    Shape shp = new Shape();

 

    //Define RED and BLUE colors

    //RED=255, GREEN=0, BLUE=0 and ALPHA=255 (fully opaque)

    RGB rgbRedColor = new RGB(255, 0, 0, 255);

    //RED=0, GREEN=0, BLUE=255  and ALPHA=255 (fully opaque)

    RGB rgbBlueColor = new RGB(0, 0, 255, 255);

 

    //Create fill styles for this shape

    //for example we want to fill shape with blue color

    //our fill styles would look like this

    ArrayList fs = new ArrayList();

    fs.Add(new SolidFill(rgbBlueColor));

 

    //Create line styles for this shape

    //for example, we want to draw shape with border

    //which is 10 units wide and has red color

    int lineWidth = 50;

    ArrayList ls = new ArrayList();

    ls.Add(new SolidLine(lineWidth, rgbRedColor));

 

    //Create an object of StyleChangeRecord

    //The purpose of this object is threefold

    // - It moves the starting position for drawing

    // - It selects the fill from fill styles array

    // - It selects the line style from line styles array.

    int X = 100, Y = 100;

    //move the starting position to X,Y

    StyleChangeRecord scr = new StyleChangeRecord(X, Y);

    //Now (X,Y) is starting and current position

    //

    //Select the first fill from fill styles array

    scr.FillStyle = 1;

    //Select the first line style from line styles array

    scr.LineStyle = 1;

    //Add it inside the shape

    shp.Add(scr);

 

    //To draw a Rectangle, we need four StraightEdgeRecords

    //Below, we draw a rectangle RECTWIDTH and RECTHEIGHT units

    //wide and high respectively from current position

    //---

    //---

    int RECTWIDTH = 3000;

    int RECTHEIGHT = 2000;

    //Draw line from current position to new position

    //by moving X to RECTWIDTH units RIGHT

    //and change the current position to new position

    shp.Add(new StraightEdgeRecord(RECTWIDTH, 0));

    //Draw line from current position to new position

    //by moving Y to RECTHEIGTH units DOWN

    //and change the current position to new position

    shp.Add(new StraightEdgeRecord(0, RECTHEIGHT));

    //Draw line from current position to new position

    //by moving X to RECTWIDTH units LEFT

    //and change the current position to new position

    shp.Add(new StraightEdgeRecord(-RECTWIDTH, 0));

    //Draw line from current position to new position

    //by moving Y to RECTHEIGTH units UP

    //and change the current position to new position

    shp.Add(new StraightEdgeRecord(0, -RECTHEIGHT));

 

    //Create an object of DefineShape to convert

    //the rectangle shape into a Character

    //

    //ID to be assigned to this shape character

    int shpID = flash.NewIdentifier();

    //Rectangle that bounds the shape completely

    Rect boundingRect = new Rect(X, Y, X + RECTWIDTH, Y + RECTHEIGHT);

    //Define the shape as a character and add into flash file

    flash.Add(new DefineShape(shpID, boundingRect, fs, ls, shp));

 

   //Build the transformation matrix

    int MOV_XPOS = 500, MOV_YPOS = 1000; //X and Y position to move

    MatrixTransform mtx = new MatrixTransform();

    mtx.Translate(MOV_XPOS, MOV_YPOS); //Translate  

    mtx.Scale(3.0f, 3.0f); //Scale 3 units in both (X-Y) directions

 

    //Create an object of PlaceObject2 to place

    //the shape character on display list at depth 1

    //with the transformation matrix

    int depth = 1;

    PlaceObject2 placeObj2 = new PlaceObject2(shpID, depth);

    placeObj2.MatrixTransform = mtx;

    flash.Add(placeObj2);

 

   //Show the Frame

    flash.Add(new ShowFrame());

 

    //Write the file on disk

    flash.Write("c:\\txnRect.swf");

}

 

Output – TransformRectangle method

 

 

Displaying Image

 

In previous sections, we drew a rectangle shape with blue solid fill, then translated and scaled it using transformation matrix. Now we will not fill the shape with solid fill rather we will fill it with Bitmap or Image fill.

 

1- Import Image

 

Importing image is very straightforward, just create an object of FlashBitmap and add it.

 

C#

 

//Importing image in a flash file

int imgID = flash.NewIdentifier();

 

string ImgFilePath = "c:\\image.jpg";

 

FlashBitmap bmp = new FlashBitmap(imgID,

    FlashBitmapType.FlashBitmapJpeg,

    false,

    ImgFilePath);

 

flash.Add(bmp);

 

2- Create Image Fill Style

 

Create a BitmapFill object and add it in fill styles array.

 

C#

 

//Create matrix for the fill

//Matrix is used for transformation e.g TRANSLATION, SCALING, ROTATION

//

//Fill will start from position X,Y - TRANSLATION

MatrixTransform mtx = new MatrixTransform(X, Y);

 

//Scale the fill ScaleX and ScaleY units - SCALING

mtx.Scale(ScaleX, ScaleY);

 

//Image fill

BitmapFill