Register

How can I create my own custom HTML Frame/Skin

General Tips & Tricks
Site Admin
User avatar
Posts: 1071
Joined: Fri May 26, 2006 3:15 pm
Location: San Jose, CA

How can I create my own custom HTML Frame/Skin

Postby James » Tue Jun 10, 2008 3:55 pm

First I will show you what one looks like:

http://www.hummingbird.com/alt_content/ ... t_swf.html

This is using the Gray flash Viewletskin plus images and CSS styles to frame in the viewlet to create a custom
style/skin. This is different than altering the Flash skin that includes the player bar, etc...this is usually customized
by Qarbon for you.

If you want to customize your HTML frame, you will first need to go to Project Properties>HTML Frames

This picture shows you what it looks like to add new files to the frame. So you don't mess up the defaults, I would hit
the plus sign at the top next to the name of the frame to create a new style you can name to play with.

htmlframe.png
Html Frame


If you view the source of that Hummingbird Viewlet, you can see the code that was added to create that frame around the Viewlet.
You can see reference to a "resource" folder where the images lived. This is not needed in VB5/VB6/VQ since we allow you to add
images to the frame. In VB4 we would need to create a separate folder for these manually.

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>
    <title>$VIEWLET_TITLE$</title>
    <meta name="Keywords" content="$VIEWLET_KEYWORDS$"/>
    <meta name="Description" content="$VIEWLET_DESCRIPTION$" />
    $VIEWLET_HEAD_TAG$


    <style type="text/css" media="screen"><!--
      .horizontal { background-image: url(resources/horizontal_slice.gif) }
      .horizontalB { background-image: url(resources/horizontal_slice_bottom.gif) }
      .horizontalBL { background-image: url(resources/corner_left_bottomK.gif) }
      .horizontalBR { background-image: url(resources/corner_right_bottomK.gif) }
      .verticalL { background-image: url(resources/vertical_slice_left.gif) }
      .verticalR { background-image: url(resources/vertical_slice_right.gif) }
      .shadow { background-image: url(resources/shadow.gif) }
    --></style>

  </head>
 
  <center>
 
  <body bgcolor="#ffffff" $VIEWLET_BODY_ATTRIBUTE$>
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="3"><img src="resources/logo_top.gif" alt="" height="34" width="181" border="0"></td>
      </tr>
      <tr>
        <td class="horizontal" colspan="2"><img src="resources/logo_bottom.gif" alt="" height="22" width="181" border="0"></td>

        <td width="26"><img src="resources/corner_right.gif" alt="" height="22" width="26" border="0"></td>
      </tr>
      <tr>
        <td class="verticalL" valign="bottom" width="26">&nbsp;</td>
        <td>
       
          <script language="JavaScript">
          <!--
   
          var flashTag = new FlashTag("$VIEWLET_MOVIE$", "$VIEWLET_WIDTH$", "$VIEWLET_HEIGHT$");
          flashTag.setId("$VIEWLET_NAME$");
         flashTag.addParameter("allowScriptAccess", "always");
          flashTag.setFlashvars("__variables__="+getParameters()+"$VIEWLET_PARAMETERS$");
          flashTag.write(document);
          //-->
          </script>
        $VIEWLET_BODY_TAG$
         
         
        </td>
      <td class="verticalR" valign="bottom" width="26">&nbsp;</td>
      </tr>
      <tr height="16">
      <td class="horizontalBL" width="26">&nbsp;</td>
      <td class="horizontalB">&nbsp;</td>
      <td class="horizontalBR" width="26">&nbsp;</td>

      <tr>
      <td width="26" valign="top"><img src="resources/shadow_left.gif" alt="" height="10" width="26" border="0"></td>
      <td class="shadow">&nbsp;</td>
      <td width="26" valign="top"><img src="resources/shadow_right.gif" alt="" height="10" width="26" border="0"></td>
      </tr>
         
    </table>
     
    </body>
   
    </center>

</html>


You can add code like this to your HTML frame in the <Body> and <Head> areas being careful not to delete or alter the code
that is already setup for you to make the Viewlet run. When you want to call one of the graphic files, you would
treat it like they were in the same folder (no directories needed).

For example
Code: Select all
src="watchaviewlet.gif"


James

Return to FAQs - ViewletBuilder 6.x

Who is online

Users browsing this forum: No registered users and 1 guest