1 x,y positioning - dimensions one and two
Assuming that the screen is a two dimensional representation of a three dimensional space, then the top of the screen is the horizon, and therefore objects appearing at the top of the screen are as small as possible. The bottom of the screen represents the foreground, and objects in the foreground appear at their largest.
After embedding the flash movie into a layer (flashlayer), JavaScript moves the layer and the image around by changing the flashlayer.top and flashlayer.left values. Reducing both the values moves the image towards the top left hand corner of the screen, increasing them both moves it to the bottom right hand corner of the screen.
next page...
';
backer=' 2 z positioning - the third dimension
The laws of perspective work simply enough - this cow right here in front of us looks pretty big in comparison to that similar sized cow standing way over there on the horizon, but if they were to switch places, or we were to walk over to the other cow, their relative sizes would swap over, the nearer cow would now look much larger than its fellow ruminant.
JavaScript communicates with Flash movies via the LiveConnect feature. One of the functions is SetZoomRect(a,b,c,d) where a,b,c,d are the x and y coordinates of the four sides of the zoom area. For example, if a Flash movie (flashobject) was 200 x 200 pixels in size, then flashobject.SetZoomRect(0,200,200,0) would show the whole picture, while flashobject.SetZoomRect(98,102,102,98) would zoom in on the central four pixels of the picture.
back one page...
next page...
';
backer=' By coordinating 1 and 2 above, so that the embedded flash movie is zoomed to the maximum at the bottom of the screen, while the same object appears at it\'s normal size on the horizon, an impression of 3-D depth appears on the screen. The trick here is to make sure that, although the actual animated image is quite small, the Flash movie it appears in is very large in proportion to it. In the example of our “flying cigar”, the image of the actual saucer is 100 times smaller than the Flash movie itself. The beauty of Flash is that the blank area the makes up the rest of the movie takes up no space at all in the compiled version - the total file size of a Flash movie is dictated not by the overall size of the movie, but the amount of different material within it.
In general, we found it easier to separate the movement of the animated object into a left and right component, and an up and down component.
The left and right component simply moves the layer and movie to the left or right.
The up and down component moves the layer up and down, and zooms in and out on the image within the movie within the layer.
Diagonal movement is controlled by a function which calls both the above components e.g. right, down and zoom in or left, up and zoom out.
back one page...
next page...';
backer=' user interaction coordination & control - 2 coordination & control - 4 '+backer;
}
if (helpvalue==10) {
helptext='
8 - Coordinating and Controlling the Animation - 4Limits are set on both how large the image can zoom to, and where it can roam to on the screen - this stops it scrolling off the page.The rate at which the object zooms on the screen is proportional to how large the object is. This means that when objects are increasing in size, the rate at which they do so gets slower as they “lumber into view”, while objects disappearing towards the horizon do so faster and faster.
back one page...
';
backer=' user interaction coordination & control - 3 embedding the flash movie '+backer;
}
if (helpvalue==11) {
helptext="
9 - Embedding the Flash object and Browser Detection - 1Firstly, it is necessary to set up an appropriate Document Object Model Switch (DOMS) for the layer in which the Flash movie is to be embedded. Different browsers handle Dynamic HTML via JavaScript in different ways (especially with Flash embedded). For them all to be able to run the same page correctly, a DOMS is necessary to resolve these browser differences. An example of a basic DOMS appears below.
HTML component:
<DIV ID="saucerLayer" STYLE="position: absolute;"></div>
JavaScript component:
function set_up() {
if (document.all) { //all versions of internet explorer
doc = 'document.all["';
sty = '"].style';
htm= '"]';}
else if (document.layers) { // netscape 4
doc = "document.";
sty = ""
htm= ".document"}
else if (document.getElementById) { // netscape 7
doc="document.getElementById(\'";
sty = "\').style";
htm= "\')";}
else {alert("Unrecognized Browser Detected");}
saucerLyr = eval(doc + 'saucerLayer' + sty); saucerHTML = eval(doc + 'saucerLayer' + htm);}
next page...
";
backer=' user interaction coordination & control embedding the flash movie - 2 '+backer;
}
if (helpvalue==12) {
helptext="
10 - Embedding the Flash object and Browser Detection - 2Now that the layer is properly set up, it is necessary to populate it with the Flash movie. Predictably, different browsers handle writing to layers in different ways. Older versions of Netscape use the document.write method, while most other browsers rely on the document.innerHTML method. In this case:
JavaScript component:
if(document.layers) {
saucerHTML.open();
saucerHTML.write(maintext);
saucerHTML.close();
}
else
{ eval('parent.saucerHTML.innerHTML = maintext');
}
where “maintext” is a string representing the Flash movie
back one page...
next page...
";
backer=' user interaction coordination & control embedding the flash movie - 1 embedding the flash movie - 3 '+backer;
}
if (helpvalue==13) {
helptext="
11 - Embedding the Flash object and Browser Detection - 3An example of the maintext string for a flash movie called "myFlash":
maintext='<OBJECT id="myFlash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width='+(available_width)+' height='+(available_width/3)+'> <PARAM NAME=movie VALUE="example.swf"> <PARAM NAME=play VALUE=false> <PARAM NAME=loop VALUE=true> <PARAM NAME=menu VALUE=true> <PARAM NAME=quality VALUE=high> <PARAM NAME=wmode VALUE=transparent> <PARAM NAME=salign VALUE=T> <EMBED src="example.swf" play=false loop=true menu=true quality=high wmode=transparent salign=T name=myFlash WIDTH='+(available_width)+' HEIGHT='+(available_width/3)+' TYPE="application/x-shockwave-flash" swLiveConnect=true
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash"> </EMBED> </OBJECT>';
Note that the dimensions of the Flash movie are variable, and not fixed. These variables are generated in direct proportion to the available area of the user’s screen, so the Flash movie is given the appropriate dimensions before it is written to the page - this allows the page to have the same appearance across all browsers and screen sizes. These screen variables also help to control the rate of movement and zooming for the image - a large screen needs a faster rate.
back one page...
next page...
";
backer=' user interaction coordination & control embedding the flash movie - 2 embedding the flash movie - 4 '+backer;
}
if (helpvalue==14) {
helptext='
12 - Embedding the Flash object and Browser Detection - 4Finally, one more browser issue is addressed: for LiveConnect to work via JavaScript, the Flash movie must be correctly identified. Again, early versions of Netscape need to be directed to the precise object embedded in the exact layer, while most other browsers use the regular document.object method.
Hence:
if (document.layers) {flashsaucer=saucerHTML.embeds.myFlash;}
else
{flashsaucer=eval(\'document.myFlash\');}
The Flash movie "myFlash" is now resolved to "flashsaucer".
back one page...
';
backer=' user interaction coordination & control embedding the flash movie - 3 fine tuning '+backer;
}
if (helpvalue==15) {
helptext='
13 - Fine Tuning the AppearanceWhen the user moves the animated object, stop the animation and show an individual frame of the movie tilting to the left or right to add to the effect of movement.
flashsaucer.StopPlay();
flashsaucer.GotoFrame(frameposition);
where "frameposition" is the appropriate frame number.
When the user stops controlling the animated image, restart the animation again:
flashsaucer.Play();
';
backer=' user interaction coordination & control embedding the movie '+backer;
}
if (helpvalue==17) {
helptext='
15 - Browsers issues, room for improvement and other issuesEarly versions of Netscape place all embedded Flash objects at the top of the z-index stack, which is a problem if you want to write anything on top of the image or movie (e.g. control or help buttons or any useful text). At present, this makes it quite difficult to foresee an easy way of populating a window with multiple Flash movies, all animated and embedded within moving layers - you want to be able to control their stacking order.
Unresolved testing issuesFor an unknown reason, the code starts to misbehave after a while when using Netscape 4.08 running in Windows XP (independent of whichever compatibility mode used). Exactly the same setup in Windows 98 does not generate the same problems.
Also, early versions of Netscape do not support transparency in Flash, so even static images in layers in the background will not appear behind the flash movie - when combined with the stacking issue, this is particularly troublesome during "sleep mode".
';
backer=' user interaction coordination & control embedding the movie performance issues '+backer;
}
if (helpvalue==18) {
helptext='
16 - Performance IssuesAll things being equal, the animation should perform adequately across all browsers and computer set-ups. One obvious exception to this rule would be that the speed of the graphic is dependent on screen resolution - make your browser window only half the size of your screen, and the repsonse times and handling of the graphic improve considerably. The usual issues regarding hard disk speed and screen resolution also apply.
Between the browsers, in general, overall performance on Internet Explorer outstrips that of Netscape, so if it looks bad in Netscape, try IE! Older versions of Netscape appear to handle the graphic better than the newer versions, but crash more readily.
';
backer=' user interaction coordination & control embedding the movie browser issues '+backer;
}
if (helpvalue==19) {
helptext='
17 - Download PageThis entire site is available for download as a single .zip file (approx. 65Kb). Contained along with the reference text, images and Flash movies is the original Flash generator (position.fla) for you to alter for you own devices. The original Flash generator for saucer.swf is not included, but the Flash statistics for it are available here. The original code is copyrighted, but if you include a reference link back to this original source (http://www.sonik-systems.com/saucer) then you have the author\'s permission for use.
download the zip file
';
backer=' '+backer;
}
if (helpvalue==22) {
helptext='
20 - Final Note
"Labitur et labetur in omne volibus aevum"
We gladly admit that the solution required a fair amount of dodgy reverse engineering to produce an effective, smooth result.
Still, it works (rather well in IE) and appears to offer new opprtunities for animation and user-interaction on the web.
Best regards,
';
backer=' '+backer;
}
if (helpvalue==20) {
helptext='
18 - Contacting the Authorall correspondence, suggestions, criticisms or witticisms welcome and gratefully accepted via email at:
digsby@sonik-systems.com
alternatively, you can leave a voice message in the UK at:
+44 (0) 7763 217437
thank you for your attention
"may a star shine brightly on our meeting"
digsby wyscher - ©mmiv
';
backer=' '+backer;
}
if (helpvalue==21) {
helptext='
19 - Flash Ship StatisticsFile name: saucer.swf
Size of movie: 2000px by 800px
Number of Frames: 58 @ 24 fps
Ship tilt to far left: frame(0)
Ship tilt to far right: frame(29)
Ship in middle: frame(15)
';
backer=' '+backer;
}
if (helpvalue==-1) {
tablebottom='';
helptext='
Sleep Mode settings
';
if (document.layers) {helptext=helptext+'
';
}
if (helpvalue==2 || helpvalue==16) {
if (loaded) {var indenovis='14 - ';}
if (!loaded) {var indenovis='';}
helptext='
