Thursday, June 29, 2006

Flash: Using swapDepths()

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

--Stephen M. James

Saturday, June 24, 2006

Flash: Parallax (multi-plane) scrolling with ActionScript (Version 2)

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 &&
_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

Tuesday, June 06, 2006

HTML: Use more than Arial and Times New Roman

To the designer, it's a pain only using Arial and Times New Roman for headlines (well, the MacHead designers are probably using Helvetica and Times, but I regress. . .) , so one uses images. The problem is that images are static unless you have an image generation script package installed on your web server to create images on-the-fly.

So what's one to do?

A friend of mine actually sent me a link to Mike Davidson's site on sIFR 2.0 (Scalable Inman Flash Replacement) two years ago. I had forgotten about it until my creative director wanted a headline in a pixel font in a database driven site.

The concept

sIFR can replace short amounts of text with text rendered in the typeface you choose--whether or not your users have the font installed on their computer. A flash movie is created on the client side and uses JavaScript to pass text to it from the HTML (that's correct, no coding the text twice). That means with a few lines of Javascript, you can use any fancy font you want for headlines and pullout quotes.

--Stephen M. James