Flex Builder unable to find Flash Player

If you are using Flex Builder on Windows, you may run into an error where Flex Builder says it is unable to find the executable for Flash Player. The error will look something like the one below.

Flash Builder cannot locate the required version of Adobe Flash Player. You might need to install the FLash Player or reinstall Flash Builder.

Do you want to try and run your application with the current version?

This will give you an attempt to continue dialog with a yes or no option. If you click yes then you would get another error similar to the following.

Cannot run program "C:\Users\chris\Desktop\flashplayer_11_sa_debug_32bit.exe": CreateProcess error=2, The System cannot find the file specified

You can fix this by following the steps below.

1. Go to the Adobe website and download the standalone Flash Player Debugger edition.

2. Open up Notepad and insert some text (literally, anything).

3. Save the file as dummy.swf on your Desktop.

4. Open your Desktop and right click on the file. Select “open with…”

5. Browse to the location of the Flash Debugger you downloaded and select it, making sure to tick the “always open these types of file” option.

From now on, you should be able to run the application from Flash Builder.

Creating invisible buttons in Flash

Sometimes you want to make an area clickable, say part of an image or you have some animation that you do not want to have to convert to a button. What you need is an invisible one.

First draw a square (or whatever shape you want) onto your page. Double click the shapes border and delete it. You don’t need it and it makes the button look weird when you resize it.

Now convert the box into a button. Once you have done this double click it, and add keyframes for up, over, down and hit like you would any normal button.

Go back to the first 3 stages (up, over, down) and delete anything in these frames. The only thing you should leave is the box in the hit keyframe. Now go back to editing the movie (Ctrl + E).

If it worked the button should now appear as a half tranparent blue box. And if it does you have yourself one invisible button. You can now resize this to any area you want it to cover.

Creating a Flash preloader

Large movies take a long time to load, especially for users who are not blessed with a high speed broadband connection. Therefore just giving them a screen which says loaded or just giving them nothing at all can leave them a little dazed and wondering what to do. The solution – give them some feedback on what is being loaded.

Movie modifications

The first thing you need to do is have an empty frame at the top. You don’t need anything else – just an empty frame before you content. If it’s easier you could even create a separate scene to house this frame. Make sure it’s a key frame and the next frame where you content begins is a key frame too.

Next create a text box which says loading, or the name of the movie or something similar. This will be our loading object. It should only exist in that first fame. Now with the object selected go to Insert > Convert to Symbol and save it as a movie clip. I recommend the name ‘preloader’ but it has no affect what so ever. It just makes it easier for you to identify it in the library.

The scripting

Now double click on your newly created movie clip and watch it zoom into editing mode. There should currently only be one frame in the timeline now – extend this to three by inserting two new frames. Call this layer text or graphic or something similar. This layer will just remain the normal static text. The scripting will go in a different layer – create a new one for the scripting and make each of the three frames, key frames.

Now we have three key frames in the script layer which we can insert code to. This is expert field so we need expert view on. If you’re not working in expert code view then open the actions panel and click the options view icon. It looks like a little square with an arrow pointing to the top right hand corner. Then click the line which says expert view rather than normal view. This will turn the action scripts window into more of a text editor style window to allow us to insert code.

The first thing we want to do here is to stop the main movie from going any further before it’s loaded. So click on the first frame in the script layer and put the following code in:

_parent.stop();

This tells the main movie to stop. Generally commands like this use the model: object.command. In this example the object is the main movie or _parent as its known and the command is to stop it.

Now click on frame two of the script layer. He we are going to set some variables so we can give the user feedback on how far the movie has loaded so far. We do this by using a few functions built into ActionScript which allow us to get certain values.

kBytesLoaded = getBytesLoaded()/1024;
kBytesTotal = getBytesTotal()/1024;
kBytesRemaining = kBytesTotal - kBytesLoaded;
percentLoaded = 100 * kBytesLoaded / kBytesTotal;
progress = Math.floor(percentLoaded) add "%";

This script works out what has been loaded and how much is to load and then works out the percentage. It’s a great script although I can’t claim responsibility for it. Insert this script into the second frame and that will give us plenty of variables to work with.

Finally click on the third frame in the scripts layer. In here we check to see if the movie has loaded and if it has we send them on their way. If not we continue to loop and give them feedback on what has been loaded so far.

if (percentLoaded < 99){
gotoAndPlay(2);

} else {

_parent.play();
stop();
}

Here you can see if that if less the 99% has loaded then the movie is not fully loaded then the movie clip is sent back to recalculated the variables. If 99% or more has loaded then the movie clip is stopped and the main movie starts again. I use 9% rather than 100% as if there is a little data left which cannot be loaded it will never reach 100% and therefore loop for ever.

Giving feedback

Finally we need to tell the user what is going on. So create a new layer, call it something like feedback. Then insert a text box. This will display the percentage that has been loaded so far. This box needs to be set to dynamic. In Flash MX you can change this in the properties box - look for the drop down menu saying static text and change it to dynamic text.

Also look for the input text box which says var next to it. This stands for variable and will let us make the text box fill with a variable we set. So in the box write:

Progress

This will fill the box with the process variable telling the user what percentage of the movie has loaded. You're done - hit Control + E to return to editing the main movie. You can now export your movie save in the knowledge that users will see how much percentage of the movie has been loaded.

Loading variables into a Flash movie

Worfolk Desktop News was an application which downloaded the latest news from Worfolk and displayed it in the application. The original application was built in flash and loaded the variables in from a text file stored on the Worfolk servers.

The text file was simple:

news=the news story...

Create a text file like this and upload it somethere, or even just leave it on your hard drive as long as you know the file path. Now to load it into the flash movie you use LoadVariables. Go to the first frame in your movie and go into actionscript. Now add a LoadVariables command and add in the url path or file path to your text file.

Once this is done you have the variables stored in your movie. Next create a text area and set it to dynamic text. Where it says “var” and has a space to enter a name such as “news,” or whatever name you gave your variable in the text file.

Now run your movie. If it worked right the text area should now display the value you have the variable. If you copied my text into your text file you should come out with “the news story…” If its blank you have probably given the wrong url or you have got different names for the variable in your text file then you do in your movie.

Opening pop-ups in Flash

You can call JavaScript functions from your flash movie. This tutorial will show you how to call a pop up window opener function from your movie when a user clicks a button. You can create the html page in any text editor.

1. Create a simple button in Flash. You could also just drag one out of the shared library. You then need to open up the actions menu and insert the following code:

on (release) {
getURL("JavaScript:popup();");
}

This code will call the JavaScript when a user clicks on the button. Once this is done goto File > Publish and publish your movie. Make sure the publish settings are set to publish the file with a html document.

2. Now you need the code for the JavaScript function.

<script language="JavaScript">
function popup() {
window.open('http://www.hardwaretutorials.com/','','toolbar=no,location=no,directories=no,status=no,menubar=no,
scrollbars=yes,resizable=yes,width=400,height=400,left=0,top=0');
}
</script>

This code can be modified. The first section is the page URI. The second section is your options such as do you want to make it resizable and have scrollbars. The first section has width, height and location from left and top in. Make sure the “window.open” line and the line below are on the same line.

3. Now open your text editor and find the html file generated when you published your movie. Open it and insert the JavaScript function just below the tag. Now save the page.

4. Open the file in your browser. Clicking the button should now open up the pop up window.

Making your Flash movie transparent

Making your movies transparent allows you to see the background on bits where there is nothing in the movie. However this is actually nothing to do with the settings in Flash when publishing movies. The trick is in the html file that the movie is added into.

Transparency in movies will only work in Internet Explorer 4+ and won’t work in Netscape.

To make your movies transparent, simply paste this code in between the HTML Object tags.

<param NAME="wmode" Value="transparent"

And so, the embedding code for the SWF file for the second example (transparent) is as follows:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ID="himalayas" WIDTH="250" HEIGHT="100">
<param NAME="movie" VALUE="himalayas.swf">
<param NAME="quality" VALUE="high">
<param NAME="wmode" Value="Transparent">
<embed src="himalayas.swf" quality="high" bgcolor="#FFFFFF"
WIDTH="250" HEIGHT="100" TYPE="application/x-shockwave-flash">
</object>

Note: the above source file doesn’t include some key information like the Base Code URL due to the text width limitations.

Limitations

The transparency (as well as any other cool new technology) doesn’t work in Netscape at all. Use Internet Explorer to be able to view transparent Flash Content.

For the transparency effect to work as desired, don’t add a filler background element to your movies. Many developers add a large, white rectangular box, etc. to simulate white color. Make sure the drawing area behind the main movie is clear of any unwanted colours, etc (it will show up in the final animation).