Trainers Talk Tech

NOTE: This article was written by Ginger Nichols, a graduate student at University of Colorado, Denver. She interned with me this summer, and I asked (forced, persuaded, cajoled...) her to do a Flash project. She had never even opened the software before. Because so many of my visitors are completely new to Flash or looking to get started with the tool, I asked her to write about her internship so that others could benefit from her experience. She wrote a nice piece outlining her journey, so with her permission, I'm reproducing it here.

To give you a little background, I am a graduate student (soon to be a graduate) of the Information and Learning Technologies (ILT) – Instructional Design and Adult Learning program at the University of Colorado Denver. Over the course of the program I heard and read a lot about the eLearning content that one could create by using Flash. Unfortunately, the University didn’t offer a course in Flash so my advisor recommended taking a class at a local community college. I put that idea in the back of my mind and continued on with my coursework in the program.

With two semesters left in the program, I started thinking about my internship. I wanted more exposure to eLearning than what was offered in the Instructional Design and Adult Learning concentration. Thomas was the first person to come to mind to help me with my internship. We talked about what I wanted to learn and came up with a few projects involving eLearning that met my objectives. Thomas had a fantastic idea to convert a course that I attended in person to an eLearning course, and design a module from the course in Flash. I chose to convert a presentation and public speaking class that was offered at work.

My timing for the internship was far from perfect. I saved it until my last semester in the ILT program – Summer 2010. The summer semester is half as long as Fall and Spring so I had 10 weeks to work on my three projects. I reserved the last month to work on the Flash portion of the project. The following list includes the resources and things I learned while working with Flash.

1. A good Flash “how to book.”

Thomas recommended a book from Friends of Ed. I read Foundation Flash CS4 for Designers by Tom Green and David Stiller. It took me about a week to read through the book and complete the exercises. I don’t typically learn by reading the book or the manual on my own but the hands on exercises really helped me to understand the concepts behind Flash and ActionScript 3.0.

2. Lynda.com.

If you aren’t familiar with it, Lynda.com is a subscription service that provides online software training via video. I signed up for a 7-day free trial because I wasn’t sure if I would like the service but I did.

When the book wasn’t making sense to me, I watched the videos on Lynda.com for another perspective. The videos were great because they match my learning style. If I can see how it’s done, I can usually do it myself. I had a few “that’s what they meant” moments when the video made the concepts in the book click for me.

3. Someone who knows Flash and ActionScript

Thomas and I met up on Fridays during my internship. Each week I had the chance to pick his brain to learn how he uses Flash. His blog is a great resource because it contains many Flash tips and tricks. I also sent him a few late night emails asking him “How do I…” I’m going to blame the “How do I make the movie stop?” question on fatigue.

4. Cartoon Solutions

Part of my internship was to research Accelerated Learning and apply it to my eLearning project. Storytelling is one way to reach a variety of learners and it’s something one can use in the eLearning environment. For the introduction to the course, I wanted to tell the story of someone who gave a terrible presentation at a convention that would set up the objectives of the course.

I included this story in my storyboard that Thomas reviewed. The storyboard was drawn by hand and I mentioned to Thomas that I didn’t think my stick figure drawings were what I wanted to use in the Flash movie. Thomas pointed me to Cartoon Solutions’ website where I found a character and backgrounds to use in my movie. Two backgrounds and one person cost me about $30, which was worth every penny since they made my movie look more professional than my hand drawings did. Don’t get me wrong, I love drawing on a whiteboard during a facilitated training session but my drawings just didn’t translate in Flash.

5. Patience

There were a few moments working on the Flash portion of the project when I thought about giving up on it. I could set up a few PowerPoint slides, drop them into Captivate and have a Flash training module in a matter of a few hours. I was frustrated that I couldn’t make Flash behave as I wanted it to. This is when I knew that I needed to walk away for a few minutes, or quit for the day. The important part is to come back to your project. It was easier to reread a portion of the book to understand a concept when I had a clear head.

Another thing to remember is that you’re not going to have advanced skills right away. My story had a scene where the character walked out on stage. In the final product, my character slides out on the stage instead of walking. Flash has the capability to animate the walking motion and my pre-made cartoon man was set up with joints for this purpose but I didn’t have the knowledge or the time to figure out how to make the character walk. Sure my Flash movie would have looked extra slick if the character walked across the screen but it didn’t add to or take away from the content so it wasn’t necessary.

Your skills will improve with time. Master the easy techniques then add more advanced skills in later. I submitted my final project to Thomas and my professor for review and received my grade for the internship.(TT Note :: Ginger got an A for her internship) I plan to go back to my Flash movie to work on making my character walk across the screen. I don’t have a deadline now so I can take my time and figure this out.

The bottom line is that Flash isn’t all that scary. Flash is a powerful tool that you can add to your repertoire of eLearning creation tools. Just like anything new, it takes time to master. However, the basics are relatively simple to pick up in a short amount of time. In just one month I created an eLearning module that I was happy with and that I wouldn’t hesitate to use as a real eLearning course rather than just a project for school.

I was doing some work for a client and had to load in some .swf files generated by a 3rd party program. I admit it - I LOVE text effects. I like fades, but when the text can bounce or flip or swirl in, sometimes it adds a bit of snazz to the eLearning project. As long as you don't overdo it, I think the learner's get a kick out of the occasional bits of visual eye candy.

On my Mac, I use a program called Text-Osterone, from a company called Vertical Moon. The software allows you to create a bunch of editable special effects you can apply to text. The current version only seems to export to an AS 2.0 version .fla, so I export the file to a .swf and then dynamically load it in. (I am working ever so hard to leave AS 2.0 behind me...)

Of course, in AS 3.0, it requires a bunch of code lines to load the external .swf, but my solution below pares it down to the bare basics.

First, make sure the .swf you want to load is in the same directory as the .swf loading it. You can play with paths if you like, but for this code, just keep the whole shebang together.

When you want to load the .swf, add a key frame and then add the following code:

var swfRequest:URLRequest = new URLRequest("connect.swf");
var swfLoader:Loader = new Loader(); 

The first line sets up a variable called swfRequest and it points to the .swf you want to load. In my example, the .swf I want to load is called "connect.swf". The second line preps a variable called swfLoader to...well...initiate a load...(insert random inappropriate comment here)...

Next lines:

swfLoader.load(swfRequest);
addChild(swfLoader); 

This next line loads the connect.swf into the variable swfLoader. The addChild line plops the .swf onto the stage. That's it. Sure, its a lot more work than the old LoadMovie(); AS 2.0 command, but it does the job.

Now, if you want to place the .swf in a particular location on the stage, you can manipulate it's coordinates once its been loaded into your main .swf.

swfLoader.x=10;
swfLoader.y=120;

This sets the X and Y placement of the .swf after its been loaded in. Of course, you can place it wherever you want. Remember, that the X and Y coordinates are relative to the main timeline (if this is where you dropped this code) or relative to the coordinates INSIDE a movie symbol (if you drop this code into a movie symbol.) The final code looks like this (with comments added):

// Load the SWF into the Variable swfRequest
var swfRequest:URLRequest = new URLRequest("connect.swf");
var swfLoader:Loader = new Loader();

// Bring the SWF into the SWF
swfLoader.load(swfRequest);
addChild(swfLoader);

//Position the SWF
swfLoader.x=10;
swfLoader.y=120;

There are some other tutorials online, but I am a big fan of keeping things simple. If you need to load a .swf and position it on the stage, this ActionScript 3.0 code sample will work every time. Have fun!

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 important elements to include in any eLearning project is a way to display current page numbers and total page numbers for your learners. Adults like finish lines, and there is something comforting about knowing how many pages you will need to work through when taking eLearning, as well as knowing where you are inside the eLearning program: "Page 10 of 100" feels different than "Page 98 of 100".

I used to do it all with regular old text fields in Flash, but with ActionScript 3.0, there are some calls you can make to identify where the user is at on the time-line. Combine this with a design methodology and a couple dynamic text boxes and you can create something that is quickly customized and scalable.

First, from a methodology perspective, you need to decide that each single frame of your Flash movie will be a single page in your eLearning project. You can have content and interactive media built into Movie Symbols, so you don't have to feel tied down to the single frame, but choosing to utilize the embedded symbols onto a single frame can help you better organize your overall project. This, by the way, is my preferred style of programming - a 30 frame eLearning project feels like 30 "screens" to the end user. Even though there is a ton of content dropped into Movie Symbols on each frame, this method works best for me and my development methodology.

Second, you need to add the ActionScript necessary to identify frame location. The ActionScript:

currentFrame

identifies where the user is on the time-line, while the ActionScript:

totalFrames

looks at the total number of frames in the movie.

Applying the code takes a bit of a twist, but once you think through it, its easy - when the user moves to a new frame (ala Next or Back button), then refresh the page counter and re-populate the current frame.

I create my page counter on a single layer with a Back button, Dynamic Text field (current frame), Dynamic Text field (total frames) and then a Next button.

I start with setting up the variable names like so:

var frames:Number;
var totals:Number;
frames=currentFrame;
totals=totalFrames;

This sets up the variables and then pulls the data from currentFrame and totalFrames into those variables.

Then, I have to set up my Dynamic Text variables:

myLocation.text=(String(frames));
myTotalPages.text=(String(totals));

I have two Dynamic Text fields named myLocation and myTotalPages. Variables called as numbers do not display in Dynamic Text fields, so I have to convert them to text by re-categorizing them as Strings. I know...silly step, but it is the only way to take the number variables and display them as text.

Then, I add the code for my Back and Next button listeners:

next_but.addEventListener(MouseEvent.CLICK, goNext);
back_but.addEventListener(MouseEvent.CLICK, goBack);

And then the functions for the Back and Next buttons:

function goNext(event:MouseEvent):void {
	nextFrame();
	frames=currentFrame;
	myLocation.text=(String(frames));
	
	
}
function goBack(event:MouseEvent):void {
	prevFrame();
	frames=currentFrame;
	myLocation.text=(String(frames));
}

Notice I use nextFrame() and prevFrame() to move the user back and forth. Also, I recall the

currentFrame

variable and then re-populate the Dynamic Text box with that updated data.

The

myTotalPages

doesn't update, as the user cannot control how many pages are in the total project, but if you, as the developer, want to add more frames, you don't need to reprogram the page counter. Some designers manually put the total number of pages in as a generic Text box, but adding and removing frames means you would need to change that number on each page. Using

currentFrame 

allows it to be dynamically generated at run time, regardless of the total size of the project.

I'm sorry I've been away for so long...traveling around the United States teaching and speaking keeps me busy, but I hope this entry is helpful to you.

If you want to see this in action, fully functional, download the Flash CS4 .swf and .fla file here!

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...