How to escape from the player template...

Apr 14, 2014

Ant Pugh
By Ant Pugh
Hi guys,

Hope you are all well. I have been experimenting with using different background effects within Storyline. One of my biggest (and only) gripes with Storyline is that I feel restricted within the player template. I had an idea to use a couple of techniques to try and create the illusion that there was no player template at all.Essentially, what I am trying to achieve is to create a background that spanned across both the slide and the webpage.

However, I have come up against a slight roadblock and was wondering whether anyone can help me!
I followed 2 video tutorials by Jeanette and David, the links to which are shown below:
  1. How to use the Chromeless player template to remove all of the player template features (http://en-uk.articulate.com/support/storyline/how-to-create-a-chromeless-player)
  2. How to use a customised PNG file as the background by tweaking the HTML code https://player.vimeo.com/video/204929910
Now I followed both of these techniques andas you can see in the image,what I am finding is that:
  • I have a white border around my slide (no idea how to remove this)
  • The tiled pattern that I am using does not line up the with the slide background (I understand that this would be solved with using a non-patterned background)
Has anyone ever tried this before, and if so, do you have a solution as to how this can be overcome?
16 Replies
Mohd Al Kurdi
10 years ago04/14/14 at 6:17 am (UTC)

Hi Ant,

I believe the white background is coming from the player base BG.

You can change it by doing the following:

1- Click on the player icon at the top right

2- Go to colors and effects

3- Click on "show advanced colour editing"

4- Click the edit item combo box

5- Change the following 2 parameters under base (bg and border). You are best to click the "More Colors" then use the Pick colour. I think the colour between the images in the background can look good.

Hope this helps

Mohd

Mohd Al Kurdi
10 years ago04/14/14 at 6:58 am (UTC)

For some reason Ant setting them to 100% just keeps the border. I just tried it and the border is there when it is 100% transparency.

The only workaround I did was to keep it 0% and manually change the colour of the base BG and Border to the colour of my choice.

Also, I made the changes to a colour scheme other than the default. I just used the forest green and changed those two colours and it is working fine

Quite strange though

Ashley Terwilliger-Pollard
almost 10 years ago05/13/14 at 8:49 am (UTC)

Hi Ant,

As Steve mentioned, there are some other users who report difficulty using the chromeless player andslide transparency with Chrome in this threadand Nancy offered a solution to fix it within the published output - although it's a bit older of a thread, so I'm not certain it'll still work as described.

Alex O'Byrne
almost 10 years ago05/15/14 at 7:17 am (UTC)

Hi Ant,

As Ashley said that thread holds the key, basically you need to change the story.html file line 135 to:

var g_strBgColor = "tranparent";

and the story.js (in story_content) line 55-62 to:

{

strWMode = "transparent";

}

if (bCaptureRC && strWMode == "window")

{

strFlashVars += "&vCaptureRC=true";

strWMode = "transparent";

}

And you gethttps://googledrive.com/host/0B8q4AG7hJ9KJOGdFVEVib290ZG8which works in Chrome and IE(although I didnt have your original picture just a tiny screen print hence the dodgy background)

Hope that helps if you haven't already sorted it.

Alex

Steve Flowers
almost 10 years ago05/22/14 at 7:43 am (UTC)

One caveat with the transparent player property. This will cause the screen reader not to see into the Flash file. At least this is how it used to be.

"If embedded Flash content has thewmodeproperty set totransparentoropaquerather thanwindow(or withoutwmodeproperty), then screen readers cannot access that content."

This discussion is closed. You can start a new discussion or contact Articulate Support.