1.  2004 Prentice Hall, Inc. All rights reserved. 1 Chapter 30 - Dynamic HTML: Structured Graphics ActiveX Control Outline 30.1Introduction 30.2Shape Primitives 30.3Moving Shapes with Translate 30.4Rotation 30.5Mouse Events and External Source Files 30.6Scaling 30.7Web Resources

2.  2004 Prentice Hall, Inc. All rights reserved. 2 Objectives In this chapter, you will learn: –To be able to use the Structured Graphics Control to create various shapes. –To understand the Structured Graphics Control methods for modifying lines and borders. –To understand the Structured Graphics Control methods for modifying colors and fill styles. –To be able to enable event capturing for the Structured Graphics Control. –To be able to import external lists of methods into the Structured Graphics Control. –To be able to scale, rotate and translate shapes in the Structured Graphics Control.

3.  2004 Prentice Hall, Inc. All rights reserved. 3 30.1 Introduction Structured Graphics ActiveX Control –object element –Visual presentation via DirectAnimation Subset of DirectX software

4.  2004 Prentice Hall, Inc. All rights reserved. 4 30.2 Shape Primitives Commands passed through param tags –Assign each param a line number "Line001" –SetLineColor RGB triplet Sets color of lines and borders of shapes –SetLineStyle Line style and width –Solid, invisible or dashed –SetFillColor RGB triplet Foreground color to fill shapes

5.  2004 Prentice Hall, Inc. All rights reserved. 5 30.2 Shape Primitives Commands passed through param tags, cont. –SetFillStyle

6.  2004 Prentice Hall, Inc. All rights reserved. 6 30.2 Shape Primitives Commands passed through param tags, cont. –Oval x- and y-coordinates of bounding box Coordinates measured from center of control Height, width, rotation –Arc x- and y-coordinates of bounding box Height, width of box it encloses Starting angle (degrees) Size of arc Rotation –Pie Similar to Arc, but filled

7.  2004 Prentice Hall, Inc. All rights reserved. 7 30.2 Shape Primitives Commands passed through param tags, cont. –Polygon Number of vertices x- and y-coordinates of each vertex –Rect x- and y-coordinates of bounding box Height, width, rotation –RoundRect x- and y-coordinates of bounding box Height, width of box Height, width of arc Rotation

8.  2004 Prentice Hall, Inc. All rights reserved. 8 30.2 Shape Primitives Commands passed through param tags, cont. –SetFont Font Height Boldness Italic, underline, strikethrough –Text Text x- and y-coordinates Rotation –PolyLine Number of vertices x- and y-coordinates of each vertex

9.  2004 Prentice Hall, Inc. All rights reserved. Outline 9 shapes.html (1 of 3) Setting the line color to 0, 0, 0 (black) Creating a thin, solid lineInserting the Structured Graphics Control Setting the fill color to cyan

10.  2004 Prentice Hall, Inc. All rights reserved. Outline 10 shapes.html (2 of 3) Setting the fill style to a solid color Drawing an oval with the previously specified settings Drawing an arc with the same settings Drawing a pie (filled arc) Drawing a polygon with 5 vertices Drawing a filled rectangleDrawing a filled rectangle with rounded corners

11.  2004 Prentice Hall, Inc. All rights reserved. Outline 11 shapes.html (3 of 3) Setting the font to Arial, bold, size 65 Printing the text “Shapes”Setting the line style to dashed Drawing a line with 5 vertices

12.  2004 Prentice Hall, Inc. All rights reserved. 12 30.2 Shape Primitives Fig. 30.1 Structured Graphics ActiveX Control creates shapes.

13.  2004 Prentice Hall, Inc. All rights reserved. 13 30.3 Moving Shapes With Translate Translate –Move and transform shapes New param s –SetTextureFill x- and y-coordinates inside shape Location of texture file Stretch or repeat –Translate Relative distance to move shape along x-, y- and z-axes

14.  2004 Prentice Hall, Inc. All rights reserved. Outline 14 bounce.html (1 of 3) Variables to track ball’s position and movement

15.  2004 Prentice Hall, Inc. All rights reserved. Outline 15 bounce.html (2 of 3) Move the ball 5 units in the proper direction Change direction when the ball hits a wall

16.  2004 Prentice Hall, Inc. All rights reserved. Outline 16 bounce.html (3 of 3) Fill the ball with texture from file ball.gif

17.  2004 Prentice Hall, Inc. All rights reserved. 17 30.3 Moving Shapes With Translate Fig. 30.3 Methods SetTextureFill and Translate.

18.  2004 Prentice Hall, Inc. All rights reserved. 18 30.4 Rotation Rotate –Rotate shapes in three-dimensional space New param s –Rotate How far to rotate around x-, y- and z-axes –SetFillColor Optional second parameter is background color Use fill styles 9, 11, 13 for gradients

19.  2004 Prentice Hall, Inc. All rights reserved. Outline 19 gradient.html (1 of 3)

20.  2004 Prentice Hall, Inc. All rights reserved. Outline 20 gradient.html (2 of 3) Vary the speed of rotationRotate the piesDeclaring the pies

21.  2004 Prentice Hall, Inc. All rights reserved. Outline 21 gradient.html (3 of 3) Set the fill color to red Set the fill style to 3 different gradient types

22.  2004 Prentice Hall, Inc. All rights reserved. 22 30.4 Rotation Fig. 30.4 Using gradients and Rotate.

23.  2004 Prentice Hall, Inc. All rights reserved. 23 30.5 Mouse Events and External Source Files Mouse events –Set MouseEventsEnabled property to 1 External source files –Set SourceURL property to location of file –Make HTML easier to read/maintain

24.  2004 Prentice Hall, Inc. All rights reserved. Outline 24 bounce2.html (1 of 3) Import code from newoval.txt

25.  2004 Prentice Hall, Inc. All rights reserved. Outline 25 bounce2.html (2 of 3)

26.  2004 Prentice Hall, Inc. All rights reserved. Outline 26 bounce2.html (3 of 3) Enabling mouse events

27.  2004 Prentice Hall, Inc. All rights reserved. Outline 27 newoval.txt (1 of 1) Code moved to a separate text file

28.  2004 Prentice Hall, Inc. All rights reserved. 28 30.5 Mouse Events and External Source Files Fig. 30.5 Using SourceURL and MouseEventsEnabled.

29.  2004 Prentice Hall, Inc. All rights reserved. 29 30.6 Scaling Scale –Modifies size –Retains shape and position –param s are percentage to scale each dimension Greater than 1 grows, less than 1 shrinks position and z-index to place objects on page

30.  2004 Prentice Hall, Inc. All rights reserved. Outline 30 scaling.html (1 of 4)

31.  2004 Prentice Hall, Inc. All rights reserved. Outline 31 scaling.html (2 of 4) Rotate and scale the drawing Defining buttons to control scaling, speed and rotation of the foreground

32.  2004 Prentice Hall, Inc. All rights reserved. Outline 32 scaling.html (3 of 4) Stack objects using z-index propertyDefining the background shapes

33.  2004 Prentice Hall, Inc. All rights reserved. Outline 33 scaling.html (4 of 4)

34.  2004 Prentice Hall, Inc. All rights reserved. 34 30.6 Scaling Fig. 30.7 Rotating a shape in three dimensions and scaling up and down.