9 Replies Latest reply on Aug 19, 2006 5:31 AM by ecumichael

    Application backgroundImage repeat?

    radfordb
      Does anyone know of a way to provide a backgroundImage for the Application's background but have the image repeat? It seems that tons of CSS options are available for style, but nothing that allows for a backgroundImage to be repeated throughout the background. Only scaled.

      So this would mean a small image with a pattern in it that could be repeated throughout the background of the application. Or any container for that matter.
        • 1. Re: Application backgroundImage repeat?
          ddanone
          I make the same question some time ago but nobody answer it.

          I've searched in the yahoo newsgroup (dont remember wich post) and somebody says that it's not possible.

          To simulate it you have to make a repeater with the image. I dont tested it yet.
          • 2. Re: Application backgroundImage repeat?
            leotemp Level 1
            I dont think its right using the repeater for that, seems like a lot of work for the desired effect. I would also like an official answer from someone that actually knows.

            bump.
            • 3. Re: Application backgroundImage repeat?
              ddanone Level 1
              Yes, repeaters aren't the better way, maybe they know another.
              • 4. Re: Application backgroundImage repeat?
                Starlover_jacob Level 1
                Does anyone have an idea how to solve this problem?
                Could there be an function that does the trick?
                I would like the answer :)
                And is this solution possible for the background of a canvas?
                • 5. Re: Application backgroundImage repeat?
                  papalarge
                  same problem here... would love a solution not involving repeaters or tilelists...
                  • 6. Re: Application backgroundImage repeat?
                    Starlover_jacob Level 1
                    Ive got the solution:

                    Put this into flex.
                    -------------------------

                    Flex:
                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"
                    backgroundImage="tilebackground.swf?destUrl=img/background patterns/6.jpg" width="800" height="600">

                    </mx:Application>

                    -------------------------

                    The backgroundimage loads an swf and gives an url to the image to tile with it.
                    Now lets see what the swf needs to do.
                    I created this with flash 8 so you can use gif and png files as background aswell.

                    -------------------------

                    1. create an new flash document with the stage size to the same sizes your background must be. In this case its 800x600.
                    2. create an movieclip (ctrl F8) and call this background.
                    3. Drag the background movieclip to the top left of the stage.
                    4. Set the instance name of the movieclip to background_mc
                    5. Click on the first frame in layer 1.
                    6. Open the actionscript screen (F9).
                    7. Put understanding code into it.
                    8. Save the file at the same place your flex output file is saved
                    9. Run the swf (Ctrl Enter).
                    10. Go to Flex and click play to see it work.

                    -------------------------
                    Flash code:
                    -------------------------

                    var newUrl:String =_root.destUrl;

                    // import used classes
                    import flash.display.BitmapData;

                    // set stage to not scale and situate itself to
                    // the top left corner if resized
                    Stage.scaleMode = 'noScale';
                    Stage.align = 'TL';

                    // create a movie clip that will load the texture
                    // an interior image_mc is used to actually load
                    // the image using a MovieClipLoader instance
                    // loaded_mc will be hidden as to prevent this
                    // process from being seen
                    this.createEmptyMovieClip("loaded_mc",1);
                    loaded_mc.createEmptyMovieClip("image_mc",1);
                    loaded_mc._visible = false;

                    // base url for all images being loaded
                    var baseURL:String = _url.substr(0, _url.lastIndexOf('/') + 1) + "loadbackgroundtexture/";

                    // create a MovieClipLoader instance and a listener
                    // to handle its events
                    var loadListener:Object = new Object();
                    var loader_mcl:MovieClipLoader = new MovieClipLoader();
                    loader_mcl.addListener(loadListener);

                    // loadBackground loads a url (background image)
                    // into loaded_mc.image_mc. loadListener will call
                    // onBackgroundLoaded when its done, which will draw
                    // the background using that image
                    function loadBackground(url:String):Void {
                    loader_mcl.loadClip(url, loaded_mc.image_mc);
                    loadListener.onLoadInit = onBackgroundLoaded;
                    }

                    // onBackgroundLoaded is called when an image is loaded into
                    // loaded_mc.image_mc - that image is made into a repeating
                    // background using beginBitmapFill with a BitmapData drawn
                    // from the visual contents of loaded_mc
                    function onBackgroundLoaded(Void):Void {

                    // new BitmapData instance using loaded_mc
                    var sourceBitmap:BitmapData = new BitmapData(loaded_mc._width, loaded_mc._height);
                    sourceBitmap.draw(loaded_mc);

                    // with background_mc, draw the background
                    with (background_mc){
                    // clear the existing background
                    clear();
                    // use beginBitmapFill with sourceBitmap to draw
                    // a repeating pattern of the loaded image in the shape
                    beginBitmapFill(sourceBitmap);
                    // draw a box around the extents of the stage
                    moveTo(0, 0);
                    lineTo(Stage.width, 0);
                    lineTo(Stage.width, Stage.height);
                    lineTo(0, Stage.height);
                    lineTo(0, 0);
                    endFill();
                    }
                    }

                    // button to load background images
                    function startthis(){
                    loadBackground(newUrl);
                    }

                    // start with Crosshatch background
                    startthis();
                    • 7. Re: Application backgroundImage repeat?
                      leotemp Level 1
                      hmm, well thats more complex that using a repeater.. Isnt there anyone at adobe thats seen this thread? Cmon guys let us noobs know if this is right or wrong, pretty basic functionality that were asking about...
                      • 8. Re: Application backgroundImage repeat?
                        ntsiii Level 3
                        There was no built-in way to tile or repeat a background in 1.5. This was an often requested feature.

                        I have not seen anything that will do it in 2.0, but I am just getting started.

                        Tracy
                        • 9. Re: Application backgroundImage repeat?
                          ecumichael
                          You can use the graphics class to draw a repeating background with beginBitmapFill().