Design and development

There is an ever growing list of tips and discussions that will help you improve your design and development techniques and processes. Check out this best practices discussion in the Articulate forums at http://community.articulate.com/forums/p/26427/146923.aspx#146923 and chime in.

Here is a collection of some other useful links and information to refer to when designing and developing in Storyline.

File locations

Storyline uses various files located on your computer to control the look and feel of your projects. Knowing these locations is important, particularly if you would like to share these files with other people who are also working on Storyline projects.

Note

The table below references locations specific to Windows Vista or later. Windows XP locations are slightly different, with a starting path of C:Documents and Settings\%username%Application Data instead of AppDataRoaming.

Description

Link

Design Theme

AppDataRoamingArticulateTemplatesThemes

Theme Colors

AppDataRoamingArticulateTemplatesThemesTheme Colors

Theme Fonts

AppDataRoamingArticulateTemplatesThemesTheme Fonts

Theme Effects

AppDataRoamingArticulateTemplatesThemesTheme Effects

Players

AppDataRoamingArticulateShared2.0Players

Custom Player Color Themes

Custom player color themes can be saved by saving the color scheme then opening it in another project.

AppDataRoamingArticulateShared2.0\FramesStoryFrameColorSchemes

Story Templates

My Articulate ProjectsStoryline Templates

Flash, HTML and mobile feature comparison

Articulate has created a table that compares features that are supported in Flash, HTML5 and the Articulate mobile player app for the iPad. You can view this compatibility table available at http://www.articulate.com/support/kb_article.php?product=st1&id=1568gg1ayot2.

Creating your own keyboard shortcuts

You can create your own keyboard shortcuts by adding features to the Quick Access Toolbar. All you need to do is right-click on the button for any Storyline feature, and select Add to Quick Access Toolbar. To use a feature with a shortcut key, press and hold the Alt key on the keyboard, then press the number that matches the button you want to launch. The first button on the Quick Access Toolbar is 1, the second is 2, and so on.

You can view a tutorial on how to do this at http://www.screenr.com/D3Z8.

Player color customization

The color selector in the Storyline Player lets you change the color of different parts of the Player. You can view a quick reference chart that visually depicts this and download it from Articulate at http://community.articulate.com/downloads/p/80796.aspx.

Story size and dimensions

An important initial consideration when creating a new project in Storyline is the Story size. This includes the actual slide size as well as the Player dimensions. You must also factor in how the course will be viewed. Here are some guidelines related to these design decisions.

Designing for multiple devices

The story size needs to be 4:3 ratio for an iPad, so the default of 720 x 540 will work, but also 1024 x 768 scaled to fill browser window. Most developers agree that a story size of 988 x 741 works well for desktop and iPad delivery. Designers may opt for a precise 978 grid system with the story size set to 988 x 643.

Note

Common breakpoints (size limitations)

320 pixels: mobile portrait

480 pixels: mobile landscape

600 pixels: small tablet

768 pixels: tablet portrait

1024 pixels: table landscape/netbook

1280 pixels: desktop

Player size considerations

The Storyline Player adds a minimum of 10 pixels all the way around your story content when published. Depending on the features and controls you've included on your player, the player can add between 20 and 260 pixels to the width and between 20 and 118 pixels to the height.

Below are common player configurations with a 720 x 540 slide size and the associated player size and published size:

Player features

Player Size

Published Size

No features

10 pixels all around

740 x 560

Next/previous buttons

10 pixels all around + 51 pixels in height

740 x 611

Next/previous buttons Resources tab

10 pixels all around + 51 pixels in height + 24 pixels in height

740 x 635

Next/previous buttons Resources tab + Title

10 pixels all around + 51 pixels in height + 47 pixels in height

740 x 658

Next/previous buttons Resources tab + Title Side Menu

10 pixels all around + 51 pixels in height + 47 pixels in height + 240 pixels in width

980 x 658

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.16.147.124