In this post I show you how to create a button with a click alert on it which is a slight animation that indicates to the user that they should interact with the button. The click alert will also gray out after being clicked.

You can use this tutorial to create flash eLearning interactions that indicate to the user that some action is needed. (hey you.click on me!) Also once they’ve clicked on it, you must have it visually change so that they know they’ve already been there.

Here’s the click alert example that I’ll show you how to create:

1. Create a movie clip with whatever animation you want as your click alert. For example in this sample alert I’ve created a red circle with a small rotating outline. Notice that the animation goes from frame 1 to frame 20 and then has an action that sends it back to frame 1. Basically I put a frame label named home on frame 1 and on frame 20 I put gotoAndPlay(“home”); so that it loops.

2. In your animation movie clip create one frame at the end of the animation that is a clicked state frame. So in other words, what will this click alert look like after a user clicks on it? In my sample it grays out and the animation stops. (frame 21) I added a color tint of gray to create mine.

3. Drop the movie clip on your timeline and give it an instance name. (I used clickalert)

4. Create another layer (below the layer with your alert) and insert any button that you want. I used a document icon with the words Course Summary.

5. Add the action script to your button to launch the url, document, or go to a specific movie frame and to have your click alert go its clicked state.Below is the code I used on the button. (Only use the click alert code and one of the other snippets. Don’t use both the getURL and this.gotoAndStop.

on (release) {//Start Behavior – This code launches a document or url getURL(“http://www.yoursitenamehere.com”,”_self”); //End Behavior //This code goes to and stops at a certain frame of your flash timeline (this example uses frame 50) this.gotoAndStop(“50″); //End Behavior //This code goes to a movie clip with an instance name of clickalert and goes to (and stops) at frame 21 within that movie clip. That is the frame that I created as my grayed-out frame. this.clickalert.gotoAndStop(“21″); //End Behavior }

Here are some eLearning Flash Templates that use click alerts.

We’ve been building a lot of eLearning Flash templates lately and I started to think what I’ve learned that I might be able to share. Lots of people like to use templates to start a project. It speeds up development time and can help new users build some great content without having to know how to build it from scratch. However there are a few things that, if done properly, help the templates to be more user-friendly.

Here are my 6 tips to build Flash eLearning templates that are more user-friendly:

1. Frame Labels – Use Them
Frame labels are an easy way to ensure that the flash movie always goes to the section that it should. For example if you want a button to go to your 1^st section when clicked, then add a frame label to the 1^st keyframe of that section. Call the frame label something easy like 1^st section for example.

Instead if you were to just tell the button to gotoFrame (3) that would work assuming that your 1^st section starts on frame 3 but what happens if someone adds a frame? All of a sudden your section’s start frame has moved. It’s cleaner to just use frame labels.

2. Guide Layers – Insert Them
You need to ensure that the user knows how to properly edit your file and what you expect them to edit. Guide layers are a great way to give instructions.

To insert a guide layer select Insert / Timeline / Layer. Then right-click on the layer title and choose guide. Notice that the layer icon changes to a hammer.

Guide layers allow you to put instructional text that won’t appear in the published swf file. Include your instructions on what to edit and you can also include boxes that show a user how large a text box or image can be.

3. Lock Layers
When you’re done creating the template, lock all of the layers that don’t need to be edited. This keeps the user from accidentally selecting an incorrect layer/frame. This can be especially confusing if your content is layered and the user needs to select a content behind another asset.

4. Put Actionscript on its Own Layer
Don’t make it hard for a user to find your action script. In other words, don’t put it on individual symbols if you can help it. Go ahead and create a separate layer and call it actions.

5. Create Folders in the Library
The library can get crowded very quickly. Create folder in the library to help separate the assets. If your flash template has multiple sections then create multiple folders. You could also name the layers so that it gives a clue to the user if they should edit assets or not.

For example, you could put an x in front of a folder’s name if it should not be touched.

6. Build Assets in Flash
Build as many of the assets within Flash. Since Flash is vector based that means anything you create can be easily resizes without worrying about making it look bad. Don’t import bitmaps. If you create your layouts in Flash your users can then resize things as they see fit and it will still look good.

I hope this gives you some ideas to make interactive Flash templates a bit more user-friendly.

If you’d like to see some examples check these out:
eLearning Flash Games
eLearning Flash Quizzes

I’ve been working on an Articulate Presenter course with a lot of flash files that have audio. Each of the .swfs have buttons that the user clicks to go to various frames. There are audio clips that go along with each slide. I quickly began to notice that the .swfs acted differently once imported into Articulate. Here are a few things to consider/think about:

1. Import settings “ When inserting a flash movie into Articulate you have a few different settings to consider.”

• How to display the movie “ I choose to display the moving in the presenter panel because it was the main content that I wanted to show. You could experiment with have the flash display in a new browser window (full screen on top of the main course) and have it automatically pop-up when a user hits a particulate slide. This could be helpful with system simulations.
• How the movie behaves (advancing) “ I you have a linear movie that the users watches and doesn’t need to interact with, you could choose Advance to next slide automatically. However if you have a movie with buttons and user interaction, you must select Advance to next slide when user clicks next.
• How the movie behaves (synchronization) “ I always choose Movie plays independently of slide as this setting. I want the flash movie to be completely separate from what’s happening on the slide. In fact, when I import a flash movie I never have anything on the slide.

2. Audio placement “ If you are using audio in your flash movie don’t import audio to the slide as well. If the user clicks on your flash movie before the slide audio is done, you will have overlapping audio.

3. Overlapping audio within the Flash movie “ When I previewed the .swfs in flash the audio worked great. The sounds didn’t overlap. However when previewing in Articulate if I clicked on a button before the audio was complete it would overlap with the next frames audio. I solved this by putting a stopAllSounds() action script on each button before moving to the next frame. For example:

on (release) {

stopAllSounds();

this.gotoAndStop(“tool4″);
}

This script stops all audio before moving to the frame label tool4.

4. Few audio tips “ It’s a good idea to warn the users that the course that they are about to take has audio. This allows them to adjust their speakers and not get surprised. This can be a big embarrassment especially if a course starts blaring and there are customers around. Warning them also allows them to find another computer if for some reason sound doesn’t work on their current computer.

Audio is a great addition to any course. However with the benefits also comes the extra work.

View our Articulate eLearning games, flash interactions, PowerPoint style kits, and clipped-out people.

Awhile back I did a post about locking Articulate’s navigation and using embedded flash in the slide to navigate by talking to the API. Well…I was working on that project again and it seemed that everything had stopped working. Somehow since I hadn’t touched it for a few weeks it broke?

After a few hours of investigation, here was the problem/solution:
When previewing a few slides (through Articulate Preview option), I clicked my flash button and it was supposed to go to a specific slide #. (It didn’t work. It took me to the wrong slide even though my AS code was correct.) Now, the button with the code that said “go to next slide” worked fine.

The problem is that when you preview a slide range in Articulate it automatically treats the first slide of the preview as Slide #1. So even if it’s really the 12th slide in your presentation, it acts like slide #1 in the preview mode. So that explains when my buttons where trying to “go to Slide #xxxx” it wouldn’t work. That slide # didn’t exist in the preview. However, the “go to next slide” worked fine.

After looking back it makes sense that this was happening but it’s too bad that the preview mode can’t recognize what the slide # is in the overall presentation. Oh well…hope this helps someone else. Or maybe everyone already knew this but didn’t tell me

Checkout our flash eLearning games.

I’ve used Articulate for awhile now and have been frustrated that I couldn’t control the navigation of the Articulate Player with my inserted flash. Well…after a bit of snooping and frustration I’ve got it working. If you are a Platinum member of Articulate Support they will give you the software dev kit (SDK) for their Presenter product. This is a great thing to have! They even provide sample FLA files to tear apart.

Here’s how I used Flash to have the Articulate Play advance to a particular slide number:
1. Creat a button in your flash movie. (make it a MovieClip)
2. On the same frame as your button, insert this actionscript (MUST BE ACTIONSCRIPT 2. AS3 IS NOT SUPPORTED)

var ArtAPI = _level0.ArtAPI;
mcButton1.onPress = function()
{
ArtAPI.PlaySlideNum(9);
}

3. Give your button an instance name. It must match the code above. In this example the button instance name is mcButton1.

4. Determine which slide number you want your button to jump to. In this example it is set to advance to slide number 9.

5. Export your Flash. (IMPORTANT: I had to export using Flash Player 7 for the scripting to work. I don’t know why but that’s how is worked for me. You can try a 8-10 versions if you’d like.)

6. Insert the swf into your PPT slide. Your flash import settings should be to play the flash independently from the slide and have the user click next to advance.

7. Publish your Articulate Presentation.

When you look at your published course you should be able to click on the flash button and your presentation will advance to slide 9.

You can also use these code snippets to navigate:

mcButton1.onRelease = function()
{
ArtAPI.PlayNext();
}

mcButton1.onRelease = function()
{
ArtAPI.PlayPrevious();
}

Good luck and have fun! Let us know how it works for you.

Another tip on using flash with the Articulate API.

Checkout our flash eLearning games.