Archive for the ‘Tutorials’ Category

Flash: Enabling a browser’s back button inside Flash

Thursday, March 23rd, 2006

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

Thursday, March 9th, 2006

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

Epson R220 CD label printing in Illustrator/Photoshop in OS X

Monday, February 6th, 2006

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

Flash: Increase your Flash productivity (Tips and shortcuts)

Wednesday, February 1st, 2006

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

DVD Studio Pro cannot create buttons, apply templates, halts at “Loading Menus”

Sunday, January 8th, 2006

If you cannot create ANY buttons (yes, that’s correct, no buttons can be created), DVD Studio Pro halts at “Loading Menus” when opening any project files, not can apply templates (Status bar halts when apply any templates).

The problem is exactly like the following posts:
http://forums.creativecow.net/cgi-bin/new_read_post.cgi?forumid=155&postid=559211&archive=T
http://www.wwug.com/cgi-bin/displaywwugpost.fcgi?forum=astarte_dvd&post=050427195617.htm

Guess what? All these problems are connected. It is a font conflict. I orginally removed all my fonts with FontBook that had a black dot to the right of it. It seemed to fix the problem–UNTIL I restarted OS-X. The problem was back again! I called Apple to see how to re-install the fonts. If this was Windows, I’d use the cab extractor (extract.exe) from the XP disk, but Apple doesn’t have a package viewer app. Their Tech Support told me to do an archival re-install of OS-X. (Thanks a lot, Apple!!!) Kind of over-kill for just a few fonts, don’t you think? So I re-installed my whole OS (well, the archival re-install) a few days ago. This meant re-downloading 150MB+ of updates I have previously downloaded via Software Update. (I’m sure they were probably in some temp folder, but being new to OS-X I wasn’t sure where.)

The Solution

What I really and only needed to do was re-active the Helvetica.dfont file from FontBook. It is not located in the normal font folder, but in the System/Library/Fonts folder. Now DVD Studio Pro 4 works fine. Yes, it even creates buttons and actually opens files now!

Lesson learned: Software should not be dependent on fonts–even if it is a system font.

–Stephen M. James
www.smjdesign.com


Books Now Reading

My Sites