37 39 44 49 Line-style is the first parameter of SetLineStyle. A value 1 creates a solid line (the default), 0 does not draw any lines or borders and 2 creates a dashed line. Line width is the second parameter. It is set to 1 to create a dashed line. The PolyLine method is used to draw a line with multiple line segments."> 37 39 44 49 Line-style is the first parameter of SetLineStyle. A value 1 creates a solid line (the default), 0 does not draw any lines or borders and 2 creates a dashed line. Line width is the second parameter. It is set to 1 to create a dashed line. The PolyLine method is used to draw a line with multiple line segments.">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 17 - Dynamic HTML: Structured Graphics ActiveX Control Outline 17.1 Introduction 17.2 Shape Primitives.

Published byDoreen Richardson Modified over 8 years ago

Similar presentations

Presentation on theme: " 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 17 - Dynamic HTML: Structured Graphics ActiveX Control Outline 17.1 Introduction 17.2 Shape Primitives."— Presentation transcript:

1  2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 17 - Dynamic HTML: Structured Graphics ActiveX Control Outline 17.1 Introduction 17.2 Shape Primitives 17.3 Moving Shapes with Translate 17.4 Rotation 17.5 Mouse Events and External Source Files 17.6 Scaling 17.7 Internet and World Wide Web Resources

2  2001 Prentice Hall, Inc. All rights reserved. Outline 2 Shapes.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 6 7 8 9 10 Structured Graphics - Shapes 11 12 13 14 15 <object id = "shapes" style = "background-color: #CCCCFF; 16 width: 500; height: 400" 17 classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> 18 19 <param name = "Line0001" 20 value = "SetLineColor( 0, 0, 0 )" /> 21 <param name = "Line0002" 22 value = "SetLineStyle( 1, 1 )" /> 23 <param name = "Line0003" 24 value = "SetFillColor( 0, 255, 255 )" /> 25 <param name = "Line0004" 26 value = "SetFillStyle( 1 )" /> 27 28 <param name = "Line0005" 29 value = "Oval( 0, -175, 25, 50, 45 )" /> 30 <param name = "Line0006" 31 value = "Arc( -200, -125, 100, 100, 45, 135, 0 )" /> 32 <param name = "Line0007" 33 value = "Pie( 100, -100, 150, 150, 90, 120, 0 )" /> The name attribute determines the order in which the function is called. Lines 15–17 insert the Structured Graphics ActiveX Control. The Pie method (lines 32–33) is similar to the Arc method, but it fills the arc with the color of the foreground, thus creating a pie shape.

3  2001 Prentice Hall, Inc. All rights reserved. Outline 3 Shapes.html 34 <param name = "Line0008" 35 value = "Polygon(5, 0, 0, 10, 20, 0, -30, 36 -10, -10, -10, 25)" /> 37 <param name = "Line0009" 38 value = "Rect( -185, 0, 60, 30, 25 )" /> 39 <param name = "Line0010" 40 value = "RoundRect( 200, 100, 35, 60, 10, 10, 25 )" /> 41 42 <param name = "Line0011" 43 value = "SetFont( 'Arial', 65, 400, 0, 0, 0 )" /> 44 <param name = "Line0012" 45 value = "Text( 'Shapes', -200, 200, -35 )" /> 46 47 <param name = "Line0013" 48 value = "SetLineStyle( 2,1 )" /> 49 <param name = "Line0014" 50 value = "PolyLine( 5, 100, 0, 120, 175, -150, -50, 51 -75, -75, 75, -75)" /> 52 53 54 55 Line-style is the first parameter of SetLineStyle. A value 1 creates a solid line (the default), 0 does not draw any lines or borders and 2 creates a dashed line. Line width is the second parameter. It is set to 1 to create a dashed line. The PolyLine method is used to draw a line with multiple line segments.

4  2001 Prentice Hall, Inc. All rights reserved. Outline 4 Program Output Shape created with the Polygon method. Line segment created with the PolyLine method. Arc created with the Arc method. Shape created using the pie method.

5  2001 Prentice Hall, Inc. All rights reserved. 5 17.2 Shape Primitives

6  2001 Prentice Hall, Inc. All rights reserved. Outline 6 Bounce.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 6 7 8 9 10 Structured Graphics - Translate 11 12 13 <!-- 14 var x = 15; 15 var y = 15; 16 var upDown = -1; 17 var leftRight = 1; 18 19 function start() 20 { 21 window.setInterval( "run()", 50 ); 22 } 23 24 function run() 25 { 26 // if the ball hits the top or bottom side... 27 if ( y == -100 || y == 50 ) 28 upDown *= -1; 29 30 // if the ball hits the left or right side... 31 if ( x == -150 || x == 100 ) 32 leftRight *= -1; 33 To make the ball appear to “bounce” off the walls.

7  2001 Prentice Hall, Inc. All rights reserved. Outline 7 Bounce.html 34 // Move the ball and increment our counters 35 ball.Translate( leftRight * 5, upDown * 5, 0 ); 36 y += upDown * 5; 37 x += leftRight * 5; 38 } 39 // --> 40 41 42 43 44 45 <object id = "ball" style = "background-color: ffffff; 46 width: 300; height: 200; border-style: groove; 47 position: absolute;" 48 classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> 49 50 51 <param name = "Line0002" 52 value = "SetTextureFill( 0, 0, 'ball.gif', 0 )" /> 53 <param name = "Line0003" 54 value = "Oval( 15, 15, 50, 50 )" /> 55 56 57 58 The SetTextureFill method (line 52) is used to fill the oval with a texture. A texture is a picture that is placed on the surface of a polygon. we use the Translate method to translate the shape—that is, to move the shape in coordinate space without deforming it.

8  2001 Prentice Hall, Inc. All rights reserved. Outline 8 Program Output The application creates a simulation of a ball that bouncing around inside the Structured Graphics Control box.

9  2001 Prentice Hall, Inc. All rights reserved. Outline 9 Gradient.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 6 7 8 9 10 Structured Graphics - Gradients 11 12 13 <!-- 14 var speed = 5; 15 var counter = 180; 16 17 function start() 18 { 19 window.setInterval( "run()", 100 ); 20 } 21 22 function run() 23 { 24 counter += speed; 25 26 // accelerate half the time... 27 if ( ( counter % 360 ) > 180 ) 28 speed *= ( 5 / 4 ); 29 30 // decelerate the other half. 31 if ( ( counter % 360 ) < 180 ) 32 speed /= ( 5 / 4 ); 33 34 pies.Rotate( 0, 0, speed ); 35 } Lines 26–32 in the JavaScript code provide a mechanism for varying the speed of rotation about the z axis. Line 34 calls function Rotate to rotate the circle around the z-axis.

10  2001 Prentice Hall, Inc. All rights reserved. Outline 10 Gradient.html 36 // --> 37 38 39 40 41 42 43 <object id = "pies" style = "background-color:blue; 44 width: 300; height: 200;" 45 classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> 46 47 <param name = "Line0001" 48 value = "SetFillColor( 255, 0, 0, 0, 0, 0 )" /> 49 <param name = "Line0002" 50 value = "SetFillStyle( 13 )" /> 51 <param name = "Line0003" 52 value = "Pie( -75, -75, 150, 150, 90, 120, 300 )" /> 53 54 <param name = "Line0004" 55 value = "SetFillStyle( 9 )" /> 56 <param name = "Line0005" 57 value = "Pie( -75, -75, 150, 150, 90, 120, 180 )" /> 58 59 <param name = "Line0006" 60 value = "SetFillStyle( 11 )" /> 61 <param name = "Line0007" 62 value = "Pie( -75, -75, 150, 150, 90, 120, 60 )" /> 63 64 65 66 The gradient fills are set with the SetFillStyle method (lines 50, 55 and 60).

11  2001 Prentice Hall, Inc. All rights reserved. Outline 11 Program Output The output displays the image in its initial position and at a new rotated position.

12  2001 Prentice Hall, Inc. All rights reserved. Outline 12 Bounce2.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 6 7 8 9 10 Structured Graphics - Shapes 11 12 <script for = "ball" event = "onclick" type = 13 "text/javascript"> 14 <!-- 15 ball.SourceURL = "newoval.txt"; 16 // --> 17 18 19 20 <!-- 21 var x = 20; 22 var y = 20; 23 var upDown = -1; 24 var leftRight = 1; 25 26 function start() 27 { 28 window.setInterval( "run()", 50 ); 29 } 30 31 function run() 32 { 33 if ( y == -100 || y == 50 ) 34 upDown *= -1; 35 Lines 12–17 designate a script for the onclick event of our Structured Graphics Control object. This event sets property SourceURL to newoval.txt — the new drawing instructions. When the new drawing instructions are assigned to the SourceURL property the ball is redrawn based on these new settings.

13  2001 Prentice Hall, Inc. All rights reserved. Outline 13 Bounce2.html 36 if ( x == -150 || x == 100 ) 37 leftRight *= -1; 38 39 ball.Translate( leftRight * 5, upDown * 5, 0 ); 40 y += upDown * 5; 41 x += leftRight *5; 42 } 43 // --> 44 45 46 47 48 49 <object id = "ball" 50 style = "width: 300; height: 200; border-style: groove; 51 position: absolute; top: 10; left: 10;" 52 classid = "clsid:369303C2-D7AC-11d0-89D5-00A0C90833E6"> 53 54 55 <param name = "Line0002" 56 value = "SetTextureFill( 0, 0, 'ball.gif', 0 )" /> 57 <param name = "Line0003" 58 value = "Oval( 20, 20, 50, 50 )" /> 59 60 61 62 63 MouseEventsEnabled property allows the capturing of mouse events. The MouseEventsEnabled property is enabled by setting value to 1.

14  2001 Prentice Hall, Inc. All rights reserved. Outline 14 Program Output Initial output of the program before the user clicks the mouse. After the user clicks the mouse, the ball is redrawn.according to the instructions in newoval.txt.

15  2001 Prentice Hall, Inc. All rights reserved. Outline 15 Newoval.txt 1 SetLineStyle( 1, 3 ) 2 SetFillStyle( 1 ) 3 Oval( 20, 20, 50, 50, 0 ) 4 5 SetLineStyle( 1, 1 ) 6 PolyLine( 2, 45, 20, 45, 70, 0 ) 7 PolyLine( 2, 45, 20, 45, 70, 90 ) 8 PolyLine( 2, 45, 20, 45, 70, 45 ) 9 PolyLine( 2, 45, 20, 45, 70, 135 ) 10 11 SetFillColor( 0, 255, 0 ) 12 Oval( 30, 30, 30, 30, 0 ) 13 SetFillColor( 255,0, 0 ) 14 Oval( 35, 35, 20, 20, 0 ) Fig. 17.6External source file newoval.txt for Fig. 17.5. This file contains the new directions to redraw the ball when the user clicks the mouse.

16  2001 Prentice Hall, Inc. All rights reserved. Outline 16 Scaling.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 6 7 8 9 10 Structured Graphics - Scaling 11 12 13 <!-- 14 var speedX = 0; 15 var speedY = 0; 16 var speedZ = 0; 17 var scale = 1; 18 19 function start() 20 { 21 window.setInterval( "run()", 100 ); 22 } 23 24 function run() 25 { 26 drawing.Rotate( speedX, speedY, speedZ ); 27 drawing.Scale( scale, scale, scale ); 28 } 29 30 function rotate( axis ) 31 { 32 axis = ( axis ? 0 : 5 ); 33 } 34 // --> 35 The Scale method modifies the size of an object while retaining its position and shape.

17  2001 Prentice Hall, Inc. All rights reserved. Outline 17 Scaling.html 36 37 38 39 40 41 42 <input type = "button" value = "Rotate-X" 43 onclick = "speedX = ( speedX ? 0 : 5 )" /> 44 <input type = "button" value = "Rotate-Y" 45 onclick = "speedY = ( speedY ? 0 : 5 )" /> 46 <input type = "button" value = "Rotate-Z" 47 onclick = "speedZ = ( speedZ ? 0 : 5 )" /> 48 49 <input type = "button" value = "Scale Up" 50 onclick = "scale = ( scale * 10 / 9 )" /> 51 <input type = "button" value = "Scale Down" 52 onclick = "scale = ( scale * 9 / 10 )" /> 53 54 55 <object id = "drawing" style = " position: absolute; 56 z-index: 2; width: 200; height: 300;" 57 classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> 58 59 60 61 62 63 <param name = "Line0004" 64 value = "Oval( -25, -100, 50, 50, 0 )" /> 65 66 <param name = "Line0005" 67 value = "PolyLine(2, 0, -50, 0, 50 )" /> 68 69 <param name = "Line0006" 70 value = "PolyLine( 3, -30, -25, 0, -15, 30, -25 )" /> Lines 55–90 create a control for our rotating foreground. Lines 41-53 create 5 buttons used to control rotation and scaling of the foreground.

18  2001 Prentice Hall, Inc. All rights reserved. Outline 18 Scaling.html 71 72 <param name = "Line0007" 73 value = "PolyLine( 3, -15, 90, 0, 50, 15, 90 )" /> 74 75 <param name = "Line0008" 76 value = "SetFillColor ( 255, 0, 0 )" /> 77 <param name = "Line0009" 78 value = "Oval( -15, -85, 7, 7, 0 )" /> 79 <param name = "Line0010" 80 value = "Oval( 5, -85, 7, 7, 0 )" /> 81 82 <param name = "Line0011" 83 value = "SetLineStyle( 1, 2 )" /> 84 <param name = "Line0012" 85 value = "SetLineColor( 255, 0, 0 )" /> 86 <param name = "Line0013" 87 value = "SetFont( 'Courier', 25, 200, 0, 0, 0 )" /> 88 <param name = "Line0014" 89 value = "Text( 'Hello', -35, -115, 0 )" /> 90 91 92 <object id = "background" style = " position:absolute; 93 z-index: 1; width: 200; height: 300; 94 background-color: none" classid = 95 "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> 96 97 <param name = "Line0001" 98 value = "SetFillColor( 38, 250, 38 )" /> 99 <param name = "Line0002" 100 value = "Oval( -75, -125, 150, 250, 0 )" /> 101 102 103 Lines 92-101 are used to control the positioning of the oval in the background. The position and z-index CSS attributes are used to position the oval and foreground over each other.

19  2001 Prentice Hall, Inc. All rights reserved. Outline 19 Program Output Possible outputs after the upper layer (the person) is rotated along the x, y and z axis with the top three buttons.

20  2001 Prentice Hall, Inc. All rights reserved. Outline 20 Program Output Possible out put after the initial image is scaled down (left) and scaled up (right).

Download ppt " 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 17 - Dynamic HTML: Structured Graphics ActiveX Control Outline 17.1 Introduction 17.2 Shape Primitives."

Similar presentations

© 2010 Delmar, Cengage Learning Chapter 9 Positioning Objects with AP Div Tags.

© 2010 Delmar, Cengage Learning Chapter 9 Positioning Objects with AP Div Tags.
 2004 Prentice Hall, Inc. All rights reserved. 1 Chapter 30 - Dynamic HTML: Structured Graphics ActiveX Control Outline 30.1Introduction 30.2Shape Primitives.

 2004 Prentice Hall, Inc. All rights reserved. 1 Chapter 30 - Dynamic HTML: Structured Graphics ActiveX Control Outline 30.1Introduction 30.2Shape Primitives.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 24 - VBScript Outline 24.1 Introduction 24.2 Operators 24.3 Data Types and Control Structures.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 24 - VBScript Outline 24.1 Introduction 24.2 Operators 24.3 Data Types and Control Structures.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style.
 2004 Prentice Hall, Inc. All rights reserved. 1 Chapter 31 - Dynamic HTML: Path, Sequencer and Sprite ActiveX Controls Outline 31.1Introduction 31.2DirectAnimation.

 2004 Prentice Hall, Inc. All rights reserved. 1 Chapter 31 - Dynamic HTML: Path, Sequencer and Sprite ActiveX Controls Outline 31.1Introduction 31.2DirectAnimation.
Slide Transitions Slide Show, Slide Transition opens Slide Transition task pane Practice each option setting to select the transition style, its speed,

Slide Transitions Slide Show, Slide Transition opens Slide Transition task pane Practice each option setting to select the transition style, its speed,
Cos 381 Day 7. © 2006 Pearson Addison-Wesley. All rights reserved. 6-2 Agenda Assignment 2 Posted –Program a web-based Version of Soduku using JavaScript.

Cos 381 Day 7. © 2006 Pearson Addison-Wesley. All rights reserved. 6-2 Agenda Assignment 2 Posted –Program a web-based Version of Soduku using JavaScript.
Chapter 19 – Macromedia Dreamweaver MX 2004

Chapter 19 – Macromedia Dreamweaver MX 2004
Reporting Aesthetics An ACEware Webinar 1:00-2:00 pm February 14 th, 2008.

Reporting Aesthetics An ACEware Webinar 1:00-2:00 pm February 14 th, 2008.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 8 - JavaScript: Control Structures I Outline 8.1 Introduction 8.2 Algorithms 8.3 Pseudocode 8.4.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 8 - JavaScript: Control Structures I Outline 8.1 Introduction 8.2 Algorithms 8.3 Pseudocode 8.4.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.

Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
 2001 Deitel & Associates, Inc. All rights reserved. 1 Chapter 12 – Microsoft FrontPage Express Outline 12.1Introduction 12.2Microsoft FrontPage Express.

 2001 Deitel & Associates, Inc. All rights reserved. 1 Chapter 12 – Microsoft FrontPage Express Outline 12.1Introduction 12.2Microsoft FrontPage Express.
Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.

Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.
 2004 Prentice Hall, Inc. All rights reserved. Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing.

 2004 Prentice Hall, Inc. All rights reserved. Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing.
Tutorial 4 Creating Special Effects with CSS

Tutorial 4 Creating Special Effects with CSS
1 XHTML Forms A form is the mechanism to –Collect information from a browser user –Transmit collected information from a browser to a server HTML/XHTML.

1 XHTML Forms A form is the mechanism to –Collect information from a browser user –Transmit collected information from a browser to a server HTML/XHTML.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Chapter 6 Dynamic Documents With JavaScript.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Chapter 6 Dynamic Documents With JavaScript.
Chapter 14. Copyright 2003, Paradigm Publishing Inc. CHAPTER 14 BACKNEXTEND 14-2 LINKS TO OBJECTIVES Add Borders with Borders Button Add Borders with.

Chapter 14. Copyright 2003, Paradigm Publishing Inc. CHAPTER 14 BACKNEXTEND 14-2 LINKS TO OBJECTIVES Add Borders with Borders Button Add Borders with.

Similar presentations

Ads by Google