Forum: Log-In | Register | Contact | Shop


SwishMax Tutorials And Resources
Where Imagination Is The Creation

 


Add


Welcome To Swish-Designs.co.uk Have a Nice Friday

Passing variables from Html to your swish / flash swf movie.

In this tutorial you are going to learn how to pass variables from html code to your swf movie.
in the example below both the image and the text are loaded from the html which has passed the variables from the Html to the Swf.

Example:




Step.1

Save the image below into your project folder.

project image

open SwishMax 2 and set your movie properties to 366 x 319 and 25 fps
create a dynamic text box and name it whatever you want but the variable name must be imageholder set the transparency to zero. see fig.1 below.

fig.1 fig.1

now create another dynamic text box name it whatevver you want but the variable name must be msgVar this will load the description of the image you will load.

Step.2

Create a new movie clip by clicking insert them movie clip, name the movie clip loader and add the following code to it.

Swish Script
onFrame (10) {
this.loadMovie(_root.imageholder);
}

you can lay your stage out similat to what you see in fig.2 below.

fig.2 fig.2

Step.3

Add the following code to Scene_1 of your movie.

Swish Script
onSelfEvent (load) {
if(imageholder.length>0){
border._visible=true;
}else{
border._visible=false;
}
}

Now press Ctrl+p to export html + swf to your project folder, save as test


Step.4

Now open up test.html from your project folder in your favourite text editor like notepad.
you will see something similar to the code below

HTML Code
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/"
WIDTH="366" HEIGHT="319" id="pass vars">
<PARAM NAME=movie VALUE="test.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="test.swf"
quality=high bgcolor=#FFFFFF WIDTH="366" HEIGHT="319" NAME="pass vars"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

All Special characters need to be Url encoded. see the table below for a list of the most commonly used characters and their valid Url format.

;
 %3B
?
 %3F
/
 %2F
:
 %3A
#
 %23
&
 %24
=
 %3D
+
 %2B
$
 %26
,
 %2c
Space
 %20 or just +
%
 %25
<
 %3C
>
 %3E
~
 %7E

Note that because the SPACE character is very commonly used, a special code ( the "+" sign) has been reserved as its URL encoding. so the query string for Swish Designs would be Swish+Designs or Swish%20Designs.

So now you understans Encoding a little more lets proceed to enter a variable we want to be passed to the swf file via the <PARAM NAME=movie VALUE="test.swf"> and <embed> tags.

Lets start by loading image1.jpg from your project folder into the test.swf via the following query string.

?imageholder=image1%2Ejpg so you full code should now look like the code below.

HTML Code
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/"
WIDTH="366" HEIGHT="319" id="pass vars">
<PARAM NAME=movie VALUE="test.swf?imageholder=image1%2Ejpg">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="test.swf?imageholder=image1%2Ejpg"
quality=high bgcolor=#FFFFFF WIDTH="366" HEIGHT="319" NAME="pass vars"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

you can now save your html file and test it, you should now see the image in you test.swf file in your browser.

now you can add the image description using the following string added to the end of the previous string. &msgVar=Image+Loaded:

your html code should now looklike the code shown below.

HTML Code
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/"
WIDTH="366" HEIGHT="319" id="pass vars">
<PARAM NAME=movie VALUE="test.swf?imageholder=image1%2Ejpg&msgVar=Image+Loaded:">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="test.swf?imageholder=image1%2Ejpg&msgVar=Image+Loaded:"
quality=high bgcolor=#FFFFFF WIDTH="366" HEIGHT="319" NAME="passvars"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

save your test.html firle and test it in your browser, you should now have an image description and an image displaying in the tes.swf movie.

you can buy the source file for this tutorial for £2.00.


Item price £2.00
swishmax 2 *.swi file format.
electronic download upon successfull payment.