You are viewing the archives of the original Pixelfumes blog. This blog is no longer maintained. All of the content available on this site is available on the new Pixelfumes blog in addition to all of our new posts! Visit: http://blog.pixelfumes.com.

« Home | Business Card Flip Effect (Class With Source) » | ActionScript 3 Reflection Class Source » | Holy Cow - Flash 9 Alpha Download » | Try Microsoft Office 2007 Beta 2 ONLINE without in... » | Adobe Apollo and ActionScript 3 Breeze Presentatio... » | National Addy Awards and Joe Piscopo » | Visual Task Tips - Vista Style » | IE Flash OCX Error » | Tray-Style Resizer » | Lightbox JS V2.0 - Javascript Slide Show Display » 

Thursday, August 24, 2006 

Seamless Background with Source

If you have ever needed to have a Flash piece fill the browser and center the movie contents without stretching all while having a repeating background pattern that never ends then look no further!

This class takes a pattern and repeats it using one of two methods. The first is repeating movie clips that display as needed in the background. This is great for Flash 7 and older. Small patterns can hurt resizing but I tried to help that out with a method in the class called destroyTiles. This gets called automagically so it should run pretty well. For you Flash 8 people out there I use the Bitmap Data object to handle the repeating background. This is very fast and very light on overhead. You just need to change the way you instantiate the class to jump from one version to the other.

Example:
//Flash 7 - clip in library with Linkage ID of pattern_mc
//args(target mc, linkage ID, useBitmap?)
sb = new SeamlessBackground(bg_mc,"pattern_mc",false);

//Flash 8 - bitmap in library with Linkage ID of wood_bmp
//args(target mc, linkage ID, useBitmap?)
sb = new SeamlessBackground(bg_mc,"wood_bmp",true);

Notice that when using Flash 8 you have an image in the library with a Linkage ID, NOT a movie clip. Just right-click on your jpg or what-have-you in the library and assign a Linkage ID to it.

There is also a method for centering another clip in the center of the window. It is basic but a nice addition to the class imho. You can set the clip like so:

sb.setCenteredClip(logo_mc);

Here is the class:






The direct link to the class is here. A demo of the class is available here. A downloadable zip containing an FLA is available here.

9:48 AM |

Wow! This will come in handy. Thanks for sharing!

Posted by Anonymous Anonymous | 5:06 PM   

I had fun playing with this one.
Good one.

Posted by Anonymous Brian Cawley | 5:24 PM   

Really cool,
where does it call the class from?
i can't find any referance to it anywhere.

Posted by Anonymous Marvin Speakman | 8:02 AM   

AS2 Classes are "imported" when they are instantiated. SO for example as soon as I type

sb = new SeamlessBackground(bg_mc,"pattern_mc",false);

and test the movie Flash looks in the same directory as the FLA we are in for a .as File called SeamlessBackground.as. This is how it "imports" the class. You don't need to use an import or include directive to get 'r done. You may have seen stuff like com.pixelfumes.SeamlessBackground before in Actionscript. That basically just says that we start in the FLA's current directory and then look for a com folder that contains a pixelfumes folder that contains the SeamlessBackground.as file. Make sense? Hope that helps.
-Sarge

Posted by Blogger Sarge | 8:29 AM   

where do i need to install these script if i want to refer to them by "import"?

thx, curt

Posted by Anonymous Anonymous | 4:44 PM   

I assume you mean importing it into another class? That could be done by using the import directive like:

import.SeamlessBackground;

But if you are using it I suggest using it in the _root timeline using the method:

Example:
//Flash 7 - clip in library with Linkage ID of pattern_mc
//args(target mc, linkage ID, useBitmap?)
sb = new SeamlessBackground(bg_mc,"pattern_mc",false);

//Flash 8 - bitmap in library with Linkage ID of wood_bmp
//args(target mc, linkage ID, useBitmap?)
sb = new SeamlessBackground(bg_mc,"wood_bmp",true);

Because saying "new SeamlessBackground()" is actually "importing" the class into the SWF.

Does that help?
-Sarge

Posted by Blogger Sarge | 4:56 PM   

I was honestly looking ALL over for this... great job.

Posted by Anonymous Anonymous | 12:51 AM   

Great stuff... Thanks!

Posted by Anonymous Anonymous | 8:47 PM   

Awesome! Thanks a lot for the source file!

How can I center another movie clip like logo_mc. My bg_mc has some see through areas and want to have a radial gradient below it.

This does not work:
sb.setCenteredClip(logo_mc);
sb.setCenteredClip(anotherBG_mc);

Posted by Blogger Come Explore Canada .com | 6:42 PM   

This is a great class that saved me a lot of time. For some reason though, the tiles weren't displaying properly when the movie first loads. It was only after a resize that they tiled properly. I kind of worked around it though, by calling stageListener.cRef.upDateTiles() at the end of the instantiation method.

Posted by Blogger Christopher | 1:09 AM   

i am using this on a website with a centered movieclip that is larger than some browser windows, so it centers the movieclip, but crops it top and bottom, with no scroll bars. Is there any way to make it scrollable?

Posted by Anonymous Anonymous | 11:57 AM   

Thanks for shearing! I am using this for a website as well and have a similar problem as the last person who posted. I'd want the centered object to resize by the browser window instead of the window cropping it. Any ideas?

Posted by Anonymous Ananasbananas | 4:57 AM   

could you please help with mc bigger than some browser, it is cutted ftom top and bottom. Scrollbar on/off would be very useful.

Posted by Blogger David | 11:05 AM   

tks a lot =D

Posted by Anonymous Anonymous | 12:02 PM   

Post a Comment