For more information contact us

Development of Flash Splash pages

1. Requirements

This document expects that you know how to use Flash 5.0 and higher. Currently, it is required that all movies created for SiteStudio are saved in Flash 5.0.

SiteStudio flash movie allows you to set custom texts and colors. Images can't be changed on per-site basis.

2. Creating a Template

Objects in the flash movie must be broken into separate colors. If you want to change color to an object (symbol), it must be located in a separate layer.

Site name, slogan, and body text are implemented through dynamic text. Dynamic text variable names must be the same as the respective variable names in the html template.

For every movie clip, you need to create a frame action to initalize the variables, for example:

colorline1 = colorline1.substr(1, length);
my = new Color(line1);
my.setRGB(parseInt(colorline1, 16));

where: colorline1 is the hexidecimal color code specified by SiteSudio user line1 is the instance name of the movie clip

Next, export movie into swf version 5.0.

3. Creating a navigation menu button

Draw a generic menu button with dynamic text. The name of the flash dynamic text variable must be the same as the name of the variable in the html template, e.g. button_label.

Then create a frame action to initalize the variables similarly to the main flash movie:

colormenu=colormenu.substr( 1, length );
my = new Color(button);
my.setRGB(parseInt(colormenu, 16));

where: colormenu is the hexidecimal color code specified by SiteSudio user button is the instance name of the movie clip

Add the following code in the movie clip actions:

onClipEvent (load) {
        if(_root.publish eq "true"){
        button=_root.button
        }
        else{
        button=_root.button add "&page_id="add _root.page_id add "&_frame" add "=" add "body"
        }
}

Add URL link by placing the following lines into the button's object actions:

on (release) {
        getURL (link_url);
}

where link_url is the variable initialized in the html templated.

4. Integration into SiteStudio

4.1. Create a template file in the directory businessnew/flashsplash/ The name of the design would typically be style_lnn.html, where nn is the numeric id of your design. Also, create empty style_lnn.wait and style_lnn.images in this directory.

4.2. Begin the template file with the following lines, replacing nn with the numeric id of the design:

<include global.path+"generic/show">
<list global.pages as page><assign thepage = page></list>
<include  global.path+"businessnew/flashsplash/style_lnn.images">
<include  global.path+"businessnew/flashsplash/style_lnn.wait">


<call startPage1("help")>

<function bottomLinks(page)>
<FONT FACE="verdana, arial, helvetica" SIZE="1">
<list page.pages as page><if page.visible&&!page.minvisible>
<nobr>|<if page.page_id!=page_id><a href="${page.url}<if !publish>&_frame=body</if>">
<if page.alt>${page.alt}<else><if page.name>${page.name}</if></if></A><else>
<if page.alt>${page.alt}<else><if page.name>${page.name}</if></if></if>|</nobr>
</if></list>
</font>
</function>

4.3. Next, put the html code for the template passing variables to the Flash movie as suggested in this example:

<assign flashpat="?company_name="+global.thepage.firm_name+"&title=
="+global.thepage.slogan+"&texts="+body+"&colortext="+escape(toolbox.textcolor)+"&colorline1="+escape(toolbox.bg_color)>

4.4. Add the code that will call the Flash movie replacing splash_name.swf with the name of your swf movie. Use the names of the color variables you have defined in business_layout.list.

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" WIDTH=790 HEIGHT=456>
<PARAM NAME=movie VALUE="<call sImage(global.widgets+"/other/splash_name.swf")>${flashpat}">
<PARAM NAME=quality VALUE=high><PARAM NAME=bgcolor VALUE="${toolbox.color1}">
<EMBED src="<call sImage(global.widgets+"/other/splash_name.swf")></embed>
${flashpat}" quality=high bgcolor="${toolbox.color1}"  WIDTH=790 HEIGHT=456
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">

4.5. Use the following code to add the navigation menu replacing button_nn.swf with the name of your button swf file. Use the names of the color variables you have defined in business_layout.list.

<assign iter=new_counter>
${iter.next}
<list global.thepage.pages as page>
  <if page.visible &&!page.minvisible && page.page_id!=page_id page.alt!="">
     <TD>
       <IMG SRC="<call sImage(global.widgets+"/other/spacer.gif")>" WIDTH=10 HEIGHT=20></TD>
     <TD valign="top" background="" BGCOLOR="${toolbox.color1}">
       <assign flashpath="?link_url="+page.url+"&button_label="+page.alt+"&colormenu="+escape(toolbox.textcolor)>
        <if publish>
          <assign flashpath=flashpath+"&publish=true">
        </if>
        <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
         codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash1.cab#version=5,0,0,0"
         WIDTH=155 HEIGHT=20>
         <PARAM NAME=movie VALUE="<call sImage(global.widgets+"/other/button_nn.swf")>${flashpath}">
        <PARAM NAME=quality VALUE=high><PARAM NAME=bgcolor VALUE="${toolbox.color1}">
		<EMBED src="<call sImage(global.widgets+"/other/button_nn.swf")></embed>
		${flashpath}" quality=high bgcolor="${toolbox.color1}" WIDTH=155 HEIGHT=20
		TYPE="application/x-shockwave-flash"
		PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
        </OBJECT>
        </TD>
       </TR>
${iter.next}

</list>