Program:
SWiSHmax
Build Date: 2004.08.12+
Why
Use HTML to Pass Variables ?
There
are a number of reasons why you might want to pass variable data through
your HTML source code. For some, it is the only option if PHP or ASP support
is not available on a server - or if external .TXT files are not working
for some reason. This method is often used by advertisers (Flash banner
ads) and is known as "clickTag". Some other people might want
an HTML/SWF hybrid website that uses animated buttons in a menu - one
could use the methods in this tutorial to create only a single animated
button and set it's title and link within the HTML source code as demonstrated
below.
Creating
a Dynamic Button in SWiSHmax
1. Start by creating a new blank movie
in SWiSHmax with a width of 200 and a height of 100.
2. Next, draw a text object in the top-left
corner of your movie. Open the Text panel and set this next text object
to 'Dynamic' (if 'Static' or 'Input' is displayed
on the text panel underneath the Font Type, click it and select 'Dynamic'
instead). Be sure to embed all characters of your chosen font by clicking
on the "ABC|123" icon and choosing
"Embed Font Outlines for: All Characters". In the Name
field on the Text panel, give this text object the name "myButton"
and set it to be used as a target. You can add text to decide what font
you'd like to use; however, be sure to delete all text on the Text panel
and leave this text object empty (as shown in the image below).
Note: You might want to tweak the height
and width settings for your text object depending on your own needs. For
example, you may want the text to auto-wrap and create a second line,
or you might only want a single line of text at a fixed width. In this
tutorial, it is only important that your text object is wide enough to
hold at least a few characters.
3. With the "myButton" text
object selected in the Outline panel, open the Script panel. If 'Expert'
mode is selected, click on it and select "Guided"
mode.
4. Press the Add Script button and select
Events | Button | on(release)
5. Press the Add Script button again
and select Browser/Network | getURL(...). At
the bottom, click on the (e) icon next to the
URL field to evaluate the URL as an expression. In the URL field,
type in (without quotes) "buttonLink". Use the drop-down menu
next to the 'Window' field and select "_blank".
Note: the "buttonLink" is a
variable that will be defined in the HTML source code.
6. Select "Scene_1" in the
Outline panel and open the Script panel.
7. Press the Add Script button and select
Events | Frame | onLoad().
8. Press the Add Script button again
and select Statements | Name=Expr;. In the Target
field at the bottom, type in "myButton" (without quotes). In
the Name field, type "text" (without quotes). In the
text area underneath the Operator, type in "buttonTitle"
(without quotes).
What we've just done is created a blank, dynamic, text
object that will act as a button when pressed. The text itself will be
determined by the variable "buttonTitle" and the URL that the
button will open is determined by the variable "buttonLink".
9. Save your movie and export it as HTML
and SWF (File Menu -> Export -> HTML+SWF).
SWiSHmax should prompt you with the option to edit the HTML file that
you just exported - when it does, select Yes. If this option fails for
some reason, locate your HTML file and open it within Windows Notepad.
Passing Variables with FlashVars
There are two different ways that you can pass variables
from within the HTML source code. The first method is to use the HTML
parameter "FlashVars" inside the <object>
tags.
With your HTML file open and viewing the source code,
find this section of code:
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0"
id="max_tut_html_vars" width="200" height="100">
<param name="movie" value="yourmoviename.swf">
<param name="bgcolor" value="#DDDDDD">
<param name="quality" value="high">
<param name="allowscriptaccess" value="samedomain">
<embed type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
width="200" height="100"
name="max_tut_html_vars" src="yourmoviename.swf"
bgcolor="#DDDDDD" quality="high"
swLiveConnect="true" allowScriptAccess="samedomain"
></embed>
</object> |
Above the section of code highlighted in red above, add
a new <param> tag as shown below:
| <param
name=FlashVars value="buttonTitle=Get%20SWiSH&buttonLink=http://www.swishzone.com"> |
Above the
section of code highlighted in blue above, you will also need to define
the value of "FlashVars" as shown below:
| <src="yourmoviename.swf"
FlashVars="buttonTitle=Get%20SWiSH&buttonLink=http://www.swishzone.com"> |
You can see that we have now defined the two variables
used in our Dynamic Text Button; "buttonTitle" and
"buttonLink". These variables are joined together just
like a normal query string in your browser - using the ampersand character
(&) to define the next variable, and URL
encoding (%20) for special characters (such
as spaces). So, we have given our variable "buttonTitle"
the value of "Get SWiSH", and we have given our variable "buttonLink"
a value of "http://www.swishzone.com".
Note: For a more thorough listing of
URL Encoding codes, you can view a table HERE.
The final code should appear similar to this:
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0"
id="max_tut_html_vars" width="200" height="100">
<param
name=FlashVars value="buttonTitle=Get%20SWiSH&buttonLink=http://www.swishzone.com">
<param name="movie" value="yourmoviename.swf">
<param name="bgcolor" value="#DDDDDD">
<param name="quality" value="high">
<param name="allowscriptaccess" value="samedomain">
<embed type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
width="200" height="100"
name="max_tut_html_vars" src="yourmoviename.swf"
FlashVars="buttonTitle=Get%20SWiSH&buttonLink=http://www.swishzone.com">
bgcolor="#DDDDDD" quality="high"
swLiveConnect="true" allowScriptAccess="samedomain"
></embed>
</object> |
You should now be able to save the changes you've made
to the HTML source code, and view it in your browser.
Passing
Variables Through the Object Tag
The other
method for passing variables is to do so directly in the Object tag. You
might be wondering which method is better - and I can't really give an
answer for that, since both methods do the exact same thing. However,
the FlashVars method will ONLY work if the person viewing your site has
a Flash 6 Player plugin (or higher) installed in their browser. So, the
only real difference between these two methods is compatibility - and
it is up to you to decide which method you'd like to incorporate into
your project.
While viewing
the HTML source code, once again find this section of code:
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0"
id="max_tut_html_vars" width="200" height="100">
<param name="movie" value="yourmoviename.swf">
<param name="bgcolor" value="#DDDDDD">
<param name="quality" value="high">
<param name="allowscriptaccess" value="samedomain">
<embed type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
width="200" height="100"
name="max_tut_html_vars" src="yourmoviename.swf"
bgcolor="#DDDDDD" quality="high"
swLiveConnect="true" allowScriptAccess="samedomain"
></embed>
</object> |
The code
highlighted in red above and the code highlighted in blue is where you
will need to add your variable information. In the 'value' for this bit
of code, is the name of your .SWF file. At the end of that filename (right
after the extension ".swf") is where you will add the query
string that holds the variable data. Since this is more like an actual
query string, you will need to add the "?"
right after the file extension which tells the browser that you are defining
a variable or variables.
Change that
line of code as follows:
<param
name="movie" value="yourmoviename.swf?buttonTitle=Get%20SWiSH&buttonLink=http://www.swishzone.com">
src="yourmoviename.swf?buttonTitle=Get%20SWiSH&buttonLink=http://www.swishzone.com" |
The final
section of code should appear similar to this:
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0"
id="max_tut_html_vars" width="200" height="100">
<param name="movie" value="yourmoviename.swf?buttonTitle=Get%20SWiSH&buttonLink=http://www.swishzone.com">
<param name="bgcolor" value="#DDDDDD">
<param name="quality" value="high">
<param name="allowscriptaccess" value="samedomain">
<embed type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
width="200" height="100"
name="max_tut_html_vars" src="yourmoviename.swf?buttonTitle=Get%20SWiSH&buttonLink=http://www.swishzone.com"
bgcolor="#DDDDDD" quality="high"
swLiveConnect="true" allowScriptAccess="samedomain"
></embed>
</object> |
Again, you
should now be able to save the changes to this HTML file and view it in
your browser. The value given to the "buttonTitle"
variable should be used as the dynamic text object set up in your SWiSHmax
movie, and the value given to the variable "buttonLink"
(which should be a URL for this example) is where the viewer will be taken
upon clicking on the text in your movie.
Important:
In both examples, the variables were defined in two separate places within
the HTML source code - once inside the <OBJECT> tag, and once inside
the <EMBED> tag. This is very necessary for cross-browser compatibility.
Internet Explorer will display it without problems having the variables
only defined inside the <OBJECT> tag; however, Netscape and Mozilla
browsers NEED the variables defined in BOTH places in order to work properly.
|
