+ Reply to Thread
Results 1 to 3 of 3

Using textures

This is a discussion on Using textures within the Tutorials forums, part of the Flash English category; You know that in HTML sites often use textures (those square images of approximately 100x100)? Have you ever tried to ...

  1. #1
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,762
    Rep Power
    11

    Using textures

    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:


    texture


    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


    Code:
    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:


    Code:
    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();
            }
        }
    }
    Attached Files

  2. #2
    Junior Member Settled In terraform is on a distinguished road
    Join Date
    Jan 2009
    Posts
    14
    Rep Power
    0

    Re: Using textures

    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
    Code:
    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.

  3. #3
    Junior Member Settled In terraform is on a distinguished road
    Join Date
    Jan 2009
    Posts
    14
    Rep Power
    0

    Re: Using textures

    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
    Attached Files

+ Reply to Thread

Similar Threads

  1. Usare le textures
    By Flep in forum Articoli e tutorials
    Replies: 3
    Last Post: 14-11-10, 19:34

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts