|
 |
|
|
|
|
|
HOW TO: Add an iFrame to a SWiSHmax movie.
Putting HTML, JavaScript, PHP, etc. into SWiSHmax - well, not really. More like on top of SWiSHmax.
HTML iFrames - most people love them or hate them and yet others have no clue what they are. But if you want that HTML or PHP or JavaScript in your SWiSH movie, you need an iFrame and then some.
The iFrame is a web page element that creates an inline frame as an object to hold another HTML document. The iFrame holds a self-contained document within a container document buy simply loading another web page within the <iFrame> tags. Simple enough, but more is needed to successfully put that other web page into your movie, namely DHTML.
DHTML (Dynamic HTML) is the combination of several built-in browser features of modern browsers (fourth generation) that enable a web page to dynamically change after it has been loaded. It is not a programming language although in this example I use some JavaScript to implement and control an iFrame's size, location and content.
The main problem with DHTML is a lack of browser standards. So cross-browser DHTML basically means using various scripting techniques to sniff out which browser the user is using and execute the code intended for that browser. For me, there are too many browsers out there ...and then there are the Mac users.
So my example works on some browsers, operating systems and hardware, but not all. Need better coverage? Study up cross-browser DHTML techniques and change the JavaScript. But later for I want to show you the basics of what I already have in the example.
This implementation also uses Flash's fsCommand as an interface between the movie's scripting and JavaScript. This alone is limiting since it is not available on all machines. My previous examples (HSB) used JavaScript instead of fsCommands, but this is annoying to IE users due to the incessant navigation 'click' associated with every JacaScript command executed.
In keeping with my earlier work, this is named gsbHSBv6 for future reference. HSB simply stands for "HTML Scroll Box." I have added the gsb to better enable forum searches. (Keywords in searches must be more than three characters in length.)
gsbHSBv6 Features:- Multiple iFrames in a movie are allowed.
- Circumvents "domain security" allowing any web pages across sites.
- Dynamic, movable and resize-able HSB's.
- Delete, hide and re-show content.
- Transparency (background) allowed enabling dynamic background control.
- Enables load-time call-back functionality via javascript and the document onLoad method.
- One time code initialization allows 'persistent' cross-scenes iFrame content.
Here is that example: gsbHSBv6 Example1
How it alll works
...will take me some time to write up and example. But basically, some initialization code is placed in the movie's preloader scene. In the main scenes, 'place holders' (rectangular objects) are authored for each iFrame to define the name, location and size for each. (Place holder names need to be unique throughout a movie.) Some initialization and control script is placed in the onLoad section of each place holder. During movie initialization, place holders are replicated into a higher level for possible cross scene use. Finally, when directed to load a URL into an iFrame, JavaScript creates a DIV tag containing an IFRAME tag, positions, sizes and loads the iFrame with the URL.
The movie's Stage object is integral to iFrame control. (See code in the preloader scene.) The authored place holder gives the desired iFrame location in terms of movie coordinates, top/left. The movie's Stage object is used to determing the browser window's offset for the movie itself. The Stage object is used to capture the browser window resize events.
Simple enough, no?
All comments are welcome, particularly regarding what browsers/machines things work and do not work on.
gsb
Example1.zip index: (attached)- index.html - Example1.swf's HTML container page,
- Example1.swf, Example1.swi - actual example movie,
- levelSeed.swf, levelSeed.swi - level initializer movie,
- error.html- default URL for iFrame load,
- simple.html, simple.swf, simple.swi - simple movie to load,
- transparent.html - simple HTML to load with call back, and
- crossScene.html - another simple HTML page to load (bottom left in Example1.)
***EDIT: Documentation is underway. See here: .: DOCUMENTATION :.
|
|
|
|
