Using textures

[Flep]

You know that in HTML sites often use textures (those square images of approximately 100x100)?

Have you ever tried to use it with Flash?

They are very beautiful especially if used in a Flash site that is shown at 100%.

In this case we have to deal even with the resizing of the browser, in which case the user did.

How?

With Actionscript 3.0 we "attach" textures from library on runtime.

View demo and resize window's browser

We have a texture with dimensions of 320x320 pixels:

Create a new FLA file and save it as main.fla.

Create a new AS file and save it as Main.as in the same folder where I have main.fla and texture.gif.

Main.as is Document Class of main.fla, initially implemented in this way

package
{
    import flash.display.*;
    import flash.text.*;
    import flash.events.*;
    
    public class Main extends MovieClip
    {
        public function Main()
        {
            addEventListener(Event.ADDED_TO_STAGE,init);
        }
        
        private function init(evt:Event):void
        {
            removeEventListener(Event.ADDED_TO_STAGE,init);
            
            trace('ok');
        }
    }
}

Now import texture.gif in main.fla, drag it from library to the Stage, converts it to MovieClip named mc_texture and take off it from the stage.

Then assign a class to mc_texture with name Texture.

Here's the script to create the resizable background:

package
{
    import flash.display.*;
    import flash.text.*;
    import flash.events.*;
    
    public class Main extends MovieClip
    {
        private var holder_mc:MovieClip;
        
        private const TEXTURE_SIDE:int=320;
        
        public function Main()
        {
            addEventListener(Event.ADDED_TO_STAGE,init);
        }
        
        private function init(evt:Event):void
        {
            removeEventListener(Event.ADDED_TO_STAGE,init);
            stage.addEventListener(Event.RESIZE,onStageResize);
            
            createBackground();
        }
        
        private function createBackground():void
        {
            removeTextures();
            
            var columns:Number=Math.ceil(stage.stageWidth/TEXTURE_SIDE);
            var rows:Number=Math.ceil(stage.stageHeight/TEXTURE_SIDE);
            var total:Number=columns*rows;
            
            for(var i:int=0;i < total;i++)
            {
                var texture_mc:MovieClip=new Texture();
                texture_mc.x=Math.floor(i%columns)*TEXTURE_SIDE;
                texture_mc.y=Math.floor(i/columns)*TEXTURE_SIDE;
                holder_mc.addChild(texture_mc);
            }
        }
        
        private function removeTextures():void
        {
            if(holder_mc!=null)
            {
                removeChild(holder_mc);
                holder_mc=null;
            }
            
            holder_mc=new MovieClip();
            addChild(holder_mc);
        }
        
        private function onStageResize(evt:Event):void
        {
            createBackground();
        }
    }
}

[terraform]

Hey thanks for this
I have been looking for a good way to do this and luckily I stumbled upon this.

I have a couple of questions and one comment.
first the questions.

1. I know this is a bit of a 'n00b' question but if I did not want to use the document class but wanted to achieve the same results with the external .as file how would I go about that?
Would it be placing script on the timeline or would I need to make a container mc for the stage and export that to the external .as file. (sorry again I have only done timeline script and am just starting with external .as now)

2. also how would you assign the layer depth to the repeating background? for example sometimes I may want to use a solid repeating background for the background itself, but then other times I would want to use a transparent png to overlay
a texture. in both scenarios I would love to have the option for placing content on top, below or maybe even in between the repeating textures.

3. Lastly as hinted at in the previous 2 questions. is it possible to have multiple repeating patterns in the same document. (again a solid for the background, then place flash content on top of the repeating background and then place a transparent
png texture over both?)

thanks again.
I also wanted to quickly point out that when I tested your file with the supplied .fla ect... (thanks for those by the way) the pattern was not "pinned" to the top left corner of the stage so when I resized the stage it was all wonky.
so what I did was I added these 2 lines to the init constructor function like so

private function init(evt:Event):void
		{
			stage.align = StageAlign.TOP_LEFT;                                               // added this line 
			stage.scaleMode = StageScaleMode.NO_SCALE;                             // added this line 
			removeEventListener(Event.ADDED_TO_STAGE,init);
			stage.addEventListener(Event.RESIZE,onStageResize);
			
			createBackground();
		}

and now it seems to be pinned to the top right corner...
not sure if that is the best way to do that
or if my above questions would render that useless but I thought I would point it out.

thanks again and if you have any ideas/ or opinions on my above questions I would be very appreciative.

[terraform]

Actually I did figure out some "down and dirty" ways of accomplishing what I asked above.

so now I guess I would just love to know the "correct" way of doing this (for learning sake )

what I did to export w/o using the document class was to create my own

1. holder_mc and place it on stage at the x,y 0 co-ords
2. I then exported that for AS with the class path of Main
3. then I deleted the Main document class path in the properties inspector

and that worked great.

so then to add another texture to the stacking order I

1a. changed the Main.as title to Bottom.as (and updated holder_mc's export also to Bottom) and changed all references to Main class within the Bottom.as class to reflect the change (Bottom)
2a. I left the holder_mc on the stage and created 2 more layers the middle one for content and the top one for the top pattern.
3a. I added some ugly shapes to the stage on layer 2 for "example content"
4a. then I imported another pattern (this time a png with transparency), duplicated the Bottom.as file and renamed it Top.as
5a. Duplicated the holder_mc named it holder1_mc
6a. created a Texture1 mc (just as you had done with the original texture)
7a. added the new texture1_mc to the stage.
8a. updated all the references in the Top.as file to represent holder1_mc and texture1_mc, and Texture1 (as opposed to the old ones w/o the 1 addition)
9a. saved my as and it all worked fine.

but I know there must be a way to do this w/o using 2 .as classes and there may even be a way to do it w/o having the physical mc's on the stage.....

any pointers would be appreciated.

I have attached my updated .fla + .as files for your perusal.

thanks