Flash « Interactive Llama : Stephen M. James : IndianapolisInteractive Llama : Stephen M. James : Indianapolis Interactive Llama : Stephen M. James : Indianapolis

Flash workflow productivity tips: part 2

PNGs from Adobe Photoshop: Record an action in Photoshop

Everyone agrees that color (hue, saturation, and brightness) inside Flash is inconsistent with any color space in Adobe Photoshop and Adobe Illustrator. The closest I can get to the correct color in Flash involves saving all my images into PNG format. This makes sense, because Macromedia Fireworks (Flash’s image editing sister) uses PNGs as it’s native format.

The annoying part of saving all your images that will end up in flash as PNGs is that it’s an extra step. An extra step that is made worse by Adobe ignoring the last saved file format (“No, Adobe, we don’t want to always save files as PSDs!”), and defaulting back to PSD everytime ones tries to save an image. To aid in that extra step, I recommend recording a action (or macro) in Photoshop to save an image as a PNG. Photoshop doesn’t support layered PNGs (you’ll have to import your PSDs into Fireworks and use the “Distribute to Layers” Command for that), but for single layer PNGs with transparency a macro is the way to go.

Directions for creating this Photoshop Action:

  1. Open a new document
  2. Locate your Action palette in Photoshop
  3. Press “Create New Action”
  4. Assign a function key (I recommend F12, since this is similar to publishing in Flash)
  5. Name the action “Save as PNG”
  6. Click “Record”
  7. Click File>>Save As…
  8. Select PNG from the File Format drop down menu
  9. Choose a standard location for your PNGs (I recommend “Desktop/PNG/”)
  10. Click “Save”
  11. Select “Interlace: None”
  12. Click “Stop Recording” on the Action palette

Now you can save your current Photoshop document as a ready for flash PNG with one keystroke!

Place frame ActionScript on is own layer

Ever get frustated when you come back to a project after a few months and have to change some ActionsScript and you can’t find it? I recommend creating separate layers for your ActionScript such as the following:

  • functions_as: for function calls
  • button_as: for onRollOuts, onRollOvers, and onReleleases
  • stop_as: for stop() and gotoAndPlays
  • music_as: for cueing music
  • sound_AS: for cueing sound effects

Hide mouseovers with another mouseover

If I have an area that I do not want to be an active mouseover area for a onRollOut, onRollOver, and/or onRelelease, I use a 0% Alpha shape and place it on a layer above. I then apply the following ActionScript to disable, the hand cursor for that area:

movieclip_MO.onRollOver = function() {
this.useHandCursor=false;
}

Now visitors, don’t know anything is there!

Creating a mouseover of a different shape than the image

If your image is square, but you need an irregular mouseover shape, select the area you want for the mouseover in Photoshop, make it a path, and then copy that path via the Clipboard into Illustrator. Then from Illustrstator, you can copy it via the Clipboard into Flash. Now you have a shape in Flash without any drawing in the Flash UI. I usually give my mouseover-only movieclips the extension “_MO”.

–Stephen M. James
www.smjdesign.com

Flash: Old Flash Players for testing

It’s a little hard to find the download page for the archived players that were previously released by Macromedia. The address has changed due to Adobe buying them, too. Every release is available in a 15MB download.

Here is the current address for Archived Macromedia Flash Players.

–Stephen M. James
www.smjdesign.com

Flash: Flash JavaScript Integration Kit

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

Flash: Using swapDepths()

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.

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 ) {
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

HTML/Flash: 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
www.smjdesign.com

Flash: Disabling Accessibility (disable tabbing)

By default, viewers can tab through a Flash movie. This is so that those with hearing disabilities, photo epilepsy, motor disabilities, cognitive disabilities, blindness or low vision can navigate a Flash site by using the tab key on their keyboard. For many applications this is good, especially Flash applications that include forms. Problems arise when one has scrolling clickable buttons off the screen.

Do we want users to able to click buttons that off the screen? This could break many Flash movies.

The way to stop users from tabbing a particular button is by setting the movieclips property, “tabEnabled” to false. Well, that’s a pain to do for every movieclip in an entire application. To disable tabbing through all clickable buttons, add the following line of Actionscript to the main timeline of your movie.

MovieClip.prototype.tabEnabled = false;

This will cause all movieclips created by Flash to disable tabbing.

–Stephen M. James
www.smjdesign.com

Flash: Parallax (multi-plane) scrolling with ActionScript

*NOTE: This explanation of parallax scrolling differs from the current (June ’06) MB2 site. I will be posting a new version that is proportional scrolling (proportional to the size of the site, that is if the user’s mouse is to the far right the scrolling is to the far right). See new post.

I finally got the parallax scrolling in Flash working on the MB2 site.

Parallax (or multi-plane) scrolling simulates a 3D camera moving. Objects far from the eye (backgrounds like sky or mountains) appear to move slower than objects close to the eye (foregrounds like the moving road below you when you are driving).

There are two ways to create parallax scrolling. One is to have three objects. One in the foreground, middleground, and background. If the camera is moving to the left, the foreground and the middle ground moves to the right (opposite direction), while the background move to the left (same direction). All three move at different speeds with the background moving the slowest and the foreground moving the fastest. The closer an object is to the viewer the faster an object appears to move. Here is an example of this at the Macromedia Website. (If this link doesn’t work, you can view this snapshot.

The desk moves the fastest, the wall moves slower, and the buildings through the window do not move at all.

Here is a published movie that should explain the previous text.

Here is the source file (in flash 7) for paralax scrolling. I will clean it up and add explanations as time allows.

–Stephen M. James
www.smjdesign.com

Flash: White artifacts in transparent Photoshop files (PSD)

The other day I discovered that all the Adobe Photoshop files I had imported into Macromedia Flash contained white artifacts (jagged edges) where they were supposed to be transparent (alpha channel fade). This problem was remedied by saving each Photoshop image as a PNG (Portable Network Graphic). I also noticed the colors were more accurate when saving them as PNG’s. PSD’s imported into Flash tend to be washed out and less saturated.

–Stephen M. James
www.smjdesign.com

Flash: Enabling a browser’s back button inside Flash

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/

Flash Tip – Don’t stop() at the end of a Tween

Don’t stop() at the end of a Tween. Insert the stop() frame a few frames after the ending frame of a Tween. If you do not, rollOver and rollOut Actionscript calls might animate incorrectly or get stuck on the wrong frame.

–Stephen M. James
www.smjdesign.com

Flash: Increase your Flash productivity (Tips and shortcuts)

Some of the following add-ons may not work in Adobe Flash CS3. I am still using Flash 8 due to the critical productivity of the following:
I’ve probably spent more than five hundred hours in the Flash authoring environment in the past year. The two hundred though have been the most productive. Below are many of the authoring productivity tricks I’ve learned. Most will only shave a second or two off each time you use them, but a few might save minutes by themselves.

I recommend linking most of these commands to shortcut keys for optimal efficiency. To do this, edit Flash’s keyboard shortcuts via Edit>>Keyboard Shortcuts (Flash Professional>>Keyboard Shortcuts on a Mac). You will need to create a new set of shortcuts, since you can’t edit the default set. Then, go to Drawing Menu Commands>>Commands and select the command you would like to make a shortcut key for. I hope that these help you.

Instance Alpha Toggle (0 to 100)
Most of the time I toggle movie clips between “0%” alpha and “100%” alpha. You’d think that Macromedia (and now Adobe) would have a way to do this action included into the Flash authoring environment, but that’s what JSFL is for after all. This JSFL command toggles between “0%” alpha and “100%” alpha of all the selected movie clips. If the previous value was not “100%” or “0%,” then no change occurs. The greatest advantage to having this command is that you can select multiple movie clips in multiple layers and change them all to “0%” alpha in one keystroke. I recommend re-assigning “CTRL+0″ to this command.

Creating a Motion Tween
The command, “Insert > Timeline > Create Motion Tween” should have a keyboard shortcut. Since next to creating key frames this is the command I use the most often, I deactivated keyboard shortcut for “Transform” which is “CTRL+T” and made it “Create Motion Tween.” You can also download a command I wrote that toggles the motion tweening. Yes, you can right click and select “Create Motion Tween” and “Remove Motion Tween,” but that requires using the mouse again.

Setting an instance’s name
So you’ve created a fade out tween with two keyframes for the mouse on, a fade out tween with two keyframes for the mouse off, and pulsing movie clip with two key frames for the mouse over. Then, you realize you forgot to set the instance name of the movie clip in each frame. If this has ever happen, download and install this JSFL command created by a Japanese web designer. This simple command copies the selected movie clip’s name from the library and makes that name the instance’s name. You select the six keyframes and with one shortcut key stroke, you’re back in the game.

Frame/Layer Distributor
If you have ever frame by frame (stop) animated a movie clip and then were asked to move the entire animation. You could take all the frames out of the main timeline by creating a movie clip–which is a great benefit of Flash. You can move objects across multiple layers (space), but not across multiple frames (time). This command, by Luar Productions, copies all the selected frames to their own layer. Once there, you will have what looks something like Flash’s “onion skinning,” but it will be the actual animation, not just guides of the animation. You can then move all the “former” frames that are now layers on the stage all at once since they are in the frame column on the timeline. Once they are moved use the Frame/Layer Distributor to convert the layers back to frames.

Removing Frames
If you have been using the frame context menu (right clicking) in order to remove frames, there’s a faster way. You can use the predefined “Insert > Timeline > Remove Frames” (Shift+F5) to delete them. I recommend changing this shortcut command to “CTRL+E” or “CTRL+R.” This is so it will be close to “CTRL+T” which in the previous paragraph I mentioned that you could set to “Create Motion Tween.”

Copying Frames with ALT
If you have been copying frames via the context menu or “CTRL+ALT+V,” you can also duplicate frames by holding down ALT and dragging. This will not insert frames and slide the current frames down the timeline though. It will replace the frames under it–which more often then not what I wanted to do in the first place.

Duplicating a Layer
While we are on the topic of copying frames, I discovered a Duplicate Layer JSFL command that replicates an entire layer–frames and all. It’s from FlashGuru.com. Now you don’t have to create a layer and copy the frames to that layer in order to duplicate it. This is a great for duplicating similar buttons in the user interface. I suggest making the shortcut key to this command Ctrl+D.

Locking Layers
Like Adobe products, you can use the “ALT+click” on the padlock icon to lock all but the selected layer. This causes all the currently locked layers to unlock when you are done though. To get around this, create folders (even if the groups objects aren’t topically similar) and lock the entire folder and thus it’s layers.

Stop frames
There is no doubt that the most used Flash commands are “stop()” and “gotoAndPlay()”. You can type the “ESC” key, then type “st” to write “stop()” in an actionscript window, but there are also Flash Commands you can download that you can assign a shortcut key to add “stop()” This means that you never have to open the actionscript editor.

Returning to the first frame
I frequently place my actionscript in the first frame of a movie in it’s only layer (called “as”) (that’s until I place a pre-loader). As the movie lengthens and the playhead moves down the timeline that frame is no longer visible, and I have to scroll back to the beginning of the movie to edit the actionscript. To prevent this, you can download this JFSL command that moves the playhead to frame 1. I recommend assigning it the keyboard shortcut “CTRL+1.”

Moving frame by frame
You can move one frame at a time with the “” keys in their respective directions. This is great for frame by frame (stop) animation.

Output Window
If you use Flash 8 and you usually downgrade your SWFs to version 7, you are probably now use to the Output window popping up and spouting out errors about embedded strokes. To stop this from happening, place the output window in a panel group with other panels on the far right.

Macromedia Exchange extentions mentioned in this post:
Alpha0to100Toggle
GoToFirstFrame
LayerFrameDistrib
LibFolderCreator
MotionTweenToggle
duplicateLayer
instanceNameSet

–Stephen M. James
www.smjdesign.com