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

Slides:

Advertisements

Similar presentations

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

Advertisements

 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 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.

 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.

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.

Chapter 19 – Macromedia Dreamweaver MX 2004

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.

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.

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.

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.

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.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.

DHTML: Structured Graphics ActiveX Control

CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorials 3 & 4: Working With CSS.

 2000 Deitel & Associates, Inc. All rights reserved. Chapter 20 – Dynamic HTML: Path, Sequencer and Sprite ActiveX Controls Outline 20.1Introduction 20.2DirectAnimation.

Session: 17. © Aptech Ltd. 2Canvas and JavaScript / Session 17  Describe Canvas in HTML5  Explain the procedure to draw lines  Explain the procedure.

Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 10 - JavaScript: Functions Outline 10.1 Introduction 10.2 Program Modules in JavaScript 10.3.

© 2008 The McGraw-Hill Companies, Inc. All rights reserved. M I C R O S O F T ® Designing Original Illustrations Lesson 8.

What is AutoCAD? A software drafting tool Particularly useful for Mechanical drawings Architectural drawings.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 14 - Dynamic HTML: Event Model Outline 14.1 Introduction 14.2 Event onclick 14.3 Event onload.

Web sites Design: Cascading Style Sheet (CSS) (Cont’d) Dimensions and Position of Elements –Width and Height Space –Table Cell Padding –Left and Top Position.

Laboratory Exercise # 9 – Inserting Graphics to Documents Office Productivity Tools 1 Laboratory Exercise # 9 Inserting Graphics to Documents Objectives:

Chapter 8 © 2001 by Addison Wesley Longman, Inc. 1 Chapter 8 Sebesta: Programming the World Wide Web.

Learning Unity. Getting Unity

Copyright © 2009 Pearson Education, Inc. Publishing as Prentice Hall. 1 Skills for Success with Microsoft ® Office 2007 PowerPoint Lecture to Accompany.

SVG for Designers Tom Hoferek. Objectives Introduce SVG Illustrate its capabilities Demonstrate SVG in action Speculate, discuss, answer questions.

Copyright © 2009 Pearson Education, Inc. Publishing as Prentice Hall. 1 Skills for Success with Microsoft ® Office 2007 PowerPoint Lecture to Accompany.

 2004 Prentice Hall, Inc. All rights reserved. Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style.

Fluency with Information Technology INFO100 and CSE100 Katherine Deibel Katherine Deibel, Fluency in Information Technology1.

1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.

XP Review 2 New Perspectives on JavaScript, Comprehensive1 Introducing Cascading Style Sheets Formatting Web Pages with CSS.

CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, you will learn:  CSS Box Model  CSS properties for border  CSS properties for.

 2000 Deitel & Associates, Inc. All rights reserved. Chapter 19 – Dynamic HTML: Structured Graphics ActiveX Control Outline 19.1Introduction 19.2Shape.

Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing a Line of Text in a Web Page 7.3 Another JavaScript.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 15 - Dynamic HTML: Filters and Transitions Outline 15.1 Introduction 15.2 Flip filters: flipv.

Dr. Ahmet Cengizhan Dirican BIL 374 Internet Technologies 6. Dynamic Documents With JavaScript.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 14 - Dynamic HTML: Event Model Outline 14.1 Introduction 14.2 Event onclick 14.3 Event onload.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 16 - Dynamic HTML: Data Binding with Tabular Data Control Outline 16.1 Introduction 16.2 Simple.

CSC 121 Computers and Scientific Thinking Fall Event-Driven Programming.

Chapter 6 Dynamic Documents with JavaScript. © 2006 Pearson Addison-Wesley. All rights reserved Introduction Def: A dynamic HTML document is.

CIS 205—Web Design & Development Flash Chapter 3 Working with Symbols and Interactivity.

 2002 Prentice Hall. All rights reserved. 1 Introduction to the Visual Studio.NET IDE Outline Introduction Visual Studio.NET Integrated Development Environment.

INTERNET APPLICATIONS CPIT405 Forms, Internal links, meta tags, search engine friendly websites.

HTML 5 (Part 1) – Start from SCRATCH. HTML 5 – Start from SCRATCH.

Cascading Styles Sheets Positioning HTML elements.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 11 - JavaScript: Arrays Outline 11.1 Introduction 11.2 Arrays 11.3 Declaring and Allocating Arrays.

 2001 Prentice Hall, Inc. All rights reserved. Outline 1 JavaScript.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 18 - Dynamic HTML: Path Sequencer and Sprite ActiveX Controls Outline 18.1 Introduction 18.2.

Chapter 18 - Dynamic HTML: Path Sequencer and Sprite ActiveX Controls

Chapter 18 - Dynamic HTML: Path Sequencer and Sprite ActiveX Controls

Introduction to D3.js and Bar Chart in D3.js

ISC440: Web Programming II Ch14: HTML5 Canvas

Computer Application AutoCAD Program

CSS Borders and Margins.

Darkened picture background with full-color circle (Intermediate)

Chapter 17 - Dynamic HTML: Structured Graphics ActiveX Control

JavaScript – Let’s Draw!

Presentation transcript:

 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

 2001 Prentice Hall, Inc. All rights reserved. Outline 2 Shapes.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 " Structured Graphics - Shapes <object id = "shapes" style = "background-color: #CCCCFF; 16 width: 500; height: 400" 17 classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <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 )" /> <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.

 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, , -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 )" /> <param name = "Line0011" 43 value = "SetFont( 'Arial', 65, 400, 0, 0, 0 )" /> 44 <param name = "Line0012" 45 value = "Text( 'Shapes', -200, 200, -35 )" /> <param name = "Line0013" 48 value = "SetLineStyle( 2,1 )" /> 49 <param name = "Line0014" 50 value = "PolyLine( 5, 100, 0, 120, 175, -150, -50, , -75, 75, -75)" /> 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.

 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.

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

 2001 Prentice Hall, Inc. All rights reserved. Outline 6 Bounce.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 " Structured Graphics - Translate <!-- 14 var x = 15; 15 var y = 15; 16 var upDown = -1; 17 var leftRight = 1; function start() 20 { 21 window.setInterval( "run()", 50 ); 22 } function run() 25 { 26 // if the ball hits the top or bottom side if ( y == -100 || y == 50 ) 28 upDown *= -1; // if the ball hits the left or right side if ( x == -150 || x == 100 ) 32 leftRight *= -1; 33 To make the ball appear to “bounce” off the walls.

 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 // --> <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"> <param name = "Line0002" 52 value = "SetTextureFill( 0, 0, 'ball.gif', 0 )" /> 53 <param name = "Line0003" 54 value = "Oval( 15, 15, 50, 50 )" /> 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.

 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.

 2001 Prentice Hall, Inc. All rights reserved. Outline 9 Gradient.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 " Structured Graphics - Gradients <!-- 14 var speed = 5; 15 var counter = 180; function start() 18 { 19 window.setInterval( "run()", 100 ); 20 } function run() 23 { 24 counter += speed; // accelerate half the time if ( ( counter % 360 ) > 180 ) 28 speed *= ( 5 / 4 ); // decelerate the other half. 31 if ( ( counter % 360 ) < 180 ) 32 speed /= ( 5 / 4 ); 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.

 2001 Prentice Hall, Inc. All rights reserved. Outline 10 Gradient.html 36 // --> <object id = "pies" style = "background-color:blue; 44 width: 300; height: 200;" 45 classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <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 )" /> <param name = "Line0004" 55 value = "SetFillStyle( 9 )" /> 56 <param name = "Line0005" 57 value = "Pie( -75, -75, 150, 150, 90, 120, 180 )" /> <param name = "Line0006" 60 value = "SetFillStyle( 11 )" /> 61 <param name = "Line0007" 62 value = "Pie( -75, -75, 150, 150, 90, 120, 60 )" /> The gradient fills are set with the SetFillStyle method (lines 50, 55 and 60).

 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.

 2001 Prentice Hall, Inc. All rights reserved. Outline 12 Bounce2.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 " Structured Graphics - Shapes <script for = "ball" event = "onclick" type = 13 "text/javascript"> 14  <!-- 21 var x = 20; 22 var y = 20; 23 var upDown = -1; 24 var leftRight = 1; function start() 27 { 28 window.setInterval( "run()", 50 ); 29 } 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.

 2001 Prentice Hall, Inc. All rights reserved. Outline 13 Bounce2.html 36 if ( x == -150 || x == 100 ) 37 leftRight *= -1; ball.Translate( leftRight * 5, upDown * 5, 0 ); 40 y += upDown * 5; 41 x += leftRight *5; 42 } 43 // --> <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"> <param name = "Line0002" 56 value = "SetTextureFill( 0, 0, 'ball.gif', 0 )" /> 57 <param name = "Line0003" 58 value = "Oval( 20, 20, 50, 50 )" /> MouseEventsEnabled property allows the capturing of mouse events. The MouseEventsEnabled property is enabled by setting value to 1.

 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.

 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 ) 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 This file contains the new directions to redraw the ball when the user clicks the mouse.

 2001 Prentice Hall, Inc. All rights reserved. Outline 16 Scaling.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 " Structured Graphics - Scaling  35 The Scale method modifies the size of an object while retaining its position and shape.

 2001 Prentice Hall, Inc. All rights reserved. Outline 17 Scaling.html <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 )" /> <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 )" /> <object id = "drawing" style = " position: absolute; 56 z-index: 2; width: 200; height: 300;" 57 classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <param name = "Line0004" 64 value = "Oval( -25, -100, 50, 50, 0 )" /> <param name = "Line0005" 67 value = "PolyLine(2, 0, -50, 0, 50 )" /> <param name = "Line0006" 70 value = "PolyLine( 3, -30, -25, 0, -15, 30, -25 )" /> Lines 55–90 create a control for our rotating foreground. Lines create 5 buttons used to control rotation and scaling of the foreground.

 2001 Prentice Hall, Inc. All rights reserved. Outline 18 Scaling.html <param name = "Line0007" 73 value = "PolyLine( 3, -15, 90, 0, 50, 15, 90 )" /> <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 )" /> <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 )" /> <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"> <param name = "Line0001" 98 value = "SetFillColor( 38, 250, 38 )" /> 99 <param name = "Line0002" 100 value = "Oval( -75, -125, 150, 250, 0 )" /> Lines 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.

 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.

 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).