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:
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
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:
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:
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/
