How do you get to Carnegie Hall!?
aka, how many ways can you get to what you need done…
Ask anyone for directions to someplace and you will never get the same answer twice… this is the case when putting together a project using Flash. Although it can be quite helpful when you want to customize something it can be just as difficult and frustrating if you’re just trying to get something to work.
We’re going to quickly cover how to load a random image as a background from a series of images in a directory. This tutorial examines a few basic Flash/Actionscript elements mashed together from various resources on the web – when in doubt “google it” or ask a question. The tutorial also covers a few different ways to get the Flash project completed. One method is not necessarily easier or more effective then another but demonstrates how you can get a Flash project done using different techniques and strategies.
This tutorial briefly covers:
- global variables
- random numbers
- case / switch (aka, a better if/then/else)
- concatenation (aka, making new words from strings and variables)
- classes and prototypes
If/Then/Else statements work great for simple logic functions and decision points within Flash; however, after several nested statements it can get very confusing – especially if you have to revisit the file again in 6 months. So, instead of using If/Then/Else consider using the Switch/Case statement… Basically, with switch() you end up putting what you would use in the if/then/else statement in the switch statement. In addition, you can evaluate particular actions to perform based on a single case and if there isn’t anything that meets your requirements you are able to define a default value to run with.
You can download all three examples here.
EXAMPLE 1 – SWITCH/CASE STATEMENT
In our first example we’re putting together a way to load a random JPG into the background from a series of images using the case statement.
We need to establish a global variable to keep track of how many images we have in our directory and then a variable to store a random number.
To set a global variable we utilize the statement:
_global.numberImages:Number = 5;
“_global” defines the variable as a global variable which means you can easily access that information from anywhere within your Flash project without having to identify a path/target buried within your movie. To call for that variable you just use _global.numberImages. Be sure that you don’t use the same name anywhere else in your movie, i.e. within a function otherwise you might end up requesting a variable that is located within a function inside of anothertimeline.
To set a random variable we utilize this statement :
_global.randomImagePosition = Math.round(Math.random()*numberImages);
In this case we’re setting our random number as a global variable and putting it within a function that we can quickly call. At its basic to call a random number we use the statement random(); however, this is quite limited – used alone itgeneates a random number between the values of 0.0 and 1.0. So in our example we’re creating a statement that creates a random number between the values of 0 and the maximum number of images in our directory. Then the *numberImages multiplies the random number by that number which is then promtly rounded by the Math.round function to an integer that we can use. We’re putting the random number generation into a function called choice() which just generates the random number for us. If we ever decided to make use the random number call differently we can just modify the information within the choice() function without mucking things up in other functions.
The next step we create the Switch/Case ‘engine’ that handles the images to be loaded.
function switchMe() {
switch (randomImagePosition) {
case 0 :
image.loadMovie(“image0.jpg”);
break;case 1 :
image.loadMovie(“image1.jpg”);
break;case 2 :
image.loadMovie(“image2.jpg”);
break;case 3 :
image.loadMovie(“image3.jpg”);
break;case 4 :
image.loadMovie(“image4.jpg”);
break;case 5 :
image.loadMovie(“image5.jpg”);
break;
}}
Breaking down the switchMe() function looks like this:
switch(randomImagePosition)
- iniatilize the switch() functionality
- pass the randomImagePosition variable into the switch() function for comparison
- if/then/else statements follow using the “case” comparison
- assume that the images that are being loaded are in the same directory that the Flash project is
So, Case 0 is the same as saying “IF” the randomImagePosition number is == 0 “THEN” load the JPG into movieclip image .
It’s essential that you use the “break;” statement to jump out of the case comparison otherwise Flash will try to go and use the other case comparison actions. This is a basic Switch/Case function. There are ways to create a default value of there isn’t a Case comparison that works. In addition, you can set it up so that there is some error-protection if an improper value was accidentally used for comparison.
To initialize the Flash project and switch to a random image we use a simple movieclip ‘button’ called randomImage. When randomImage gets loaded we quickly call the function _root.choice(); to pick a random number and then _root.switchMe(); to initialize a start image. When you click on the randomImage movieclip it repeats the process and initailizes a new random number and loads a new image.
EXAMPLE 2 – CONCATENATION
Using Switch/Case statements is all well and good, however, just like If/Then/Else statements you have to create a comparison statement for each image you would want to load. If we know that all the images are in the same directory and they all are named in the same fashion then we can use the same framework we just created and substitute the Switch/Case statement with a concatenation string to load our image. So, in our new example we just use the choice() function and delete the switchMe() function.
How concatenation is useful… concatenation is essentially creating new words from combing words and numbers together. In our example we have a known quantity of images that we’re going to randomly pick from to show in our Flash project. So our images are named image0.jpg, image1.jpg, image2.jpg, et.al. It is very easy to use concatenation to create a string variable that essentially makes up our filename that we want to load. Basically we take the word “image” add a number and then add the rest of the filenname “.jpg”
Back to our modified choice() function.
function choice() {
_global.randomImagePosition = Math.round(Math.random()*numberImages);
trace(randomImagePosition);image2load = “image”+randomImagePosition+”.jpg”;
image.loadMovie(image2load);
}
Basically we’re going to create a new string variable “image2load” that is made up from concatenating our filename, random number and file type extension (in this case .jpg). Now all we need to do is call the choice() function and it will load a random image from our directory. Although this is conveniant, there are a few downsides when using this method. First you will only be able to load a file based on the specific filename you create in the concatenation string. If you want to load a different filetype you have to choose between one or the other and it has to be named in that particular format. Second, if you want to load the image from a specific directory you will have to modify the concatenation string depending on your directory structure.
EXAMPLE 3 – PROTOTYPES
For our final example we’ll address the issues of file types and location of images based on your directory structure. To do this we will create a prototype that extends the functionality of themovieclip object.
MovieClip.prototype.myloadRandomImage = function(src, format, seed) {
seed = Math.round(Math.random()*seed);
trace(seed)loadMovie(src + seed + format, this);
_alpha = 0;onEnterFrame = function() {
if (_alpha <= 100) {
_alpha += 10;
}}
}
When using prototypes we are using an ability in object oriented programming called inheritance in the class. At its basic level, a prototype is an object that is part of all classes in flash that holds all of the methods for that class… Essentially we’re creating our random functionality and putting it within theMovieClip object as a function that can be called/executed for any MovieClip object. So in this case we have a new function myloadrandomImage that we pass a directory location (“src”), a file format of .jpg or .swf (“format”) and the maximum number of images to pick our random number from (“seed”). The function creates a number from our maximum number of images, loads the movie and as the movie is loaded change its alpha value to slowly appear on the screen from transparent to visible.
To iniatilize the new prototype function we use the statement:
_root.test.myloadRandomImage(“images/image”, “.jpg”, numberImages);
- “test” – is our empty movieclip that we’re loading our images into
- myLoadrandomImage – is our prototype function that extends any movieclip object
- “images/image” – is our filepath to the directory where all our images are located
- “.jpgs” – is the filename extension for JPG image
- numberImages – is our global variable we created as our maximum number of images in the directory
Prototypes can be extremely powerful and useful depending on your application. Deciding to use prototpes depends on if it will make your Flash/Actionscript more effiecient. It can also be extremely difficult to wrap your head around if your a designer that doesn’t want to become a programmer. In this example it might be a bit overkill to institute a random image loader function to allmovieclip objects. But then again, it comes back down to what it is you want your Flash project to do and how best to go about getting it done that fits your needs.
You now have three ways to load a random image into your Flash project. You can download all three examples here.
To get more information about the topics covered here you can read more about the topics covered at the following websites:
How do you get to Carnegie Hall!?
You practice, practice, practice
This post is tagged: actionscript, experiment