Flash 5 Tutorial Seven

It has been a while since the last tutorial. In case you haven’t heard, Macromedia has released its latest version of the great Flash applications, 'Flash MX'. Read the review by Bill Spencer AKA Pope de Flash on FlashKit.

Now on to the tutorial at hand and lets talk about some cool things that can be done using a mixture of Flash and JavaScript. We are going to walk you through the process of using cookies and Flash to create an online notepad feature that will allow users to key in notes to themselves, have them stored on their local system and when they return have the same notes reappear for them to see and edit. Then we are going to use the text box feature that we created in our previous tutorial and create a scroller that will allow users to quickly and easily move through the text by simply scrolling.

The first thing that we are going to discuss is the using of cookies with Flash to create an online notepad. Reading of cookies with a Flash file embedded into an HTML page is what we need to do, and the settings should be somewhat straight forward for users with some JavaScript and ActionScript experience. Flash actually allows users to pass variables into the Flash file using the Get URL string method.

To get the cookie information from the browser you will need to include this simple JavaScript on your page:

    
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
// Get Cookies script
cookString = "?" 
// does the visitor have a cookie? 
if(document.cookie != "") {
theCook = document.cookie.split("; ")
// add each part of the cookie to a string variable
for (i = 0; i < theCook.length; i ++) {
cookString += theCook[i] + "&"
}
}
// -->
</SCRIPT>

This script checks to see if the visitor has a cookie, then creates a string (cookString) to hold all of the cookie information. Once the information is collected you can use a second script to embed the Flash file.

The Next thing that we want to do is use another JavaScript function to embed the Flash file on the page. Other than the cookString variable we created earlier, this second script uses three other variables flName, flColor, flHeight and flWidth. The flName variable is the location of the Flash file on the server. The flColor variable is the background color of your Flash movie. The flHeight and flWidth variables are the height and width of the Flash movie you are embedding. These variables are quite straight forward to update and change if required. If you are working on a Flash file that is using the cookie function and want to change the dimensions of the file size or just the color of the background, simply update these variables and they will take effect.

<SCRIPT LANGUAGE="JavaScript1.1">
<!--
// Name the variables
flName = "flash-file.swf"
flColor = "#FFFFFF"
flHeight = "300"
flWidth = "200"
document.write('<OBJECT '
+ 'classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'
+ ' codebase="http://active.macromedia.com/flash2/'
+ 'cabs/swflash.cab#version=4,0,0,0"'
+ ' ID="flash"'
+ ' WIDTH=' + flWidth
+ ' HEIGHT=' + flHeight + '>'
+ '<PARAM NAME=movie VALUE="' + flName + cookString + '">'
+ '<PARAM NAME=quality VALUE=high>'
+ '<PARAM NAME=bgcolor VALUE=' + flColor + '>'
+ '<EMBED src="flash-file.swf' + cookString + '"'
+ ' name="flash"'
+ ' quality=high bgcolor=' + flColor
+ ' WIDTH=' + flWidth
+ ' HEIGHT=' + flHeight
+ ' TYPE="application/x-shockwave-flash"'
+ ' PLUGINSPAGE="http://www.macromedia.com/shockwave/'
+ 'download/index.cgi?P1_Prod_Version=ShockwaveFlash">'
+ '</EMBED></OBJECT>'
)
// -->
</SCRIPT>
    

Which will look like this - the arrow buttons saves the text that you enter and it was created using a dragable movie clip, so that it can be easily moved around:

This script passes all of the cookie variables to your Flash movie. If your visitor had a cookie of 'myname=Shawn Ryder' then your Flash movie would have a variable named 'myname' on the root level with the value of 'Shawn Ryder'. Now you have read cookie information into your Flash movie.

At the same time, writing cookies from Flash alone is not possible. Once again you will need to use JavaScript functions to assist your Flash movie in setting the necessary cookies. Calling functions from Flash has traditionally been done with the FS_command, but it is not fully compatible with all browsers out there today. Instead Flash developers have decided that there is in fact a better way to do this now, using the Get URL command to call the JavaScript functions. Writing cookies is a bit more complicated than reading them, please follow along closely and you can do it.

JavaScript functions are comparable to mini-programs that you can call upon as you need them. We are going to create a JavaScript function called 'cookit' that will handle the variables that we pass to it from the Flash movie. As this script is written, the cookie we write will be on the users computer for 9 months – which we can update if we would like to increase the amount of months that it will be stored on their system.

<SCRIPT LANGUAGE="JavaScript1.1">
<!--
function cookit() {
exDate = new Date
exDate.setMonth(exDate.getMonth()+9)
for(i=0;i<cookit.arguments.length;i++) {
ckThing = cookit.arguments[i] + '=' + cookit.arguments[i+1]
i++
document.cookie = ckThing + '; expires=' + exDate.toGMTString()
}
}
// -->
</SCRIPT>

Spicing Up the Text
Flash 5 Tutorial Seven Page 2