Archive for the tag 'custom events'

AS3: ContactForm

January 25, 2008 in AS3, My Classes | Show Some Love | | 10 Comments »

View Example
View Documentation
Download Class & Example Files

Creates a communication gateway between a contact form and a PHP script that checks for validity and sends the email. The e-mail checking is rudimentary at best, but it gets the job done. If someone will go through the trouble to try and break this e-mail checker, then by all means spam away (at least that’s the way I see it). Read more »

Tags: , , ,

AS3: Event Responsive Menu Extended

November 6, 2007 in AS3, FLAs | Show Some Love | | No Comments »

View Example
Download Example Files
Download Environment
Download TweenLite

Last time we looked at the Event Responsive Menu we made a menu system that responded to events based on what button was clicked. This was a working version but rather ugly/useless in the sense that we didn't add any actual functionality to it so now we are going to go ahead and load the button data from an XML file and then use TweenLite to "spruce" them up a bit with fades of color.

Let's take a look at the XML file we are going to use to store the button data:

PLAIN TEXT
XML:
  1. <menu>
  2.     <item name="Home" url="http://www.google.com" />
  3.     <item name="Portfolio" url="http://www.google.com" />
  4.     <item name="Services" url="http://www.google.com" />
  5.     <item name="About" url="http://www.google.com" />
  6.     <item name="Contact" url="http://www.google.com" />
  7. </menu>

Then here is the Main.as file:

PLAIN TEXT
Actionscript:
  1. /**
  2. * @author Matt Przybylski [http://www.reintroducing.com]
  3. * @version 1.0
  4. */
  5.  
  6. package com.reintroducing.menusystem
  7. {
  8.     import flash.display.Sprite;
  9.     import flash.events.Event;
  10.     import flash.net.URLLoader;
  11.     import flash.net.URLRequest;
  12.    
  13.     import com.reintroducing.debug.Environment;
  14.     import com.reintroducing.menusystem.events.MenuButtonEvent;
  15.     import com.reintroducing.menusystem.ui.MenuButton;
  16.    
  17.     public class Main extends Sprite
  18.     {
  19. //- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
  20.  
  21.         private var _holder:Sprite;
  22.         private var _numButtons:int;
  23.         private var _menuData:XML;
  24.         private var _env:Environment;
  25.        
  26. //- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
  27.        
  28.         public static const DEFAULT_NAME:String = "com.reintroducing.menusystem.Main";
  29.        
  30. //- CONSTRUCTOR -------------------------------------------------------------------------------------------
  31.    
  32.         public function Main()
  33.         {
  34.             this._numButtons             = 5;
  35.             this._holder                = new Sprite();
  36.             this._holder.x = this._holder.y = 10;
  37.             this._env                  = Environment.getInstance();
  38.            
  39.             this._env.setPaths("../", "");
  40.            
  41.             this.addChild(this._holder);
  42.            
  43.             this.loadXML();
  44.         }
  45.        
  46. //- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
  47.        
  48.         private function loadXML():void
  49.         {
  50.             var xmlURL:String = this._env.basePath + "xml/menuData.xml";
  51.             var xmlLoader:URLLoader = new URLLoader();
  52.            
  53.             xmlLoader.addEventListener(Event.COMPLETE, createMenu);
  54.             xmlLoader.load(new URLRequest(xmlURL));
  55.         }
  56.        
  57.         /**
  58.          * Lays out the buttons on the stage and initializes them.
  59.          */
  60.         private function createMenu($evt:Event):void
  61.         {
  62.             var xPosition:int = 160;
  63.             var buttonURL:String;
  64.             var buttonName:String;
  65.            
  66.             this._menuData = new XML($evt.target.data);
  67.            
  68.             for (var i:int = 0; i <this._numButtons; i++)
  69.             {
  70.                 buttonURL = this._menuData.item[i].@url;
  71.                 buttonName = this._menuData.item[i].@name;
  72.                
  73.                 var mb:MenuButton = new MenuButton();
  74.                 mb.x = (i * xPosition);
  75.                 mb.create(("mb" + i), buttonName, i, buttonURL);
  76.                 mb.addEventListener(MenuButtonEvent.CLICKED, onMenuButtonClicked);
  77.                
  78.                 this._holder.addChild(mb);
  79.             }
  80.         }
  81.        
  82. //- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
  83.    
  84.        
  85.    
  86. //- EVENT HANDLERS ----------------------------------------------------------------------------------------
  87.    
  88.         /**
  89.          * Reacts when a button is clicked to set all the buttons to their proper state.
  90.          */
  91.         private function onMenuButtonClicked($evt:MenuButtonEvent):void
  92.         {
  93.             for (var i:int = 0; i <this._numButtons; i++)
  94.             {
  95.                 var mb:MenuButton = MenuButton(this._holder.getChildByName("mb" + i));
  96.                
  97.                 if ($evt.params.id == i)
  98.                 {
  99.                     mb.setDisabled();
  100.                 }
  101.                 else
  102.                 {
  103.                     mb.setEnabled();
  104.                 }
  105.             }
  106.         }
  107.    
  108. //- GETTERS & SETTERS -------------------------------------------------------------------------------------
  109.    
  110.        
  111.    
  112. //- HELPERS -----------------------------------------------------------------------------------------------
  113.    
  114.         public override function toString():String
  115.         {
  116.             return "com.reintroducing.menusystem.Main";
  117.         }
  118.    
  119. //- END CLASS ---------------------------------------------------------------------------------------------
  120.     }
  121. }

Here is the updated MenuButton.as file:

PLAIN TEXT
Actionscript:
  1. /**
  2. * @author Matt Przybylski [http://www.reintroducing.com]
  3. * @version 1.0
  4. */
  5.  
  6. package com.reintroducing.menusystem.ui
  7. {
  8.     import flash.display.MovieClip;
  9.     import flash.events.MouseEvent;
  10.     import flash.net.URLRequest;
  11.     import flash.net.navigateToURL;
  12.     import flash.text.TextField;
  13.    
  14.     import com.reintroducing.menusystem.events.MenuButtonEvent;
  15.    
  16.     import gs.TweenLite;
  17.    
  18.     public class MenuButton extends MovieClip
  19.     {
  20. //- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
  21.  
  22.         private var _id:int;
  23.         private var _url:String;
  24.        
  25. //- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
  26.        
  27.         public static const DEFAULT_NAME:String = "com.reintroducing.menusystem.ui.MenuButton";
  28.        
  29.         // instances
  30.         public var bg_mc:MovieClip;
  31.         public var title_txt:TextField;
  32.        
  33. //- CONSTRUCTOR -------------------------------------------------------------------------------------------
  34.    
  35.         public function MenuButton()
  36.         {
  37.             super();
  38.            
  39.             this.init();
  40.         }
  41.  
  42. //- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
  43.        
  44.         private function init():void
  45.         {
  46.             this.buttonMode = true;
  47.             this.mouseChildren = false;
  48.             this.setEnabled();
  49.         }
  50.        
  51.         /**
  52.          * Resets the button to its original state.
  53.          */
  54.         private function reset():void
  55.         {
  56.             TweenLite.to(this.bg_mc, .25, {mcColor: 0x999999});
  57.         }
  58.        
  59.         /**
  60.          * Executed when you mouse over the button.
  61.          */
  62.         private function doMouseOver($evt:MouseEvent):void
  63.         {
  64.             TweenLite.to(this.bg_mc, .25, {mcColor: 0x333333});
  65.         }
  66.        
  67.         /**
  68.          * Executed when you mouse out of the button.
  69.          */
  70.         private function doMouseOut($evt:MouseEvent):void
  71.         {
  72.             this.reset();
  73.         }
  74.        
  75.         /**
  76.          * Executed on release of the button.
  77.          */
  78.         private function doClick($evt:MouseEvent):void
  79.         {
  80.             navigateToURL(new URLRequest(this._url));
  81.            
  82.             this.dispatchEvent(new MenuButtonEvent(MenuButtonEvent.CLICKED, {id: this._id}));
  83.         }
  84.        
  85. //- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
  86.    
  87.         /**
  88.          * Assigns the button a name and ID for later retrieval through events.
  89.          */
  90.         public function create($name:String, $title:String, $id:int, $url:String):void
  91.         {
  92.             this.name       = $name;
  93.             this._id          = $id;
  94.             this.title_txt.text = $title;
  95.             this._url       = $url;
  96.         }
  97.        
  98.         /**
  99.          * Allows the button to be clickable and functional.
  100.          */
  101.         public function setEnabled():void
  102.         {
  103.             this.enabled = true;
  104.             this.reset();
  105.            
  106.             this.addEventListener(MouseEvent.MOUSE_OVER, doMouseOver);
  107.             this.addEventListener(MouseEvent.MOUSE_OUT, doMouseOut);
  108.             this.addEventListener(MouseEvent.CLICK, doClick);
  109.         }
  110.        
  111.         /**
  112.          * Disables the button and kills its events.
  113.          */
  114.         public function setDisabled():void
  115.         {
  116.             this.enabled = false;
  117.            
  118.             this.removeEventListener(MouseEvent.MOUSE_OVER, doMouseOver);
  119.             this.removeEventListener(MouseEvent.MOUSE_OUT, doMouseOut);
  120.             this.removeEventListener(MouseEvent.CLICK, doClick);
  121.         }
  122.    
  123. //- EVENT HANDLERS ----------------------------------------------------------------------------------------
  124.    
  125.        
  126.    
  127. //- GETTERS & SETTERS -------------------------------------------------------------------------------------
  128.    
  129.         public function get id():int
  130.         {
  131.             return this._id;
  132.         }
  133.        
  134.         public function set id($val:int):void
  135.         {
  136.             this._id = $val;
  137.         }
  138.    
  139. //- HELPERS -----------------------------------------------------------------------------------------------
  140.    
  141.         public override function toString():String
  142.         {
  143.             return "com.reintroducing.menusystem.ui.MenuButton";
  144.         }
  145.    
  146. //- END CLASS ---------------------------------------------------------------------------------------------
  147.     }
  148. }

The MenuButtonEvent file has stayed the same so I won't post it for the sake of brevity. If you'd like to see anything else added to this example, let me know as I've probably taken it as far as it will go for the time being.

Tags: , , , ,

AS3: Event Responsive Menu

October 29, 2007 in AS3, FLAs | Show Some Love | | 3 Comments »

View Example
Download Example Files

Normally when I build menus for my projects I usually end up having to keep track of which button is selected and disable it while clicking on another button will disable that one and re-enable the one previously selected. I could build that very quickly in AS2 but have yet to try it out in AS3 so I put together this little example that would demonstrate how I'd do it in the new age. It is made up of three classes:

Main.as

PLAIN TEXT
Actionscript:
  1. /**
  2. * @author Matt Przybylski [http://www.reintroducing.com]
  3. * @version 1.0
  4. */
  5.  
  6. package com.reintroducing.menusystem
  7. {
  8.     import flash.display.Sprite;
  9.    
  10.     import com.reintroducing.menusystem.events.MenuButtonEvent;
  11.     import com.reintroducing.menusystem.ui.MenuButton;
  12.    
  13.     public class Main extends Sprite
  14.     {
  15. //- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
  16.  
  17.         private var _holder:Sprite;
  18.         private var _numButtons:int;
  19.        
  20. //- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
  21.        
  22.         public static const DEFAULT_NAME:String = "com.reintroducing.menusystem.Main";
  23.        
  24. //- CONSTRUCTOR -------------------------------------------------------------------------------------------
  25.    
  26.         public function Main()
  27.         {
  28.             this._numButtons             = 5;
  29.             this._holder                = new Sprite();
  30.             this._holder.x = this._holder.y = 10;
  31.            
  32.             this.addChild(this._holder);
  33.            
  34.             this.createMenu();
  35.         }
  36.        
  37. //- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
  38.        
  39.         /**
  40.          * Lays out the buttons on the stage and initializes them.
  41.          */
  42.         private function createMenu():void
  43.         {
  44.             var xPosition:int = 160;
  45.            
  46.             for (var i:int = 0; i <this._numButtons; i++)
  47.             {
  48.                 var mb:MenuButton = new MenuButton();
  49.                 mb.x = (i * xPosition);
  50.                 mb.create(("mb" + i), i);
  51.                 mb.addEventListener(MenuButtonEvent.CLICKED, onMenuButtonClicked);
  52.                
  53.                 this._holder.addChild(mb);
  54.             }
  55.         }
  56.        
  57. //- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
  58.    
  59.        
  60.    
  61. //- EVENT HANDLERS ----------------------------------------------------------------------------------------
  62.    
  63.         /**
  64.          * Reacts when a button is clicked to set all the buttons to their proper state.
  65.          */
  66.         private function onMenuButtonClicked($evt:MenuButtonEvent):void
  67.         {
  68.             for (var i:int = 0; i <this._numButtons; i++)
  69.             {
  70.                 var mb:MenuButton = MenuButton(this._holder.getChildByName("mb" + i));
  71.                
  72.                 if ($evt.params.id == i)
  73.                 {
  74.                     mb.setDisabled();
  75.                 }
  76.                 else
  77.                 {
  78.                     mb.setEnabled();
  79.                 }
  80.             }
  81.         }
  82.    
  83. //- GETTERS & SETTERS -------------------------------------------------------------------------------------
  84.    
  85.        
  86.