Random Pattern Background
| Category | : Flash | Views | : 52462 | ||
| Version | : 8 | Rating | : | ||
| Type | : Text | Source File | : random-pattern-background.zip | ||
| Result | : See the result | ||||
Using a random pattern a background for a movie is very easy using bitmap objects, the random function and some drawing API. If you choose some cool patterns, this will give a really nice effect for your movie.
Before we get started find some pattern on the internet, I recommend the site http://www.squidfingers.com/patterns/. It's all free as long as you give them credit for their work. The patterns I am using for this tutorial are taken from this site.
Let's start then. Create a new document and import to the library all patterns you want to use.
Link them with the identifier "pat1", "pat2", "pat3", etc.
Now create a Movie Clip that will control when a new pattern needs to be chosen at random.
The Movie Clip should have the instance name "nPattern".
Make it look any way you want, I used a simple text.
New Pattern
Open the actions for the first frame, and paste:
//import it so we don't need to write this every time we use a Bitmap object
import flash.display.BitmapData
var patNr = 4;
nPattern.onRelease = function()
{
//random img string, "pat1" to "pat(patNr)"
var img = "pat" + Math.ceil(Math.random() * patNr);
//empty Movie Clip to draw the background
_root.createEmptyMovieClip("holder", 1);
//load the pattern in a bitmap object
var imgBitmap = BitmapData.loadBitmap(img);
//clear the Movie Clip from previous patterns
holder.clear();
//begin to fill the Movie Clip with the pattern while drawing around the stage
holder.beginBitmapFill(imgBitmap);
//draw a line around the stage
holder.lineTo(550, 0);
holder.lineTo(550, 400);
holder.lineTo(0, 400);
holder.lineTo(0, 0);
//stop filling the rectangle formed by the lines
holder.endFill();
//bring the "button" to the front of the pattern with swapDepths();
nPattern.swapDepths(33);
}
This is the result from the above code:
You can use any size for your patterns; they won't be resized if they are bigger, but may be cropped to fit the screen.
If you change the lineTo's you will change the area where the pattern is filled, if you change to this for example:
holder.clear();
holder.beginBitmapFill(imgBitmap);
holder.lineTo(250, 0);
holder.lineTo(550, 400);
holder.lineTo(0, 300);
holder.lineTo(0, 0);
holder.endFill();
More cool tech articles from other blogs.
