Saturday, December 24, 2011

Flex: Changing the color of the background color of your Pop Ups

I have encountered situations when there's a need to have more than 1 type of background color in your Flex Application. Some Popups might need a black background with 50% opacity some might requires a background with 0% opacity, etc. One of the easiest way to change the background color of the popup will be the step of changing the global styles, but as your Flex Application gets more and more complex, manipulating with the global styles wouldn't be a recommended way of doing things. Hence, I'm going to show you another way of manipulating the background color of your popup today.

The following would be the source code of my main Application.


 
 
  global{
   modalTransparency:0;
   modalTransparencyBlur:0;
   modalTransparencyColor:0;
   modalTransparencyDuration:100;
  }
 
 
 


View that contains some buttons


 
 
  
 
 
 
 


Here comes the important part.
This would be my class that acts like a Pop Up background.
package com.popup
{
 import mx.containers.Canvas;
 import mx.core.Application;
 
 //This class acts as the background in the PopUpManager CLass
 public class PopUpBackground extends Canvas
 {
  public function PopUpBackground()
  {
   super();
   this.height = Application.application.height;
   this.width = Application.application.width;
   this.validateNow();
  }
 }
}

This would be my main class that will be replacing the use of PopUpManager.
package com.popup
{
 import flash.display.DisplayObject;
 
 import mx.collections.ArrayCollection;
 import mx.core.Application;
 import mx.core.IFlexDisplayObject;
 import mx.managers.PopUpManager;

 public class PopUpOverlay
 {
  /** Only one instance of the PopUpOverlay allowed **/
  private static var instance:PopUpOverlay;
  //This is used to store the various Pop Ups
  private var arrayPopupList:ArrayCollection = new ArrayCollection();
  
  public function PopUpOverlay(singletonEnforcer:SingletonEnforcer)
  {
  }
  
  public static function getInstance():PopUpOverlay
  {
   //Create an instance of PopUpOverlay
   if(instance == null) { 
    instance = new PopUpOverlay(new SingletonEnforcer()); 
   } 
   return instance; 
  }
  
  public function createPopUp(parent:DisplayObject, className:Class
    , modal:Boolean = true, backgroundColor:uint = 0xFFFFFF
    , alpha:Number = 0.5):Object
  {
   //If a parent view is not specified, create the 
   //popup on the main Application
   if(parent == null)
   {
    parent = Application.application as DisplayObject;
   }
   //Create the background of the Pop Up using PopUpBackground first
   var tempDisplayObject:* = PopUpManager.createPopUp(parent,PopUpBackground,modal);
   tempDisplayObject.setStyle("backgroundColor", backgroundColor);
   tempDisplayObject.setStyle("backgroundAlpha", alpha);
   this.arrayPopupList.addItem(tempDisplayObject);
   
   //Next, Create the real Pop Up specified by the className
   tempDisplayObject = PopUpManager.createPopUp(parent,className,modal);
   PopUpManager.centerPopUp(tempDisplayObject);
   this.arrayPopupList.addItem(tempDisplayObject);
   return tempDisplayObject;
  }
  
  public function removePopUp():void
  {
   //Remove the create Pop Up View first
   if(this.arrayPopupList.length > 0)
   {
    var tempDisplayObject:IFlexDisplayObject = this.arrayPopupList.removeItemAt(this.arrayPopupList.length - 1) as IFlexDisplayObject;
    PopUpManager.removePopUp(tempDisplayObject);
   }
   //Followed by the background
   if(this.arrayPopupList.length > 0)
   {
    tempDisplayObject = this.arrayPopupList.removeItemAt(this.arrayPopupList.length - 1) as IFlexDisplayObject;
    PopUpManager.removePopUp(tempDisplayObject);
   }
  }
 } 
}
class SingletonEnforcer{};   

* Click here to view the demo of this example.
^ Click here for the source files of this demo.

Friday, December 16, 2011

Flash: Playing with preloaders

I remember the days where I was trying to work around preloaders and trying to force them to display a numerical status of 0 - 100%. Especially, when you are using a in-house server and it just happens that your server is using the same connection as your laptop your desktop, you will never get to see your preloader running. Especially when there are more and more flash sites out there with interesting interactive preloaders, it would be nice to have a COOL preloader up and running. By the way, here's my solution to tackle around and ensure that you will be getting a preloader all the time.

By the way I will be working base on my demos a few weeks ago.

Here's the source file for the preloader.
package com.stretchingDemo
{
 import com.util.preloader.*;
 
 import flash.display.MovieClip;
 import flash.events.Event;
 
 public class Index extends MovieClip
 {
  //To preload your preloader file, which is this file.
  private var tempMainPreloader:MainPreloader;
  //To preload your content file
  private var tempSectionPreloader:SectionPreloader;
  private var _preloader_mc:MovieClip;
  
  //Variable to store your current preloading status 
  private var _preloadNum:Number = 0;
  //Variable to store the highest numerical number to display
  private var _maxPreloadNum:Number = 0;
  
  public function Index():void
  {
   //Start preloading this file
   tempMainPreloader = new MainPreloader(this,5);
   _preloader_mc = this.getChildByName("preloader_mc") as MovieClip;
   this.addEventListener(Event.ENTER_FRAME, progress0Handler);
  }
  
  //function executed when the preloader had finish loading
  private function progress0Handler(event:Event):void
  {   
   var str:String = String((tempMainPreloader.currentProgress)); 
   //Update your text field to display the loading status
   this._preloader_mc.preloader_txt.text = str;
   
   if(tempMainPreloader.currentProgress == tempMainPreloader.maxProgress){ 
    this.removeEventListener(Event.ENTER_FRAME, progress0Handler); 
    loadSubContent(); 
   }
  } 
  
  //function to load the main swf
  public function loadSubContent():void
  {
   //Grab the main swf that you want to load.
   //Usually I will call the prelaoder file 'load_XXX' 
   //where 'XXX' will be the filename of the main swf file. 
   //On top of this, this will help you to structure your 
   //folders properly too. As you can see will my swf files
   //are in the swf folder and my html file is on the root folder.
   var tempStr = String(this.root.loaderInfo.loaderURL).replace(/%5F/gi,"_");
   var tempArray = tempStr.split("load_");
   this.addEventListener(Event.ENTER_FRAME, preloadContentEvent);   
   tempSectionPreloader = new SectionPreloader(tempArray[0] + tempArray[1] ,95);
   tempSectionPreloader.addEventListener(
SectionPreloader.SectionContentLoading, progressHandler2);
  }
  
  //function to update the numerical count on the preloader field
  //And show the main content when the numerical count reaches 100
  private function preloadContentEvent(event:Event):void
  {
   if(_preloadNum < _maxPreloadNum)
   {
    _preloadNum ++;
   }
   this._preloader_mc.preloader_txt.text = Number(_preloadNum + tempMainPreloader.currentProgress);
   if(_preloadNum == _maxPreloadNum && _maxPreloadNum == tempSectionPreloader.maxProgress && tempSectionPreloader.getContent() != null){ 
    tempSectionPreloader.removeEventListener(
SectionPreloader.SectionContentLoading, progressHandler2);
    this.removeEventListener(Event.ENTER_FRAME, preloadContentEvent);  
    this.removeChild(_preloader_mc);
    this.addChild(tempSectionPreloader);
   } 
  }
  
  //function that will be called to update the progress of the loading 
  //of the file when the main file was loading and finish loading
  private function progressHandler2(evt:Event){ 
   _maxPreloadNum = tempSectionPreloader.currentProgress;
  }  
 }
}
* Click here to view the previous example.
^ Click here to view the demo of this example.
~ Click here for the source files of this demo.

Thursday, December 8, 2011

Flash: Disabling default scaling of your flash file

I was browsing through my previous post and I was looking at the demo that I had created. There seems to be something amiss in the example that I had created. After taking a good look at it, I realised that there were white borders appearing on the left and right side of my flash file. and on top of it, the text of the Google Map Component appears to be very blur. I also realise that all of the above were caused by the default property of scaling the flash file. Hence, I have thrown in a fix to it and everything looks much better now. :)

I only make a minor change into the html file and the following would be the source file for the html file.
<html>
 <head>
<style type="text/css">
<!--
html{height:100%}
body {margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}
#flashContent {width:100%;height:100%;}
-->
</style>
    
   <!-- Include support librarys first -->  
  <script type="text/javascript" src="jsScript/swfobject.js"></script>
  <script type="text/javascript" src="jsScript/swfforcesize.js"></script>      
  <script type="text/javascript" src="jsScript/swfaddress.js?tracker=null"></script>    


  </head>
  <body>
    <div id="fb-root"></div>
    <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
    <tr><td align="center">
    <div id="flashContent">
         <h1>You need at least Flash Player 10.0 to view this page.</h1>
                <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
    </div>
  <script type="text/javascript">
   function createSWF(){
    var now=new Date();
    now = Date.UTC(now.getYear(),now.getMonth(),now.getDate(),now.getHours(),now.getMinutes(),now.getSeconds());
    var swfURL = "swf/Main.swf?date=" + now;
    var flashvars = {};
    //Remove default scaling of the flash file
    var params = {scale :"noscale"};
    var attributes = {};
    attributes.name = "flashContent";
    swfobject.embedSWF(swfURL, "flashContent", "100%", "100%", "10.0.2", null, flashvars, params, attributes);    
    swfobject.addLoadEvent(function(){
     var obj = document.getElementById("flashContent");
     if(obj){
      var forcesize = new SWFForceSize(obj, 800, 600);
      forcesize.onLoadDiv();
     }
    })
   }
   createSWF();
  </script>    
     </td></tr></table>  
</body>
</html>
* Click here to view the previous example.
^ Click here to view the demo of this example.
~ Click here for the source files of this demo.

By the way, if you are adding or embedding a Flash file into a webpage or website, I would highly recommend you to use the Javascript classes known as SWFObject to add or embed your Flash file into a webpage or website.

- Click here to find out more about SWFObject.