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

Slides:

Advertisements

Similar presentations

Chapter 16 Dynamic HTML: Data Binding with Tabular Data Control.

Advertisements

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

 2004 Prentice Hall, Inc. All rights reserved. Chapter 28 – Multimedia: Audio, Video, Speech Synthesis and Recognition Outline 28.1 Introduction 28.2.

 2004 Prentice Hall, Inc. All rights reserved. 1 Chapter 30 - Dynamic HTML: Structured Graphics ActiveX Control Outline 30.1Introduction 30.2Shape Primitives.

Cascading Style Sheets

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

1 XHTML Cascading Style Sheets™ (CSS). 2 Inline.html 1 2

 2002 Prentice Hall, Inc. All rights reserved. Chapter 4 – Cascading Style Sheets (CSS) Outline 4.1Introduction 4.2Inline Styles 4.3Creating Style Sheets.

Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.

Cascading Style Sheets SP.772 May 6, CSS Useful for creating one unified look for an entire web site. Helps to seperate style from content. Can.

17/10/11. 2  The form element ( ) is used to include a number of form elements together so that they can be referenced by some other code in order to.

Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.

 2004 Prentice Hall, Inc. All rights reserved. 1 Chapter 31 - Dynamic HTML: Path, Sequencer and Sprite ActiveX Controls Outline 31.1Introduction 31.2DirectAnimation.

 2008 Pearson Education, Inc. All rights reserved Document Object Model (DOM): Objects and Collections.

1 Dynamic HTML -Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style Sheets 6.4 Conflicting Styles 6.5 Linking External.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 5 - Introduction to XHTML: Part 2 Outline 5.1 Introduction 5.2 Basic XHTML Tables 5.3 Intermediate.

Using color and fonts in HTML and XHTML Please use speaker notes for additional information!

1 XHTML Tables A table is a matrix of cells, for displaying content in rows and columns The cells can include almost any element Some cells display row.

HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.

TECH2018 Multimedia and the Internet More about CSS and Page Layouts.

 2002 Prentice Hall. All rights reserved. JavaServer Pages.

 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 6 By Sam INE 1020 Introduction to Internet Engineering 1 DHTML & CSS Tutorial 6.

CSS in XHTML continued Please use speaker notes for additional information!

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.

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

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

 2001 Prentice Hall, Inc. All rights reserved. 1 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. Chapter 5 - Introduction to XHTML: Part 2 Outline 5.1 Introduction 5.2 Basic XHTML Tables 5.3 Intermediate.

XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Tutorial 7.

CSCE 102 – Chapter 6 (Web Design and Layout) CSCE General Applications Programming Benito Mendoza Benito Mendoza 1 By Benito Mendoza.

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

 2001 Deitel & Associates, Inc. All rights reserved. 1 Chapter 20 – Dynamic HTML: Object Model and Collections Outline 20.1Introduction 20.2Object Referencing.

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.

Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Adding Graphical Elements Essentials for.

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

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

1 Introduction to XHTML: Part 1 Outline Introduction Elements and Attributes Editing XHTML Common Elements W3C XHTML Validation Service Headers Linking.

Chapter 16 DHTML: Data Binding CIS 275—Web Application Development for Business I.

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

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

Tutorial 7 Creating Animations. XP Objectives Learn about animation Create a timeline Add AP divs and graphics to a timeline Move and resize animation.

Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.

What to Style? Styles for elements establish consistency –Styles for HTML or body become the default –Only create styles for pre-defined elements* Styles.

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

CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.

 2000 Deitel & Associates, Inc. All rights reserved. Chapter 15 – Dynamic HTML: Object Model and Collections Outline 15.1Introduction 15.2Object Referencing.

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

INT222 – Internet Fundamentals

Internet & World Wide Web How to Program, 5/e.  JavaScript events  allow scripts to respond to user interactions and modify the page accordingly  Events.

Cascading Styles Sheets Positioning HTML elements.

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

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

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

Chapter 5 Introduction to XHTML: Part 2

The Web Wizard’s Guide To DHTML and CSS

Dynamic HTML Path Control

Outline Introduction Audio and Video

Exercise 48 - Skills Adobe Flash CS4 is a software program you use to create animation and applications that range form simple to very complex. Being able.

Working with Special Effects

Chapter 17 - Dynamic HTML: Structured Graphics ActiveX Control

Cascading Style Sheets™ (CSS)

Web Client Side Technologies Raneem Qaddoura

Presentation transcript:

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 18 - Dynamic HTML: Path Sequencer and Sprite ActiveX Controls Outline 18.1 Introduction 18.2 DirectAnimation Path Control 18.3 Multiple Path Controls 18.4 Time Markers for Path Control 18.5 DirectAnimation Sequencer Control 18.6 DirectAnimation Sprite Control 18.7 Animated GIFs 18.8 Internet and World Wide Web Resources

 2001 Prentice Hall, Inc. All rights reserved. Outline 2 Path1.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 " Path control Path animation: <object id = "oval" 19 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Shape" 25 value = "PolyLine( 2, 0, 0, 200, 50 )" /> The Repeat method indicates how many times the path is traversed. A value of –1 indicates that the path should loop continuously. The Target parameter specifies the id of the element that is targeted by the path control. The Bounce parameter when set to 1reverses the element’s direction on the path when it reaches the end. Setting AutoStart to a non-zero value starts the element along the path as soon the page loads. The classid attribute identifies the DirectAnimation path Control. Lines use the object element to place the Path Control on the page.

 2001 Prentice Hall, Inc. All rights reserved. Outline 3 Program Output When executed the header Path animation:will traverse a path defined by the program.

 2001 Prentice Hall, Inc. All rights reserved. Outline 4 Path2.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 " Path Control - Multiple paths span { position: absolute; 15 font-family: sans-serif; 16 font-size: 2em; 17 font-weight: bold; 18 filter: shadow( direction = 225 ); 19 padding: 9px; 20 } <img src = "icons2.gif" 28 style = "position: absolute; left: 30; top: 110" /> <span id = "titleTxt" 31 style = "left: 500; top: 500; color: white"> 32 Multimedia Cyber Classroom 33 Programming Tip Icons 34 Each span element is controlled by a corresponding object element.

 2001 Prentice Hall, Inc. All rights reserved. Outline 5 Path2.html 35 <span id = "CPEspan" 36 style = "left: 75; top: 500; color: red"> 37 Common Programming Errors <span id = "GPPspan" 40 style = "left: 275; top: 500; color: orange"> 41 Good Programming Practices <span id = "PERFspan" 44 style = "left: 475; top: 500; color: yellow"> 45 Performance Tips <span id = "PORTspan" 48 style = "left: 100; top: -50; color: green"> 49 Portability Tips <span id = "SEOspan" 52 style = "left: 300; top: -50; color: blue"> 53 Software Engineering Observations <span id = "TDTspan" 56 style = "left: 500; top: -50; color: violet"> 57 Testing and Debugging Tips <object id = "CyberPath" 60 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Shape" 64 value = "PolyLine( 2, 500, 500, 100, 10 )" /> A separate object tag is added for each object that we wish to set a path for (lines ).

 2001 Prentice Hall, Inc. All rights reserved. Outline 6 Path2.html 68 <object id = "CPEPath" 69 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Shape" 73 value = "PolyLine( 3, 75, 500, 300, 170, 35, 175 )" /> <object id = "GPPPath" 78 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Shape" value = 82 "PolyLine( 3, 275, 500, 300, 340, 85, 205 )" /> <object id = "PERFPath" 87 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Shape" value = 91 "PolyLine( 3, 475, 500, 300, 340, 140, 235 )" /> <object id = "PORTPath" 96 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Shape" value = 100 "PolyLine( 3, 600, -50, 300, 340, 200, 265 )" />

 2001 Prentice Hall, Inc. All rights reserved. Outline 7 Path2.html <object id = "SEOPath" 105 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Shape" value = 109 "PolyLine( 3, 300, -50, 300, 340, 260, 295 )" /> <object id = "TDTPath" 114 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Shape" value = 118 "PolyLine( 3, 500, -50, 300, 340, 310, 325 )" />

 2001 Prentice Hall, Inc. All rights reserved. Outline 8 Program Output This application creates PolyLine paths for seven separate objects that create a splash screen effect.

 2001 Prentice Hall, Inc. All rights reserved. Outline 9 Path3.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 " Path control - Advanced Paths <script type = "text/javascript" for = "oval" 13 event = "onmarker ( marker )"> 14  <img id = "pole" src = "pole.gif" style = 27 "position: absolute; left: 350; top: 80; 28 z-index: 3; height: 300" /> <img id = "largebug" src = "animatedbug_large.gif" 31 style = "position: absolute; z-index: 4" /> 32 Lines 12–21create an event handler for the onmarker event. The parameter that the onmarker event receives (defined here as marker in line 13) identifies the marker that fired the event. The if control structures that follow change the zIndex attribute of element pole to correspond to the time marker in our Path Control that actually fired the event.

 2001 Prentice Hall, Inc. All rights reserved. Outline 10 Path3.html 33 <object id = "oval" 34 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Shape" 40 value = "Oval( 100, 80, 300, 60 )" /> <object id = "swarmPath" 47 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Shape" 53 value = "Polygon(6, 0, 0, 400, 300, 450, 50, 320, , 150, 180, 50, 250 )" /> <span id = "swarm" style = 59 "position:absolute; top: 0; left: 0; z-index: 1"> <img src = "animatedbug_small.gif" 62 style = "position:absolute; top: 25; left: -30" /> 63 <img src = "animatedbug_small.gif" 64 style = "position:absolute; top: 0; left: 0" /> 65 <img src = "animatedbug_small.gif" 66 style = "position:absolute; top: 15; left: 70" /> The 1 appended to the AddTimeMarker function is a sequential identifier. The last parameter determines whether to fire the parameter every time the object’s path loops past the time marker. The second parameter gives an id to the event. The first parameter determines the point at which the time marker is placed along the path. The capability ability to execute certain actions at any point along an object’s path is implemented with the AddTimeMarker method.

 2001 Prentice Hall, Inc. All rights reserved. Outline 11 Path3.html 67 <img src = "animatedbug_small.gif" 68 style = "position:absolute; top: 30; left: 5" /> 69 <img src = "animatedbug_small.gif" 70 style = "position: absolute; top: 10; left: 30" /> 71 <img src = "animatedbug_small.gif" 72 style = "position: absolute; top: 40; left: 40" /> 73 <img src = "animatedbug_small.gif" 74 style = "position: absolute; top: 65; left: 15" />

 2001 Prentice Hall, Inc. All rights reserved. Outline 12 Program Output The onmarker events fire when the large image is at the leftmost and rightmost extremes of its oval path, creating the appearance that the bee image is flying alternately behind and in front of the image of the pole.

 2001 Prentice Hall, Inc. All rights reserved. Outline 13 Sequencer.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Sequencer Control div { font-size: 2em; 14 color: white; 15 font-weight: bold } <script type = "text/javascript" for = "sequencer" 20 event = "oninit"> 21  <!-- 32 function show( object ) 33 { 34 object.style.visibility = "visible"; 35 } Lines 19–28 use a JavaScript event handler for the oninit event that fires when the sequencer loads. The Item object creates a grouping of events using a common name. The at method of the Item object takes two parameters: number of seconds to wait, and action to perform when that period of time has expired.

 2001 Prentice Hall, Inc. All rights reserved. Outline 14 Sequencer.html function start() 38 { 39 sequencer.Item( "showThem" ).Play(); 40 } function runPath() 43 { 44 pathControl.Play(); 45 } 46 // --> <div id = "line1" style = "position: absolute; left: 50; 53 top: 10; visibility: hidden"> 54 Sequencer DirectAnimation <div id = "line2" style = "position: absolute; left: 70; 57 top: 60; visibility: hidden">ActiveX Control <div id = "line3" style = "position: absolute; left: 90; 60 top: 110; visibility: hidden"> 61 Controls time intervals <div id = "line4" style = "position: absolute; left: 110; 64 top:160; visibility: hidden">For dynamic effects <object id = "sequencer" classid = 67 "CLSID:B0A6BAE2-AAF0-11d0-A152-00A0C908DB96"> Lines 66–68 add the Sequencer Control to the Web page. All the parameters for the Sequencer Control are set via scripting.

 2001 Prentice Hall, Inc. All rights reserved. Outline 15 Sequencer.html 70 <object id = "pathControl" 71 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Shape" value = 77 "PolyLine( 2, 0, 0, 250, 0 )" />

 2001 Prentice Hall, Inc. All rights reserved. Outline 16 Program Output The Sequencer Control is used to display four lines of text sequentially; when the fourth line of text has been displayed, the Sequencer Control then starts that fourth line on a PolyLine path, using the Play method of the Path Control. The fourth line at the end of its PolyLine path.

 2001 Prentice Hall, Inc. All rights reserved DirectAnimation Sprite Control Fig. 18.5Source image for Sprite Control (walking.gif).

 2001 Prentice Hall, Inc. All rights reserved. Outline 18 Sprite.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 " Sprite Control <object id = "walking" style = "width: 150; height: 250" 16 classid = "CLSID:FD D86E-11d0-89D6-00A0C90833E6"> Sprite Controls are used for dynamic control over animation. It allows you to control the rate of payback for images or individual frames. The object tag (lines 15–23) inserts the Sprite Control into a Web page. NumFramesAcross and NumFramesDown — specify how many rows and columns of frames there are in the animation file. Setting the AutoStart property to a nonzero value starts the animation automatically when the page loads.

 2001 Prentice Hall, Inc. All rights reserved. Outline 19 Program Output The image frames animated using Sprite.html.

 2001 Prentice Hall, Inc. All rights reserved. Outline 20 Sprite2.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 " Sprite Control <script type = "text/javascript" for = "bounce" 13 event = "onmouseover"> 14  <script type = "text/javascript" for = "bounce" 22 event = "onmouseout"> 23  Sprite Control 34 When the user moves the mouse over the Sprite Control, the event handler calls the Stop method. This action plays the animation in reverse at three times the normal speed. The script then calls the Play function to restart the animation. The onmouseout event handler sets the PlayRate back to the default of 1 when the user moves the mouse cursor off the animation. The PlayRate method controls the rate at which frames are displayed; 1 is the default value.

 2001 Prentice Hall, Inc. All rights reserved. Outline 21 Sprite2.html Program Output 35 <object id = "bounce" style = 36 "width:75; height:75" classid = 37 "CLSID:FD D86E-11d0-89D6-00A0C90833E6"> Animation of a ball bouncing.

 2001 Prentice Hall, Inc. All rights reserved Animated GIFs Fig. 18.8Viewing an animated GIF in Photoshop Elements. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.)