banner6.jpg

Friendly Bank

What We Will Achieve in this Tutorial

In this tutorial we will setup a client and create all the necessary components to create a simple menu board that acquires all the dynamic data from an ODBC source. In this tutorial you will learn how to:

  1. Create a Client
  2. Import Media
  3. Setup a Player
  4. Setup a Channel for the Player
  5. Design a professional looking menu board in the Overlay Designer which includes the following elements:
    • Use of a professionally designed reference image
    • Insert Media
    • Insert images
    • Insert text
    • Insert a Flash plugin that compiles currency values from an XML data source
    • Setup a text ticker through a RSS Reuters news feed
    • Insert and format a date / time object
  6. Schedule the menu board to play at certain times
  7. Upload all media to a Player and play back your Overlay

Files Necessary for this Tutorial

All the necessary files are found in ‘C:\Program Files\Isenzo Mediacaster\Samples\Overlays - Friendly Bank’.

Create Friendly Bank Client

The first step will be to create our Friendly Bank client. Right click the Clients or Groups menu item on the tree menu and select ‘New’.

This will open the appropriate form which enables you to create a new client.

Enter ‘Friendly Bank’ into the description field. As this tutorial is being done on a local machine assuming that you have already setup a Player and FTP server, we put merely enter these details in the IP Address, Username and Password.

The Juicy Food client is created with the full tree structure in place.

Importing Media File Into Friendly Bank Client

There is a promotional video that you will be including into the Friendly Bank client. Right click the Media menu item on the tree menu and select ‘New’.

This will open the Media import form. To import the video file, click on the ‘Select Media’ button.

Browse to the tutorial files (C:\Program Files\Isenzo Mediacaster\Samples\Overlays - Friendly Bank) and select ‘FriendlyBank_video.mpg’ and click ‘Open’.

You should now see the import form with the video listed and playing.

Click ‘Save’ and you should now see the video under the Media section of the tree menu.

Create the Friendly Bank Playlist

We will include the video into a Playlist. We could theoretically include many video to play in sequence in the Playlist but for this exercise se one.

Right click the Playlists menu item on the tree menu and select ‘New’.

This opens the Playlist form. You should see the video file you imported in the left hand pane.

Name your Playlist in the ‘Description’ field. Click on the video thumbnail and drag it over to the playlist bar on the right hand side. The Playlist Manager will automatically allocate the time on the time bar equal to the video’s length.

Please Note: The player controls bar in the bottom right can be customised to suite your needs. It is movable and clicking on the grey background and dragging will move it up and down.

The video playback and controls can be switched off on the controls bar by clicking the ‘x’ in the bottom right corner.

Click the ‘Save’ button to save your Playlist.

Creating the Friendly Bank Overlay

The first step in creating the Friendly Bank Overlay is to create our Friendly Bank Client. Right click the Overlays menu item on the tree menu and select ‘New’.

This will open the Overlay Designer. To make the task of constructing the overlay easier we use a template file that has ideally been professionally designed. The ratio drop down changes the aspect ration of the design area to conform to the unique output screen of your player solutions. This defaults to 16:9, as this ratio is the most common output ratio. The Friendly Bank example uses a portrait 9:16 ratio. Name your overlay in the ‘Description’ field and click the dropdown box and select ‘9:16’.

The main work areas will change accordingly.

Right click the main work area and select ‘Select File’ from the popup menu. Browse to the tutorial files (C:\Program Files\Isenzo Mediacaster\Samples\Overlays - Friendly Bank) and select ‘FriendlyBank Reference Image.jpg.

This image will load into the background and enable you to layout all the other elements in a professionally designed template.

It would now be a good idea to save your overlay. Click ‘Apply’ button at the bottom. This will apply your changes. ‘The ‘Save’ button will save and close the Overlay Designer. The ‘Apply’ button enables you to save your work without closing the designer. Do this at intervals during this tutorials to ensure that you loose no work.

Inserting the Teller Number Text File

We will simulate a number informing a queuing customer what teller to use. In a real world senario this would involve a dymanic data feed. For the purposes of this tutorial we will be using a text file.

Create a text file object by clicking the  icon on the overlay toolbar. Right click on the text file object and select ‘Select File’. Browse to the ‘Overlays - Friendly Bank’ folder (C:\Program Files\Isenzo Mediacaster\Samples\Overlays - Friendly Bank). Select and open the text file ‘Queue.txt’.

As you can see in the reference image the teller number is white and has a transparent background. We can set the active color in the color block in the left hand top corner but clicking on it.

This brings up the Windows color palette.

Choose white and then click ‘OK’. The active color in the color block changes to white. You can lock this color by checking the ‘Lock’ checkbox. Right click on your Text File Object and select ‘Use Color’. This tells the Overlay Designer to use the color in the active color box. To make the  text background in the Text File object transparent, right click on the object and select ‘Use Transparent Background’.

Once you make a Text object’s background transparent, an ‘Antialias’ option appears on the property grid. Select ‘Yes’ on the Antialias dropdown.

Change the text size by right clicking the object and selecting ‘Font’. A Windows font properties dialogue is opened. Use this to alter the text font, size and emphasis.

In the property grid of the Text Object:

  1. Name the object in the ‘(Name)’ field. This will make it easier to manage many objects in the layers box in the top right hand corner.
  2. Change the ‘Antialias’ dropdown to ‘Yes’.
  3. Enter ‘1’ in the ‘Line Increment’ field. This will step through the text file’s lines in steps of one each time the data is updated. This creates the simulation of different teller numbers. This function can also be used to step through any text file to display different text messages.
  4. Change the ‘Update Interval’ to 5. This is the time between numbers appearing.

Insert Date and Time Objects

We will now add two time objects. Create a date and/or time object by clicking the  icon on the overlay toolbar.

Right click on the objects and select ‘Font’ to size the text display of the times.

The time format shown is constructed using the ‘Text’ field in the properties grid. The one time object should be displaying the time correctly with the default ‘HH:MM:SS’ value in ‘Text’ field. The other Date display should display as ‘Wednesday 24 January 2009’ depending on the present date. To achieve this enter dddd dd mmmm yyyy into the ‘Text’ field. For a full explanation of the time expression formats click here.

Insert the Promotional Video

The promotional video that we imported will automatically play in the Media object when we insert our Overlay and Playlist in the scheduler later on in this tutorial.

To create a media object, click the   icon on the overlay toolbar. Click and drag the edge of the Media object until it fills the black block that has been allocated to video in our design.

Adding a live RSS News Feed

We will now add the RSS object which will link to a live Reuters News feed. The scrolling RSS text ticker will be created on top of a background image that needs to be loaded first.

Create a picture object by clicking the  icon on the overlay toolbar. Clicking on the object will select it. Right click the object and select ‘Select File’. This will open the Friendly Bank folder. Click on ‘News Ticker Bar.jp’ and click ‘Open’.

The image will be loaded into the picture object. Click and drag the object edges to resize it according to the reference image layout.

Create a RSS object by clicking the  icon on the overlay toolbar.

Click on the object and right click on it to change the font and transparency properties so that the text looks like the reference image.

In the properties grid of the object change the following properties:

  1. Name the object in the ‘(Name)’ field.
  2. Set the Duration field to 120 seconds
  3. Change the ‘Scrolling’ dropdown to ‘Yes’.
  4. Set the ‘Scroll Duration’ to 20 seconds.
  5. Change the ‘Transparent’ field to 100 % - this changes the background to transparent.
  6. Change the ‘Update Interval’ to 120 seconds.
  7. Enter the Reuters RSS feed URL ‘http://feeds.reuters.com/reuters/technologyNews?format=xml’
  8. Set the ‘Width’ field to 85 %

Insert the Flash Plugin Currency Price Display

Sophisticated Flash plug-in’s can be created to visually display dynamic data and eye catching animations. In the Friendly Bank example, the Flash plug-in displays currency values. The values are populated from an XML file.

Please Note: When Flash files have dependencies, such as the XML file in the Friendly Bank example, the Flash and all its dependencies need to be packaged in a .zip file. Please ensure that the .zip file has the same name as the .swf file.

Create a Plugin object by clicking the  icon on the overlay toolbar. Click and drag the edges of the Plugin object to the correct size. Name the object in the Properties grid.

Right click the Plugin object and select ‘Select File’. Select Zip Files in the dropdown box and select ‘Mediacaster_FriendlyBank.zip’.

The Plugin object is now correctly set up.

Inserting a Picture Slide Show

You will use the extended properties of the Picture object to create a slide show.

Create a picture object by clicking the  icon on the overlay toolbar. Click on the edges of the Picture icon and size it to the correct size of the picture at the bottom of the reference image.

Right click the object and select ‘Select File’. This will open the Friendly Bank folder. Select both ‘Footer-Ad1.jpg’ and ‘Footer-Ad2.jpg’ and click on ‘Open’.

Loading two or more images in this way automatically prompts the Overlay designer to go into slide show mode. You will notice in the left bottom corner, a ‘Set Picture Order’ list. Use the up / down arrows to reorder your images.

Name your object and then set the ‘Duration’ field to 10 seconds. In the Picture object this value determines the duration between image changes in your slideshow.

Inserting the Correct Background

Replace the reference image in the overlay background with ‘FriendBankBackground.jpg’ in the Friendly Bank folder.

You should have a fully functioning overlay in the Overlay Designer.

Configure a Player for the Friendly Bank Client

You can configure a local player to display the Friendly Bank example. To see an explanation of how to do this click here. Once you have a local player configured you must point to this player in Mediacaster Manager. In the Friendly Bank client right click ‘Players’ in the tree menu and select ‘New’. This adds a configured Player to the Friendly Bank client.

Name the Player configuration and enter the IP address of the Player you configured.

Click ‘Save’.

Assign the Player to a Channel and Allocate the Overlay to a Schedule

Any Players that have been added to a client in Mediacaster must be assigned to a channel. To create a channel right click ‘Channels’ in the Friendly Bank Client in the tree menu an select ‘New’.

In the form that appears enter a name for the channel and select the player you have just configured. Click the ‘>>’ button to move the Player into the ‘Selected Players’ column.

Click ‘Save’.

Schedule the Friendly Bank Playback

We will create a very simple schedule to play the overlay. Right click on ‘Schedules’ on the tree menu under the Friendly bank client and select ‘New’.

In the schedules form that appears enter a name for your schedule in the ‘Description’ field and choose the channel you have just assigned the Player to by clicking the drop down list next to ‘Channel’. You will be presented with a calendar view of the present time.

To add your overlay and Playlist to the schedule click the ‘New’ button at the bottom of the form.

Click the ‘Playlist’ drop down list in the form that appears. Select the Friendly bank Playlist that you designed. Click the ‘Overlay’ drop down and select the Friendly bank overlay that you designed, alter the time range of when you would like the overlay to play and click ‘Save’. It should now appear in the Playlist & Overlay list in the schedule view.

Click ‘Save’.

Upload the Overlay to the Player

All that needs to be done now before we can see our overlay in action is to upload to the Player. To do this click the ‘Upload Media and Playlists’ icon on the toolbar.

This will open the server manager form.

Make sure the correct client is selected in the ‘Client or Group’ dropdown and then select the correct channel in the ‘Channel’ dropdown. Click the ‘Add’ button. A dialogue appears asking whether you want to upload.

Click ‘Yes’.

A notification will popup informing you of progress.

Open the player in a window to download the Overlay, Media and Playlists. In this way you can check that everything is playing back correctly.

This will open the local Player in a window. It should be playing the overlay you have just designed.

AddThis Social Bookmark Button

News

Mediacaster powers Hello Mojo "ii-stations" during 2010 FIFA World Cup™
Thursday, 10 June 2010
Urban media practitioners, Hello Mojo, have selected Isenzo’s digital signage software to power integrated information stations (ii-stations) situated in high traffic locations across South Africa.
Isenzo Releases Mediacaster 3.0 Service Pack 1
Thursday, 03 June 2010
Mediacaster 3.0 Service Pack 1 has been released adding numerous exciting new features as well as fixing some bugs.