502 developing and working with an interaction library

Advanced Interactions: Building Real Engagement

into Your eLearning

June 2 & 3, 2011

502

Developing and Working with an Interaction Library

Megan Seese-Livingston & Justin Schreibeis,

Highmark

Interaction Library

Advanced Interactions: Building Real Engagement into Your eLearning June 2 & 3, 2011

Session 502 – Developing and Working with an Interaction Library – Page 2 Megan Seese-Livingston & Justin Schreibeis, Highmark

Animated Bar Graph

Flash Player/ActionScript FP10/AS3

Dimensions (pixels wide x pixels high) 740 x 450

Standalone SWF?* Yes

Possible Uses Statistics, demographic or categorical content

DEVELOPMENT DETAILS

Items that can be configured in ActionScript code

Title, footer, # of bars to show (1‐8), labels and

values for bars, start/end values for X coordinate, X

axis values and visibility, target line value and

visibility, speed of animation

DEVELOPMENT DETAILS

Items that can be configured in Flash IDE

Bar colors, logos, general color scheme



Meet the Team




Possible Uses Best suited for content where learners need a

visual cue and also additional text information.

Example uses include department or project teams,

product display/descriptions, technology

capabilities, facilities, etc.

DEVELOPMENT DETAILS


Type of transitions used, title, subtitle and

description text for each clicked on image

DEVELOPMENT DETAILS


All clickable images, background images, color

scheme



Process Display




Possible Uses Best suited for content where learners need a

visual cue and textual information. This interaction

works well for process oriented content. Example

uses include system/application explanations,

facilities, scenarios, steps or processes.

DEVELOPMENT DETAILS


# of images to display (1‐6), whether subtitles

should display under images (true/false), text for

each clicked image

DEVELOPMENT DETAILS


Images used, color scheme



Question Percent Display




Possible Uses Quick hit, statistical or demographic content

related to people

DEVELOPMENT DETAILS


Question text, correct answer value

DEVELOPMENT DETAILS


Correct/Very Close feedback images, color scheme,

person image



Scenario Interaction




Possible Uses User must choose the appropriate action based on

a question or scenario

DEVELOPMENT DETAILS


Scenario title, # of levels in interaction ( # of

questions user will answer), text for each question

node and answer options, feedback text, score they

must reach to get complete message, complete/try

again text, text underneath image

DEVELOPMENT DETAILS


Images (default and correct/incorrect), color

scheme



Text Appear




Possible Uses Visual separator, to show general relationship

between words/topics

DEVELOPMENT DETAILS


Main Title text, 3 levels of text (large, medium,

small), colors for main text and each of the 3 levels,

timing, whether or not you want the levels to

randomize the text that is displayed in them

DEVELOPMENT DETAILS


You can move around the location of the text fields

on stage



Timeline




Possible Uses Time related content or information that follows a

sequence

DEVELOPMENT DETAILS


Title, # of clickable nodes to show in timeline, start

and end nodes and how much value between

nodes, text for each node

DEVELOPMENT DETAILS


Background image for interaction (if desired),

background image for text window, color scheme



Visual Tour



Standalone SWF?* No

Possible Uses A visually, interactive way to show overview,

process related, introductory or orientation‐based

content.

DEVELOPMENT DETAILS


Tour title and ID number, background color for

title, tooltip and footer, background color for the

vertical bar behind the thumbnail images

DEVELOPMENT DETAILS


Color scheme for other components

DEVELOPMENT DETAILS

Items to update outside of Flash

Updated the .xml file with the tour images’ ids,

titles and text, replace the images in \images folder

and name them according to their respective ids

* Standalone SWF? – This indicates whether the Flash Object (.swf file) relies on any other files

to work (e.g. .xml files to read in data, image files for displaying content, etc.)

502 developing and working with an interaction library

Documents