Trainers Talk Tech

In the past week, I've received three emails regarding linking to MS Word Docs and PDF files from within a Flash movie. It's relatively easy, but the differences between doing it in ActionScript 2.0 and 3.0 are significant.

In ActionScript 2.0

In ActionScript 2.0, linking to a file uses the

getURL

function. Now, normally you'd use the

getURL

to launch a web page or open a new browser window by attaching the following code to a button symbol:

on (release){
    getURL("http://www.thomastalkstech.com");
}

This tells Flash that when the user has clicked on and released the mouse button, launch the web site in the same browser window. If you wanted to open it in a new window, you would need to append the command like so:

on (release){
    getURL("http://www.thomastalkstech.com","_blank");
}

The addition of the target variable (_blank) tells the browser to open in a new window.

Because the .swf sits in an HTML file, it thinks its part of a web site. Regardless of whether or not you have the files sitting on a web server, when you launch the .swf it runs in the browser. This means that the files that sit in the same directory as the .swf are accessible using the

getURL

function.

So, if you had a .pdf file on the web server and you wanted to link to it from your Flash movie, you would use this code:

on (release){
    getURL("myCoolFile.pdf","_blank");
}

and Flash would link to the PDF from within the Flash movie. Absolute and relative pathing work as well, so if you had stored the .pdf file in a directory called /pdf, you could use this code:

on (release){
    getURL("/pdf/myCoolFile.pdf","_blank");
}

IMPORTANT NOTE: The pathing in the Flash file needs to be from the HTML file holding the .swf file. It gets confusing and frustrating, but if you path the ActionScript from the HTML file holding the .swf, it will find the document without a problem. It used to kill me because sometimes I'd path from the .swf, then move the .swf to a new directory and it would mess up my links. If you use root relative pathing it won't be an issue, but if you use relative pathing, be sure to path from the HTML file holding the Flash.

You can link to any file using the getURL code outlined above.

In ActionScript 3.0

Of course, in AS3 they had to go out of their way to make it more difficult...instead of three lines, its now seven lines of code. Again, not difficult, but more details need to be added to launch the URL.

First, create a new variable for the URL. We are calling the variable 'request'.

var request:URLRequest = new URLRequest("http://www.dwebstudios.com");

Then, create a button instance and call it whatever you'd like. In the example below, the button's name is called myButton. You are going to create the function call for myButton using EventListener.

myButton.addEventListener(MouseEvent.CLICK, goWeb);

So, we've created the listener to launch the function goWeb, so we create that next:

function goWeb(event:MouseEvent):void {
     navigateToURL(request, "_blank");
}

So, the entire code block is:

var request:URLRequest = new URLRequest("http://www.dwebstudios.com");

myButton.addEventListener(MouseEvent.CLICK, goWeb);

function goWeb(event:MouseEvent):void {
     navigateToURL(request, "_blank");
}

To link to a document, replace the variable in the URLRequest object with your .pdf name or file name and it will launch as expeted. The same rules apply for the target string and pathing as in AS2, but the entire code block is longer and more dramatic.

var request:URLRequest = new URLRequest("myCoolFile.pdf");

myButton.addEventListener(MouseEvent.CLICK, goPDF);

function goPDF(event:MouseEvent):void {
     navigateToURL(request, "_blank");
}

So that's it! I hope this helps!

P.S. If you want to link to an email address you use the same code as above in AS 2 and 3 but you replace the object with 'mailto:yourMail@yourEmail.com'.

AS 2

on (release){
    getURL("mailto:yourMail@yourEmail.com");
}

AS 3

var mail:URLRequest = new URLRequest("mailto:yourMail@yourEmail.com");

myButton.addEventListener(MouseEvent.CLICK, goMail);

function goMail(event:MouseEvent):void {
     navigateToURL(mail);
}

One of the most frustrating things for me to learn in AS 3.0 was being able to find my movie clips in the code. I usually work on a single Flash timeline with lots of nested movie clips that make up my elearning: Frame 1 has an intro movie clip, Frame 2 introduces the course, etc.

My frustration with AS3.0 is that I couldn't figure out how to control my main movie from within my nested movie symbol. For example, in Frame 1, my intro movie plays, and then ends on a screen that explains the learning objectives. There is a big "Start the Training" button, and when the user clicks on it, the ROOT of the Flash movie advances to frame 2, where a new movie symbol plays.

Not that hard right? Old ActionScript code:

_root.play();

Not any more. I'm stubborn...I want AS 3.0 to work like AS 2.0. Suck it up buttercup, it won't. The reality is AS 3.0 doesn't see the "stage" or even the "timeline", relative to the objects. Think of it this way...in AS 1.0 and 2.0, objects added to your movie existed on the timeline, and Flash knew where they were at based on where on the timeline you placed them. They were "happyBall instance on frame 1 of the main timeline(root)."

In AS 3.0, movie clips just "are". Very zen like, I know, but in AS 3.0, they are defined as themselves. It doesn't matter where they are on the timeline - their identity is not connected to where they are placed. So, trying to add "root" to an AS 3.0 object is like trying to tell a book to go back to the printing press where it was created. Can't do it on its own - it has no awareness of its location.

After searching around the web, and finding a ton of different solutions (some of which seemed overly complicated, especially the ones that said to replace

_root

with just

root

...doesn't work...nice try), the kind developers at Yahoo found a working solution. It goes back to the day when you were able to identify anything based on its location, relative to the root. The code looks like this:

MovieClip(this.root)

So, in our example, in the movie clip, we have a button that advances to the next frame of the main timeline. There is a movie with some text and a button (named clickMe) in it. In the Movie clip, you would add this code:

clickMe.addEventListener(MouseEvent.CLICK, goClickMe);

function goClickMe(event:MouseEvent):void {
	MovieClip(this.root).play();
}

You can control the main timeline from within movie clips using that bit of code.

I hope this helps you as much as it helped me. Maybe its no longer a best practice to embed ActionScript in movies that control other things besides that movie symbol, but for a guy like me that wants to move from AS 2.0 to 3.0 quickly, I'm going to hang my hat on these little tricks to help me rapidly develop my projects.

Oh...and if you want to download a sample to see this in action click here. Its a Flash CS4/AS 3.0 file that shows you the controls I'm talking about.

This tutorial was my presentation at the ASTD TK 08 show in San Antonio Texas. While running the creation stations at this year's conference, many people asked me about the materials I used for last year's session. Yes, the main interface is CS3, not the current CS4, but ActionScript hasn't changed. Therefore, this manual can be very helpful if you are making the bridge to AS 3.0 from AS 2.0, or you want to just get started with AS 3.0.

Foundational ActionScript 3.0 with Flash CS3 for the Online Learning Developer
ASTD TK 2008

Module 1: Communicating with ActionScript
Module 2: Using and Writing Functions
Module 3: Basic Interactivity
Module 4: Decision Making
Module 5: Text and Text Fields
Module 6: Video and Audio
Module 7: Creating Online Learning

In Module 7, I have created two (2) sample AS 3.0 eLearning interfaces that can be used to easily drop in content. The first one (Template 001) is a single .swf file and it is a time-line based, "menu on the left" driven course. It is a single file which is quick and easy to use. Functions included in interface 001:

• Clicking on a button and going to a URL
• Clicking on a button and going to the next frame
• Clicking on a button and going to a previous frame
• Dynamically pulling data about frame position and total frame numbers
• A movie clip code changing properties of the parent movie

The .fla and .swf code is in the module 7/template001 directory.

The second interface is a bit more advanced. It consists of a single .swf file containing the menu and interface elements. However, when the user clicks on the menu, it dynamically loads the new module .swf files into itself. I used to use this technique in AS 2.0 all the time:

loadMovieNum

It was my favorite function!

Unfortunately, they killed it in AS 3.0. This template contains the code for building eLearning using AS 3.0 that mirrors the functionality I used to enjoy in AS 2.0. Functions included in Interface 002:

• Clicking on a button and going to a URL
• Clicking on a button and going to the next frame
• Clicking on a button and going to a previous frame
• Dynamically pulling data about frame position and total frame numbers
• Dynamically loading new .swf files into the main file
• Independent controls existing inside of a loaded .swf
• A movie clip code changing properties of the parent movie

The .fla and .swf code for the start page and all the additional pages is in the module 7/template002 directory.

This course took a lot of time and work to complete. I offer you these two templates so that they can potentially shave a ton of time off of your eLearning development, or provide you with code snippets to use in your own projects. Please feel free to download and use as you see fit.

However I ask you:

1. Please don't mass distribute in your office - don't make a ton of copies and give them to all your friends
2. Please don't use it to teach a class - don't download it and then use it as your own course materials
3. Please don't use download it and then distribute it off of your web site
4. If you found it useful and it saved you time, please add a comment to this page - it helps my SEO
5. If this was crazy helpful and it saved your bacon at 3:00 am, please consider a donation. It encourages me to continue posting these types of tutorials and helpful files, as well as creating new ones for your use as an eLearning developer

Thanks and enjoy the tutorial! And if you donate, thank you very much for the contribution!

Download the file - 23 MB zip file

As always, ASTD put on a great show in Vegas. I am looking forward to following up with all the new people I met and learned with. I cannot wait until '10!

I had three sessions I conducted: Two Creation Stations and a Tech Intensive. I have to say that the Tech Intensive was a blast. I had about 80 people in the room, and we talked at length about the Adobe CS4 Web Suite. 90% of it went well, but I had one SoundBooth snafu and one Flash ActionScript 3.0 snafu. Before the session, I said to myself that I'd create an interaction using ActionScript 2.0 because I know that cold, but then reminded myself that I made a pact to only program in ActionScript 3.0. I know how to get things built, but some of the calls are still new to me. I forgot to add the

(event:MouseEvent):void 

to my function call. Grr...Oh well. We laughed and got it working when I finally relaxed enough to think clearly. Building a site in the privacy of your office is much different than building in front of a room of learners!

Here are links to my materials from the sessions. If you were not able to attend, I understand! Here are the materials in PDF format:

Creation Station
Flash CS4: Get a Taste of ActionScript 3.0 Hands On! : PDF File

Tech Intensive
Integrating Adobe Creative Suite to Maximize E-Learning Development
PDF File
PowerPoint File

Also, if you attended my Tech Intensive, you remember that we built a "New Hire Orientation" online guide for Tommy Gun's Garage, a dinner theater and "speakeasy" out of Chicago. I thought you might like to see what I built for the client.

View the comp here.

Its just the prototype in a flat Photoshop file, but you can see what a little time and attention can do for good web design.

Thanks for talking with me, laughing with (at) me and having a great time in Vegas at the ASTD TK show.

Now, go build something cool!

P.S. I haven't forgotten to put the David Pogue Web 2.0 list up from the first day of the conference...It will be up soon...