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.

New 1-Hour Live, Online Course: Microsoft PowerPoint to eLearning via Articulate Storyline, Adobe Captivate, TechSmith Camtasia, or Presenter

If you intend to create an eLearning course, it’s a good bet that you’re going to start the development process in Microsoft PowerPoint. However, PowerPoint is missing some key eLearning features to allow you to output finished eLearning content. For instance, PowerPoint cannot create software simulations or video demos. There is no way to add quizzes or learner interactions in PowerPoint. And, because there are no reporting features or provisions for SCORM or AICC, you cannot effectively integrate PowerPoint presentations with Learning Management Systems. 

Instead of relying on PowerPoint alone for your eLearning content, you’ll need to take your finished presentations into an eLearning development tool such as Adobe Captivate, Articulate Storyline, or TechSmith Camtasia. While in those tools, you’ll add the necessary eLearning features and then publish your content. Alternately, you can rely on Presenter, a PowerPoint plug-in that works together with PowerPoint to accomplish many of the things you can do in Captivate, Camtasia, and Storyline.

But what happens to your beloved PowerPoint slides when they get incorporated into today’s eLearning tools? Do the animations still work? How about the hyperlinks? Does the voiceover audio you added to your PowerPoint slides still work when the slides are imported into your eLearning tool? Do the fonts look okay? If you or the subject matter expert updates the PowerPoint presentation outside of the eLearning tool, does the eLearning version update or do you have to re-import?

Attend this action-packed session and learn how PowerPoint works with the top eLearning tools of the day. You’ll learn the strengths and weaknesses of each eLearning tool via live demonstrations (there is no pre-recorded content). This is live, online training at its very best!

You’ll learn how to integrate PowerPoint with:

• Adobe Captivate
• Articulate Storyline
• TechSmith Camtasia
• Presenter

Learn more or sign up.

TEACHING ONLINE: True eLearning Integration via Adobe Connect

by Kevin Siegel, CTT+, COTP

When I teach my live, online Certified Online Training Professional course, one of the core concepts I encourage is blended learning (combining online digital media with traditional classroom teaching concepts). Specifically, there's great value in integrating eLearning (asynchronous training) with live (synchronous) training by providing access to eLearning content from within the virtual training space.

 

Published eLearning content can typically be provided to online students via a Materials pod or direct link (URL) you type into the Chat pod. All of the main training platforms (WebEx, GoToTraining, Adobe Connect) provide Chat and Materials pods, although they might give the pods different names.

 

The problem with sending students outside of the training space to engage with eLearning content is that the student leaves the virtual classroom. Once your learners are outside, good luck getting them back.

 

In my experience using many of the online training platforms, only one of the vendors offers a truly integrated blended-learning experience and allows you to share eLearning content directly from within the training room, and that’s Adobe with its virtual training platform Connect.

 

Here’s how you can share eLearning courses from within Connect. First, create the eLearning content in Adobe Captivate, and then publish as an SWF.

 

From within Adobe Connect, choose Share Document.

 

 

Click the Browse My Computer button and upload the SWF you published with Captivate. In the image below, I’ve already uploaded a SWF I created with Captivate called UsingNotepad. Once you’ve uploaded content, it stays in the Select Document to Share area so you don’t have to upload content again and again and again.

 

 

All you need to do now is click the OK button and everyone in the virtual room will not only see the eLearning, they’ll be able to interact with it independent of the other attendees.

 

 

The ability of virtual attendees to work through the eLearning content independently is so cool, it's the one feature that might encourage you to select Adobe Connect as your training platform above others... and Adobe Captivate as your eLearning tool. If you’re thinking about going the Connect route, head on over to Engage Systems, tell them your friends at IconLogic said hello, and then ask for a demo of Adobe Connect.

 

***

 

If you'd like to learn how to learn how to teach live, online classes, check out ICCOTP's certification course.

 

***

 

Kevin Siegel, CTT, COTP, is the founder and president of IconLogic. Following a career in Public Affairs with the U.S. Coast Guard and in private industry, Kevin has spent decades as a technical communicator, classroom and online trainer, public speaker, and has written hundreds of computer training books for adult learners. He has been recognized by Adobe as one of the top trainers world-wide.

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.

 

 

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? 

1. Most everyone has it--clients like to be able to make minor edits, so giving them something they can actually use is key
2. PowerPoint imports into Adobe Connect, Articulate Storyline, and Adobe Captivate easily
3. I can create custom colors using the Eyedropper tool
4. 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.

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.

Adobe Captivate or Adobe Presenter: Which One Is Right For You?

by Jennie Ruby 

 

Adobe Presenter and Adobe Captivate have some overlapping functions. Both can create eLearning lessons that can be uploaded to and report results to a learning management system (LMS). Both can work with PowerPoint. Both can create interactive quizzes. And the list goes on. But what are the key differences that tell me which of these programs to buy? Or, if I already have both, which to use for any given project? Let's take a look.

Adobe Presenter is a PowerPoint add-in, and is marketed by Adobe specifically to educators. It is the easiest path from PowerPoint to eLearning. You can use it to take existing PowerPoint slides, add voiceover narration, optionally record a self-video while presenting the lesson, add eLearning scenes and characters, add interactive elements, add a quiz, and publish the lesson to an LMS. Presenter lessons can be used to "flip" the classroom--the homework is to watch the lecture, and then practice assignments, worked problems, and the like are done in the classroom with the teacher's help. 

Presenter is designed so that eLearning features are easy to add. But, as is typical with any kind of software, the easier the software is to use, the fewer choices you have about certain things. In Adobe Presenter, this is a good thing. This software allows you to focus more on the content than on eLearning functionality. With this software, the feeling is that you are designing your content, and the software handles the work of deciding things like how the learner advances to the next slide. Your energy goes into your content.

For example, if you want to create a scenario, where the learner chooses options and receives feedback by traveling down various "branches" after decision points, you can click a few buttons, choose between pre-designed options, type your content on designated slides, and let Presenter take care of which button takes the learner to which slide. Your choices are somewhat limited, but getting a functioning scenario lesson up and running is fast and easy.

Adobe Captivate is powerful, stand-alone eLearning development software. It can import PowerPoint slides as the background and basic content of a project, but from that point on, the file is a Captivate project file. You are no longer in PowerPoint. In fact, using PowerPoint is just one of many options for how to create a Captivate project.

Arguably Captivate's greatest strength is the ability to create software demonstrations and simulations by simply recording screen actions as you do them. You can create still shots of each screen or record a live video of a procedure. Captivate can add text descriptions of the actions automatically. But after recording, you can edit the recorded steps to add highlights, additional captions, voiceover instructions, hints, feedback messages, and much more.

Rather than having a lot of automatic presets (although there are plenty of predesigned themes for colors, backgrounds, and fonts), Captivate puts you in control of the details of your lesson's appearance and functionality. What will the learner click to advance the lesson? You can create a button or make any part of the background a clickable object. Want a button that does multiple actions? You can create that. Want to add a screen character or multiple characters? Captivate lets you do that, too. 

Want a branching scenario? You map it out, you add scenes or characters, you create the buttons that take your learner down the various branches. You have complete flexibility as to how the lesson proceeds. But you are on your own. You have to remember to add that "back" button that keeps your learner from reaching a dead end. You have to create all of the links and make sure they go in the correct sequence. You have all the power, but you also have all the work of making the eLearning project function. 

So which should you use for what?

• If you need software simulations: Captivate
• If you need flexible, responsive lesson sizes for various learner devices: Captivate
• If you have existing PowerPoint slides and want to record your lecture with them: Presenter
• If you just want to focus on content, and want the rest to be mostly automatic: Presenter
• If you want detailed control over sophisticated branching, interactions, timings, and functions: Captivate

Budget

Captivate is a highly advanced, fully functional eLearning software development tool, and its cost reflects that:

• $999 to purchase
• $29.99/month to subscribe, with a year's subscription minimum
• Student/teacher edition: $299

Presenter is a PowerPoint add-in that gives you a lot of eLearning pizazz for a lot less development work and costs significantly less than Captivate:

• $499 to purchase
• $14.99/month to subscribe for a year
• $24.99 month-to-month subscription available
• Student/teacher editions upgrade: $149

Are you using one of or both of these programs? Give me your opinion. Which do you use for what?

 

*** 

If you'd like to learn more about Captivate, come hang out in my just announced Adobe Captivate Quick Start mini course. And if you'd like to learn more Adobe Captivate, Adobe Presenter, TechSmith Camtasia, Articulate Studio, or Articulate Storyline, we've got a great collection of live, online classes for you.

eLearning: Sync/Align With the Playhead in Captivate or Storyline

by Kevin Siegel

You're developing an eLearning module in Adobe Captivate or Articulate Storyline. There's a slide that plays for 45 seconds. As you're listening to the audio, you'd like a screen object to appear in sync with the voiceover audio or some other screen action.

If the object in question is already on the slide, you can certainly select the object on the Timeline and drag it until its left edge gets to the desired part of the Timeline. Of course, if the slide is playing for a significant amount of time, that's going to require a lot of dragging.

One technique that I use when I want to match screen actions to voiceover audio is called Sync with Playhead (in Captivate) or Align with Playhead (in Storyline).

 

In the image below, I've positioned the Captivate Playhead on the Timeline by clicking at the top of the Timeline.

 

 

The technique is identical in Storyline (except as you'll see in the image below, the Playhead looks a bit different).

 

 

On the Timeline in either program, I can then right-click an object that I'd like to automatically move to the Playhead position and choose Sync with Playhead (Captivate) or Align with Playhead (Storyline).

 

 

***

If you'd like to learn more about eLearning, come hang out in my next eLearning basics mini course. And if you'd like to learn more Captivate, Presenter, or Storyline, we've got a great collection of live, online classes for you.

eLearning: Become a Pedagogical Agent

by Jennie Ruby 

If you've taken any of our Adobe Captivate, Adobe Presenter, or Articulate Storyline classes, you are probably aware that these programs provide a selection of screen characters--cut-out pictures of professional actors in business, medical, or business-casual clothing posed as if they are talking to you. They are intended for use as a kind of avatar of the trainer.

There is research that shows that using a screen character as a pedagogical agent or learning coach, who speaks informally and appears to be giving the lesson, increases learning. (My reference for this is Ruth Colvin Clark and Richard E. Mayer, eLearning and the Science of Instruction.)

Over the past few weeks, I've had multiple students ask how hard it would be to use themselves as the learning coach. Believe it or not, becoming a pedagogical agent is easier than you think.

 

Put Your Picture into the Lesson. Place a professional head shot of yourself, your trainer, or expert on the introductory slide (including job title, credentials, etc.), and then have that individual record the audio narration for the project.

 

Create your own screen characters. Photograph your expert on a green screen background for a full set of screen characters in various poses. The IconLogic Blog has a whole series of articles on how to do this:

 

Green Screen Part I

Green Screen Part II

Green Screen Part III

Green Screen Part IV

 

Create cartoons of yourself or your in-house experts. You can use the images over and over in on-going training videos. Here is one article to get you started: Using Bitstrips Characters.

If you don't have specific, known individuals in your company to act as your learning coaches, you are not stuck with the same four or five actors that come with your software. You can purchase additional screen characters from The eLearning Brothers. Or you can just make good use of some inexpensive clip art. By trimming out the background in ordinary office photographs, you can get some nice effects.

 

Whether you use generic actors or your own home-grown experts, screen characters are an excellent way to add the personalization, engagement, and local feel that will bring your eLearning to the next level.

 

Once you have your screen characters, how do you know what to make them say? Join me for an afternoon mini course on writing voiceovers to find out.

Adobe Captivate: Text Hyperlinks

by Kevin Siegel   

Over the years I've had more than a few eLearning development clients ask us to create links to web resources on a slide. There's more than one way to accomplish the task. Over the next couple of weeks I'll discuss some of my favorite techniques. Up first, text hyperlinks.

To create a text hyperlink, select some text (the text can be contained within a text caption or a smart shape). Then, on the Properties Inspector, select the Style tab. From the Character area, click the Insert Hyperlink tool. 

 

 

From the Link To drop-down menu, choose Web Page. Next, type a web address into the field.

 

Prior to clicking the OK button, visit the drop-down menu to the right of the web address. I think it's a good idea to select New from the list of options. (This will ensure that the page that appears after the learner clicks is a new page or tab, rather than a page that replaces the current lesson.)

 

 

 

When previewed in a web browser, the text hyperlink will look similar to the image below. If clicked, the learner will be taken to the web address you specified in the Link To area.

 

  

 

Should you change your mind about the text hyperlink, removing the link is as simple as selecting the text and, back on the Properties Inspector, clicking the Remove Hyperlink tool.

 

 

***

If you'd like to learn more about eLearning, come hang out in my next eLearning basics mini course. And if you'd like to learn more Captivate, Presenter, or Storyline, we've got a great collection of live, online classes for you.

See also: Object Hyperlinks

Adobe Captivate: Slow Down Your Speech Agent

by Kevin Siegel   

Using Captivate's Text to Speech feature allows you to quickly convert written text to voiceover audio. It's an awesome feature. However, we recently had a client who felt that Paul (that was the Speech Agent we used for the project) spoke too fast. The client wanted to know if we cloud slow him down a bit.

While you might think that controlling the cadence used by the Speech Agent was beyond your control, it's actually really easy. Prior to converting a slide note to speech, just add a bit of code (known as Voice Text Markup Language or VTML) to the text. 

 

For example, if you want a Speech Agent to say I am an awesome person, all that you would normally have to do is write the text in the Notes window, click the TTS check box and then click Text to Speech.

 

 

 

 

In the Speech Management dialog box, select a Speech Agent and then click Generate Audio.

 

 

 

If you feel like the resulting voiceover audio is too fast or too slow, you can change the speed. In the slide Note, add the following code in front of the text: <vtml_speed value="50">. At the end of the text, type </vtml_speed>.

 

 

Click the Text to Speech button and regenerate the audio (the existing audio will be replaced with the new audio file). You'll find that the agent's speed has been cut in half (thanks to the 50 you added as part of the VTML code). You can experiment with the speed values until you find a speed that works best for you and/or your client.

 

If you'd like to learn more about VTML or see more tags, review the users guide for the VTML Tag Set by clicking here.

 

***

If you'd like to learn more about eLearning, come hang out in my next eLearning basics mini course. And if you'd like to learn more Captivate, Presenter, or Storyline, we've got a great collection of live, online classes for you.