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 have finally lost my battle with a client and am conforming to their request: "I want the text content to be stored in an external .xml file so we can edit easily."

I'm happy for the many tutorials out on the web that helped me to learn this stuff, but I was surprised that I didn't find a single one that did EXACTLY what I wanted. So, I banged it out and am sharing it so you can shorten your development cycle.

Goal: From an external XML file, load a page header and content into two separate dynamic boxes, and then have those boxes update as you move from page to page.

Sounds easy right? Here is what I did to create and test my solution.

1) I created a Flash CS4/AS 3.0 document with four layers: Actions, Buttons, Dynamic Text and Background
2) On the background layer, I created a color gradient background
3) On the buttons layer, I created a simple back and next button
4) On the Dynamic Text layer, I created two dynamic text boxes. I called the smaller one at the top titleText and the larger one for the content descText.

Ok...pretty straight forward.

I then created my button listeners for the back and next buttons and put this code on the Actions layer:

nextBut.addEventListener(MouseEvent.CLICK, goNext);
backBut.addEventListener(MouseEvent.CLICK, goBack);

function goNext(event:MouseEvent):void {
nextFrame();
}

function goBack(event:MouseEvent):void {
prevFrame();
}

From there, I wrote some sample XML and called it "course.xml":


<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<pages>
<page pTitle="Welcome">Welcome to dynamically loaded text.</page>
<page pTitle="How to Do It">Here is how it works.</page>
<page pTitle="Simple">Once you have it figured out, its easy.</page>
<page pTitle="Final Page">No really...its pretty easy</page>
</pages>


This is a simple set of four pages. In each page tag, I included an attribute called "pTitle" which is the page title. The content is between the page tags. So, page 1 is "Welcome" with the content "Welcome to dynamically loaded text".

Now, here is the AS 3.0 to load and parse the XML.

var myXML:XML = new XML();
var XMLURL:String = "course.xml";
var myXMLURL:URLRequest = new URLRequest(XMLURL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded);

function xmlLoaded(event:Event):void
{
myXML = XML(event.target.data);
titleText.text=myXML.page[0].@pTitle;
descText.text=myXML.page[0];
}

The first line sets up a variable container for the XML file. The second line sets up the call to the .xml path. The third and forth line loads the XML and the fifth line waits for it to load. When it does, it loads the XML content into the variable myXML.

The next two lines of the function pick out the individual XML elements we want to use. In this case. the text field titleText gets the XML field page's first child's pTitle variable, and the descText gets the XML field page's first content.

But WAIT! Why are we calling string [0] instead of string [1]? Well, XML starts it count from 0...nuff said. When you want page 3's content, you look at the XML child[2]. Don't let it mess with you like it did with me...Accept it and move quietly on...

Now, if you want to add more pages, you add more frames. If you want to load the newer content into the subsequent text fields, you use the following code:

titleText.text=myXML.page[1].@pTitle;
descText.text=myXML.page[1];


on the Actions layer of frame/page 2...


titleText.text=myXML.page[2].@pTitle;
descText.text=myXML.page[2];


on page 3 and so on...

What happens is this...as the user advances to the next frame, the text box content changes to the new XML content. You have to change the string attribute, but as long as you do, the correct content will display.

And, if you want to digest this in some working files, all the code and .fla are available here. This zip file includes the final .fla, .swf and the .xml file.

I hope this saves you time as you develop your own XML driven eLearning projects.

Imagine you just dropped $599 on the CS5 upgrade, and you cannot wait to try out the new Adobe software. You have a bunch of things you were working on in Flash CS4, but CS5 is new and you want to start using it right away. You load up your old files, work on them for, oh, 24 or 30 hours, all the while saving as CS5 format. You are done for the week, enjoy your weekend, open up Flash CS5 on Monday to continue working and you get this message.

"Cannot open .fla file. Flash can not parse this document."

Wait...really?

You try again, because you know you saved the file. Religiously.

"Cannot open .fla file. Flash can not parse this document."

Yes friends, our new buddy Flash CS5 feels like a beta. This is a known bug. This is happening to me. Right now. I am not happy.

Also, I discovered that the radio button component works differently in CS4 and CS5. I don't know how, but when I program my multiple choice questions and all works in CS5, I get funky errors in CS4. Re-open in CS5 (without changing a single line of AS) and it works fine. I have no other details, because I've had bigger fish to fry with Flash today.

Luckily, in my scenario above, I was testing enough in CS4 and CS5 to save 70% of my work. Here is my workaround:

1) Open your CS4 file in CS5.
2) Work on it, but click Save As CS4 file when you are done.
3) Continue to use Flash CS5 in this lame way until Adobe fixes it

Yes friends, you are saving your CS4 files as CS4 files to work on them with flash. I haven't had any issues with files created in CS5 originally, so if you are working in CS5, don't downgrade to CS4 and then back up because you will encounter this bug. Now I have a new problem...my client hasn't upgraded to CS5...when they do, they will have the same problems unless Adobe gets this fixed fast.

While researching a solution to this mess, I discovered that there is a new Flash patch 11.0.1. Yay! However, it did nothing to fix my current files. Boo!

Maybe this is what I get for being an early adopter. However, I feel like Adobe blew it again with 1) No public Beta and 2) Pushing out CS upgrades before they are ready. How hard must it be to get 7+ products updated and released all at the same time? It's got to be near impossible but yet they cram them all out at the same time anyway. CS3 and CS4 felt that way, and now CS5 is the same. I feel like I am beta testing for Adobe, and I am paying them for the privilege.

I love Adobe products...six months after they are released when all the bugs are fixed. Fool me once, shame on you. Fool me twice, shame on me. Fool me three times, shame on Adobe. I won't get suckered into a release day upgrade again.

6/15/10: UPDATE: A very nice Adobe rep who saw this post (or my FB post, or maybe it was my Twitter post...) contacted me and offered to figure out what was going on with my file. Today, I got the file back and it seems to work fine. There was an empty frame on layer 1 of one of the symbols in my library. I sent a note back requesting more information about how to prevent it from happening again, how to fix it when it happens etc, and am waiting for a response. So far, its pretty impressive that Adobe is taking such an active role in squashing this bug. I'm downgrading from angry to annoyed.

We are about a month away from my Essentials of Adobe Flash for E-Learning Designers online workshop series for ASTD. We are already getting good enrollment, but I wanted to give my readers a "head's up". The biggest page views on this blog are Flash related, and most of the questions I get from my readers are Flash related, so I figured I'd drop a note.

Here are some key points that you may want to know before enrolling:

• I will be using Flash CS5
• I will have about 10 minutes of presentation, following by 80 minutes of application sharing - this isn't going to be PPT driven, it will be driven by demonstration of Flash CS5
• If you've used Flash in the past, this will be an intro to the software. If you have built more than a few projects in Flash, it may not be for you. However, Day 3 is going to rock, so maybe you should sign up for that...
• Day 1 is all about the interface, drawing, symbols and tweening
• Day 2 is all about ActionScript 3 - sorry, no AS2 will show up
• Day 3 walks through an entire project, start to finish, the way I would build for a customer. It's really pulling back the curtain on the mad scientist and I'll share my methodologies for building eLearning with Flash
• I'll be giving out a TON of code each week. I'll be writing it in Flash CS5, but will offer CS4 and CS3 versions as well.

If you are already an ASTD member, then the price is 1/2 off. It's going to be a blast! I hope you can make it:

ASTD Essentials of Adobe Flash for Elearning Designers
June 9, 16, 23
1:30 - 3:00 EST
Online Workshop format using Cisco WebEx

Over the past week, I have been surprised by the number of eMails and calls I have received from people in my network regarding HTML 5, Flash, Adobe and Apple. Folks in my eLearning circle are abuzz and asking questions about the future of Flash and the Web and what "these changes" are going to do to the field of eLearning development.

I am so over it.

I really, truly believe that right now, at this moment, it’s a non-issue. Initially, I was concerned because of Apple's childish decision (there, I've said it) not to include the Flash player on their iPad and iPhone. Then I started thinking about how my business was going to be impacted by the lack of Flash on these devices, and I had a huge "So what?" moment. So what if I can't run my stuff on iPads and iPhones? Are my business clients going to be negatively impacted because they cannot run "Effective eMails and You" on their iPad?

Odds are, I think that we won't see any kind of major investment into iPads at the corporate level. Why? Do you see IT teams making decisions to replace Blackberries with iPhones? Do you see IT teams issuing NetBooks to their employees instead of laptops and desktops? Is the iPad that much more powerful than a NetBook? Is the App store a blessing or a curse to an IT team concerned about privacy issues? If I issue my employee an iPad, do I dictate which apps are allowed to run? Who gets the app the employee purchased after termination? And on and on and on…in this climate, business have more important things to think about than jumping ship to a new technology infrastructure.

What about the business of HTML 5 killing Flash? Why are they mutually exclusive of each other? HTML 5 has a long, long way to go before the standards are finalized; generous estimates state that the standards will be in place in 5 years; conservative estimates consider 10 years a more realistic guess. Either way, this means that the web designer/programmer and eLearning designer/programmer is facing 5-10 years of pain because of the ultimate weak link: the browser.

HTML 5 is a programming language, but it is up to the browser to interpret that language and display the content. If the browser can't render the code, strange things start to happen in the display. We are facing that now with some versions of CSS. Different browsers on different platforms interpret the CSS differently and browsers display the content as they see fit. Look at sites on your Mac using Safari or Firefox and then on your PC using Internet Explorer - slight differences may appear if your programmer used CSS to any major degree.

Until HTML 5 gets standardized, each browser will interpret it differently. It's World Browser War III.

I have to tell you from experience (building on the web since 1996), clients don't get it and they don't care. If it works fine on your machine but breaks on the client machine, it’s broken. Clients don't want or appreciate long winded explanations of how browsers work; they paid you to design and program something and it doesn't work on their computer. You stink. It's a painful process of trial and error, multiple browser testing and all that stuff we used to HAVE to do during the previous World Brower Wars.

Adobe CTO says that they are going to make the best tools for HTML 5 and people scream "OMG!!! Adobe is saying that they are going to drop Flash!!!" No, it means that Adobe is going to keep current with browser coding tech and make their tools better by including it, just like they did with previous versions of HTML and with CSS. It's nothing to hoot about - it's a great step in the right direction. Adobe has always done this with Dreamweaver to ensure that coders have the most current tools at their fingertips. It’s great, and in no way says anything negative about Flash.

And while I am on that note, why is Flash suddenly Satan?

As far as I'm concerned, Flash is awesome. For me and my customers, it is the best way to deliver interactive content and eLearning for distribution over the web. Period.

Think about this: The odds are HUGE that the HTML 5 standard will still support browser plug-ins which means Flash will run just fine in HTML 5 standard browsers. Your current Flash movies and content will run in the HTML 5 standard browser, as long as that browser allows for the Flash plug-in. Based on the current specs (point 2.1.5), the use of plug-ins hasn’t gone away. Repeat after me – HTML 5 browsers will run your Flash projects.

Right now, the big whoopdy is Flash video vs. HTML 5's video capabilities. Sure, the browser will now be able to play video files, but what about the interactive capabilities of Flash? Will HTML 5 allow me to create the unique, interactive learning experiences that I build in Flash? Will HTML 5 allow me to store variables and convert them to numbers, compute on those numbers and then deliver customized responses based on those numbers? Will HTML 5 allow me to program “If...Then” paths based on user feedback and decision making? It doesn’t look like it.

Flash is a great tool and the files it creates display the same in every browser on every platform. The inconsistencies in the way the browser displays content has no impact on your .swf. It runs the same, it looks the same, it feels the same, and it sounds the same on each and every platform. It is a stable tech that my clients understand and provides me with creative flexibility. I don’t every have to say “no” to a client when building in Flash.

It needs to be stressed again that just because HTML 5 is coming out doesn't mean that Flash goes away. By the time HTML 5 standards are finalized, Adobe will have released Flash CS6, CS7, CS8 and maybe even CS9. Developers and the general public are freaking because Apple is ignoring the huge install base, the huge number of Flash developers and issues some sweeping statements against Flash. Since when is Apple the “be all, end all” of computing technology? If Apple says it, it must be the right?

In 2006, the W3C indicated an interest to participate in the development of HTML5 and in 2007 formed a working group chartered to work with the WHATWG on the development of the HTML5 specification. Odds are, you didn't know about it until Apple kicked Flash to the curb a month ago. I truly believe HTML 5 a long way off, will be filled with developer frustration as the browsers work on figuring out how to display the code, and it will not have the same multimedia and computational power I currently enjoy using Flash.

Clients don't always care about the technology, they just want it to look a certain way and to work as they want it to work. Until HTML 5 standards are finalized and all the browsers have figured out how to display the code, and until I can create the same multimedia/interactive experience for my learners, I'm going to continue developing my eLearning in Flash.