Custom Background Detailed Design Notes

StrandVision Digital Signage uses Adobe flash as it's player, and also has the ability to load custom templates into the player background. This document describes the details of custom template design and how it relates to the StrandVision Digital Signage player software.

Tips

• Keep it small and efficient
• Use vector graphics whenever possible.
• If you need to use bitmaps, base them on the screen size being expanded to 1920 x 1080 (High Definition Format)
• In order to keep things easier to follow, it is recommeneded that you create and name layers for each element being added.
• The bottom layer should be an actions layer that has action code described below embedded into it.

Layers

It is recommended that each major piece have it's own layer and there must be the following layers:

• Anything on top of the content (future enhancement - currently content goes on top of the entire template)
• Content placeholder (converted to mc, named mcContentSz with alpha of 0 if done in flash)
• Optional Full Screen placeholder - uses full screen if not there. (converted to mc, named mcFullContentSz with alpha of 0 if done in flash)
• Content Background - make it a screen looking white to add dimension instead of just plain white
• Temperature Placeholder (dynamic text with name temperature if done in flash)
• Clock foreground - empty if not done in flash (this is where the hands will be put)
• Clock background
• Optional lower third area to tie the template in with the newsfeed
• StrandVision logo area (this may be just a placeholder that is filled in with code based on the background color)
• Background area
• Company Logo placeholder (converted to mc, named szCustLogo with alpha of 0 if done in flash)
• StrandVision swirl placeholder (converted to mc, named swirl_size with alpha of 0 if done in flash)
• Actions (empty if not done in flash)

Pieces Needed

• Must have a background that shows up
• It is good to have some sort of content "screen" or background that text can show on top of. A totally white background reduces the impact of the template.
• If it is designed as a StrandVision standard template, it must have the strandvision logo incorporated into the design somehow.
• It must have a logo sizer that is suitable for a 20 to 30 character text field (where the customer company name text or company logo appears). It is a rectangle converted to a movieclip that is transparent and has the name "szCustLogo". When the customer has not loaded a company logo, their company name is sized into this field. Otherwise the company logo is sized into this field.
• It may have a separate piece on the bottom that is set to the newsfeed color. This allows the template design to seamlessly incorporate into the newsfeed when it is created.
• It may have a clock. It be a movieclip with the name of "clock". The clock should have actionscript that has an this.onEnterFrame = function() that sets the time appropriately. Remember to get the time using the time offset if it was sent in the initialize function so that it displays exactly the same on all the customer's computers without manual adjustment.
• It can have the temperature. It needs to be dynamic text with a field name of "temperature"
• It must have a content sizer. It is a rectangle converted to a movieclip that is transparent and named "mcContentSz".
• It may have a content frame to differentiate it from the background.
• At the current time, the content must be mostly rectangular. For now, the content is placed above the template. Eventually we hope to have the content placed on the same layer as the mcContentSz layer so that more elaborate things can be done. At the current time, the content sizer needs to be inside of the narrowest element.

ActionScript

This code goes into the action layer. Some key points are:

• The initializer function is called once the template has been loaded
• It passes in all variables that were sent by the StrandVision server (special requests can be handled)
• It can call any function of the common signage platform (common tasks are auto sizing text or images, changing font styles)
• It is configured to update the temperature (field named "temperature")
• It manages the difference between the server time and the pc time.
• It has a StrandVision swirl on it that loads the white one when the background color is dark and dark if it is light (both images are in the library)
• The swirl is resized and positioned to the swirl_size movieclip element
• The LightenLogo function is called (if the function exists) when the company name is shown as text instead of a company logo

System.security.allowDomain("*");
function Initialize(dataPtr, g_Sign)
{
   if (g_Sign.m_Temperature != this.temperature.text)
      this.temperature.text=g_Sign.m_Temperature;
   clock.m_TimeOffset = g_Sign.m_TimeOffset;

   if (dataPtr.myNewsBack.length < 6)
      dataPtr.myNewsBack = 'ffffff';

   if (this.swirl == undefined)
   {
      if (g_Sign.IsColorDark(dataPtr.myNewsBack))
      {
         var mcPtr = this.attachMovie('sv_swirl_light', 'swirl', this.getNextHighestDepth());
      }
      else
      {
         var mcPtr = this.attachMovie('sv_swirl_dark', 'swirl', this.getNextHighestDepth());
      }
      g_Sign.SizeImageToClip(this.swirl_size, mcPtr, 'center', 'none')
   }
}
function LightenLogo(dataPtr)
{
   this.mcBack01._alpha = 75;    // make the background more transparent
}

Color Changes

The system will change the color to the user specified color if correctly configured.

• All pieces should be a grayscale color if the color is changeable by the user settings
• Convert each piece that you want to change color to a movie clip (and it can contain many individual pieces)
• To set the color to the user's Background color selection, Name the movie clip to mcBack?? (replace ?? with a UNIQUE number between 01 and 20)
• To set the color to the user's Newsfeed Background color selection, Name the movie clip to mcNews?? (replace ?? with a UNIQUE counter number between 01 and 20)

Testing

Although there is no automated way to test this yet, it can be done by:

• Log in to your account
• click on view signage
• Click on "take your signage with you (without an internet connection)
• Follow those instructions. (you may need to install http://www.strandvision.com/data/winzip81.exe)
• copy your compiled .swf template into the c:\sign directory (or wherever you extracted the files)
• Edit the control000 file and change the &myKiosk=flash%2Fsv_kiosk_2.swf (whatever it is) to &myKiosk=yourfilename.swf
• You can change colors in this same file. They are set as a hex RGB color sequence. myBackColor and myNewsBack are the main ones to change
• Run the sign.exe as normal and it should load in your template
• To test different designs, just copy the compiled .swf into the c:\sign directory and restart sign.exe