Interactive Llama

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

*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

If you open up an Illustrator 10 file in Illustrator CS2, some gradients might be gray (de-saturated), but the colors on the ends of the gradient look fine.

Illustrator CS2 will not let you gradient a Pantone (Spot Color). This makes since in the printing world, but if you are using Illustrator to layout a webpage, it is annoying. The answer is to change the Pantone swatch that is used in the gradient to a process color within the Swatch palette.

–Stephen M. James
www.smjdesign.com

With cheap 300GB disk drives available now it has become easier to procrastinate archiving one’s creative work. Everyone hates archiving their work. It’s so boring–so uncreative. The following is how I archive my work and hopefully it will allow you to archive faster and more efficiently.

The main points to consider when archiving are:

• Do I have everything for this project?
• Do have a list of everything on the disk, so I can locate files in the future?
• Do I have a way of marking that I have archived this project and so can delete my project folder in the future?

DVDs vs CDs
With printable DVDs costing a few cents more than their CD counterparts and the ubiquitousness of DVD players now, I always burn one DVD instead of trying to burn multiple CDs.

Listing files in OS X
A co-worker of mine said there used to be a print window (a Finder window) command in OS 9. I was unable to find an equivalent in OS X. One could screen capture the Finder window in List mode and print the resulting PNG or PDF. That would work, but it would be a pain expand all the folers, and you would still need to fold up the piece of paper and place it in the CD case.

A few months ago, I discovered an AppleScript on a forum that uses Unix commands to recursively list all the file contents of a folder’s directory tree (meaning all subfolders and their contents), and saves it to a text file. Here is the folderPrint script, and the folderPrint OS X application (PowerPC version).

The folderPrintApp.app will open up a Choose Folder dialog and ask you for a folder. It will then save a text file named “folder_list.txt” to the Desktop. You can open this text file and copy all the text (Ctrl+A) into a textbox in the following disk template.

Listing Files in Windows
Coming Soon. . .

Disk template
If you have a direct to CD printing printer (or if you want to use labels), use this archival CD label template (PDF made with Illustatrator CS2) for the Epson R220. For directions on using the Epson R220 to print to CD in Illustrator, read my previous post on the topic. It isn’t the prettiest, but your archive disk ends up in a CD album or with a job ticket, after all.

Marking that a folder that has been archived
I place a text file called “_FOLDER_ARCHIVED” in a folder after I archive it. With the “_” first, I know it will appear at the top of the file list. Once this file has been placed in a project folder, I know that I can delete it, since I have a backup copy.

–Stephen M. James
www.smjdesign.com

Microsoft Word is an often overlooked tool in a designers toolbox. Not in actual design, but in data organization. If you are given a column of information and want to make it a row of information or select only one column of tab separated text, Word is an excellent tool.

Selecting only one column of tab separated text
There are two commands under the Table Menu, “Text to Table” and “Table to Text.” This will divide any text by tabs, paragraphs, commas, or any other character into table cells (rows and columns). From there, you can select a column with the mouse (click above the column, so the cursor turns into an arrow pointed down). Then, copy the whole column to the clipboard (Ctrl+C). Open a new document, and paste the column into the new document (Ctrl+V). Now use the “Table to Text” command under the Table Menu to convert the table back into paragraph text. Now you can select any column you want and bring it into Illustrator or InDesign as its own text box. Now that each column is it’s own text box. You can right justify any of the columns.

–Stephen M. James
www.smjdesign.com

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

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/

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

Over the past 2 weeks, the Epson R220 my company bought has worked intermittently. I called Epson and their technical support said that they would only support the printing of CD labels from their vastly limited and color distorting printing program, Epson Print CD.

Sample File
This PDF has the correct offsets on a US Letter page setup to print directly to the CDs.
The actual offsets are 0.661 in (X) and 0.3621 in (Y) from the left top of the page. That’s negative Y axis in Illustrator, by the way.

Instructions
The secret to making the printer work everytime from Illustrator is to reset the paper size in the Print dialog. To do this (and you’ll need to do this everytime you print), deselect Size: “Defined by Driver” in the print dialog (File>>Print…) to another setting like “US Letter.” Then, close the print dialog. Re-open it and select Printer…>>Printer Settings>>Media Type: CD/DVD from the drop down menu. I recommend saving the Media Type as an OS X printing preset (Printer…>>Presets>>Save).

One one other necessary piece of information. The front CD tray must be open before the file is sent to the printer. Otherwise, the file will just be printed from the regular paper tray on letter size paper.

Color Settings
The color printed will not match those on the screen either (at least in CMYK). The closest Color Setting (Edit>>Color Setting…) that I have seen to the monitor’s color is “North American General Purpose 2.” I believe this is the default for Illustrator CS2 on install.

I hope this helps. It took over five hours to narrow this down. Thanks a lot, Epson. . .

NOTE: The above might work with the Epson R330, but since I do not own a R330, I cannot test this.

–Stephen M. James
www.smjdesign.com

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