The Logical Blog by IconLogic

eLEARNING DEVELOPMENT: Dude, Watch Your Aspect... Ratio!

When creating eLearning in TechSmith Camtasia, Adobe Captivate, or Articulate Storyline, one critical consideration is the physical width and height of your project (also known as the canvas size).   The size of the project is measured in pixels and if you don't get this right from the start, changing your mind later could lead to some unintended consequences. (Objects being resized out of proportion is one of the biggest concerns.)   When I teach any of my eLearning courses, I encourage learners to consider their end-users when determining the size of the canvas. These days, most users access eLearning content on anything from a desktop computer to laptops to mobile devices such as tablets and smartphones.   In my experience, most devices used to view eLearning are shaped more like rectangles than squares. For that reason, I think the eLearning canvas should be set up to use a 16:9 aspect ratio as opposed to 4:3.   The aspect ratio of an eLearning canvas designed to be viewed on its side, or in landscape mode, is the ratio of its longer side to its shorter side. If you go with a 4:3 aspect ratio (4 pixels across for every 3 pixels in height), you're working with a shape that is tending toward a square. If you go with 16:9 (16 pixels across for every 9 high), the shape is very much a rectangle.   Once you decide on the shape of your canvas (again, 16:9 is a strong rectangle shape), the exact size you use depends on your design and/or the needs of your users. Both 1024x576 and 1280x720 are 16:9 ratios. (Here's a handy list of 16:9 aspect ratios.)   So how do you ensure your aspect ratio is a 16:9 aspect ratio as opposed to 4:3. Read on!   Because eLearning often begins in Microsoft PowerPoint, let's start there. Go to the Design tab on the Ribbon and, from the Customize group, change the Slide Size to Widescreen (16:9).

In TechSmith Camtasia, click the drop-down menu just above the Canvas and choose Project Settings. From the Canvas Dimensions drop-down menu, choose a size from the Widescreen group. All of the sizes in this group are set to an aspect ratio of 16:9.

In Articulate Storyline, the default aspect ratio for new projects is 4:3. Go to the Design tab on the Ribbon and, from the Setup group, click Story Size.   From the Story Size drop-down menu, choose 720:405 (16:9) and then change the Width and Height as needed. Select Lock aspect ratio to ensure you're maintaining a 16:9 aspect ratio as you change the size.

In Adobe Captivate, when creating new projects, select Blank Project and then, from the Canvas drop-down menu, choose an appropriate 16:9 aspect ratio. If you need to change the size of an existing project, choose Modify > Rescale Project and change the Width and Height as appropriate.

***

Looking for training, consulting, mentoring, or development on all things eLearning? We've got you covered. Give us a call at 877.754.2662. You can learn more about our eLearning classes on the IconLogic website.

ARTICULATE STORYLINE 360: Text-to-Speech to Final Voiceover

While working on a recent eLearning project in Articulate Storyline 360, there was a delay in getting the voiceover audio back from our voiceover professional. The dealy was particularly problematic because several slides had image builds that had to be synchronized with the voiceover audio. While these kinds of delays are common, they don't need to derail the entire development process.   To keep the project moving forward, I copied the voiceover script into the Notes window on each Storyline slide.

Next, I opened Storyline's Text-to-Speech window by going to the Insert tab on the Ribbon and, from the Media group, choosing Audio > Text-to-Speech.

From within the Insert Text-to-Speech window, I clicked the Copy From Slide Notes button. The voiceover script text that I had previously pasted into the Notes window was added to the Text-to-Speech window.

From the drop-down menu at the left, I selected English (US); and from the next drop-down menu I chose a voice. I was then able to listen to a sample of the voice by clicking the icon to the left of Preview Voice.

Once I'd settled on a voice that I liked, I clicked the Insert button to add the audio to the slide. (Inserted slide audio appears as an audio icon at the left of the slide.)   To preview the finished Text-to-Speech audio, I right-clicked the audio icon and chose Preview Audio.

Thanks to the Text-to-Speech audio, I had a reasonable placeholder for my finished audio and I was able to move forward with adding and synchronizing the animations.   When the audio finally arrived from my voiceover talent, all I needed to do was replace the Text-to-Speech audio with the "real" audio. On the Timeline, I right-clicked the Text-to-Speech audio file and chose Replace Audio > Audio from File.

Using Text-to-Speech as a placeholder for finished voiceover audio wasn't a perfect process. Because my voiceover person spoke a little slower than the voice I selected in the Text-to-Speech window, I did have to go back and tweak the timing for some of the animations. However, this was a small price to pay to keep the project on track and on budget.

***   Looking for Articulaste Storyline 360 training? Check out these live, online, instructor-led training classes (all Guaranteed to Run).

***

Kevin Siegel is the founder and president of IconLogic, Inc. He has written hundreds of step-by-step computer training books on applications such as Adobe Captivate, Articulate Storyline, Adobe RoboHelp, Adobe Presenter, and TechSmith Camtasia. Kevin spent five years in the U.S. Coast Guard as an award-winning photojournalist and has three decades’ experience as a trainer, publisher, technical writer, and eLearning developer. Kevin is a Certified Master Trainer (CMT), Certified Technical Trainer (CTT+), Certified Online Professional Trainer (COTP), and a frequent speaker at trade shows and conventions.

ARTICULATE STORYLINE 360: Recolor and Crop Content Library Images

During our beginner Articulate Storyline classes, we emphasize the importance of using images in a project instead of relying on dense, text-heavy slides. Of course, finding good images can be a challenge unless you are a subscriber to Articulate 360. Subscribers have access to an millions of assets in the Content Library loaded with downloadable Characters, Illustrations, Icons, Videos, and Photos.   While recently working in Storyline, I was in need of a photo of a horse. The project I was creating was about horse health and I was specifically looking for a horse showing as many teeth as possible. (The wider the grin, the better.)

I visited Storyline's Insert tab on the Ribbon and, from the Content Library, I clicked Photos.   From within the Search Photos dialog box, I typed horse teeth and I was pleasantly surprised when several candidates appeared. (Given that I was needing horse grins, I wasn't expecting even a single decent photo to appear and was fully prepared for a trip to a photo-supply website.)

I selected the photo shown above at the right and then clicked the Insert button. By default, the photo was inserted in the middle of my slide.

The other images I'd used throughout the project were black and white and I wanted to keep that theme. Unfortunately, the computer I was using did not have an image editing program. No worries, you can recolor an image without leaving Storyline.   I selected the Picture Tools tab on the Ribbon, clicked Recolor, and selected Accent color 3 Dark.

I also needed to crop the image. That wasn't a problem either. At the right of the Picture Tools tab, I clicked the Crop tool.

I dragged the cropping handles from both corners to crop everything out of the image except those awesome teeth.

And here's how the finished image looked on the slide.

***   Looking for Articulate Storyline 360 training? Check out these live, online, instructor-led training classes (all Guaranteed to Run).

ARTICULATE STORYLINE 360: New Trigger Workflow

If you want to make something happen in Articulate Storyline, Triggers are everything. They're so important to your success in Storyline that we cover them beginning in the opening minutes of our Storyline Beginner class and continue to teach them through the end of the Storyline Advanced class.   A recent Storyline 360 update from Articulate has taken what was already a pretty nice trigger workflow and made it even better. In this article we'll take a quick look at the new workflow. (If you'd like to explore the new workflow, download the latest build.) You can check your version of Storyline via Help > About Storyline. The new trigger workflow can be found in build 3.33.20625.0 or later.

The new trigger workflow will be on by default. However, you can elect to stick with the old, Classic workflow if you prefer. To switch between the new and Classic workflows, choose File > Storyline Options.

Select the Features category and then select Use the new, faster trigger workflow. (You will need to restart Storyline to switch between modes.)

In the image below you can see the classic Trigger Wizard. As I said at the start, I think the wizard was already pretty easy to use. If I had any complaints at all it was with the need to take a few extra clicks to create a Condition. (As you can see, there's a Show Conditions button which leads to a second screen where, after a few clicks, the Condition gets created.)

The new Trigger Wizard, shown below, streamlines/groups things quite nicely. Tops among my favorites is that Conditions have been moved up in the workflow (there's no longer a big button to click that leads to a different window).

When you select Actions (by clicking the link to the right of the word Actions), the options are grouped into appropriate categories, making specific actions easy to find.

The Triggers panel also received a facelift in the new build. Chief among the enhancements is the ability to Disable (you no longer need to delete and recreate individual triggers... with a quick click you can disable them) and Group (when triggers are grouped, you can make a single edit to change the event that triggers all the actions).

If you're still working with developers who are using Storyline 3, there's no worries about the new workflow causing trigger issues. According to Articulate, "The new trigger workflow is fully compatible with the classic workflow in all builds of Storyline 360 and Storyline 3, so you can share a project file with other authors no matter which version of Storyline they’re using. When you disable a trigger in the new workflow, that trigger is present but hidden in the classic workflow in Storyline 360 and Storyline 3."   You can learn more about the new trigger workflow on the Articulate website.

***   Looking for Storyline training, consulting, mentoring, or development? We've got you covered. Give us a call at 877.754.2662. We've got an awesome collection of live, online classes. You can learn more here.

ARTICULATE STORYLINE 360: The Awesomeness of the Media Library

Have you ever had this happen to you? You insert an image into your Storyline project and then sometime later you decide to use the image on another slide. However, your project is large (multiple scenes and slides) and you're having a hard time finding that pesky image. How about this one? You're making your project accessible for learners with disabilities. You're pretty sure you added alternative text to a specific image but now you're doubting yourself. Is there a quick way to check? Or perhaps you've used an image in a project and someone on the team wants to use it too. Is there a quick way to share the image?   If you add images, characters, audio, or video to your projects (I think that covers all eLearning developers, everywhere), you'll love Articulate Storyline 360's Media Library (View tab > Views group).     The Media Library displays a list of all of the project's assets grouped on tabs for Images, Characters, Audio, and Video.     I love the ability to select an image and, from the right of the Media Library, add Alt text (for accessibility) and notes. You can also see where the image has been used throughout the project and add the same accessibility text to all instances of the image.     You can also import assets directly into the Media Library and export any asset (so it can be shared with team members).     ***   Looking for Storyline training? Check out these live, instructor-led classes. *** Kevin Siegel is the founder and president of IconLogic, Inc. He has written hundreds of step-by-step computer training books on applications such as Adobe Captivate, Articulate Storyline, Adobe RoboHelp, Adobe Presenter, and TechSmith Camtasia. Kevin spent five years in the U.S. Coast Guard as an award-winning photojournalist and has three decades’ experience as a trainer, publisher, technical writer, and eLearning developer. Kevin is a Certified Master Trainer (CMT), Certified Technical Trainer (CTT+), Certified Online Professional Trainer (COTP), and a frequent speaker at trade shows and conventions.

ARTICULATE STORYLINE: Random Text... It Rocks!

I was cranking away recently on an Articulate Storyline project. On one slide, I had the layout done but was waiting for the final text from the client. I created a shape but couldn't go further without the client's text. At the very least, I wanted some placeholder text, so I could finish the slide by formatting the boxed text.   And that was when I was reminded of an awesome Storyline feature: random text. In the image below, you can see the shape I've added to a slide. It still needs text that I can format.

I typed the following line of text into the shape: =Lorem().

And check out what happens after I press the ENTER key.

Pretty cool, eh? But I know what you're thinking... Lorem ipsum? If real words are more your style, it's no problem. Type =Rand() instead.

After pressing the ENTER key, it was all about the quick brown fox. Pretty cool, eh?

***

Looking for Storyline training or support? Check out these awesome live, online, instructor-led classes. Also, if you need help with Storyline development or if you'd like one-on-one Storyline mentoring, we've got you covered.

ARTICULATE STORYLINE: Logical Scene Numbering

When I work with scenes in Articulate Storyline, I like it when the number that accompanies each scene is logical. Take the three scenes below for instance. I'm creating an eLearning project for a zoo, so naturally I have scenes for Big Cats, Elephants, and Exotic Birds.

Because I created the Big Cats scene first, it was automatically tagged as my Starting Scene (as indicated by the red flag in the image above).   Next, I created the Elephants scene, followed by the Exotic Birds scene. Notice in the image above that in addition to having appropriate names, the scenes are logically numbered (1, 2, and 3).   The scene numbers are based on their creation order. While logical, the numbers do not indicate the order in which any scene might be seen by my learners. In fact, I can make any scene the Starting Scene and, using Triggers, I can make the third scene appear before the second scene.   I created a fourth scene and named it Home. On the Home scene, I added three buttons to a slide. Each of the buttons were given Triggers that jumped to a different scene in the Story.

I then made the Home scene the Starting Scene (this is easy to do with a simple right-click on the scene via the Story View).   After making the fourth scene (the Home scene) the Starting Scene, the drama started. In the image below, notice that the pesky Home scene is positioned correctly (above the other scenes). And you can clearly see the arrows indicating the button jumps between the Home scene and the other scenes.

But do you also see the horror in the image above? Look at that number 4 to the left of the Home scene's name. Noooooo! The Home scene is my first scene, and as far as I'm concerned, it should be numbered with a 1, not a 4. Of course, Storyline doesn't agree with me... a numbering sequence of 4, 1, 2, 3 is perfectly fine!   At the end of the day, the scene numbers don't truly matter. Learners will be able to move freely around the zoo, they'll never see the numbers, and won't ever know that the scene numbers are out of order.   But I'll know the numbers are out of whack... and so will you!   Fortunately, while not obvious, the fix is easy.   While in Story View, select the scene that's out of order and cut it to the clipboard. Without selecting anything, immediately paste the scene back into Story View.   And that's that. If you're like me, you'll be delighted to see that the scenes are numbered logically in the Story View (which is truly the only way to go, right?).

Looking for Storyline training or support? Check out these awesome live, online, instructor-led classes. Also, if you need help with Storyline development or if you'd like one-on-one Storyline mentoring, we've got you covered.

ARTICULATE STORYLINE: Free Icons Galore!

I was teaching Storyline recently and one of my students wanted to put a check mark image into his project. Before I could blink, he was on Google, had searched for a check mark image, found a ton of them, downloaded the one he liked, and added it to his project. Done and done!   Of course, the image was copyrighted (as are most images you'll find via Google searches). Given that he is a Storyline 360 subscriber, I showed him a better way to icon-glory that's not only cost-free but copyright-free and royalty-free.   From the Storyline 360 ribbon, select the Insert tab. From the Content Library section, click Icons.

In the Search Icons area, he typed check mark and pressed [enter]. The result was more check marks than he could possibly ever use. Better still, he was able to quickly change the color of the shape once it was loaded onto his slide (something he would have been unable to do with a checkmark image lifted from the Internet).

Similarly, you can use the Search feature to find anything from puppies to kittens to boats. And again, everything you find is free to use and/or modify in your Storyline project.

If you're looking to learn Articulate Storyline, we've got an awesome collection of classes... all live, all instructor-led, all online, and all incredibly interactive.

ARTICULATE STORYLINE: Publish a Portion of a Project

When publishing a Storyline project, it’s often preferable to publish a small section of the project instead of the entire thing (a single slide for instance or an individual scene). Fortunately, Storyline 360 makes quick work of this task, if you know where to look.   Open Storyline’s Publish dialog box by either using the Publish tool on the Ribbon or choosing File > Publish.   From the Properties area of the Publish dialog box, click the link to the right of Publish to open another Publish dialog box.

From here you can elect to publish the entire project, a single scene, or from the A single slide drop-down menu, specify any slide from any scene within the project.

Click the OK button and then click the Publish button to publish the selection.   Need to learn Articulate Storyline? Want to save on travel? Consider our live, online, and 100% interactive and hands-on Storyline classes.

Articulate Storyline 360: Modern and Legacy Players

by Kevin Siegel, CTT, COTP

If you're an Articulate Storyline 360 developer, you’ve likely grown familiar with the publishing choices found in the Publish dialog box. Most notably, you can elect to publish as HTML5 only, HTML5 with a Flash fallback, Flash with an HTML5 fallback, or Flash only.

However, if you’ve just recently updated Storyline, you’ve likely noticed that when publishing, HTML5 is the only option.

The publish options you see has everything to do with the project’s playbar (the playbar is the frame around the slide content and contains such features as menu, seekbar, and previous and next buttons). Storyline 360 users have a choice of two players: Modern and Classic. The Modern playbar does not work with Flash (hence the reason that HTML5 is the only publish option. The Classic playbar (which is the only playbar available in Storyline 3), supports both HTML5 and Flash.

 

Switching between players is easy. From within the Publish dialog box, click the Player link.

 

 

From the Player drop-down menu, choose the player you'd like. Note that you can also switch players outside of the Publish dialog box by clicking the Player tool on the toolbar. 

 

 

 

To learn about the specific differences between the Modern and Classic players, visit the Articulate website.