Articulate Storyline – Page 4

May 19, 2016

Articulate Storyline: All About the Cursor

by Kevin Siegel

If you've recorded the screen with Articulate Storyline and elected to insert View mode steps, it's ikely that you'll need to modify the behavior of the cursor that gets created automatically on every slide. Fortunately, there are several cursor formatting options available.

Open a slide containing a cursor and double-click the cursor to display the Mouse Tools tab on the Ribbon.

Use the Clicks group to change the click sound heard by learners to a Single or Double-click, or remove the sound completely if it's annoying anyone. (Note: There is no Apply to All option so if you want to remove or edit the click sound, you'll need to repeat the process on every slide.)

Next you'll find the Cursors group where you can quickly change the appearance of the cursor (really useful if, during the recording process, the cursor your system displayed wasn't the one Storyline chose for you). Not finding the Cursor you need? no worries. Click the arrow at the bottom right of the group to expand the group.

From there you'll find additional cursors along with an option to Browse for Cursors (you can load any cursor file on your computer or network).

You can use the Path group to perform such cursor trickery as changing the Pointer Path from curved to straight (curved is the default and is ideal), slowing down the cursor speed, hiding or showing the click effect, and changing the direction used by the cursor as it approaches a target.

Last but not least, if all of the Path options above weren't enough, you can always manually drag the cursor around the slide and make it bend to your will (as it were).

***

Looking for Articulate Storyline or Adobe Captivate training? Check out these live, online classes.

May 10, 2016

Articulate Storyline: “Drop Correct” and “Drop Incorrect” States

by Kal Hadi

Perhaps you're already familiar with states in Articulate Storyline such as normal, hover, down, visited, hidden, and disabled, but not quite acquainted or aware of two additional object states known as "Drop Correct" and "Drop Incorrect." Let's discuss where, how, and when to take advantage of these states.

First, understand that these states are most useful when you have a "drag and drop" interaction (either as part of a Freeform Quiz slide or in a regular slide that includes a "Object Drop Over" or "Object Drop On" event (When)).

Second, you need to define the "Drop Correct" and "Drop Incorrect" states in the states panel for the objects you need to make "draggable" or "droppable". Maybe you can include a visual clue (an icon or symbol) that represent a correct or incorrect appearance of the element after it has been dragged and dropped.

To take advantage of the newly created "Drop Correct" and "Drop Incorrect," you need to have a "drag and drop" interaction either in a quiz slide or in a normal slide. In a Freeform Quiz Slide, the states are automatically triggered when an interaction is submitted. Let's take a look at a normal slide interaction example.

In the interaction represented in the figure below, each letter object has been defined a "Drop Correct" and "Drop Incorrect" states. In addition to the "draggable" letters. There are two targets (the buckets) where the letter can be dropped.

For each draggable letter, two triggers are created that change the state of the element (letter) to "Drop Correct" or "Drop Incorrect" when the element is dropped over the "correct" or "incorrect" targets as shown in the figures below:

Finally, preview the slide to test the interaction.

***

Looking for training or help with Articulate Storyline or Studio? Check out these awesome live, online Articulate classes.

April 25, 2016

Articulate Storyline: Adding JavaScript

by Kevin Siegel

If you've used Articulate Storyline at all, you have likely discovered for yourself that triggers can perform robust interactivity and calculations. However, triggers will take you only so far. Storyline can go beyond its built-in functionality by employing JavaScript, a standard scripting language used by web developers to create interactive web-based content.

Storyline allows you to execute JavaScript in your projects that perform several useful functions. For instance, you can attach a JavaScript to a button that allows learners to print a slide. Here's how:

Open or create a Storyline project and then insert a button on a slide (or select an existing button).

Create a new trigger, and from the Action drop-down menu, choose Execute JavaScript.

From the Script area, click Add/Edit JavaScript (the three dots) to open the Javascript dialog box. This is where you can type the JavaScript, paste it if you have already copied it to the clipboard, or link to it if the script is located externally.

Type window.print(); in the Javascript dialog box.

The text you just typed is about as simple as JavaScript gets. The word "window" is a browser object that calls the current browser window. The word "print" is a method that calls the browser print functionality. When you call a method you often need an array (arrays go between the open and closed parentheses). In this instance, there are no arrays needed but the parentheses are still required (even if empty).

Click the OK button twice to close both dialog boxes.

If you publish the lesson and click the button, the print dialog box will open and you'll be able to print the slide.

***

Looking for Storyline or Adobe Captivate training, check out these live, online classes.

March 16, 2016

Articulate Storyline: Translations

by Kal Hadi

So you need to create eLearning in various languages but you're not quite sure about available workflows in Articulate Storyline. This article demonstrates the import and export features in Storyline specifically designed for building multi-lingual courses. Please keep in mind that Storyline is NOT going to translate the content from one language into another… that's a job for localization companies such as Carmazzi Global Solutions.

You can export content from Storyline, have the content translated, and then import the translated text back into a project. The process is often referred to as round-tripping.

Storyline objects that contain text (text boxes, smart shapes, buttons, and text entries) get assigned an internal ID that looks something like this: {bmp_5hAyawujdSz.Name}. The IDs, which are automatically generated by Storyline behind the scenes, are the key to performing the round-trip.

To perform a Storyline round-trip choose File > Translation and then choose Export.

The export formats include Word Document (.doc), Word Document with Reference Column, and XML Localization Interchange File Format (.Xliff).

The difference between the two Word .doc formats is whether or not the original language text is retained as a reference for the translator. This is often preferred for immediate point of reference.

The XML-based format (.Xliff) is fairly common in the technical translation field and is used to facilitate the sharing of data between software tools.

Your localization vendor will advise you as to the best export format to use. In any event, the exported file will simply be sent to the vendor and its content translated.

Upon receiving your translated file back from the vendor, it's time to import the file back into Storyline by choosing File > Translation > Import.

Open the translated file and the localized text will replace the original text throughout the project. (The original object styles and formats will be maintained.)

Give the updated project a new name via File > Save As (being careful not to over-write the original language project). Word counts can vary from language to language resulting in undersized or oversized text boxes and shapes. You should go through the slide elements one-by-one and adjust the size of the text elements as needed.

Note: Because you will have to do additional work to a project after importing translated text (resizing slide objects for instance), localization should occur after you have completed the course in your primary language.

***

Looking for training or help with Articulate Storyline or Studio? Check out these awesome live, online Articulate classes.

February 12, 2016

Articulate Storyline: Quiz Slide Remedition

by Kal Hadi

Although there is no built-in Quiz remediation option in Storyline to redirect a learner to a particular slide where quiz content was covered, you can use variables, triggers, states, and some logic to add the feature.

You can modify the branching from a quiz question based on the learner's answer via a question slide's Form View by clicking the More button.

From the Branch to the following drop-down menu, select a redirect slide based on the answer selected by the learner. In the example below, I'm setting up a remediation should the learner answer a question incorrectly.

Once I've sent the learner to a content slide, I want to send them back to continue the quiz, something that is not going to happen automatically. Logic would require that the learner goes back to the quiz if (and only if) the learner landed on the content slide from the incorrect answer redirect. I can accomplish the task with a True/False variable and a simple trigger. First I need to create the variable below:

Now it's time to tell Storyline to switch the value of this variable from "False" to "True," indicating that the learner has answered the question incorrectly. I can accomplish this by adding a trigger to the "Incorrect" layer of the question slide as below:

I added a Back to Quiz button to the content slide that takes the learner back to the quiz. The key is to only show the button if (and only if) the learner lands on the content slide by way of remediation. I can accomplish this with a state and a trigger.

I change the initial state of the Back to Quiz button to Hidden (as shown below):

changing the initial state of the _Back to Quiz_ button to _Hidden_

Finally, it's time to make the Back to Quiz button available by changing its state to Normal. This can be accomplished with a conditional trigger.

***

Looking for training or help with Articulate Storyline or Studio? Check out these awesome live, online Articulate classes.

February 10, 2016

An eLearning Workflow

by Sally Cox

I spent more than 15 years as an Adobe trainer, teaching people the latest features of new products. One of the things I have learned from this experience is that people don't just want to learn what's new in an application… they need guidance on incorporating the application into their workflow. They need to see the entire development process that will enable them to get their jobs done. With this in mind, the article focuses on the workflow I use when I create my eLearning courses.

From Paper to Adobe Illustrator

My eLearning courses begin life on paper (where I've sketched some ideas). I am a designer at heart, so Adobe Illustrator is a natural starting point for me. I use Illustrator to lay out the basic look and feel of my eLearning course, choose colors and fonts, and solve my design dilemmas.

I start with the client's brand guidelines (or style guide), an important part of the design process. If you want to keep a client for the long term, respecting their brand is key. I work within the brand guidelines for colors, fonts, general look and feel, logo placement rules, etc.

I then begin laying out the cover/transition slides for my courses and a sample content slide. The image below is an example of a recent project I did. I did not have brand guidelines to work with here so I had a lot of freedom. I created these two slides in Illustrator, using swatches from the Swatches library to choose harmonious colors. I work out headers and footers, if there are any, and start to think about the interactions I will be using.

The Swatches in Illustrator have amazing color combinations. My favorite Swatch library? Baroque! Look at these rich colors… they typically show up in all of my projects.

I export my Illustrator graphics as transparent high-resolution PNG files for easy import into Microsoft PowerPoint, Articulate Storyline, or Adobe Captivate. To create the transparent PNG's, build the graphic on a separate artboard and note the artboard number.

Export as transparent high-resolution PNG files.

Next, choose File > Export, select the appropriate artboard, and then select PNG as the output.

Illustrator shows you a preview of the artboard, and here you set options. I change the Resolution to High 300 PPI and Background color to Transparent. These settings allow the image to import beautifully into just about any application.

Microsoft PowerPoint

When it comes to eLearning development, I use PowerPoint as my "heavy hitter." It's the place I gather all my graphics, content and interaction ideas.

Why PowerPoint for eLearning?

Most everyone has it–clients like to be able to make minor edits, so giving them something they can actually use is key
PowerPoint imports into Adobe Connect, Articulate Storyline, and Adobe Captivate easily
I can create custom colors using the Eyedropper tool
You are only limited by your imagination–think of PowerPoint as a "delivery tool," nothing more. My work doesn't LOOK like it was created in PowerPoint and yours doesn't have to either! (If you're looking to ensure your PowerPoint slides are optimized for eLearning, check out AJ's Optimizing PowerPoint Design for eLearning & Presentations class!)

Here's an example of how I grab colors from the artwork using the Eyedropper tool in PowerPoint.

Articulate Storyline

Storyline is my preferred authoring tool for creating eLearning courses. My PowerPoint presentations import beautifully into Storyline which allows me to quickly get my courses up and running. Storyline recognizes PowerPoint's Master Slides, and every slide element comes in as a separate piece so I can quickly add transitions, set object timing, add Triggers, and a quiz in Storyline. Then I can quickly publish my content as HTML5 and I'm done!

***

If you'd like to attend some awesome 3-hour mini courses that focus on eLearning, check these out.

January 22, 2016

Hands-On Workshop: Come Compare Adobe Captivate to Articulate Storyline to TechSmith Camtasia Studio

When: Sunday, May 15
Where: Anaheim, CA

I'm proud to announce that I'll be facilitating/refereeing an awesome hands-on pre-conference session at the STC Technical Communication Summit in Anaheim, CA later this year. The session will give attendees a chance to use some of the top eLearning development tools available today.

Here's why this session is going to be a real slug-fest: In this corner: Adobe Captivate. Over there? It's Articulate Storyline? And because this isn't a two-tool fight, look over there and you'll see TechSmith Camtasia Studio.

Bring your own laptop to this session loaded with the trial versions of Adobe Captivate, Articulate Storyline, and/or TechSmith Camtasia Studio. Sound the bell and create and publish an eLearning project in each of the tools (or just one… it's up to you). By the time you leave class, you'll have a functioning eLearning lesson you can take back and show your team/boss. Along the way, you'll be armed with information about each tool's pricing, strengths, and weaknesses.

Let the tools pound on each other and find out, first-hand, which tool is right for you!

Learn more

December 8, 2015

Articulate Storyline: Action Fine Tuning

by Kal Hadi

After inserting screen recordings in Storyline as Step-by-Step slides, you will be able to perform what is known in Storyline as "Action Fine Tuning." This useful feature allows you to change the starting and ending frames for each video clip in every slide.

You may already be aware that in Storyline, a single screen recording can be used in various ways (record once and use many). A single recording can be used as full motion Video on a Single Slide, or on many single slides as View, Try, and Test modes.

When inserting a recording on single slides, Storyline takes the entire full video recording and splits it up into smaller video chunks that altogether constitute the entire video. The length of each chunk on a slide depends on how long the person recording the screen spent between clicks.

A chunk of video on a slide can sometimes be longer than needed, resulting in large output files with less than ideal timing. The "Action Fine Tuning" feature in Storyline is where you can control the length of each video segment.

Action Fine Tuning is a bit of a hidden feature. The only way to get to it is by right-clicking a slide background or on the Screen Recording Action element in the Timeline.

After entering the Action Fine Tuning area, you can start adjusting/moving the starting and ending frames for the video clip segment by dragging the starting lines/markers along the timeline of the entire video.

You can precisely adjust the starting and ending frames by choosing the appropriate frame selection and clicking the Previous or Next Frame buttons.

***

Looking for training or help with Articulate Storyline or Studio? Check out these awesome live, online Articulate classes.

November 14, 2015

Articulate Storyline vs. Adobe Captivate

A recent LinkedIn post asked eLearning developers: which tool is best: Adobe Captivate or Articulate Storyline? As I read through the comments, I was struck by how many people insisted that Storyline was the better choice because it was easier to learn than Captivate because it was so much like Microsoft PowerPoint.

As someone who uses both Captivate and Storyline, I have to disagree with that recurring sentiment. Sure, Storyline seems to be more like PowerPoint (there's a similar Ribbon and toolset). But honestly, how many of you are PowerPoint experts? I bet you can make a traditional presentation in PowerPoint including text, bullets, and images, but do you really know how to use PowerPoint efficiently and to its potential? I would submit that the answer is no… unless you received proper PowerPoint training. Both Captivate and Storyline seem simple at first glance… just like PowerPoint. However, PowerPoint, Storyline, and Captivate are robust development tools and if you aren't trained, you'll quickly find yourself doing the "hunt and peck" shuffle as you learn on-the-fly… spending double (perhaps triple) the time necessary to perform simple tasks.

I'm a big fan of both Captivate and Storyline (and TechSmith Camtasia Studio too). I'm constantly asked which tool is best (typically this question comes from new eLearning developers who are under pressure to pick one tool for their corporate eLearning initiatives over another). People want to know the inherent strengths and weaknesses of each tool.

My answer? It depends mainly on two things: your budget to purchase an eLearning tool (are you a one-person shop buying a single license or are you part of a team requiring multiple licenses?); and the output you are trying to provide your learners.

Captivate costs around $1,000. If you don't want to shell out the cash up front, you can subscribe to Captivate for around $30 per month. Given that Adobe upgrades Captivate approximately once each year, and you get the upgrades for free as part of your subscription, subscribing is a pretty good deal. Storyline is far more expensive (I've seen it listed for upwards of $2,000 and there isn't a subscription plan).

When it comes to output, both Captivate and Storyline can publish SWF and HTML5 content. However, if you're required to publish interactive PDFs or create responsive eLearning, the choice has to be Captivate (Storyline does not currently support either output).

Here's an analogy for comparing Captivate against Storyline. Consider the Toyota Tundra to the Toyota Takoma. Both are trucks. Both are awesome. Both have similar appointments in the cabin (some of the appointments are identical and if you learn how to use a feature in one truck, you know how to use it in the other). The Tundra (Captivate) can tow a house; the Takoma (Storyline) can tow a boat. The Takoma is easier to park in a small garage; the Tundra… not so much.

Do you need to tow a house or just a boat? If just a boat, go ahead and get the boat-puller. However, once you've purchased the boat puller and then need to pull a house… yikes!

If you use both Captivate and Storyline, I'd love to read your comments about both tools below as comments.

And of course, no matter which tool you choose, we've got an awesome collection of training classes to support you.

November 12, 2015

Development Corner: Image Formats

by Sally Cox

When it comes to adding images to websites, PowerPoint presentations, or eLearning projects, you will likely be given JPEGs, GIFs, or PNGs. Let's review the three most common image formats and why/when to use them.

JPEG

JPEG is short for "Joint Photographer's Experts Group." It is one of the most popular formats used on the web and in eLearning. JPEG compression (the act of making the image as small as possible while retaining as much quality as possible) is "lossy" compression, which means every time you save an image as a JPEG, it loses quality.

The first image above is a JPEG taken with my iPhone. In the second image, I have opened the file in Photoshop and zoomed in on the child's face.

The little squares you see in the closeup image are called "pixels." Every time you save an image as a JPEG, it loses some quality by throwing out pixels. So if you are editing an image in Photoshop, always save it as the native format first, which is a PSD (Photoshop Document).

In the Save As dialog box in Photoshop, choose "Photoshop" as the file format. This saves as a PSD and preserves all details. Then after you finish your edits, do another Save As and choose "JPEG." The original PSD remains fully intact.

The image below is an example of the same photo saved multiple times as a low-quality JPEG. Notice that that there is a squarish effect happening and details are lost. This effect is known as "JPEG artifact."

JPEGs use the "RGB colorspace," which has more than 16 million colors. This allows for beautiful continuous-tone images with fluid gradations and a full range of colors. It's a good choice for continuous-tone, but does not allow transparency or animation.

GIF

The "Graphic Interchange Format" (GIF) works in the "Indexed colorspace," so its color palette is quite limited–just 256 colors. GIFs do, however, support transparency and animation (the once-hated animated GIF is making a comeback; I see it every day on Facebook). The oldest format on the web (created in 1989), GIFs are saved as "lossless" compression.

In the image below, I have saved the image as a GIF and it contains just 256 colors. You can see that the image has lost some of its detail.

Here is an example of an image containing just 8 colors–all detail is gone and the image has a "posterized" effect.

GIFs are perfect for "flat color," i.e., logos or flat design graphics that don't have gradations or continuous-tone (remember: only 256 colors).

PNG

The "Portable Network Graphic" was created (approved as a web standard in 1996) to provide high quality continuous-tone but also allow for transparency and animation.

PNGs are saved in the RGB colorspace, so they have the full range of 16 million+ colors. What I like best about PNGs is the ability to save transparency, which I use every day in my workflow. I save my graphics as high-quality PNGs and allow transparency (a checkbox I choose in Adobe Illustrator when I export a graphic to PNG).

In a recent project I wanted to use an image of a headset, and I needed the background to be transparent. I opened the image in Adobe Illustrator and set the Export PNG options to High Quality and set the Background Color to Transparency.

Thanks to the Transparency option, I had the freedom to overlay the headset on the green background shown below.

To Recap:

	JPEG	GIF	"PNG"
COLORS	16 MILLION +	256	16 MILLION +
TRANSPARENCY	NO	YES	YES
ANIMATION	NO	YES	YES
CONTINUOUS-TONE	YES	NO	YES
FLAT COLOR	NO	YES	YES

***
If you'd like to attend some awesome 3-hour mini courses that focus on eLearning, check these out.