Gordon Food Services

Last Updated December 21st 2016

Gordon Food Services is an ICOM client. They have a 3rd Party SCORM 1.2 LMS known as Axonify ICOM also hosts non-tracking web courses for them.

ICOM Hosting

Random non-tracking web courses:

Updating

Host: gfs.icomproductions.ca

Prot: SFTP

User: tjwaltho

Pass: letmein

Axonify

In July 2015, Axonify applied a fix to their LMS to address an course launch issue that GFS had with an ICOM test package. Once applied the fix allowed the tracking of a SCORM 1.2 test package without objectives/interactions.

GFS LEAD Foundation Storyline 2 Interface

GFS LEAD Foundation is one large course broken down into 5 modules. Each Module contains a varying number of animated videos (which are the lessons), printable documents (pdfs), and sometimes e-learning interactives.

Converting SWF's to Video

The lessons are animated in flash, QA'd within a temporary flash interface (Y:\Gordon Food Service\LEAD Foundations\assets\interface\flash), and then converted into videos from swfs using Newgrounds SWIVEL .

Uploading Videos to youtube

Once the lessons are converted they can be uploaded to the GFS youtube account:

User: serviceaccounts@icomproductions.ca

Pass: ChinaDoll123

Youtube Settings

Please ensure all videos uploaded are "unlisted." These videos are privately owned by GFS, not to be made public on Youtube. However if you set it to "Private" this setting blocks Storyline 2 from importing it as a webobject. Unlisted gives us the privacy we need but the embedding freedom required to include them within the course interface.

Please use the settings below for each video. This will prevent people from commenting and other various statistics distracting users from the video itself.

It will take a while for the videos to upload and become available, so give it time. While selecting a thumbnail isn't really necessary, once the video is nearing completion it will give you thumbnails to choose from as well as the URL in which the video can be retrieved from.

Update youtube links within Storyline 2's Webobjects

To update the linked youtube video within the storyline interface, begin by right clicking on the web object and choosing edit:

Highlighted below is where the youtube code will be copied to. The rest should remain the same in order to prevent other youtube videos from being shown after the user has viewed the lesson. To understand more regarding web objects in storyline please check out this document on the e-learning heroes forum.

To find the youtube code for your video, look here within the URL:

Where to find the Storyline 2 GFS LEAD interface

As of Dec 21st 2016 the newest Storyline 2 Interface for GFS LEAD can be found in this folder:

Y:\Gordon Food Service\LEAD Foundations\story\Communications

How the GFS LEAD Storyline 2 Course Functions

The user must complete all 5 modules in order to have the LMS track completion. However in order for GFS to receive a grant for the project we have to hit certain deliverable milestones in order to get paid. So each module is being deployed individually. Since it is a storyline interface, this means every redeployment will whipe out he users progress. In order to work around this, a system has been built so that the user retrieve's a password to unlock each module as they complete them. This way any user that is impacted by the redeployment can enter the passwords they earned previously and mark various modules complete.

This system is contained within the Master Slide (see image below), please avoid altering the code here without consulting Stef, Mike, or another developer that is highly familiar with storyline. The Master Slides have a unknown character limit that can trigger the storyline suspend data issue. This has the potential to destroy any ability storyline 2 has to track a users progress.

To make the modules visually appear enabled or disabled, the states of the icons within THE MASTER SLIDE will have to either be set to normal or under-construction.

The functionality of the buttons are in the main storyline timeline within the HUB slide. To enable accessibility for a module, make sure the hotspot associated with it's icon has a lightbox trigger for that modules menu.

This is what each module menu will look like, and each must be linked to the slide containing the webobject linked to that lesson. (Ignore the %PWL1%, they're hidden variables only visible when debugging the menu. They show if each lesson variable is showing as complete.)

The slides for each module will be contained within their own scene in order to keep things orderly. Since this is still in development, slide naming conventions have not yet been established:

For publishing to QA3 or Scorm Cloud, select "LMS". The screenshots below are not the final version, but an in development screenshot. Please ensure the title reflects what version or purpose the interface is being published for.

The course HUB slide is actually a result slide that only gets triggered when all 5 module variables are marked as complete.

GFS LEAD Foundation Visual Treatment

Y:\Gordon Food Service\LEAD Foundations\fla

All FLA working files should be stored in the fla folder in their corresponding module folder.

Below is a file full of assets developed by Sho Uehara:

Y:\Gordon Food Service\LEAD Foundations\assets\mockup\GFS Video Mock-Up.ai

Below is the circle icon asset library, please add to it and label it with the date you updated it:

Y:\Gordon Food Service\LEAD Foundations\fla\GFS_LEAD_ICON_assets(dec14).fla

Below is feedback I gave to developers during various lesson development. Please view completed modules on Y:\Gordon Food Service\LEAD Foundations\export to see the latest version of treatment being used.

Example that is approved or preferred

NO - do not do whats shown below (please read for context)

The animation ‘popping in’ text isn’t usually used on photos, meant more for flat color screens with characters. The only effect that should be applied is a black glow, not a drop shadow, in order make it stand out from the background more. See left hand examples.

Glow instead of drop shadow, like on left. Otherwise good.

Try to keep the text high contrast to the background.

Above is an example of too much glow that doesn’t help with contrast since the photo is more middle tones. Might have been better using uppercase text and positioning it where the text is easier to read, such as the example on the left.

Since this image is mostly light we should use dark text on light for the best contrast.

Below is a good example, but would want to make sure text fades in over a photo vs popping in.

This image is mostly light in its color scheme, and could use darker text to make it more legible. That or the dark glow mentioned earlier. Add more space around the text to give it breathing room.

If you need to change the color to create contrast from the background, or interest, do it. But again, don't over do it. Make sure it adds contrast and that you aren't just changing it for the sake of changing it.

What you did below was good

Don’t be afraid of moving elements on screen to fit the treatment text and get a bit of extra breathing room. Left for example. Also might be best using the uppercase bolded font from the left as well.

The text was an incomplete thought (I think in the script it says ‘culture we’re trying to achieve’ rather than ‘cuture trying to achieve’)

If there is going to be text in the background, it should remain a background element (faded or tinted to draw less attention.) Also should fade in as a whole so it isn’t distracting from foreground elements. Text is a complete thought (it says ‘focusing to grow as a leader’) Below are also good examples

V

Don't be afraid to make words pop with different colors, but don't use too many colors on screen at once. PLEASE USE THIS TREATMENT SPARINGLY. Too much of takes away from it standing out and starts looking hodge podge.

Incorperate text into props if it looks good and seems relevant to the content

Sometimes the composition on screen is weird for fitting in text, so feel free to move things around. For this treatment we usually uppercase a key word followed by the rest of the sentence lower case as seen on the left.

Move elements around to fit the text in better. Maybe do a full sentence “you don’t have to know everything” or something to that effect.

This one is tricky cause there’s so much going on on screen already. Originally tthe client was told not to have text on screen if there are 3 images at the same time. But on the left is the compromise. Might have to come up with 3 key words to represent each image maybe? Or “Interact” “With” “You” to shorten it to 1 word per image? Also wonder if we should fade the characters when the text comes in and make it darker?

Ignore the guides left on this screenshot

The style on the left should only be used sparingly. It was originally meant as a one off to introduce the 4 modules of GFS (see 1_1) but was reused by devs for a bullet list. The client was okay with it, we just only want to use the grey icons, not color like above. The colors are only used for module icons.

Also if using this treatment make sure there is equal spacing above the circle and below the text as on the left.

While the treatment on the left has been used and okayed by the client, the 3 photo treatment is preferred, especially if they’re talking about 3 or more points that the photos can relate to.

Hard to see in the thumb but the X has a drop shadow that I think should be removed. The cartoony screens should be as flat as possible. Would also prefer to keep the same “no” treatment. So reuse the red symbol on the left from 1_3 if possible.