Example files: Generating a certificate from Storyline

May 09, 2012

This example demonstrates how you can take user input and generate a certificate for printing. Any Storyline variable or score can be used to generate the output. The file and file add-ins are both simple and straight forward. This will only work in the Flash based output. This will not work in the iOS output or HTML5.

To replicate this on your end:

1) Modify the story file to your liking.

2) Extract the add-in zip file above (certificate.html and certificateBG.gif)

3) Copy these two files into your published output directory. You'll need to do this each time you publish.

This is a really basic example. You really can do quite a bit with this including adding a print button, extra fields, collecting values from the LMS like the user's first and last name.

** I noticed a bug when playing with this file setup. I initially thought I would be able to include the certificate files as resources to avoid copy / paste surgery after publish. Unfortunately, Storyline mangled the HTML file on publish. Will be submitting this as a bug.

236 Replies

Barry Galvin

over 11 years ago05/10/12 at 12:24 am (UTC)

Iron Man to the rescue!!

Thanks for this, Steve. Also, looking forward to reading the new Storyline book.

Take care,

Barry

Mark Fletcher

over 11 years ago05/10/12 at 2:12 am (UTC)

Great example Steve! So if you are 'Iron Man' does that mean that Phil is 'Thor' and Russ 'Captain America'?

Phil Mayor
Hero

over 11 years ago05/10/12 at 2:17 am (UTC)

Thor is good

Mark Fletcher

over 11 years ago05/10/12 at 2:26 am (UTC)

I thought that you would like that

Best regards,

Mark

Jim Leichliter

over 11 years ago05/10/12 at 9:40 am (UTC)

Wow! Brilliant! Really nice solution Steve!

Steve Flowers
Author

over 11 years ago05/10/12 at 9:54 am (UTC)

I used the pay version of the Vectorian Vector Pack to add decorative elements. It's handy for stuff like that and not too bad at $37 for the set. There's a free version with less stuff here.

Russell Still

over 11 years ago05/10/12 at 10:36 am (UTC)

I always wanted to be a Captain of something.

Jim Leichliter

over 11 years ago05/12/12 at 6:56 pm (UTC)

I highlighted this on http://storylinesolutions.com/ . Nice work!

Leah Hemeon

over 11 years ago05/13/12 at 1:17 pm (UTC)

Thanks for sharing Steve. The vectors pack is really good. Just in time for a project I'm working on!

Shyam Saha

over 11 years ago05/15/12 at 7:44 am (UTC)

Hi,

I have tried to replicate what Steve has done.

In my file I am not able to generate any information in the certificate.

I want to show the name and result in the certificate.

I am not able to figure out where I am going wrong. Could any one please help me to locate the issue ?

Thanks.

print_credit_steve.story

Shyam Saha

over 11 years ago05/15/12 at 8:08 am (UTC)

Yep,

I have figured it out

It's working now.

But thanks to Steve for sharing such demo...

Jeffrey Hurt

over 11 years ago05/16/12 at 5:52 pm (UTC)

Has anyone come up with a solution that can work for both HTML5 and Flash-version courses? I'd be willing to include a solution for each if there is a way to do so.

I have uploaded an abbreviated version of what I've been asked to do. I need the certificate to print just as it appears in the second slide. Is there a way to have a single slide appear without any player information so it is simply what is on the "stage"?

Steve's example is great, but the fact it goes haywire in HTML5 is concerning as we are developing this course for users all over the globe and the HTML5.

Thanks in advance!

printcert.story

Fred Janssens

over 11 years ago06/12/12 at 8:46 pm (UTC)

Hi all,

I have the same issue as Shyam and cannot figure out why the Certificate only shows the image and not the content of the javascript (the name and the text replacing - you have passed The Grueler!For that feat, you deserve a break. Take 30 seconds. Then get back to work!)

No nails left, please help!

Thanks in advance.

Jeffrey Hurt

over 11 years ago06/12/12 at 10:48 pm (UTC)

Hi Fred,

You have to place the file on a web-based server before the JavaScript works. It doesn't work on your local machine or network. Once I uploaded mine to the LMS, it worked just fine. It's slightly frustrating because you have to upload it to see any changes/modifications. Hope that helps you.

Kath Kinch

over 11 years ago06/25/12 at 6:06 am (UTC)

I'm really keen to learn how to print certificates - however the links in the first post seem to be broken. Has the content been moved?

Kath

Steve Flowers
Author

over 11 years ago06/25/12 at 6:45 am (UTC)

Hi, Kath -

Those are in a shared public Dropbox folder. I'll add them as attachments to this thread later today It's easy to forget that some IT environments block Dropbox.

Kath Kinch

over 11 years ago06/25/12 at 7:28 am (UTC)

Thanks Steve

Steve Flowers
Author

over 11 years ago06/25/12 at 6:48 pm (UTC)

Hi, Kath -

I've attached the two source files.

Steve

certificate.zip

Steve Flowers
Author

over 11 years ago06/25/12 at 6:49 pm (UTC)

Here's the second file. This is the story file.

certificategenerate.story

Leslie Adams

over 11 years ago07/17/12 at 10:02 am (UTC)

Hi - I'm wondering if anyone knows how to get the certificate to print in landscape orientation by default (without the user having to change the print preferences). My understanding is that this would be a setting in the html document, but not quite sure how to set it up.

Jeffrey Hurt

over 11 years ago07/18/12 at 9:23 am (UTC)

Hi Leslie,

I was trying to do the same thing, but it seems that the HTML code is less than perfect for this because not all browsers will force the page to print in landscape. In the style section there is a command you can use that looks like this:

@page {
size: landscape; /* auto is the initial value */

}

It works on some browsers, but not all. There may be a way to get more browsers to respond, but my HTML knowledge is limited. We opted for help files telling people how to print landscape.

Leslie Adams

over 11 years ago07/19/12 at 12:49 pm (UTC)

Thanks Jeffrey - it's too bad this can't be fixed universally. A limitation of HTML code I guess!

Steve Flowers
Author

over 11 years ago07/19/12 at 12:57 pm (UTC)

In newer browsers you could rotate your print elements so that it displayed vertically. You could get a portrait print this way with some careful planning. Again, would depend on the browser We've gotten away from the portrait certificate expectation. Most folks won't hang these up anyway, so we modeled a certificate that could easily be punched into a binder for safe keeping. Most folks want these for their records.

Leslie Adams

over 11 years ago07/20/12 at 6:31 am (UTC)

Thanks. This is for a project that is being delivered via CD to users around the country where we have no idea what browser they will be using. Since it is via CD and there is no tracking, they like the idea of a printable, "displayable" certificate, but the portrait orientation will just have to do!