How To's

Create an image carousel in the timeline editor

In this HowTo we will show you how to make an image carousel within the Timeline editor.

Overview.png

Step 1 - Preparing your assets:
Upload your images into the VMS (either in the clips or creatives)
Give your images a title, publish and save them.

Step 2 - Open the editor:
Edit the videoclip and open the timeline editor.

Step 3 - Set up the main image:
Create an ImageWidget. This will be the container of the carousel.
Select your first image as the image for this widget.
Mind the duration in the timeline. Set the duration for the length the carousel must be visible in the video if appropriate.
Name this widget “PIC”.

Step 4 - Create navigational buttons:
Create previous and next buttons using ImageWidgets or TextLabelWidgets or any other widget you can click on. Name these widgets “PREV” and “NEXT”.

Step 5 - Using the browsers LocalStorage to save values:

PIC_OnShow.png
We are going to use LocalStorage values to track the number of the current image.
Thus, we have to set the right number at the beginning of the carousel.

Select the “PIC” widget and in the “Event Handlers” tab click on “edit” for the “onshow” handler.
Click on the plus sign next to “add action” and select “localstorage”.
Within the localstorage action panel select the “Set Item” command.
In the name field enter “picid” (without the quotes) and in the value field the value 1 (the carousel always starts with the first image).
Close the window.

Step 6 - Creating a Controller:
To make our lives a bit easier we are going to use a controller to set the correct image based on the current value “picid” in the localstorage.
The purpose of this controller is that we can setup (and later call) multiple actions without the need to replicate them in various places).
For this we are going to (mis)use a rectangle widget.
Create a RectangleWidget and name it “CarouselController”. Placement doesn’t matter as we are only using this widget to perform a list of actions.
In the "Behavior" tab" select "ignore timeline show" and "ignore timeline hide". Now only we have control to show and hide this widget. 

CarouselController_OnShow.png

With this widget selected go to the “Event Handlers” tab and click on “edit” for the “onshow” handler.
Click on the plus sign next to “add action” and select “widget”.
Select the “CarouselControler” from the widget list and select the “hide” command. Now any time this widget is shown it wil immediately hide itself again.

Close the actions window and in the “Event Handlers” tab click on “edit” for the “onhide” handler.

CarouselController_OnHide.png

Click on the plus sign next to “add action” and select “widget”.
Select the "PIC" widget from the list and "Set Property" from the command select box.
For the property select "imageid". This will show the image property select field. Click on "Select" and select the first image you want to use in the carousel.
On the right side of this action click the "+" sign in the condition area.
From the "select type" select "Local Storage".
Enter the variable name "picid" and set the state to "equal to"  and enter the number "1" (without the quotes).
Click on the button "add to conditions".

Repeat the last steps to create "Widget:Set Property" actions for the rest of the carousel images so you end up with:
- Set property imageid to first image when the condition picid==1 is met. 
- Set property imageid to second image when the condition picid==2 is met. 
- Set property imageid to third image when the condition picid==3 is met. 
- Set property imageid to fourth image when the condition picid==4 is met. 
- Set property imageid to fifth image when the condition picid==5 is met. 

Step 7 - Cycling images using a Previous button:

PREV_OnClick.png
Select the "PREV" widget.
With this widget selected go to the “Event Handlers” tab and click on “edit” for the “onclick” handler.
Click on the plus sign next to “add action” and select “localstorage”.
Within the localstorage action panel select the “Set Item” command.
In the name field enter “picid” (without the quotes) and in the value field the value -- (Two minus signs). (Because we are storing a number value, we can use -- to decrement the value by 1).

Now we are going to make a check to see if the "picid" value is not lower than 1. If this is the case we set it to the biggest value (5) so we can keep cycling the immages.
Click on the plus sign next to “add action” and select “localstorage”.
Within the localstorage action panel select the “Set Item” command.
In the name field enter “picid” (without the quotes) and in the value field the value 5.
On the right side of this action click the "+" sign in the condition area.
From the "select type" select "Local Storage".
Enter the variable name "picid" and set the state to "less than"  and enter the number "1" (without the quotes).
Click on the button "add to conditions".
Close the condition window.

Now for the last action we are calling the show action on the "CarouselController" widget, triggering its own hide and thus all the actions to set the correct image.
Click on the plus sign next to “add action” and select “widget”.
Select the “CarouselControler” from the widget list and select the “show” command.

Close the actions window.

Step 8 - Cycling images using a Next button:

NEXT_OnClick.png
We are doing the same here as with the "PREV" widget only using ++ instead of -- and checking if the vaue of "picid" is greater then 5.
Select the "NEXT" widget. 

With this widget selected go to the “Event Handlers” tab and click on “edit” for the “onclick” handler.
Click on the plus sign next to “add action” and select “localstorage”.
Within the localstorage action panel select the “Set Item” command.
In the name field enter “picid” (without the quotes) and in the value field the value ++ (Two plus signs). (Because we are storing a number value, we can use ++ to increment the value by 1).

Now we are going to make a check to see if the "picid" value is not greater than 5. If this is the case we set it to the smallest value (1) so we can keep cycling the images.
Click on the plus sign next to “add action” and select “localstorage”.
Within the localstorage action panel select the “Set Item” command.
In the name field enter “picid” (without the quotes) and in the value field the value 1.
On the right side of this action click the "+" sign in the condition area.
From the "select type" select "Local Storage".
Enter the variable name "picid" and set the state to "greater than" and enter the number "5" (without the quotes).
Click on the button "add to conditions".
Close the condition window.

Now for the last action we are calling the show action on the "CarouselController" widget, triggering its own hide and thus all the actions to set the correct image.
Click on the plus sign next to “add action” and select “widget”.
Select the “CarouselControler” from the widget list and select the “show” command.

Publish(!) the timeline and save it.
Now the carrousel is done.
We can always handle the carousel ourselfs (instead of the user pressing prev/next buttons) by setting the "picid" value in the localstorage and calling show on the "CarouselController".

How To Create a Mouse-Over Button in Timeline

The example below demonstrates how to create mouse-over buttons with highlights. Mouse-over buttons following this scheme work on desktops as well as on tablets. Tablets however will not display -- or display very briefly -- the highlighting, but handle "clicks" reliably and on the first tap.

We have a target widget that we want to show and hide: 'target'.
We have two buttons: 'red' and 'green', with two highlights: 'red_highlight' and 'green_highlight', respectively.

The target's state determines which of the buttons is visible:

'target' onshow: hide 'red', show 'green'
'target' onhide: hide 'green', show 'red'

The buttons hide and show the target:

'red' onclick: show 'target'
'green' onclick: hide 'target'

If one of the highlights is visible, it will capture the click. Hence, highlights hide and show the target too:

'red_highlight' onclick: show 'target'
'green_highlight' onclick: hide 'target'

Mouse-over highlighting is enabled by:

'red' onmouseover: show 'red_highlight'
'green' onmouseover: show 'green_highlight'
'red_highlight' onmouseout: hide 'red_highlight'
'green_highlight' onmouseout: hide 'green_highlight'

And to really finish things off:

'red' onhide: hide 'red_highlight'
'green' onhide: hide 'green_highlight'

All widgets in this example, except for the button 'red', should have the settings 'ignore timeline show' and 'ignore timeline hide' ticked.

Note: The highlights should be positioned exactly on top of their normal counterparts.

How to enable Facebook embedding

This how-to will show you how to embed a video on facebook. For any remaining questions regarding this subject, please send an e-mail to support@bluebillywig.com.

To allow your videos to be shown on Facebook directly in your own (branded) player, you will have to implement certain “og:” (Open Graph) metadata-tags on your website's video pages. This how-to will explain how to implement this Facebook video solution on your website. As a side effect this will also improve your Google video SEO, as they will index these OG tags and show the results found on your website in their video search section.

If you do not wish to link directly to your website or implement these tags on your video pages, the Blue Billywig VMS automatically generates a video page already containing these tags. An example can be found here:

http://bb.bbvms.com/view/QuickTour2_526/1089251.html?r=false

When this link is shared on Facebook, the article will pick up your player, title and description automatically, which looks like the example below:

Example screen-shot of playing the video:

As you can see the URL still says bb.bbvms.com If you would implement this on your own website, your own URL would show up here, increasing traffic to your website. How to do this will be explained in the next section.

Another useful feature is the redirect option. By appending ?r=true to the url, the request will be redirected to the url set in the deeplink field of the clip in stead of the default view page. By default, this redirect is set to false.

In addition to this how-to document, Facebook offers documentation on which tags should be implemented on your website to make player embedding work. Go to http://developers.facebook.com/docs/opengraph/ and look for the chapter Attaching Audio and Video Data. For more information about the OG protocol, please refer to http://ogp.me/.

To get started, let's have a look at an example of the OG tags on the automatically generated page:

  1. <!-- Open Graph tags -->
  2. <meta property="og:title" content="QuickTour - Beheren" />
  3. <meta property="og:description" content="Hoofdstuk 1 van de VMS Quick Tour Met het Blue Billywig V..."/>
  4. <meta property="og:type" content="video" />
  5. <meta property="og:image" content="http://bb.bbvms.com/mediaclip/1089251/pthumbnail/130/130.jpg"/>
  6. <meta property="og:site_name" content="Your website’s name"/>
  7.  
  8. <!-- Video player specific OG tags -->
  9. <meta property="og:video" content="http://bb.bbvms.com/p/QuickTour2_526/player.swf?defaultMediaAssetPath=https://d2rvackbgybhru.cloudfront.net&server=http://bb.bbvms.com&clipXmlUrl=http://bb.bbvms.com/mediaclip/1089251.xml" />
  10. <meta property="og:video:width" content="396" />
  11. <meta property="og:video:height" content="223" />
  12. <meta property="og:video:type" content="application/x-shockwave-flash" />

The example above can be built by setting a few variables that will be used to fill the template:

  • The serverUrl (in our example http://bb.bbvms.com ) of your VMS publication.
  • The tag from serverUrl/mainconfig.xml as a base URL for all your files.
  • The mediaclip details from serverUrl/mediaclip/clip_id.xml to fill the other fields.
  • A playout that you want to use on Facebook. You can create this playout in the VMS and hardcode it into your template. The playoutname is added after the http://servername/p/ in the url.

You can use these variables to fill the tags like this:

  1. <meta property="og:title" content="<media-clip@title>" />
  2. <meta property="og:description" content="<media-clip><description/></media-clip>"/>
  3. <meta property="og:video" content="http://bb.bbvms.com/p/{playoutName}/player.swf?defaultMediaAssetPath={defaultMediaAssetPath}&server={serverUrl}&clipXmlUrl={serverUrl}/mediaclip/{clip_id}.xml" />

The other tags can be filled like the example above. A check for audio can be build in using the <media-clip@mediatype> attribute.

If you have any questions or suggestions on how to improve this how-to document you are more then welcome to send an email to support@bluebillywig.com.