Creating Player Templates with Transparent Backgrounds

In this topic you will learn how to set transparency for colors in a player using BEML.

The Publishing module doesn't support directly setting transparency for colors in a player. However, BEML supports transparent colors through its support for 32-bit numbers. The six digit color support we're familiar with in HTML is a 24-bit color space. The additional bits (24 + 8 = 32) are for the alpha channel.

A 32-bit color is expressed as an 8-digit hexadecimal number. For example, try setting the backgroundColor of your layout to 0x01000000 (the 01 for the alpha channel indicates 100% transparency, whereas 00 would be interpreted by the runtime as full opacity).

Here's what that looks like in context:

<Layout backgroundColor="0x01000000" >

Here's a screenshot of a tabbed template with a transparent background over a busy background graphic:

In addition to setting the Layout background color to transparent, set the wmode parameter in the player's publishing code to transparent. In JavaScript publishing code, include this parameter:

<param name="wmode" value="transparent" />

Known Issue with Linux and Firefox

Note that due to a known issue with Flash, this technique does not work on Linux and Firefox with Flash versions before Flash Player 10. It will work with Flash Player 10.

BEML Source

Here's the BEML code to create this template, which is identical to the Tabbed 3.0 template. To use it, copy and paste this code into the "New Template" dialog in the Publishing module. Note that the fancy background graphic isn't included, sorry!

<Runtime>
<Theme name='Deluxe' style='Light'>
  <Style id='default'>
    <![CDATA[.titleText {fontSize: 12;}.bodyText {fontSize: 10;}.linkText {fontSize: 10;}]]>
  </Style>
</Theme>
<Layout id='application' width='798' height='603' boxType='vbox' padding='6' gutter='4' backgroundColor="0x01000000">
  <HBox height='40' vAlign='bottom' gutter='9'>
    <Image id='logo' width='300' scaleMode='scaleDown' hAlign='left' vAlign='bottom' />
    <TabBar id='playlistTabs' height='22' tabAlign='right' hideSingleTab='true' />
  </HBox>
 
  <HBox height='406' gutter='6'>
    <VideoPlayer id='videoPlayer' width='480' video='{videoList.selectedItem}' />
    <List id='videoList' rowHeight='78' automaticAdvance='true' data='{playlistTabs.selectedItem.videoDTOs}'
          selectOnClick='true' itemInsetV='4' itemLeading='2'>
      <ListItem boxType='hbox'>
        <Spacer width='8' />
        <VBox width='80' height='74' vAlign='middle'>
          <ThumbnailButton height='60' data='{currentItem}' source='{currentItem.thumbnailURL}' />
        </VBox>
        <Spacer width='7' />
 
        <VBox>
          <Spacer height='3' />
          <TitleLabel height='18' text='{currentItem.displayName}' truncate='true' />
          <Label height='52' multiline='true' text='{currentItem.shortDescription}' truncate='true' />
        </VBox>
        <Spacer width='3' />
      </ListItem>
    </List>
  </HBox>
 
  <VBox gutter='15'>
    <HBox height='32'>
      <Spacer width='6' />
      <VBox>
        <TitleLabel height='24' width='765' id='videoTitle' text='{videoPlayer.video.displayName}'
                    selected='true' size='18' truncate='true' />
        <Canvas>
          <Link x='1' y='-5' size='10' id='relatedLink' text='{videoPlayer.video.linkText}'
                vAlign='bottom' url='{videoPlayer.video.linkURL}' />
        </Canvas>
      </VBox>
 
    </HBox>
    <HBox width='757' hAlign='right'>
      <Canvas width='728'>
        <Image id='bottomImage' width='728' height='90' scaleMode='scaleDown' />
        <ExpandingBanner id='banner' expandedHeight='405' width='728' height='90' 
                         expandedWidth='299' buttonWidth='90' expandedOffsetY='-52' 
                         expandedOffsetX='458' disableOnExpand='playlistTabs,videoList' 
                         bannerFormats='2,6,20' />
      </Canvas>
    </HBox>
  </VBox>
</Layout>
 
</Runtime>