Content Design

Where do I get Storyline 2?

Here's the link to download the program if you don't already have it. Download the trial as it's the full program.https://www.articulate.com/store/trial-download.php?aid=1

Once you get to the opening screen you should be asked to put in a serial number. That should be provided for you.

Consider looking at a few tutorials off Articulates community site. They're really useful and you'll likely find the best support for the program comes from power users rather than Articulates own support staff. Here are a few basic lessons that are applicable to most of the work we're doing.

Large overview playlist: https://www.youtube.com/playlist?list=PLREIddjFrT7UbHU6DeIkJTHI4NnLDeY1g

Slide layers: https://www.youtube.com/watch?v=Vii86_byeH0

Audio: https://www.youtube.com/watch?v=Oe7qBzxgD1s

That should be a good start.

What else may I need?

Feedback Tool (Alpha)

Note: The 'Alpha' version of the Feedback Tool is now deprecated. Using the HTML5 Feedback Tool will be the preferred option going forward.

Using Y:\Storyline Files\_templates\Feedback Tool\Alpha\Storyline Feedback Tool Guide.story as an example:

Each slide requires a new layer slide that has two variables. These have to be altered manually on each slide to match your course structure:

sceneNumber

slideNumber

As timeCode isn’t properly tracking time right now, you can set timeCode to the name of your lesson, module and lesson, or slide layer. That will appear in your comment on QA3.

So you have to add a feedback button either in a master slide or as it’s own button. Here’s how to do it in the menu:

Add another interface item called “Feedback”:

Edit that to match this:

See that “...” button? Click that and add this:

var _sceneNumber = player.GetVar("sceneNumber"); // must be an integer. Your location within the course i.e. section 1

var _slideNumber = player.GetVar("slideNumber"); // must be an integer. Your position within the location i.e. scene 12

var _courseVersion = 1; // must be an integer. Replace this with the global storyline variable you are keeping for this.

var _timeCode = "00:00"; // must be a string with the format HH:MM

var feedbackWindow = window.open("storylineQAFeedback.html?curriculumId="+getURLParameter("curriculumId")+"&courseVersion="+_courseVersion+"&sceneNumber="+_sceneNumber+"&slideNumber="+_slideNumber+"&timeCode="+_timeCode,"_blank", "width=300 height=770");

function getURLParameter(name) {

return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(window.top.location.search)||[undefined,""])[1].replace(/\+/g, '%20'))||null;

};

So now you’re ready to publish. After you’ve published your course, you need to add 3 files to your course .zip:

storylineQAFeedback.css

storylineQAFeedback.html

storylineQAFeedback.js

You can find those here: Y:\Storyline Files\_templates\Feedback Tool\Alpha

Now you can upload it to QA.

If it worked, you’ll see this. If not, go blame Rich.

Feedback Tool (HTML5)

Click here to learn more about the HTML5 Feedback Tool for Storyline.

Storyline Utils

Click here to learn more about the custom utils for Storyline.

Storyline 2 templates

Y:\Storyline Files\_templates

WYSIWYG Editor for certificate (maybe?)

Free WYSIWYG HTML editor if you need to edit any html files (eg. for custom certificates)

How do I…?

https://community.articulate.com/

General Tips & Suggestions

Assets

When you require assets to stay on screen until end of lesson. Right click on the object in layer, choose the show until end.

Group objects together for elements like treatment text to collapse the size of your timeline and keep things orderly.

Master Slides

Master slides are used to speed development, maintain consistency and make it simple to rebrand courses. This is because we only have to make a change once in a master slide rather than up to 50 times if it is in individual lessons.

All courses require a master slide background that includes the following:

    1. Main background image or colour
    2. Title bar with company logo in top left and course name on top right
    3. Secondary title bar that will hold the module name and lesson name

If your course requires accessibility, delete all master slide alt text visibility. Select the objects on the screen in the master slide, right click and go to size and position, then uncheck the “Object is visible to accessibility tools” box.

Slide Layers

The following content should be on the base layer:

    1. All linear content
    2. Audio
    3. Results slide audio is required on the “success” or “failure” layers, to ensure there is no overlapping audio, use the play media trigger.

The following content should have its own Slide Layer

    1. Pop ups (Reference documents, click for more info etc.)
    2. Continue buttons
    3. Custom menus
    4. Custom interface features
    5. Lesson Intro (when using an intro layer, include a small gap in the base layer timeline for loading and trigger play when animation on the intro layer completes)
    6. Lesson Outro (trigger play when base layer animation completes)
    7. When triggering a layer to show, make sure that you trigger layers in order from back to front to ensure content isn’t hidden.

When working with the layers, the layer visibility (eye icon) will make the object invisible when publishing or previewing. Remember to turn the layers back on when it’s required.

Deleting objects in storyline does not remove objects permanently until you save and reload the file. If you’re seeing a slowdown in your storyline development, try saving and re-opening, this will free up memory/cache/etc.

Quizzes and Knowledge Checks

Currently, you cannot change the way a question functions once the slide is already made. (For example, a multiple choice question cannot be directly converted into a multi-select question) Functionality changes will require a brand new slide.

Duplicating or Deleting Slides

When duplicating or deleting slides, double check your player settings. Storyline should update scenes appropriately but on occasion it may change slide orders which will require re-building the structure and re-naming the menu options.

Publishing

Depends on the course, but SCORM 1.2 is our standard publishing format

Change Quality settings to match our flash publishing settings. https://docs.google.com/document/d/1AtBc7tH1dOF_Q-fPtlz8RiKV8CGURFA-m0MbhZM3_Nc/edit

Ensure that there is a final slide that exists after a Final Exam. This ensures that the exam gets a completion call, and when returning to the course you don't start in an arbitrary position. For a certificate use this additional slide, aggregate it from from the exam/result slides you need.

FiLMS/QA

Currently there is no way to use films functionality to control enrollment for a course. For example, you are unable to force complete. These are based on the course structures and will require additional functional changes.

Javascript

You can embed javascript/web into storyline. This can be used to generate random numbers, and create special pop-ups. This will not work in local testing, so place it on the o drive for testing.

Branching

When branching occurs, remember that the number of slides can exponentially increase. This can lead a lot of problems down the road. It’s best to consider the use of variables to manage the content. If you’re using slides for branching paths, one for employees and managers, then another branching path for opening and closing procedures, you’re going to need make edits to multiple slides. This will increase the risk of missing content on changes, edits, or qa. Use variables to track what content to show and keep slide counts lower.

Animation

PNG transparency can be retained during animation by giving the object transparency or a drop shadow. (similar to the trick for opacity in flash)

Slide Properties

Clicking the gear icon next to the slide in the Slide Layers Window will bring up the Slide Properties Window.

Slide Advances has two options, By User and Automatic. All Automatic will do is add a trigger calling the slide to advance to the next scene when the timeline ends.

When revisiting has 3 options: Automatically decide, reset to saved state, and reset to initial state. Generally we will want to use Reset to initial state, otherwise we will run into issues where parts of a lesson may start in the middle of a paragraph when navigated back to. However, NEVER use Reset to initial state in quizzes. It will break everything.

The first two properties have to be set slide by slide. The navigation controls and player features can be set in the Player settings.

Audio

Save your audio in an mp3 format. The reason for this is because Storyline defaults to mp3 when you try to import and doesn’t seem to remember what your preferences are. Saving in mp3 is a small efficiency that will ultimately add up.

Deactivation

When we’re done on a storyline project we need to deactivate the license so someone else can pick it up.

Here's how to deactivate Storyline:

    1. Launch Storyline.
    2. Go to the Help menu.
    3. Click the Deactivate button as shown below:
    4. Click OK to accept the warning that "This will deactivate this product on this machine."

Hopefully we’ll have enough license soon that we won’t need to do this regularly.

File Size Optimization

If you find yourself under file size restraints (such as YYC’s 30MB zip constraint) you have to keep your assets pretty lean. Some general tips for doing so:

    • MAKE SURE EVERY PHOTO IS UNDER 100KB - Seriously, every KB counts and if its over 100 storyline bloats it on output (haven’t resolved why). Optimize your images in photoshop to be pixel perfect then use file> Save for Web & Devices> (the format you need) make sure optimized is checked and reduce quality as low as you can go without compromising the image. This process should ensure your images stay below 100 KB (also ensure your photos are cropped to the stage size)
    • Mp3’s are smaller than wav’s, it helps a little but not critical
    • Never use Storylines built in crop tool, as this will bloat your original file size (it masks, not crops)
    • If there is no need for accessibility, ditch items in the tab order

Development for Mobile Devices

    • Keep file sizes on assets lean (see above for file size optimization)
    • There are two mobile options - Articulate Mobile Player & HTML5
    • Check device/lms requirements - does the course have to be a certain resolution for the device(s)? Does the LMS have a file size limit you must adhere to? What browser will the devices be using?
    • This link
    • Can test online without an LMS and without the O drive here (temp upload that will be deleted in 10 days)
    • Design your course/lessons around a touch interface and limited screen size
    • Don’t use hover over states, selected and deselected only on buttons

Storyline and YouTube

In order to embed YouTube videos, you need to use a storyline feature called Web Object. Here's how:

1. Go to the insert tab.

2. From the insert ribbon, select Web Object.

3. Insert your YouTube URL

It's recommended to have the video load in the slide, and load automatically.

You are able to control a few aspects of the YouTube video. You do this by adding parameters to the video URL. As an example, here's a sample URL.

youtube.com/embed/p7Gpml5S2GU?showinfo=0&autohide=1

The parameter in this case is &autohide=1. The video will behave differently depending on whether &autohide is set to 0, 1, or 2. Those behaviors are discussed below.

A List of YouTube parameters and their functions

https://developers.google.com/youtube/player_parameters

Accessibility

    • On the home tab there is a button beside new slide titled “Tab Order” which can be used to order and delete objects visible to the screen reader.
    • Logical tab order from important items to least important
    • Remove any non essential items from the tab order. For example, a footer bar is only a design element and is probably not essential to the material.
    • Not everything will appear in the tab order in storyline (for example, different elements in states). In order to remove/add those elements to the tab order, right click and select “size and position”. Under the alt tab section, you can select whether that element is recognized or ignored by a screen reader.
    • For screen readers, every paragraph/bullet point/text element should be in a separate text box. That way, a user doesn’t have to listen to every paragraph if they want to revisit a topic.
    • By default, once you tab through your tab order, there is a final alt tab that causes JAWS to read “skip navigation. hit enter to return to the slide". There is a way to turn this off, however. When you publish your project, go into the story_content folder and find the “frame.xml” file, and open it in notepad++. There is a line near the top skip_nav_enabled="true". Change this value to false.

For screen readers we use JAWS from freedom scientific - http://www.freedomscientific.com/Products/Blindness/JAWS

General Tools for Checking Accessibility

Closed Captions

I’ll do a write up for doing dynamic or manual closed captions here

Y:\Team TJ\Storyline Help Videos\How_to_do_non_dynamic_captions.mp4

Y:\Team TJ\Storyline Help Videos\How_Closed_Captions_Work_in_YYC.mp4

https://www.articulate.com/products/storyline-wcag.php

https://www.w3.org/TR/WCAG20/

(Web Content Accessibility Guidelines (WCAG) 2.0)

https://www.articulate.com/products/storyline-section-508.php

https://www.google.com/design/spec/usability/accessibility.html#accessibility-navigation

(ICOM still needs to look into getting an expert in this area based on responses from OLG)

http://leaverou.github.io/contrast-ratio/#hsla%28200%2C0%25%2C0%25%2C.7%29-on-whit

(website for checking text contrast ratios)

For screen readers we use JAWS from freedom scientific.

http://www.freedomscientific.com/Products/Blindness/JAWS

Complex interactive slides should be duplicated with screen reading considerations in mind.

Tips for Accessibility

    • In the size and position properties tab there's the option to make something invisible to screen readers.
    • On the home tab there is a button beside new slide titled “Tab Order” which can be used to order and delete objects visible to the screen reader.
    • By default, once you tab through your tab order, there is a final alt tab that causes JAWS to read “skip navigation. hit enter to return to the slide". There is a way to turn this off, however. When you publish your project, go into the story_content folder and find the “frame.xml” file, and open it in notepad++. There is a line near the top skip_nav_enabled="true". Change this value to false.

Buttons and Interactive Areas

Starting with some Google guidelines for accessibility as a reference.

The recommended minimum touch target size for any element is 48 x 48 dp. Space between elements on mobile should be at least 8dp.

Adding Background Images to the Window

Background images need to occur after the file is published and can be done by using the following steps.

head to the story.html file in your export.

Under the style tag add or replace the following line of code:

body: { margin: 0px; background: url('yourimage.png')no-repeat 0 0; background-position: center; }

replace the 'yourimage.png' with the name of the file you wish to use as a background.

Additionally, there's a line of javascript near the bottom of story.html:

var g_strWMode = "transparent"; // transparent | window (use "window" for optimal performance, transparent for webobject support)

if it's set to "window" it will hide the bg image you're trying to link, but setting it to transparent will allow your image to show.

Known Bugs & Troubleshooting

Bugs (red - no solution high risk, orange - no solution medium risk, yellow - no solution low risk)

Registration points within states. If you have two objects in the state, they both may not display in the same location once the slide is exported. For example, a shape may appear exactly where it appears in the timeline, but text might try to centre itself relative to the registration point display differently in an export. If this occurs, copy the text into the main timeline so see where Storyline thinks it should go, than compensate the location in the state.

After merging projects it’s possible that the storyline will publish a broken version.

Motion Paths will sometimes be offset slightly when starting and stopping, if you’re using the relative start point, objects will become misaligned.

When attempting to change the background colour on a slide with the player options, it might be over-written by the auto save. If your background color is not updating, try changing it at the publishing slide in the player options.

When using the feedback slides, storyline will automatically change the size of the response feedback to what it thinks is best. You can make it smaller, and in some cases larger, but for the most part you will be locked at what storyline produces or smaller. You can work around it by using a blank feedback slide.

There is a potential bug with the question slides in storyline where when you answer questions, storyline looks like it freezes or pauses before providing you with any feedback.

Radio buttons that you won’t unselect are usually caused by not being apart of the same ‘button set.’ Select all radio buttons on stage and right click: button set.

Sometimes when using a lot of photos when you choose to replace the photo with another there is a bug where it will jump you to a random slide in your course and will not allow you to change the photo. To fix this it appears that you have to actually rename the photo that you are replacing it with. This is an odd bug, but I have seen it pop up a few times. Also another bug is sometimes the photo name in the timeline will remain the same even though it is a different image. This can be confusing at times and can be resolved by restarting storyline.

Copy and Paste interacts with the timeline

When you copy an asset from one slide (source slide), it will stay at the same duration when you paste it into another (destination slide). If your source slide is 50 seconds long and your destination slide is 30 seconds long, after you paste the asset, the timeline will be stretched to 50 seconds long. This is a common reason we sometimes see long empty sections of slides.

If you have triggers to ‘auto next’ to the next slide, this cancels out the Next button if you go back to a previous lesson then try to hit next to skip it, preventing the users from skipping it and locking the lesson. No workarounds discovered yet.

Report/Recording Problems

Please post any screenshots or recordings of errors here and let your Lead know if you want to send it to articulate for further investigation:

Y:\ICOM Productions\storyline problems