Results 1 to 4 of 4

Thread: [AS3] Images not registering ROLL_OUT event

  1. #1

    [AS3] Images not registering ROLL_OUT event

    Here is the Project

    They work fine if you are slow, but if you just brush one of the hotspots the thumbnail will stick on the screen. I assume this is a fairly common problem. I've searched and read docs until my eyes bleed, so if anybody knows an obvious solution or can just point me in the general direction it would be mightily appreciated

    Here's the code. It's a bloody mess. This is my first AS3 project. Works though.

    PHP Code:
    package {

        public class 
    Walkaround extends Sprite
        
    {
            private var 
    index:uint 1;
            private var 
    count:uint 0;
            private var 
    done:Boolean false;
            
            private var 
    _displayedThumb:Sprite = new Sprite( );
            private var 
    _loadXML:XMLLoader;
            private var 
    _loader:Loader = new Loader(  );
            private var 
    _nameList:XMLList;
            private var 
    _planeURL:DisplayObject;
            private var 
    _locationList:Array = new Array();
            private var 
    _markerXML:XML;
            private    var 
    _xCoord:int;
            private    var 
    _yCoord:int;

            private var 
    markerHolder:Sprite = new Sprite();
            private var 
    _markerContent:DisplayObject;
            private var 
    _thumbOn:Boolean false;
            
            private const 
    X_SHIFT:int 100;
            private const 
    Y_SHIFT:int 75;
            private const 
    PATH_TO_IMAGES:String = new String("images/plane/");
            private const 
    PATH_TO_THUMBS:String = new String("images/plane/thumbs/");
            

            
            public function 
    Walkaround()
            {
                
    // lets not scale
                
    stage.align StageAlign.TOP_LEFT;
                
    stage.scaleMode StageScaleMode.NO_SCALE;
                
    // change frame rate to 30 fps:
                
    stage.frameRate 30;
                
    loadXML("walkaround.xml");
            }
            
            private function 
    loadXML(theXML:String):void {
                
    // load xml
                
    _loadXML = new XMLLoader();
                
    _loadXML.addEventListener(Event.OPENonOpen);
                
    _loadXML.addEventListener(Event.COMPLETEonComplete);
                
    _loadXML.load(new URLRequest(theXML));
            }
            
            private function 
    drawPlane(event:Event):void {

                var 
    bitmapData:BitmapData = new BitmapData(_planeURL.width_planeURL.heighttrue0xFFFFFF);
                
    bitmapData.draw(_planeURL);
                var 
    thePlane:Bitmap = new Bitmap(bitmapData);
                
    thePlane.163 X_SHIFT;
                
    thePlane.192 Y_SHIFT;
                
    addChildAt(thePlane0);
            }
        
            private function 
    onOpen(evt:Event):void {                
                
    addEventListener(Event.ENTER_FRAMEonEnterFrame);
            }
            
            private function 
    onComplete(evt:Event):void {
                
    done true;
            }
            
            private function 
    onEnterFrame(evt:Event):void {
                
    addChild(markerHolder);
                
                
    // list of images in XML elements
                
    var imageList:XMLList;
                
                
    // draw the plane
                
    var bmLoader:Loader = new Loader;
                
    bmLoader.contentLoaderInfo.addEventListener(Event.COMPLETEdrawPlane);
                var 
    bmRequest:URLRequest = new URLRequest(String("images/737_top.png"));
                
    bmLoader.load(bmRequest);
                
    _planeURL bmLoader
                
                
    //grab the XML
                
    _markerXML = new XML(_loadXML.grabXML());
                
    _nameList _markerXML.marker;
                
                
    // create array of all markers
                
    for each (var p in _nameList) {                
                    
    //grab the fields from xml
                    
    var type:String _markerXML.marker[count].@type;
                    var 
    name:String _markerXML.marker[count].@name;
                    
    _xCoord _markerXML.marker[count].@X_SHIFT;
                    
    _yCoord _markerXML.marker[count].@Y_SHIFT;
                    var 
    rotation:int _markerXML.marker[count].@rotation;
                    
    imageList _loadXML.getImages(count);
                    
                    
    //add current marker to array of the markers
                    
    _locationList["button" count] = [typename_xCoord_yCoordrotation];
                    for 
    each (var i in imageList) {
                        
    _locationList["button" count].push(i);
                    }
                    
                    
    // see what kind of marker it is and color it appropriatly
                    
    var markerColor:uint = new uint(0x00FF00);                
                    if (
    _locationList["button" count][0] == "outside") {
                        
    markerColor 0xFF0000//red
                    
    }
                    else if (
    _locationList["button" count][0] == "under") {
                        
    markerColor 0x00FF00//green
                    
    }
                    else {
                        
    markerColor 0x0000FF//blue
                    
    }
                    
                    
    // Create the marker.
                    
    var marker:Sprite = new Sprite();
                    
    marker.name "button"+count;
            
                    
    // Disable the mouse events of objects inside the marker.
                    
    marker.mouseChildren false;
            
                    
    // Make the sprite behave as a marker.
                    
    marker.buttonMode true;        

                    
    // Create a up state for the marker.
                    
    var up:Sprite = new Sprite();
                    
    up.graphics.lineStyle(10x000000);
                    
    up.graphics.beginFill(markerColor);
                    
    up.graphics.drawRect(001515);
                    
    up.name "up";
            
                    
    // Create a over state for the marker.
                    
    var over:Sprite = new Sprite();
                    
    over.graphics.lineStyle(10x000000);
                    
    over.graphics.beginFill(0xFFCC00);
                    
    over.graphics.drawRect(001515);
                    
    over.name "over";
                    
                    
    // Adder the states and label to the marker.
                    
    marker.addChild(up);
                    
    marker.addChild(over);
            
                    
    // Add mouse events to the marker.
                    
    marker.addEventListener(MouseEvent.MOUSE_OVERmarkerOver);
                    
    marker.addEventListener(MouseEvent.MOUSE_OUTmarkerOut);
                    
    marker.addEventListener(MouseEvent.CLICKmarkerClick);
            
                    
    // Add the button to the holder.
                    
    markerHolder.addChild(marker);
            
                    
    // Position the marker.
                    
    marker.rotation 0;
                    
    marker._xCoord;
                    
    marker._yCoord;
            
                    
    // Hide the over state of the marker.
                    
    over.alpha 0;
            
                    
    // Increase the count.
                    
    trace("button" count ":  " _locationList["button" count]);
                    
    count++;            
                }
                
                
    // wrap it up
                
    if(done) {
                    
    trace(_locationList["button43"]);
                    
    removeEventListener(Event.ENTER_FRAMEonEnterFrame);
                }
            }
                    
            private function 
    markerOver(evt:MouseEvent):void {
                
    // Hide the over state of the marker.
                 
    evt.currentTarget.getChildByName("over").alpha 100;
                  var 
    currentMarker:String = new String(evt.currentTarget.name);
                
    _xCoord _locationList[currentMarker][2] - X_SHIFT;
                
    _yCoord _locationList[currentMarker][3] - Y_SHIFT;
                var 
    currentThumb:String = new String(PATH_TO_THUMBS _locationList[currentMarker][5]);
                
    loadThumb(currentThumb);
                
    evt.stopPropagation();
                
    trace(evt.currentTarget.name);
                
    trace("over: " evt.type);
            }
            
            private function 
    markerOut(evt:MouseEvent):void {
                
    // clear thumb and return marker to proper color.
                
    clearThumbs();            
                 
    evt.currentTarget.getChildByName("over").alpha 0;
                
    //trace(evt.currentTarget.name);
                
    trace("out: " evt.type);
            }
            
            private function 
    markerClick(evt:MouseEvent):void {
                
    evt.updateAfterEvent();
                
    //trace(evt.currentTarget.name);
                
    trace("click: " evt.type);
            }
            
            private function 
    drawThumb(evt:Event):void {
                
                if (!
    _thumbOn){
                    
    trace(_loader.hasEventListener(Event.COMPLETE));
                    
    // add a container to the stage for the thumbnail
                    
    addChild(_displayedThumb);
                    var 
    loadedImage:Bitmap Bitmap(_loader.content);
                    var 
    bitmap:BitmapData = new BitmapData(loadedImage.widthloadedImage.heightfalse0xffffffff);
                    
    bitmap.draw(loadedImage, new Matrix(  ))
                    
    //put the bitmap in a var and display
                    
    var image:Bitmap = new Bitmap(bitmap);
                    
    image._xCoord 50;
                    
    image._yCoord 25;
                    
    _displayedThumb.addChild(image);            
                    
    _thumbOn true;
                    
    trace("compl: " evt.type);
                    
    this.dispatchEvent(evt);

                        
                } else {
                    
    clearThumbs();    
                    
    drawThumb(evt);                
                }
            }
            
            private function 
    loadThumb(image:String):void {
                
    _loader.contentLoaderInfo.addEventListener(Event.COMPLETEdrawThumbfalse10);
                
    _loader.load(new URLRequest(image));
            }
            
            private function 
    clearThumbs():void {
                if (
    _thumbOn) {
                    
    removeChild(_displayedThumb);
                    
    _displayedThumb = new Sprite ( );
                    
    _displayedThumb.mouseChildren false;
                    
    _thumbOn false;
                }            
            }
            
        }

    Last edited by lowdown; January 27th, 2007 at 10:14 PM.

  2. #2
    It registers the mouseOut event, but it happens prior to the complete event associated with the loader for the thumbnail. This only happens if you roll over it quickly. If you are slow about it then the complete event happens before the mouseOut.

  3. #3
    I guess event.COMPLETE doesn't fire until everything is done. I used this instead:

    PHP Code:
    private function loadImage(url:String):Loader {
                var 
    ldr:Loader = new Loader();
            var 
    urlReq:URLRequest = new URLRequest(url);
            
    ldr.load(urlReq);
            return 
    ldr;
            } 
    What is the purpose of the COMPLETE event? Events in general have me scratching my head.

  4. #4
    Event.COMPLETE is a standard generic code for completed tasks, like loading etc.

    you can try adding the event listeners INSIDE a completion method.

    Code:
    private function onComplete(e:Event):void { e.target.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver, false,0,true); e.target.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut, false,0,true); }

    Last edited by Dazzer; January 28th, 2007 at 07:55 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012