Chapter 07: Scripting multimedia web pages
SCRIPTING MULTIMEDIA WEB PAGES
Upon the completion of this chapter you should be able to:
- Understand various scripting methods used for web page designing.
- Know the different types of programming languages.
- Know the OOP paradigm and java script.
- Know OOP paradigm and lingo
- Understand the java 3D model.
- Know the various multimedia formats.
7.1 Scripting multimedia web pages
Multimedia would be lifeless without scripting. Multimedia becomes interactive when scripting is added to it. The interaction features such as making a menu button, change of color on roll over of mouse, form filling on a web page and compiling and sending that information to another place; opening a new browser window when selecting a hyperlink; activating a new sequence when an image is selected or even making simple games.
7.1.1 Types of programming languages
Machine code is the most basic type of programming.
- Machine code is only one type
- It is composed only of the two binary digits: 0 and 1.
- Interpretation of the machine code depends on the hardware running in the computer.
Programming languages are of many types. The most important languages are:
- General-purpose programming language
- Scripting programming language
- Object-oriented programming language
General-purpose programming languages include Java, C and C++. These languages are to be compiled by a compiler program. A compiler is a program which translates source code written in a particular programming language into computer-readable machine code that can be executed on its own.
General features of scripting languages are:
- Easy to learn and use
- Need not be compiled
- Generally interpreted at run-time
- Associated with a diverse range of existing computer components
- Able to communicate with other programming and scripting languages.
7.1.2 Basic control structures
Programming languages have control structures that direct the flow of information. The three basic control structures are:
Sequential control structure: The steps from start to finish are perfectly carried out one after another, without any interruption.
Selection control structure: These are statements where a true/false choice is made.
The' if' statement: If the condition is true, then a certain action or actions can be triggered; if false, then they are ignored. These types of statements are commonly known as an 'if' statement.
The 'if/else' statement: If the condition is true, then a certain action or actions can be triggered; if false, then a certain action or actions can be triggered.
Repetition control structure: These are statements that are frequently acted upon while a particular condition remains true. While the condition is true, the required actions will be carried out. As soon as the required condition is false, then the loop will be ignored. It is important to note that there must always be some way to make a condition false.
The basic control structures can also work together in a sequence or nested within each other to quite complex statements.
7.1.3 The OOP paradigm
OOP is based on grouping scripting information into classes. From a class, multiple instances can be made and used. These instances are referred to as objects. Each object has properties and methods. These programming objects are same as real world objects.
All the objects such as frames, movieClips, movies, cast members, buttons, text fields, etc. are just objects made with code. They are visible because they have properties such as size, color, position, etc. and the user can use them as they have methods such as play, stop, edit, etc.
Setting up for code
- ActionScript is inside the frames of a timeline and on objects such as buttons and movieClips.
- Lingo is like ActionScript, but has different types of scripts depending on where it is used.
An event occurs when the mouse is moved or the mouse button is clicked, a key is pressed or a web page is loaded. It is a single occurrence though it may be repeated many times a second, such as enterFrame in ActionScript and Lingo.
In ActionScript, any code that is correctly added to an individual frame in any timeline will be executed when the playhead enters that frame.
In Lingo, code must be with in an event handler.
- <form name="loginForm">
DOM example: Text field for login
To access the text in a text field i.e 'username' located in a form called 'loginForm' on a webpage:
document.loginForm.userName.value (read this from right to left)
Here the scripting statement access the 'value' property of the text field object called 'userName' that is in the form object called 'loginForm', which is in turn is in the web page's document object. The end result of this statement is text string value.
Properties are generally linked to the physical appearance of scripting objects. In real life, objects also have properties. Some properties of object are read-only, that is the property's value can be retrieved but cannot be changed. Other object properties can be retrieved and changed. These features are referred to as testing or setting a property's value.
In this example, the scripting statement access the value of the 'width' property of the picture object called 'greenHondaCR', that is in web page's document object.
document.greenHondaCRX.width = "257"
In this example, the scripting statement is setting the value of the 'width' property of the picture object called 'greenHondaCR' to '257'. The 'greenHondaCR' picture object is in web page's document object.
Methods are linked to the purpose and actions of an object. Real life objects can also have methods/actions. Methods require extra information for the object to carry out the action correctly. In scripting languages this extra information is referred to as a methods parameters or arguments.
In this example, the scripting statement is using the 'go' method of the history object. Methods are typically recognized by the use of brackets "()" after the methods name. The brackets are used to enclose any parameters that you send to the method. In the above example, we are sending negative one (-1), which instructs the 'go' method of the 'history' object to load the previous webpage.
7.1.5 OOP and ActionScript
In ActionScript, select the object instance on stage and enter an instance name in the Properties panel. This is same as naming variables.
ActionScript uses target paths to keep track of object instances. These paths are laid out like a road map and object should have a name to appear on this road map. This road map is a hierarchy, with the main timeline at its base.
ActionScript shows the object hierarchy in a file by clicking the 'insert target path' button situated in the ActionScript Panel.
Let us take an example "Target path 'road map': Text field and button for login," where we have two objects a movie clip with a text field in it and a button. They are in the root timeline. Select each item and verify its name in the Properties Panel.
- The movieClip has the name 'loginClip'.
- The text filed in the movieClip is named 'userName'.
- The button is name ' btnLogin'.
- Select the button in the root timeline and open the ActionScript Panel in 'Expert Mode' Click the 'Insert a target path'' button.
- The 'Insert Target Path' dialogue box opens and shows a visual representation of the 'road map' of objects currently accessible from the timeline that we are in.
- In the 'Insert Target Path' dialogue box, select 'Dots' and 'Absolute' options.
- Click the small plus sign '+' next to the movieClip icon name 'loginClip' to show the text field object in it.
- The actual target path of the selected movieClip object 'loginClip' appears.
- Click the text filed icon 'userName', the target path alters.
- In ActionScript, absolute target paths always start from the _root timeline of the file. Relative target paths start with the current object selected on stage.
- Click on the option 'Relative'.
- Click on the small plus sign '+' next to the movieClip icon name 'loginClip' and select the 'userName' text field.
- The target path alters. Instead starting with '_root' it now starts with 'this', indicating the objects that are currently selected on stage.
- We have a target path from the item we have originally selected on stage, the 'btnLogin' button, to the text field 'userName' that resides in the movieClip 'loginClip'.
7.1.6 OOP and Lingo
In Lingo, the most commonly used objects are cast members, and cast member object instances are sprites. In Director the objects must be in the movie's cast to appear on the stage. All cast members that are placed in the score have a default cast member number and a unique cast member name. Through these two cast member properties, Lingo communicates to specific cast members and its associated sprites.
To communicate to individual sprite instances in the score, Lingo uses the sprite's number.
Sprite Number Example
In Director, everything that is on the stage goes into a channel in the score. Only one sprite can occupy a channel.
For example the sprite's number is four, the syntax to access the width property of this sprite would be:
the width of sprite 4
Lingo has two types of syntax: The first code sample uses 'dot' syntax, which is in wide use now. The second example is what Lingo calls 'verbose' syntax. Almost any Lingo statement can be written with either dot syntax or verbose.
In the first 'dot' syntax example, the scripting statement is targeting the sprite object that is in channel four of the score and accessing its 'width' property. To Lingo, this whole complete line of code represents one integer value representing the sprite's current width in pixels.
Cast member Name Example
In Director, everything that is created or imported into the cast is allocated a cast member number and a unique cast member name.
Select a cast member and enter its name in the 'Cast Member Name' text field.
For example, a cast member 2, which its name "green square":
member ("green square")
It is standard industry practice to use cast member's name rather that its number. In some special circumstances the use of cast member numbers would be effective.
For the sprite example in Lingo code, the syntax for targeting cast member objects can be written in both 'dot' and 'verbose' syntax.
In the first 'dot' syntax, the scripting statement is targeting the cast member named "green square" and accessing its 'width' property. To Lingo, this whole complete line of code represents one integer value representing the cast member current width in pixels.
Self check 7.1
1. If more than one cast member has the same name, what will Lingo do if that name is used in script?
7.2 Java 3D
Java 3D is a set of standards that have been broaden under Java 2 for creating 3D graphics. Java 3D is a scene graph-based 3D application programming interface (API) for the Java platform. It runs on top of either OpenGL or Direct3D.
Advantages of Java 3D:
Platform Independent: It is platform independent as it is an API extension of Java.
Object-oriented 3D Graphics: It is carried out by using a scene graph-based 3D graphics model.
Optimized Speed: During runtime, the scene graph of the fastest possible renders is optimized by using the rendering capability bits. This facilitates the Java 3D to be used in interactive graphics environments as well as high quality graphics.
Rise of 3D loaders: Free availability of Java 3D VRML97 file loader and browser, with their codes.
Support Exotic Devices: The com.sun.j3d.utils.trackers package provides Fake space, Logitech, and Polhemus devices.
Disadvantages of Java 3D:
Standard Extension API: Java 3D is a standard extension API to the Java2 platform, which is regarded as a risk factor as it may limit the portability of Java 3D code across platforms.
Availability Limitation: Sun is the only key vendor that is supporting Java 3D through Solaris and Win32. The cross-platform portability is a serious issue for Java 3D.
Hiding of Rendering Pipeline details: Java 3D a high level API, intentionally hides details of the rendering pipeline from the developer thus making it incompatible for applications where such details are required.
Heavyweight components: Java 3D, being heavyweight, carries out the rendering through native non-Java peer. In general the lightweight and heavyweight components of Java do not mix well when placed together in one object or window.
7.2.1 Key differences between Java 3D and VRML
Program approach: In creating 3D worlds, VRML adopts a content-centric approach and Java 3D adopts a program-centric approach.
Flexibility: Java 3D is more supple in terms of programming style and the functions available. The better number of available functions makes Java 3D a better tool in creating specific and modified behavior and applications. Java 3D provides extensive support for behaviors, interpolators, clipping and collision detection.
Application complexity: VRML is more suitable for simple graphics applications where as Java 3D is more suitable for creating the content or 3D world applications.
File format: VRML has a standardized file format. Java 3D, has capability to support compiled code of low level API for faster 3D graphics rendering.
Compatibility: Java 3D supports VRML objects through the VRML97 loader but VRML cannot run Java 3D programs.
Dynamic variation of scene graph: The scene graph that describes the virtual 3D world created in Java 3D can be changed dynamically but in VRML it is not feasible.
Vendor support: Most of the vendors support VRML than Java 3D.
Some part of Java 3D is essentially evolves from OpenGL. OpenGL is not well suited for developing complicated 3D graphics applications due to programming, debugging, and maintenance efforts.
- Multithreaded scene graph structure
- Generic Real-time API, usable for both visualization and gaming
- Support for retained, compiled-retained, and immediate mode rendering
- Includes hardware-accelerated JOGL, OpenGL and Direct3D renderers (depending on platform)
- Platform independent
- Native support for head-mounted display
- CAVE (multiple screen projectors)
- 3D spatial sound
- complicated virtual-reality-based view model with hold for stereoscopic rendering and complex multi-display configurations
- Programmable shaders, supporting both GLSL and CG
- Importers for most mainstream formats, like 3DS, OBJ, VRML, X3D, NWN, and FLT
- Stencil buffer
Self check 7.2
1. List out the advantages and disadvantages of java3D
7.3 Multimedia Formats
Multimedia elements like audio or videos are stored in media files. Observe the file extension to identify the media type. If the file is an HTML page, the browser spots the file extensions as .htm or .html. If it is an XML file, the browser spots it as .xml extension and the style sheet is spotted as .css. Image formats are identified by extensions like .gif and .jpg.
Windows Multimedia Formats:
Windows media files have the extensions like .asf, .asx, .wma, and .wmv.
Advanced Streaming Format (ASF)
ASF is particularly designed to run over the Internet. ASF files include audio, video, slide shows, and synchronized events. These files should be well compressed and are delivered as a constant flow of data. The file size is not restricted but should be well compressed to match various bandwidths.
Advanced Stream Redirector Format (ASX)
ASX files are metafiles that provide information about files used to describe multimedia content. These are plain text files
Windows Media Audio Format (WMA)
WMA format is developed by Microsoft to handle all types of audio content. Similar to ASF format these files too should be well compressed and are delivered as a constant flow of data. The file size is not restricted but should be well compressed to match various bandwidths.
Windows Media Video Format (WMV)
WMV format is developed by Microsoft to handle all types of video content. Similar to ASF format these files too should be well compressed and are delivered as a constant flow of data. The file size is not restricted but should be well compressed to match various bandwidths.
Windows Media Audio Redirector Format (WAX)
WAX files are similar to ASX files, but designed to describe audio files.
Windows Media Player Format (WMP)
WMP files and WMX are reserved file types for future use by Windows. Multimedia elements like audio or video also have their own file formats with different extensions.
Matroska File Format: which aims to be an all-enclusive, open multimedia container format.
Acorn Replay File Format: Acorn Replay (RPL) file format used on RISC OS machines. The format is often seen on Eidos games, but is designed as a general-purpose format.
Self check 7.3
1. List out various multimedia formats and their uses.
- This is the seventh module for the multimedia web development course. This module explains about the different types of programming languages such as General-purpose programming language, Scripting programming language and Object-oriented programming language.
- In this chapter you have learnt about control structures that direct the flow of information in programming language. Additionally you have learnt the different types of control structure such as sequence, selection and Repetition
- It also explained the Java 3D, a scene graph-based 3D application programming Interface.
- Finally you have learnt about the advantages and disadvantages of Java 3D and the key differences between Java 3D and VRML
DOM - Document Object Model
ASF - Advanced Streaming Format
ASX - Advanced Stream Redirector Format
WMA - Windows Media Audio Format
WMV - Windows Media Video Format
WMP - Windows Media Player Format
WAX - Windows Media Audio Redirector Format
David Miller (1996): Web multimedia development - pages 649; ISBN1562056832, 9781562056834
Timothy Paul Garrand (2001): Writing for multimedia and the web - Pages 341; ISBN0240803817, 9780240803814
Stephen McGloughlin (2009): Multimedia on the Web - Pages 193; ISBN1575766485, 9781575766485
Timothy Paul Garrand (2006): Writing for multimedia and the Web: a practical guide to content development for interactive media - Pages 478;ISBN0240808223, 9780240808222
A. True/False Questions
1. Machine code is composed only of the two binary digits 0 and 1. (TRUE/FALSE)
2. Multimedia would be lifeless without scripting. (TRUE/FALSE)
3. Programming languages do not have control structures to direct the flow of information. (TRUE/FALSE)
4. OOPs is based on grouping scripting information into classes. (TRUE/FALSE)
5. In OOP's each object does not have properties and methods. (TRUE/FALSE)
6. An event will not occur when the mouse is moved or the mouse button is clicked. (TRUE/FALSE)
7. ActionScript uses target paths to keep track of object instances. (TRUE/FALSE)
8. Java 3D is a scene graph-based 3D application programming interface (TRUE/FALSE)
9. Java 3D is platform dependent. (TRUE/FALSE)
10. WMV format is developed by Microsoft to handle all types of video content. (TRUE/FALSE)
B. Multiple Choice
1. The different types of programming languages are __________
A) General-purpose programming language
B) Scripting programming language
C) Object-oriented programming language
D) All the above
2. In _____________ the steps from start to finish are perfectly carried out one after another, without any interruption.
A) Sequential control structure
B) Selection control structure
C) Repetition control structure
D) None of the above
3. The OOP stands for
A) Object Operating Programming
B) Original Orientated Programming
C) Object Orientated Programming
D) Object Orientated Patch
4. Which of The following is a basic control structures?
C) A& B
D) None of the above
5. In OOPs the instances are referred to as ________
D) None of the above
A) Document Oriented Model
B) Document Object Model
C) A& B
D) None of the above
7. ____________ shows the object hierarchy in a file by clicking the 'insert target path' button
D) All the above
8. In creating 3D worlds, VRML adopts a _________________ and Java 3D adopts a __________________
A) content-centric approach , program-centric approach.
B) program-centric approach, content-centric approach
C) program-centric approach, program-centric approach
D) None of the above
9. Extensions used by Windows media files are
D) All the above
10. __________files are metafiles that provide information about files used to describe multimedia content.
D) All the above
Chapter 7: Answers (True/False Questions)
1. T 2. T
3. F 4. T
5. F 6. F
7. T 8. T
9. F 10. T
Answer (Multiple Choice Questions)
1. D 2. A
3. C 4. C
5. B 6. B
7. A 8. A
9. D 10. C