View Demo Preloader App (right click for source view)

The preloader may fly by, so lets first take a look at how this progress bar looks as it is loading the Flex app:

The next screenshot shows the progress as RSLs are being loaded:

Finally the progress of initialization, with a second progress bar:

Creating the Preloader SWC in Flash Pro

In Flash professional we create a custom preloader. In this example there are several layers which the design is created from.
The layer 'prog_bar' and 'initilize_bar" hold shapes that we will use to resize to show progress.
The 'loading text' layer contains some dynamic text that has Character Embedding for upper/lower/numbers.
The layers look like this:

The custom preloader FLA can be found in the example by viewing source.

The FLA preloader is a movie clip and its properties are set for "Export for ActioScript" the "Class" property is set to "PreloaderDisplay" this allows us to have a PreloaderDisplay.swc created when this FLA is published.

In the first frame of the FLA "actions" layer we create the functions to set the two different progress bars:

 
//reset
setMainProgress(0);
setInitalizeProgress(0);
loading_txt.text = "";
 
//function for setting main prgress bar
function setMainProgress(percent:Number):void {
	prog_bar.width = percent * 275;
}
 
//function for setting the initilize bar
function setInitalizeProgress(percent:Number):void {
	initialize_bar.width = percent * 275;
}
 

The final step is to "Publish" the FLA so that the SWC file is create, this SWC will be used in Flash Builder.

Creating the Custom Preloader in Flex 4

The first step is to place the PreloaderDisplay.swc in the "libs" folder, this will make the PreloaderDisplay and its methods available to Flex:

To define a custom preloader we will do this in the Flex application's Application file, we simply specify the preloader class:

 
<s:Application preloader="com.themorphicgroup.preload.Preloader" ...
 

In the Preloader class we will extend "SparkDownloadProgressBar".

The SparkDownloadProgressBar class displays download progress.

From Flex 4 docs: It is used by the Preloader control to provide user feedback while the application is downloading and loading.
The download progress bar displays information about two different phases of the application: the download phase and the initialization phase.

The Preloader.as extends "SparkDownloadProgressBar" and we will use the FLA PreloaderDisplay.swc by creating a variable called "preloaderDisplay":

 
public class Preloader extends SparkDownloadProgressBar {
	private var preloaderDisplay:PreloaderDisplay;
	...
 

To add the PreloaderDisplay we will override the SparkDownloadProgressBar's "createChildren" method, in this method we will create a new PreloaderDisplay and
use the "addChild" method (SparkDownloadProgressBar inherits addChild from DisplayObjectContainer):

 
override protected function createChildren():void
{
	if (!preloaderDisplay) {
		preloaderDisplay = new PreloaderDisplay();
 
		var startX:Number = Math.round((stageWidth - preloaderDisplay.width) / 2);
		var startY:Number = Math.round((stageHeight - preloaderDisplay.height) / 2);
 
		preloaderDisplay.x = startX;
		preloaderDisplay.y = startY;
		addChild(preloaderDisplay);
	}
}
 

There are several methods that we will override so that we can make updates to the PreloaderDisplay.swc.
The rslProgressHandler method will be called each time a RSL is being loaded. We will use this method to set text indicating the current count of RSL being loaded:

 
private var rslBaseText:String = "loading: ";
override protected function rslProgressHandler(evt:RSLEvent):void {
	if (evt.rslIndex && evt.rslTotal) {
		//create text to track the RSLs being loaded
		rslBaseText = "loading RSL " + evt.rslIndex + " of " + evt.rslTotal + ": ";
	}
}
 

The next method we will override is setDownloadProgress. This method indicateds the current download progress. in this method we will set the
PreloaderDisplay.swc main progress bar and set the text:

 
override protected function setDownloadProgress(completed:Number, total:Number):void {
	if (preloaderDisplay) {
		//set the main progress bar inside PreloaderDisplay
		preloaderDisplay.setMainProgress(completed/total);
		//set percetage text to display, if loading RSL the rslBaseText will indicate the number
		setPreloaderLoadingText(rslBaseText + Math.round((completed/total)*100).toString() + "%");
	}
}
 

Finally we will look at overriding setInitProgress, this method indicates the progress of the Flex app as it initializes.
We will set the text in PreloaderDisplay.swc and change the progress of the second initialize progress bar:

 
override protected function setInitProgress(completed:Number, total:Number):void {
	if (preloaderDisplay) {
		//set the initialization progress bar inside PreloaderDisplay
		preloaderDisplay.setInitalizeProgress(completed/total);
		//set loading text
		if (completed > total) {
			setPreloaderLoadingText("almost done");
		} else {
			setPreloaderLoadingText("initializing " + completed + " of " + total);
		}
	}
}
 

This blog entry does not cover every bit of code used in the preloader, so
View Demo Preloader App right click for source view

From: http://bugs.adobe.com/jira/browse/FB-21566

Close Flash Builder 4 beta 2

Delete this folder in your workspace:

\.metadata\.plugins\com.adobe.flexbuilder.codemodel.

Relaunch Flash Builder 4 beta 2

Here is the sample code I showed in the presentation. Rt-click and select View Source for the source.

http://www2.themorphicgroup.com/blog/flashcamp2009/singleton/Singleton_Complete.html
source

http://www2.themorphicgroup.com/blog/flashcamp2009/observer/Observer_Complete.html
source

http://www2.themorphicgroup.com/blog/flashcamp2009/event/Event_Complete.html
source

Should be a good time. If you are in St. Louis and have any interest in Flash, Flex, or Catalyst think about coming.

Tickets still available.

www.flashcampstlouis.com

C:\Program Files\Adobe\Flex Builder 3\FlexBuilder.ini

Here are my settings
###

-vmargs
-Xms512m
-Xmx1024m
-XX:MaxPermSize=256m
-XX:PermSize=64m
-Djava.net.preferIPv4Stack=true

###
-Xms512m (minimum memory allocated for FlexBuilder)
-Xmx1024m (max memory cap for FlexBuilder)

If you happen to have 8GB of ram you might change your settings to this :).

-Xms512m
-Xms4096m

I found a decent work around. I added a non-breaking space to the end of each string and that was enough of a change to get copy, paste, and delete to show up in my context menu. The unicode character for a non-breaking space is 00A0. The syntax looks like this "\u00A0".

elementContextMenu = new ContextMenu();
elementContextMenu.hideBuiltInItems();
 
var cutItem:ContextMenuItem = new ContextMenuItem("Cut\u00A0");
var copyItem:ContextMenuItem = new ContextMenuItem("Copy\u00A0");
var pasteItem:ContextMenuItem = new ContextMenuItem("Paste\u00A0");
 
cutItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onCutItem);
copyItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onCopyItem);
pasteItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onPasteItem);
 
elementContextMenu.customItems.push(cutItem);
elementContextMenu.customItems.push(copyItem);
elementContextMenu.customItems.push(pasteItem);
 
Application.application.contextMenu = elementContextMenu;

Search engines use “spiders” (scripted site crawlers), that runs through the hierarchy paths of your content, looking for patterns and associated links based on text. There are guidelines to be followed when formatting your web pages. Google has these guidelines defined out. This is pretty straight forward for web sites that only consist of text. For Flash/Flex media, it is not so easy. Most of these “spiders” can't index into binary modules.

Recently Google has made strives in solving this issue. They have advanced the ability to index text in flash content. If all of your text content is embedded in your Flash/Flex media, your web content will be found in a search.

The problem is that most flash/flex web applications keep the text content external to the actual application. This allows the ability to change text without recompiling the application. External files can not be properly indexed in search engines alone [UPDATE: As of June 18, Google will index external content - google]. There are techniques to do this in a flash application. Kenny Bunch of Dreamsocket has a great article on Flash SEO.

In a typical Flex application, you may be using deeplinks for paging sections of your application and external text data. I will discuss a technique to improve the search results for Flex applications that have external text content with deeplink functionality. Note: For the most part, I am following Google guidelines.

Example Solution - "My Company"

Let's evaluate the content section of a example flex application. My application has three major sections: Home, About Us, and Clients. The “About Us” section has two sub-section Mission Statement and Company Location. The “Portfolio” section has two subsections as well, “Client List” and “Projects”.

Here is the hierarchy of the "My Company" site:

• Home
• About Us
  • Mission Statement
  • Company Location
• Portfolio
  • Client List
  • Projects

The company site has one page (index.html) that loads the Flex application(swf) and external files (xml, images, video, and stylesheet css). All of the text content for these sections are kept in external XML files.

In essence, we need to break out the sections into html pages. If possible, avoid duplication of content.

• Add a reference to the section in the title tag. This should always be unique on every page.
• The meta description and keyword attributes needs a unique and descriptive text.
• Each page needs to link to each other via a series of anchor html tags.
• Most importantly it needs to contain the particular text content that would pertain to the each page section. This does involve manually copying particular section from the xml to each
  html page, preferably into div tags.

Deeplinks are being used for paging ability. We need to make sure that the deeplink can be changed with the different page sections. Every page will reference the root of the site with the particular deeplink moniker. This way each page will open the correct section when it is found in the search. I will use javascript to direct the page deeplink back to the relative root.

document.location.href = "/#portfolio";

The search engine should ignore the javascript and parse or read the text content, the basis of the search text.

"My Company" example illustrates this functionality (right click application page to see and download source). SwfObject is used to reference the swf. The meta description and keywords are very general examples. Your project may involve much more thought into what information is used. It needs to be very detailed and unique.

With my "My Company" solution, I created html pages based on SEO concepts that can reference the Flex application. It should work as if nothing changed. The goal is to reference particular text content of web application, improving the search ability of the web site.

This solution does have one drawback. The text content is not centralized. You anticipate constant (monthly or weekly) changes are made to the external data. It will need to be changed in the particular page that references that particular content.

So a further discussion would be: Could we dynamically generate html pages that with the external data used? Of course. One idea is to use a server-side language like php or ruby to generate the site like we did with the static html solution.

Verification and Sitemap

To verify that your site will be viewed as expected by search engines, it should be viewable regardless of having the flash player installed or javascript enabled. The best way to check this is to view the site in a barebones a text-mode web browser like Lynx. This is a tool I used to check this: lynx viewer

Next, you will need to create a sitemap for referencing the content of your web application. For the "My Company" site I would created a sitemap with all of the html pages I found a great resource that automates the process: sitemaps.org. It also has some great information about what the sitemap consists of and what each attribute means. For the "My Company" site, I would create a sitemap with all of the html pages referenced.

Now submit your sitemap to a popular search engines (you may need to create an account). It may take up to a week to see real results.
Yahoo: Site Explorer
Google Web master tools: Webmasters

Note: The usage of these sources are beyond the scope of this article. I have found that the google webmaster tools are great for monitoring the progress of this functionality.

Summary

In this article, I gave some tips and a possible solution for getting your flex application noticed by the most popular search engines. It does take some trial and error to see results. In one project, it took some weeks of tweeking to the content to find the right results. I hope this article is helpful to you.

Let's walk though a solution for building a Flash ad (in AS 3.0) with a clickTag. Note: In most cases, ad companies and developers are required to use AS 2.0. There are plenty of great articles that discuss this implementation. There is an adobe article that is widely used Designer's Guide: Building Macromedia Flash Banners with Tracking Capabilities. This article will not discuss this how to create ads with clickTags using AS 2.0 .

The ad manager will also want to prevent the click-through target from being blocked by any
popup blockers. This usually the case with certain web browsers like IE 7.0+. Note: At this
time there is a new Flash player version out (version 11). I don't know if this issue is fixed.

So we have three requirements …

• Get a reference to the clickTag variable

• Build your web ad with AS 3.0

• Handle the issue with the Popup Blockers

Here is an example of code for satisfying these requirements.

html embed parameter
...
<param name="FlashVars" value="clickTag=http://www.adserver.com/target.php?track=1123" />
...

actionscript code

package
{

import flash.external.ExternalInterface;
import flash.net.navigateToURL;
import flash.net.URLRequest;

public class Main extends MovieClip
{
  private var paramList:Object;
  public var clickTag:String = ""; 

  function Main()
  {
    paramList = this.root.loaderInfo.parameters;

    if(paramList["clickTag"] != null)
    {
        clickTag = paramList["clickTag"];
    }

    clickTagBtn.addEventListener(MouseEvent.CLICK, onClick);

  } 

  function onClick( event:MouseEvent ):void
  {
    if( clickTag != ""  )
    {
      var req:URLRequest = new URLRequest(clickTag);

      if ( !ExternalInterface.available )
      {
        navigateToURL(req, "_blank");
      }
      else
      {
        var strUserAgent:String =
          String(ExternalInterface.call(
		"function() {return navigator.userAgent;}"
		)).toLowerCase();

        if ( strUserAgent.indexOf("firefox") != -1 )
        {
          ExternalInterface.call( "window.open", req.url, "_blank" );
        }
        else
        {
          if( strUserAgent.indexOf("msie") != -1 &&
            uint(strUserAgent.substr(strUserAgent.indexOf("msie") + 5, 3)) >= 7 )
          {
            ExternalInterface.call("window.open", req.url, "_top");
          }
          else
          {
            navigateToURL(req, "_top");
          }
        }
      }
    }

  }

}

}

I am assuming that you are using Flash CS 3 or greater and that Main is your document class for your fla project.

First I need to get the get the value of the clickTag.

• Reference the loaderInfo.parameters as an Object and then reference the key value of clickTag.

• The character's case is very important. Letter case is important, otherwise you won't be able to reference this value.

The key to handling the issue with popup blockers is to use a little javascript, with the help of External interface.

• If ExternalInterface is not available, use NavigateToUrl directly.

• Get the userAgent (browser) information via javascript. I use this info to handle browser different quirks.

• Call the javascript method window.open to open the link specified by the clickTag value. It is absolutely necessary to enable AllowScripting for “sameDomain” or “always” . Otherwise a security sandbox error will display.

This solution should get you out of most jams in regards to ClickTag functionality using AS 3.0 .

Below are 4 examples of setting 2 values with same parameter name. The first example results in 1 parameter. The rest result in 2 parameters as expected.

 
// results in 1 parameter
var urlVarsA:URLVariables = new URLVariables();
urlVarsA["foo"] = "Hello";
urlVarsA["foo"] = "World!"; // this overwrites the previous
trace(urlVarsA); // foo=World%21
 
// results in 2 parameters as expected
var urlVarsB:URLVariables = new URLVariables();
urlVarsB.decode("foo=Hello");
urlVarsB.decode("foo=World!"); // decode() has logic to detect existing params
trace(urlVarsB); // foo=Hello&foo=World%21
 
// results in 2 parameters as expected
var urlVarsC:URLVariables = new URLVariables("foo=Hello&foo=World!");
trace(urlVarsC); // foo=Hello&foo=World%21
 
// results in 2 parameters as expected
var urlVarsD:URLVariables = new URLVariables();
urlVarsD["foo"] = ["Hello", "World!"]; // Arrays are special to URLVariables
trace(urlVarsD); // foo=Hello&foo=World%21
 

I would suggest creating a unique local connection name between your applications (swfs). Check out Joey’s blog on this task - unique local connection names. In this project summary, I will not reference a unique connection name.

Here is the set up… In the first swf, I’ve set up a LC object (transSendLC) and an image object (imgOriginal). The second app (swf) somewhat mimics the first app (swf). The only difference is that I created a custom class, inheriting from LC. I’ve added a method for receiving the ByteArray and a Bitmap object. The bitmap object can be used to bind to the Image source. Note: You don’t need to create a custom class. I found that it made sense for my particular flex project.

Within my first app (swf), I have supplied an image (imgOriginal). Now with I need to chop up the data and send it to the second app (swf).

Example Code:
...
var width:Number = imgOriginal.width
var height:Number = imgOriginal.height;
var bytes:ByteArray =
   imgOriginal.bitmapData.getPixels(new Rectangle(0, 0, width, height))

var tempByteArray:ByteArray;

// limit byteArray to 40K - localconnection limit
var byteLimit:uint = uint(40000);

if(bytes.length > byteLimit){

   var currentSize:uint = byteLimit;
   var position:uint = 0;
   var totalSize:uint = 0;

   while(totalSize < bytes.length){
      tempByteArray = new ByteArray();
      tempByteArray.length = currentSize;

      // Write bytes from position to current size
      tempByteArray.writeBytes(bytes, position, currentSize);

      //send ByteArray chunk
      transSendLC.send(uniqueLCName, "sendSnapShot",
              tempByteArray, bytes.length, width, height);

      //get current total and get next position
      totalSize = totalSize + tempByteArray.length;
      position = totalSize;

      //set current size based on limit
      currentSize = bytes.length - totalSize;
      if(currentSize >  byteLimit){
         currentSize = byteLimit;
      }
  }
  else{
     //less than limit - send Byte Array
     bytes.writeBytes(tempByteArray, 0, uint(bytes.length));
     imgLCSend.send(uniqueLCName, "sendByteArrayData",
                 tempByteArray, bytes.length, width, height);
  }
...

Next in my second app (swf), I need to build the sendCopy method within my custom object (inheriting from LC). Note: It is assumed that you have logic to connect the shared local connection name, a Bitmap and a ByteArray object in your custom class.

Example Code:
public function sendByteArrayData(bytes:Object, bytesLength:Number,
                              width:Number, height:Number):void {
   var byteArray:ByteArray = bytes as ByteArray;

   //New ByteArray size
   if(byteArraySnapShot == null){
      byteArraySnapShot = new ByteArray();
      byteArraySnapShot.length = bytesLength;
      byteArraySnapShot.position = 0;
   }

   //Write byte array
   byteArraySnapShot.writeBytes(byteArray);

   //Once length/size is filled based on total bytes create bitmap
   if(byteArraySnapShot.bytesAvailable == 0){
      var bitmapDataSnapShot:BitmapData = new BitmapData(width, height);
      byteArraySnapShot.position = 0;
      bitmapDataSnapShot.setPixels(new Rectangle(0, 0, width, height),
            byteArraySnapShot);

      var bitmapSnapShot:Bitmap = new Bitmap(bitmapDataSnapShot);
      snapShotImg = bitmapSnapShot;

      byteArraySnapShot = null;
   }

}

There perhaps a few ways to achieve the functionality. My purpose here is to show the process of reading and writing ByteArray in a real world application set.

Step 1: (FB3) Create a new ActionScript project in Flex Builder 3 and give it a name.

Step 2: (Flash CS3) Make a new Flash CS3 project, save it in the SAME DIRECTORY as the AS3 project.

Step 3: (Flash CS3) Open up File --> Publish Settings in your Flash CS3 project and select "Permit debugging".

Step 4: (Flash CS3) Click on the Settings button and enter the name of your main AS3 class. If your main AS3 class is not in the same directory as the FLA then add the directory as a Classplath. Click the green check mark to validate the class location.

Step 5: (FB3) Write a bit of code and put in a break point.

Step 6: (Flash CS3) Compile a debug version of the SWF. The breakpoint you entered in FB3 will be compiled into the SWF. After it compiles and opens in the Flash CS3 debugger just close it. The SWF should have been compiled into the root of your FB3 project. I had to quit FB3 and reopen it for the SWF to show up.

Step 7: (FB3) Make a new debugging profile that points directly to the Flash CS3 complied SWF (NOT THE FB3 SWF in the bin directory).

Step 8: (FB3) Debug with your new profile.

If the debugger times-out and does not connect you may need to configure the debugger setting in your Flash Player. Do this by rt-clicking on the SWF and selecting Debugger.

This workflow allows for you to use the code hinting and debugger in FlexBuilder 3 even when compiling in Flash CS3. Let me know if you run into any problems.

Special thanks to Melih Elibol who helped me with some of these steps :).

--jason