DesignWell

I’ve noticed some Google searches related to the Flash Back button post, so I thought I’d post on the Flash JavaScript Integration Kit.

You can call Actionscript function from JavaScript and call JavaScript from inside ActionScript. One use I’m considering using it for is for a new portfolio idea.

–Stephen M. James
www.smjdesign.com

NOTE: This article is only valid for ActionScript 2. In ActionScript 3, movieclip depths start at 0 and are contiguous. If you have 2 objects within a container, they will be at depths 0 and 1, respectively. You cannot have one at depth 0 and the other at 3 leaving 2 empty depths (depths 1 and 2).

So you want to change the depth of your pictures and text in Flash with ActionScript?

Check out this tutorial, Depths - How they work in Flash, at Kirupa.com. The first page you should already know if you been doing coding ActionScript professionally for some time. It is the second page that is the most interesting:

Major points of the second page:

• Timeline Zone: Flash places static items on the timeline in depths -16,384 to -1.
• Dynamic Zone: Dynamically placed movieclips are in 0 to 1,048,575 (and can only be removed from this range)
• Reserved Zone: Dynamically placed movieclips can be in 1,048,576 to 2,130,690,04, (but can’t be removed)
• The exception to these zones is createEmptyMovieClip method. There is no limit for the depth when creating an empty movieclip.
• The timeline refreshes when gotoAndPlay() is called. Timeline refreshes do not keep dynamically placed movieclips on the screen if they were placed there by a frame in the future of the timeline. Example: A movieclip is dynamically created (or swapDepths is called, placing the movieclip in the “Dynamic Zone”) in frame 10. A refresh occurs in frame 5, when gotoAndPlay(5) is called. The dynamically created movieclip (from frame 10) dissappears.
• If you use swapDepths to bring a movieclip which was placed on the timeline originally to a depth above 0 (not the Timeline Zone), then in a timeline refresh, that clip will not be removed in the clearing of the depths (the refresh) and a new instance of the same movieclip will be placed at its original depth, thus duplicating it and causing runtime errors that Flash Player will not flag.

So what is one to do? If you just swapping movieclips back and forth, like in this template for the Renaissance Pointe, then call swapDepths() with a negative value.

Looking for an Actionscript 3 tutorial?

You might try this tutorial on swapDepths for Actionscript 3.

I have already posted on Parallax (multi-plane) scrolling. Visit the previous post for more information on the process.

This is the script I used on the MB2 site. View a simplified sample movie of the new proportional version.

On the previous post, the scrolling can continue as far as you want. The mouse’s distance from the center of the page controls the speed of the scroll.There is another possible scrolling technique that uses the width of the screen to proportionally control were one is in the scrolling plane (background). This technique is best with smaller (in width) scrolling planes. The sensitivity of the mouse will be to strong if the scrolling plane is too large. This is the technique used by Macromedia in their Experience Studio 8 site (mentioned in previous post).

In this version, the distance of the mouse from the center of the masked window affects the speed. Scrolling will only occur over the distance of the of green gradient of the “middleground.”

The following is the gist of the ActionScript that is attached to movieclip, _root.main_mc.middlegroundContainer.middlegroundScrollContent,
in an onClipEvent handler:

onClipEvent (enterFrame) {
if (_root.objectsScrollable) {
if (_root.main_mc.middlegroundContainer._xmouse -390 ) {
endX = _root.main_mc.middlegroundContainer._xmouse;
}
_x = (_x + (-endX -_x) / 15);
_root.main_mc.foregroundContainer.foregroundScrollContent._x = (_x * 1.75);
_root.main_mc.backgroundContainer.backgroundScrollContent._x = (_x /4);
}
}

Download the source file in Flash MX 2004 format.
Download the published movie in Flash Player 7 format.

–Stephen M. James
www.smjdesign.com

UPDATE: This post using ActionScript 1. If you need to use ActionScript 2, try reading this post.

I spent the last day or so working on enabling a browser’s back (and consequently forward button) to navigate inside my company’s website, MB2 test site (NOTE: back button may not work at test side do to debugging).

The Idea
The idea is that you have HTML pages load into a hidden frame. If you would like to see an example, check out NikeID.com. The browser’s back button will work between sections of the all-Flash website, because a change in a hidden HTML frame will trigger a new entry in the browsers history. Then, the final trick is for the hidden HTML file to tell flash what page it is (1.html, 2.html, or 3.html) and change a variable inside the Flash movie that if changed will jump to the correct label (page1, page2, or page3) on the Flash movie’s timeline. To view my example, visit this link.

On the Shoulders of . . .
After a Google search I found this ActionScript.org Tutorial by Chris Hendershot. He based his code on Robert Penner’s script, Flash99good’s, and MustardLab.Developer’s. I was unable to find an ActionScript 2.0 version of this. If anyone know how to update this, please send an updated copy to me.

My Changes
As Chris mentions at ActionScript.org, Penner’s script doesn’t work in Safari, Mac IE 5, and Opera. My source files are a copy of Chris’s, but I believe that I have made my comments and code inside the Flash file a little clearer, so that people will not have to understand 99% of the programming in order to produce a working browser back button. I also made the page variable change when a new “page” is loaded (inside flash) instead of when the navigation button is clicked to go to the new “page.” This allows for animation between the “pages” (inside flash) which Chris’s ActionScript did not allow. I also was unable to get my version to work in Mac IE 5.

A short description of files available to download:

• 1.html - This is a file that is loaded into the hidden frame “historyframe” of “index.html” when ActionScript inside a frame labeled “page1″ inside the flash file, “test.fla”, calls a “getURL()” function
• 2.html - This is a file that is loaded into the hidden frame “historyframe” of “index.html” when ActionScript inside a frame labeled “page2″ inside the flash file, “test.fla”, calls a “getURL()” function
• 3.html - This is a file that is loaded into the hidden frame “historyframe” of “index.html” when ActionScript inside a frame labeled “page3″ inside the flash file, “test.fla”, calls a “getURL()” function
• 4.html - This is a file that is loaded into the hidden frame “historyframe” of “index.html” when ActionScript inside a frame labeled “page4″ inside the flash file, “test.fla”, calls a “getURL()” function
• MLAB_flash_setvariables.js - This is a JavaScript file that is included within flashpage.html contains functions that communicate with Flash (there is no reason to edit this file)
• flashpage.html - This is a page that loads the main flash movie (test.swf)
• gateway.fla - This is the source file for gateway.swf (there is no reason to edit this file)
• gateway.swf - This is a flash movie that contains functions that communicate with JavaScript.
• index.html - This is page that contains a frameset that has two frames, “historyframe” (for 1.html, 2.html, etc.) and “flashframe” (for flashpage.html)
• test.fla - This is the source file for test.swf that you will either need to copy ActionScript from or make the basis for your own flash movie.
• test.swf - This is the main flash movie.

To download or view the individual files, click here. The Flash file, “test.fla” is down saved to Flash MX 2004 format. A zipped archive, backbuttoninflash_SMJ.zip, of all the files can also be found in the same directory or downloaded here.

The following is a copy of the comments located in the first frame of “test.fla.

Layer: checkPage Script
The script in this frame should go in the first frame of your movie.

Layer: page Script / labels
This is the ActionScript that changes the page variable and the HTML page
(1.html, 2.html, etc) that is loaded into the hidden frame, “historyframe” of
“index.html.” The “page” labels (page1, page 2, etc) correspond to HTML pages named 1.html, 2.html, etc.

Layers: Current State/Label, variableDisplays, and FormLabels
These layers are for debugging/development purposes, so that you can see when the page variables change.

Layer: button Script
This square is present to click to go to and play the next secrion (”page”) of the Flash movie.

Layer: onClipEventEnterFrameMovie
This rectangle is present to constantly check to see if the page variable has
changed. The rectangle has a movieclip script instead of a timeline frame script. It calls the function checkPage() which is on the checkPage Script layer. That function will constantly check to see if you are on the right page
(according to the JavaScript inside the HTML pages).

–Stephen M. James
http://www.smjdesign.com/