Glenn Geenen

Here I share some code of how to create a custom actionscript popup. The example below is a popup with an image in. When you click outside the popup it’ll close.

You create a popup like this:

import myPackage.ImagePopup;
import  mx.core.IFlexDisplayObject;
import mx.managers.PopUpManager;

var _imagePopup:ImagePopup = new ImagePopup("image.jpg");
PopUpManager.addPopUp(_imagePopup,this.parentApplication as DisplayObject, true);

Here is the ImagePopup class:

package myPackage
{
  import flash.events.Event;
  import mx.controls.Image;
  import mx.events.FlexMouseEvent;
  import mx.managers.PopUpManager;
  import mx.core.IFlexDisplayObject;
  import spark.components.TitleWindow;

  public class ImagePopup extends TitleWindow
  {
    private var _image:Image;  

    public function ImagePopup(src:String)
    {
      super();
      title = "Title Here";
      x=y=5;
      width=402;
      height=433;
      this.addEventListener(Event.CLOSE,closePopup);
      _image = new Image();
      _image.x = 0; _image.y = 0; _image.width = 400; _image.height = 400;
      _image.source = src;
      addElement(_image);
      this.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, closePopup);
    }
    private function closePopup(e:Event):void
    {
      PopUpManager.removePopUp(this as IFlexDisplayObject);
    }
  }
}

Just an easy way to do collision detection. The way I did it here (really simple) is creating a main character image and a spark group with all the enemies in.

Example setup:

<mx:Image includeIn=”Game” x=”400″ y=”500″ source=”@Embed(”assets/hero.png”)” id=”_hero” width=”100″ height=”100″/>

<s:Group id=”enemies” includeIn=”Game”>
<mx:Image x=”500″ y=”-150″ source=”@Embed(”assets/image.png”)” width=”100″ height=”100″/><mx:Image x=”100″ y=”-500″ source=”@Embed(”assets/image.png”)” width=”100″ height=”100″/><mx:Image x=”400″ y=”0″ source=”@Embed(”assets/image.png”)” width=”100″ height=”100″/></s:Group>

private function onTick(event:TimerEvent):void
{
  var obj:DisplayObject;
  for(var i:int = 0; i < enemies.numChildren; ++i)
  {
    obj = enemies.getChildAt(i);
    obj.y += 5;
    if(obj.y > 600) obj.y = -150;
    if(componentsCollide(obj)) endGame();
  }
}
private function componentsCollide(obj:DisplayObject):Boolean
{
  var bounds1:Rectangle = new Rectangle(obj.x,obj.y,obj.width,obj.height);
  var bounds2:Rectangle = new Rectangle( _hero.x,_hero.y, _hero.width, _main.hero);
  return bounds1.intersects( bounds2 );
}

Some tips I found out on getting better performance in Flex.

1. Use a background image that is a SWF or SVG file. These are easier for Flash Player to redraw. Use PNG above JPG or GIF.
2. The setStyle() method is one of the most expensive calls in the Flex application model framework.
3. Hard coding positions, heights and widths give you better performance.
4. Multiple Flex applications can load Runtime Shared Libraries at runtime, but each client needs to download them only once.
5. Data Binding takes up memory and can slow down the application start-up. It may be more efficient to do an assignment in code rather than using binding.
6. Local variable access is faster, so assign variables to local if they are accessed a lot. They will be stored on the stack and access is much quicker.
7. Whenever you have a set function, only assign the new value if they”re not equal to each other.
8. Spark Groups are lighter than mx Containers.
9. Reduce number of nested groups.
10. Spark BitmapImage is lighter than mx Image. mx Image is lighter than Spark Image.
11. Use Label over RichText.

Tip: Test your application on an old computer.