fix_content_assist.bat

@echo off
REM The following will delete the prefs file in Flash Builder 4 Beta 2 that caused content assist to break
RMDIR C:\work\dev\morphic\myproject\trunk\code\as_fb4\.metadata\.plugins\com.adobe.flexbuilder.codemodel /s /q


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

What you will need:

- A webserver or hosting account that can run PHP
- A Facebook account
- The Facebook Developer app installed in your Facebook account
- If your Flash app needs to load xml or images from your hosted domain, access to your crossdomain xml file at hosted domain

Part 1 Setup your Flash Application on your Server

1. Create a directory on your web server for all of your files. For TMG, I created a directory "facebook" and inside that folder I created another folder "portfolio."

2. Upload your Flash app swf and its supporting files. In my case, since my app was built with Flex this consisted of my images and xml assets folder, the generated HTML file, and the compiled swf for my app.

3. Create a "tab" folder. In the "portfolio" folder I previously created, I added a "tab" folder. We need this folder for when a user makes your Facebook app into a tab. When an app is made into a tab, Facebook will want a different set of files to use. This is because developers sometimes want their apps to look or behave differently if their app is implemented as a tab.

4. Copy the files Facebook should use when your application gets implemented as a tab. In my case, I just copied the same files from the "portfolio" directory into the "tab" directory.

Part 2 Setup your Application in Facebook

1. Click on the "Developer" app button under the "Applications" button in your Facebook control bar at the bottom of the page.

2. Click "Set Up New Application" in the upper right of the Developer page.

3. Type in your Application name, accept the Facebook Terms, and click "Save Changes."

4. You will now be taken to the "Basic" tab of your application. In this tab, you can edit the Application Name, Description, Icon/Logo, Developer Contact Email, and auxilary URLs for your app. For our interactive portfolio, we just updated our description and icon/logo. When done, click "Save Changes."

5. Next click on "Authentication" on the left. Be sure to check "Users" and "Facebook Pages." For the Post-Authorize and Post-Remove Callback URLs, enter the following:
http://www2.themorphicgroup.com/{the directory your swf is hosted at on your sever}/index.php

For the TMG portfolio app it is:

http://www2.themorphicgroup.com/facebook/portfolio/index.php

Click "Save Changes" when you are done.

6. To setup our tab configuration, click "Profiles" in the left menu. Enter in your Tab Name and tab URL. For example, we entered "TMG Portfolio" as the tab name and "tab/tab.php" for the "Tab URL." The "Tab URL" field basically tells Facebook where to find the files to use for the tab. Click "Save Changes."

7. Click "Canvas" on the menu to the left. Enter your "Canvas Page URL" (ex: "tmgportfolio".) Next, enter the "Canvas Callback URL" for your app. This should be the full URL path to where your Flash app resides. For the TMG Portfolio app it is:

http://www2.themorphicgroup.com/facebook/portfolio/

8. Make sure "IFrame" is selected for "Render Method" and then click "Save Changes."

Part 3 Setup the PHP on your Server

1. Click "Back to My Applications" at the top of the Developer UI.

2. Click "Download the Client Library" link at the bottom of the Developer UI. Once download, extract the files and then upload them to your Flash app's web directory. For the TMG app this directory was:
/facebook/portfolio/

3. Click on the "example code" link three quarters of the way down the page. Follow Step 2: Create an "index.php" File in the "Quick Creation Guide" popup.

4. Modify the index.php file for your Flash app. For TMG Portfolio app this is the only PHP I had:

<?php
// Copyright 2007 Facebook Corp. All Rights Reserved.
//
// Application: The Morphic Group Portfolio
// File: 'index.php'
// This is a sample skeleton for your application.
//

require_once 'facebook.php';

$appapikey = '#########################';
$appsecret = '##########################';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->require_login();

?>

After the PHP block, I cut and pasted in the HTML for my Flash app that was generated by Flex. Note: I removed the api key and secret for privacy reason.

5. Create your tab.php file. This will be the PHP that will be used to render the tab version of your applicaiton. For our application, this is only one line:
<fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;" swfsrc='http://www2.themorphicgroup.com/facebook/portfolio/TMG_FB_Portfolio.swf' imgsrc='http://www2.themorphicgroup.com/facebook/portfolio/fbSplash.jpg' width='600' height='570' />

FBML is a markup language that Facebook uses to render apps. In this example note that we specify an "imgsrc" attribute in addition to the "swfsrc" attribute. The image specified is used as a splash graphic of sorts, because a Flash swf in a tab is not activated until a user clicks on it.

Part 4 Test and Implement Application

1. Click on the link under "Step 3: Test Your Application" in the "Quick Creation Guide" popup, or you can go to your canvas URL directly (ex: http://apps.facebook.com/tmgportfolio.)

2. You should now see your application running in Facebook.

3. Go back to your application's page in "My Applications" and click on "View Application Profile" in the menu on the right.

4. Once on the application's profile page, click "More" in the menu to the left. You should see an option "Add to my Page." After clicking, you will be asked what page you would like this to be added to.

5. After selecting the appropriate page, your application should now be visible as a tab.

There you have it. If all went well and I didn't miss anything in this tutorial, you should now have a cooler Facebook page. If there is anything I missed, or if you run into any issues that aren't covered here, please leave a comment and I'll update this blog post.

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;

With these limitations, it seems like Catalyst is limited to prototyping. Subsequently the burden of converting a design to a functioning application and implementing design revisions still predominately rests on the shoulders of the developer.

After working with Catalyst and Flash Builder for the past couple of days, I think I have a process in place that keeps Catalyst involved in the course of a production cycle. With these tips and tricks, you should be able to frequently reimport a Catalyst project and have your Flash Builder project update without having to worry about the aforementioned pitfalls of code getting lost/overwritten.

Keep your Catalyst project flat.

What do I mean by "flat?" When I first started working with Catalyst, I created complex components within complex components. For example, I would create a screen component. Then inside that screen component, I would create a panel component. Inside that panel component I would create a button. This may seem natural and a great way to organize your UI elements, but because you currently cannot declare what the "id" attribute of a component is in Catalyst there isn't a way for you to do something like put a click handler on your button without going into that panel component and adding it in the code with Flash Builder. This, as I mentioned earlier, voids your warranty with Catalyst. So how can you avoid this situation?

Keep all of your components on the root layer of your project.

Avoid having components embedded in components.

If you do this, when you import your Catalyst project into Flash Builder you'll be able pick and choose what components you want to use and where you will want to use them.

Think in terms of skins and not components.

When I say "skin," I do not mean a Spark Skin in the strictest sense. This is because Catalyst can only declare a component as being a Button, TextInput, DataList, or a Custom Component. Hopefully, Adobe will add this feature in a future beta. In the meantime, I tend to create custom components to act as backgrounds and other parts for my Flash Builder components. (I will demonstrate how to execute this later in the post.)

Be sure to give good names to your Catalyst components.

As you build custom components, be sure to go into the library panel for your project in Catalyst and change the names to something more meaningful than "CustomComponent1."

Don't touch the components from Catalyst after importing them into Flash Builder.

By default, Catalyst puts all of your custom components in a "components" directory. If you select "code" from the view options in the upper right, you can see this directory structure. When you create a new Flex project from your Catalyst fxp file or import it into an existing Flex project, you will also see this folder. Do not touch or modify the code of the components in this directory. If you do, do so at your own risk. Just keep in mind that all of your code in this components directory will get overwritten with a later import.

Note: I tried changing this folder structure in code view of Catalyst, but it seems to break the design view of Catalyst.

Implement Catalyst custom components as "skins."

Here's a mxml component I created in Flash Builder called MyPanel.mxml that uses two custom components I created in Catalyst:

 
<s:Group
     xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo"
     width="100%"
     height="100%"
     xmlns:components="components.*">
 
     <s:layout>
          <s:BasicLayout/>
     </s:layout>
     <components:MyCatalystPanelBG id="myPanelBG"/>
     <components:MyCatalystHeaderBG id="myPanelHeaderBG" left="5" top="5"/>
</s:Group>
 

By using BasicLayout I can overlap these elements and position them exactly where I want. To add the actual contents of this panel (like buttons, textinputs, lists, etc...) I just add them after the two custom Catalyst components like so:

 
<s:Group
     xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo"
     width="100%"
     height="100%"
     xmlns:components="components.*">
 
     <s:layout>
          <s:BasicLayout/>
     </s:layout>
 
     <components:MyCatalystPanelBG id="myPanelBG"/>
     <components:MyCatalystHeaderBG id="myPanelHeaderBG" left="5" top="5"/>
 
     <s:TextInput
          id="searchTextInput"
          right="7"
          text="Enter search criteria here"
          y="7"
     />
     <s:List
          id="itemsList"
          width="100%" height="100%"
          top="40"
          left="10"
          right="10"
          bottom="10"
 
          />
 
</s:Group>
 

The beauty with this approach is that if something changes in the Catalyst project, I can import it again without having to worry about losing the business code I have written in Flash Builder.

Use mxmlContent to make skins automatically resize.

You may have noticed in Catalyst you can only declare the height and width of elements as fixed numbers and not percentages. This may be suitable when creating a prototype, but a good Flex app needs to be able to resize as browser height and widths change. The solution? With the new Spark Group component there is a property called "mxmlContent" that is an array of all of the visible children of the component. How do we use this? Let's say the mxml for the component MyCatalystPanelBG looks like this:

 
<s:Group xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:components="components.*">
     <s:Rect y="0.5" height="700" radiusX="10" width="238" x="0.5" radiusY="10" d:userLabel="PanelBG">
          <s:stroke>
               <s:SolidColorStroke weight="1" caps="none" joints="miter" miterLimit="4" color="#808080"/>
          </s:stroke>
          <s:fill>
               <s:LinearGradient rotation="90">
                    <s:GradientEntry color="#ffffff" alpha="1.0" ratio="0"/>
                    <s:GradientEntry color="#d8d8d8" alpha="1.0" ratio="1"/>
               </s:LinearGradient>
          </s:fill>
     </s:Rect>
</s:Group>
 

We can make this background scale with our panel component by doing the following:

Add a "creationComplete" handler in MyPanel.mxml.

 
<s:Group
     xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo"
     width="100%"
     height="100%"
     xmlns:components="components.*"
     creationComplete="onCC()">
 
          <fx:Script>
          <![CDATA[
               import spark.primitives.Rect;
               private function onCC():void{
                    var r:Rect = myPanelBG.mxmlContent[0] as Rect;
                    r.top = 0;
                    r.left = 0;
                    r.right=0;
                    r.bottom=0;
               }
           ]]>
     </fx:Script>
 

Also be sure to set the height and width of the "myPanelBG" to 100%.

 
<components:MyCatalystPanelBG id="myPanelBG" width="100%" height="100%"/>
 

The mxmlContent property is nice in that you don't have to worry about looping through sub children like you do with "getChildAt(i)" to get to what you want. This line of code basically says "get the first content item which is a rectangle element and set its right, top, bottom, and left properties to 0."

NOTE: This hack is very dependent that the order of elements don't change in your Catalyst components. Whenever updating these components you may need to check to see if the structure has changed in these components. You could do something like have a loop that goes through all of the items in mxmlContent and changes these properties on any Rects.

To bind strings to text items in a Catalyst custom component, use BindUtil.

Let's say you have a RichText component inside your header "skin:"

 
<s:Group xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt">
     <s:Rect y="0.5" height="23" radiusX="5" width="737" x="0.5" radiusY="5" d:userLabel="Header BG">
          <s:fill>
               <s:LinearGradient rotation="90">
                    <s:GradientEntry color="#bf0000" alpha="1.0" ratio="0"/>
                    <s:GradientEntry color="#7f0000" alpha="1.0" ratio="1"/>
               </s:LinearGradient>
          </s:fill>
          <s:stroke>
               <s:SolidColorStroke color="#7f0000" caps="none" joints="miter" miterLimit="4" weight="1"/>
          </s:stroke>
     </s:Rect>
     <s:RichText y="5" color="#ffffff" x="7" fontSize="17" fontFamily="Arial" fontWeight="bold" d:userLabel="Title"/>
</s:Group>
 

To bind the RichText component to a property in MyPanel.mxml do the following.

Add a title variable to MyPanel.mxml:

 
public var title:String = "My Panel Title"
 

In the creation complete handler add the following:

 
BindingUtils.bindProperty(myPanelHeaderBG.mxmlContent[1], "text", this, "title");
 

In this scenario, the RichText component is the second item hence the "mxmlContent[1]." That's all you need.

To manage your Catalyst component's state bind it to your Flash Builder component's state.

Let's say you want your "skin" component to have it's state mirror your component that you've written in Flash Builder. To do this all you have to do is this:

 
<components:MyCatalystPanelBG id="myPanelBG" currentState="{this.currentState}"/>
 

Note: You need to be sure that you've created all of the necessary states in Catalyst for your skin.

Make your bitmap artwork in Catalyst custom components

This will make managing and swapping out bitmaps much easier as your app's design evolves.

Summary

That should basically do it. A lot of what I have prescribed in here is a bit of a hack until Adobe expands Catalyst's abilities beyond prototyping. However, in the meantime this is still a workable solution to leverage Catalysts abilities in your production phase of your project.

The main focus of this three day convention was the presentations and sessions on a variety of topics such as pixel manipulation, animation, programing design patterns, accessibility, broadcast media, sound, and video. What comes to mind are all of the tasty tidbits of knowledge smoothly gulped down like a frosty IPA.

Day one started out with a series of workshops. My workshop of choice was Papervision 3D presented by John Grden and Andy Zupko. The first half with John was a great overview of basics. The next half included the advanced and new features of PV3D. John and Andy kept a steady pace making sure that the attendees were involved throughout in the session. I was most impressed with the new amazing features of layers and effects. Keep in mind that this was only a day workshop that is covered in two days.
Good job guys.

The next two days consisted of breakout sessions and keynote presentations. Unfortunately
I could not attend all of these presentations. From what I've heard from the attendees,
everyone was pleased with the content presented throughout the conference.

Briefly... I will go though some of the session I did attend:

• Building Social applications with Christophe Conraets was great eye opener to projects you can do with Actionscript API for Facebook and Adobe Flash Collaboration Service (formerly named "Cocomo"):.
• Joa Ebert presented some great tools (including Hobnox Open Source) and development disciplines.
• Every time I attend a session related to Big Spaceship, I'm always entertained as well has inspired. Jamie Kosoy gave us a backstage look at the process of Big Spaceship... Very cool. From Ten fundamentals of the process, my favorite was number 6: Buy the developer Whiskey! … indeed … (Make mine Bushmills, Sam).
• Dr. Woohow gave an exceptional presentation of mixing it up with applications to create
  some amazing visual landscapes.
• Doug Marttilla attempted to go through ten design patterns within an hour and succeeded. By presenting his own insight into each pattern, he gave an overall good presentation. You rock!
• Who couldn't learn a thing or two about video production from a guy like Robert Reinhardt, A true innovator. It was a power packed session. He's got a really great project coming up - VideoRX.

The bigger presentations at the Castle were outstanding even with a ruckus beer festival going on. Grant Skinner… Mark Anders… Andre Michelle... Gmunk... Keith Peters… Chuck Freedman … Mario Klingerman and of course Hoss Gifford. (I may have missed a few presentations... my apologies)

Of course... there were the parties and beer tastings at the end of each day at The Castle.
This was challenging place to incorporate speakers on stage with the combination of socializing,
beer and food. Unlike most of the conferences there was better chance to meet and talk to more people in this forum. Maybe it was added element of beer. It all seemed to work out well. I don't
think anyone was thrown out for rude behavior ... (Todd ?).

Favorite events: (Day 2) The Flash is Right with Host Philip Kerman and (Day 3) Toussaint and the China Band

The convergence of learning, drinking, and hobnobbing for three days was a success for the organizers and partners. All who attended were treated to the best talent, not to mention some
great micro-beers. Special shout out to the Park Plaza Hotel- great venue.

Having gone to a few out of town conferences on Flash, design and development, I was happy
and proud that this one was held in my own backyard, Boston.

Cheers!

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
 

What is Ribbit? It is an application framework that allows you to interact with telephone networks. You can basically send text message and make phone calls to mobile and regular phones. Right now, you can a request Ribbit account to use applications that utilize this platform. The Ribbit legal info can be found here. (For this blog, I am going to assume that you are a developer who is or will be using this platform for your application. You can get an account here.)

The concept was straight forward. Display my friends and create a phone book by adding their phone number, and call them up through the main application swf. My application uses Flash, Javascript, PHP, Ribbit Framework, Facebook API, and MySql database. I will primarily discuss the Facebook API FBML (Facebook Markup Language) with PHP, and how I used the Ribbit API in Flash.

First, it is a good idea to get acquainted with Facebook API by review and/or creating sample Facebook applications. You first need to look over at the developer section. As it states, you should be familiar with HTML, scripting languages such as PHP and JavaScript and a database like MySQL (if you want to contain any application state). You will be essentially hosting your application and interfacing with the Facebook site via their interface and setup. View the Basic Application Architecture to get an idea of how the system works. It is also helpful to run through their sample applications to understand what you can and can't do. Demo Applications

Here are a few good links I found helpful:
- Creating your first application
- Developers Wiki Page
- Developing with the Facebook Platform and PHP
- FBML Reference
- Test data retrieval of Platform
- PHP Client files for Facebook integration

You can either build your application using FBML (self defined markup language) or in an external web site with an iframe. For my application I used FBML. There are some HTML and Javascript techniques that will not work well with FBML. The parsing of the markup causes issues when you use quotes or parenthesis in a particular ways. It is a matter of trial and error (Error 500 to be exact).

Here are some tips:
- Avoid using inline Javascript, use function calls.
- Use a tool like Firebug to debug Javascript.
- I would also suggest enabling PHP log errors on your hosting server to troubleshoot issues cause on the server-end.
- Remember that the tags need to be written well formed. You must make sure you close tags.
- When you set up your application in the developer page, make sure that the canvas url is all in lower-case.
All in all, I always found a solution that would work. So don't give up.

FBML has tags for rendering flash and javascript bridge embed code. From the documentation, this tag (Fb:fbjs-bridge) seems to be fairly new. There must have been a big request for this feature because the rendered html in the FB:swf has allowScriptAccess set to none.  As the documentation states "Facebook prevents direct script access from flash"(1). The Javascript bridge is essential for interaction with the flash swf.
- code sample including javascript, php library and fla
- info on FB:swf (1)
- info on Fb:fbjs-bridge

Make sure that you add this file at the root of your web domain to prevent security issues:
...
<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="apps.facebook.com" />
<allow-access-from domain="apps.*.facebook.com" />
</cross-domain-policy>
...

Now that we have the basics down on setting up the application for Facebook, I will give a few highlights of my application (Call a Friend). I won't go through the setup and actions (update, select and insert query) of the database and html form.

- To display all my friends, I reference get_friends() method from my instance of the Application API and run through the array object returned.
Something like this:
php
....
foreach($fb_friends as $friend){
$fbml .= '<div style="clear: both; padding: 3px;" >'
.   '<fb:profile-pic  uid="' . $friend . '" size="square"/> '
.   '<div height="20"><fb:name  uid="' . $friend . '" capitalize="true"/></div>'
}
echo $fbml;
....

- Within that listing of friends, I make a call to a Javascript function to send up the phone number
Something like this:
php
...
$info = '555-555-5555';
$fbml .= "<input type='button' name='callButton' value='Call Friend' onClick=callFriendPhone('" . $info . "') /> ";
echo $fbml;
...

html
...
<fb:fbjs_bridge />
<div id="swfContainer"></div>
...

javascript
...
var swf = document.createElement('fb:swf');
swf.setId('my_swf_id');
swf.setWidth('200');
swf.setHeight('100');
swf.setSWFSrc('[absolute path]fbjs.swf');
document.getElementById('swfContainer').appendChild(swf);
function callFriendPhone(phone){
document.getElementById('my_swf_id').callSWF('callFriend', phone);
}
...

So just to explain the Javascript... I'm getting the reference of the swf tag container. Which calls the internal actionscript method callFriend() with parameter (phone number). Make sure that the fb:fbjs_bridge tag is included on the page. Notice that the fb:swf tag is created dynamically and added to a div section. Check out my code sample as an example of this functionality.

This is a good time to talk about the embedded Flash Application which interacts with Ribbit. Before hand, I created a developer account on http://developer.ribbit.com. From there I downloaded the flash kit. Using Flash CS3 to build my swf, I referenced the classes for Ribbit by adding the "RibbitAPI_2.5.0.1070.CS3" component into my library. If you haven't already, I would highly suggest playing around with the samples and reading the documentation on this site.

There are three parts to my application:

The login window allows the user to login with their username and password.

The phone interface contains the status, phone number input, volume control of mic and sound, and digit buttons. This interface references a local connection to the Javascript/Flash bridge.

Lastly, the call log interface displays data grid consisting of recent calls.

These parts interact with my service manager that holds the Ribbit Framework reference. It's main purpose is to pass the application and developer id to the service, log into the service and add event listeners to Ribbit's AuthenticationEvent and Ribbit Callmanager's CallEvent. After logging into the Ribbit service, I reference Ribbit's callManager object to make and end phone calls. This object is also used to get call logs to display all recent calls made with this account and reference the call state ( Ringing, Answered, etc.). View Source of RibbitServiceManager.as

All in all, the Ribbit framework was straight forward and easy to use. The developer site gives a lot of helpful information on getting your application up and running. The only drawback I had was that I could not allow users to log out. I'm getting this error: "TypeError: Error #1009: Cannot access a property or method of a null object reference." within the Ribbit API. There seems to be a problem with the current library component. Here are a few forum posting that I found Forum post 1 Forum post 2 .

Maybe I'm getting this error because I'm not using their visual components. My colleague Seth is building a cool Ribbit app in Flex. I don't think he is having the same problem that I have. For now, I've disabled this feature in my application.

Well... I had a lot of fun building this application. If you have Facebook and want to check it out, hit this link : http://apps.facebook.com/callafriend/

This application is still a beta. It will only be used as a demo. It may be changed or reset at any given time.

I welcome any feedback or comments.

You are trying to call recursively into the Flash Player which is not allowed. In most cases the JavaScript setTimeout function, can be used as a workaround.

In a pinch, I've worked around this error using the suggested JS setTimeout() function or by retrieving data by other means. I've finally decided to see if there was a better way and found one.

For the impatient (like myself), the solution is to use the following FABridge static constants: 

FABridge.EventsToCallLater
FABridge.MethodsToCallLater 

Let's look at a test project:

• FABridge Test
• FABridge Test Source View

Open the FABridge Test and you'll see a bunch of links. Click FireBugLite to open a console. Then click embedSwf() to embed the swf which will output to the console when the FABridge has initialized (see the JavaScript callback() method on the HTML page . You should then see the following in the console:

embedSwf
franky.name: franky
franky.children.length: 2
franky.children[0]: Object
franky.children[0].name: john

The JS callback() method is a simple demonstration of getting data from the SWF through the FABridge.  Now click on the requestRingo() link.  That calls the following JS code:

getRoot().requestRingo();

That in turn calls the following ActionScipt code in FABridgetTest.as which dispatches a ringoRequested event:

public function requestRingo():void {
    var e:NodeEvent = new NodeEvent("ringoRequested");
     e.node = new Node("ringo", 14);
     e.node.children.push(new Node("dingo", 2));
     dispatchEvent(e); // dispatch right away
}

In the JavaScript, we've added an event listener for that event in the callback() method. The JS requestRingoHandler() method is called as a result:

function requestRingoHandler(event) {
    console.log("ringo");
      try {
         var ringo = event.getNode();
         console.log("ringo.name:", ringo.getName());
         console.log("ringo.children[0].name:", ringo.getChildren()[0].getName());
    } catch (e) {
        console.log("error:", e.message);
    }
}

So we've click on the requestRingo() link and will get the following output in the console:

ringo
error: You are trying to call recursively into the Flash Player which is not allowed. In most cases the JavaScript setTimeout function, can be used as a workaround.

The setEventsToCallLater() method registered the fabridgetest::NodeEvent class with the FABridge as an event to dispatch after a delay. This registration is done using the FABridge.EventsToCallLater Object constant. In a normal application you'd hard code these registrations, e.g.

FABridge.EventsToCallLater["fabridgetest::NodeEvent"] = "true";

You can also register the general flash.events.::Event class to cover all cases, but there may be performance concerns so that will have to be tested before I use it in production code.  

In addition to the EventsToCallLater constant, FABridge has the MethodsToCallLater constant which is the same thing but for specified methods for classes. The FABridge registers the following automatically:

MethodsToCallLater["mx.collections::ArrayCollection"]="refresh,removeItemAt";

Between EventsToCallLater and MethodsToCallLater you should be able to avoid many of the "You are trying to call recursively into the Flash Player..." errors.

Have you successfully uses these constants? Are there any pitfalls and/or performance issues?

In the last couple of days, I decided to go through my notes, collect all the presentation files (powerpoints, pdfs and zips) and find blogs that reference the keynotes. Essentially I wanted to reflect and review "the Happening" that was Adobe Max 2008, my first Max.

For the most part I was impressed with this, my first, Adobe convention. It did not fail to inspire and to inform developers and designers on the future of Adobe and their products. In fact, when I got home I wanted to buy the latest Creative Suite right away, based on the feeling that I'm missing out on new and exciting features. Call it the rabid consumer in me. Like all the conventions I've attended in the past, I feel that most of the session only skimmed the surface of what I expected to learn. Keep in mind that I've attended Flash in the Can three times and FlashForward last year. The big difference is the session security lock up. You had to be assign to you time slot session via your id card. If you changed your mind, you had to log in to the system and change your schedule. In other conventions, you could wonder around to another session if the assigned session you were slated to attend went south. I can understand this method reduces the congestion and interruptions of people running around and crashing into the middle of a presentation. My hat goes off to anyone who prepares and presents ideas to a group as large as the Max crowd or any crowd for that matter.

These are the sessions that impressed me the most in no particular order:
The Flex Architecture Faceoff - "to be or not to be" using a Framework. It had as much drama as a Shakespeare play - Starring Todd Anderson, Josh Noble, Chafic Kaznoun and Yakov Falin. I only wish it could have lasted a bit longer. Chafic and Yakov voiced their disdain for using a framework in projects. The idea being that they contain a lot of code that can be unnecessary. They found that an "al a carte" setup with a smaller, tighter group of developers is best for their projects. Ideally using a blackbox approach, passing data providers, is what one should strive for. Other suggestions include passing events on data changes rather than using data binding and using code generation. If there was an opposing side to this argument, it was held by both Josh and Todd. They touted that frameworks are best in large group project where developer level may vary. It is also a means to standardize the work/code. This makes it easier for another developer to maintain the project after the fact. Cairngorm was the framework most referenced in the discussion. There was also a discussion on using Prana with Cairngorm (http://www.pranaframework.org/), to implement inversion of control and dependency injection. From what I understand you can swap out services willy nilly and test object instances via xml file. I heard something about this from the Flex show Podcast. Never used it, but I should definitely try it out. There was a reference to using PureMVC (puremvc.org). No doubt it was a lively discussion. At the end of the session, I think everyone was in agreement on a few points, on when to use and not use a framework. Both sides voiced sensible opinions. Those who attended benefited from their knowledge.

Google Maps with Flash/Air applications: More dynamic views of the map content (3D), Embed video and animation assets. Now support Air... What I got out of this session- I'm interested in building an Air Application using this library verses MapQuest's library.

Adobe XDCE - Air User Experience Model - Demos on Aggregators, Utilities, Media Consumers... Probably the most impressive application demo - the International Herald Tribune - Basically brings the New York Times layout and design to Adobe Air. What I got out of this session, ideas on Air applications that could be built.

Flex framework features to support large applications: Build the case for the Marshall Plan - Dividing the work between sub application domains / different versions of Flex Framework. This plan will start to be implemented from Flex 3.2 on up to newer versions. Many limitations - No strong typing, No Managers/Singletons, Security issues, and Remote Object Data services have serializing issues. The idea is to support legacy frameworks from this point forward when updating legacy projects cannot be accomplished. What I got the most out of this session was the idea of using modules, RSL to break up application and make applications faster.

Session on 2Advanced: I learned that a company that started around the Internet Crash of 2000 happened can still survive and thrive by having employees multitask. I was very impressed with their work ethic and their creative portfolio.

The major keynotes on Monday and Tuesday focused on The Flash Platform and sneak peeks - Flash Player 10, Adobe Catalyst (Thermo), Adobe Air 1.5, Gumbo (Flex Builder 4) The major trends - Client and Cloud computing, Social computing, Devices and desktop computing. They had a small mention of Adobe Alchemy, which allows you to run C/C++ code into Actionscript (hmm interesting).
Links (good accounts of the major keynotes):
http://flashthusiast.com/2008/11/17/liveblogging-max-2008-day-1-general-session-keynote-click-refresh/#more-102
http://flashthusiast.com/2008/11/18/liveblogging-max-sneak-peeks-and-awards-refresh-yo/
http://blogs.adobe.com/pdehaan/2007/10/adobe_max_2007_keynote_day_2_e.html

I am really thankful that my company (TMG) allowed me to attend this conference. It was great to finally meet my fellow talented Morphicians from the West Coast. This was the crème al la crème of conferences, a way to see what can and will be next in our industry.

Please feel free to respond with comments or any thoughts on Max 2008.

ConnSets lets you save network settings configurations and switch from one to another with a click of a menu option. Here are some tips for working with ConnSets:

Create a Default Setting

After installing ConnSets, you get the default option "none - Standard" as shown in this screenshot:

Selecting "none - Standard" essentially turns off ConnSets. If you've changed your network settings and then choose "none - Standard" it does not reset your settings to the default "Direct connection to the Internet". Create a default setting and use that instead of "none - Standard".

1. Go to: Tools > Options > Advanced > Network
2. Select "Direct connection to the Internet:"
3. Click OK to close out of Connection Settings
4. Click OK to close out of Options
5. Go to: Tools > ConnSets > Store
6. Enter "default" for the key in the dialog and click OK
7. Enter any value for the location (default = "Location") in the dialog and click OK

You should now see the default option as in this screenshot:

Using ConnSets with ServiceCapture

1. Install ServiceCapture
2. Go to: Tools > Options > Advanced > Network
3. Select "Automatic proxy configuration URL:"
4. Enter "file:///C:/Program%20Files/ServiceCapture/firefox.js"
5. Click OK to close out of Connection Settings
6. Click OK to close out of Options
7. Go to: Tools > ConnSets > Store
8. Enter "ServiceCapture" for the key in the dialog and click OK
9. Enter a value for the location (default = "Location") in the dialog and click OK

You should now see the ServiceCapture option as in this screenshot:

To view FireFox traffic through ServiceCapture, Go to Tools > ConnSets > ServiceCapture - Location

To stop viewing FireFox traffic through ServiceCapture, Go to Tools > ConnSets > default - Location

Using ConnSets with Fiddler

1. Install Fiddler
2. Go to: Tools > Options > Advanced > Network
3. Select "Manual proxy configuration URL:"
4. Enter 127.0.0.1 for HTTP Proxy
5. Enter 8888 for Port
6. Click OK to close out of Connection Settings
7. Click OK to close out of Options
8. Go to: Tools > ConnSets > Store
9. Enter "Fiddler" for the key in the dialog and click OK
10. Enter a value for the location (default = "Location") in the dialog and click OK

You should now see the Fiddler option as in this screenshot:

To view FireFox traffic through Fiddler, Go to Tools > ConnSets > Fiddler - Location

To stop viewing FireFox traffic through Fiddler, Go to Tools > ConnSets > default - Location

Save Yourself a Click

You can add a ConnSets button to your Toolbar to save yourself a valuable:

1. Go to: View > Toolbars > Customize
2. Find the ConnSets button
3. Drag it to your Toolbar

I use the Icons view and added the ConnSets button right next to my address bar as in this screenshot:

• 1046: Type was not found or was not a compile-time constant: [class with static consts].
• 5001: The name of package '[class package]' does not reflect the location of this file. Please change the package definition's name inside this file, or move the file. [class pointing to library symbol]

Of course we couldn't find any issues with the code or .fla. After much trial and error it was discovered that if you exported the source files (thus removing all SVN hidden files) it published without any errors. After even more trial and error, it was discovered that there is some threshold of files in SVN that when exceeded causes those mysterious errors (this related post tipped me off.). In one project there were roughly 200 class files and the mysterious errors appeared. After running SVN cleanup (which removes temporary hidden SVN files), the errors went away. This unfortunately didn't help in another larger project. As a work-around we can publish on exported files.

What bothers me is that Flash CS3 publishing is affected by files it's not told to look for. Could it be related to the fact that SVN hidden files include copies of the versioned files (e.g. .svn/text-base/MyClass.as.svn-base)?

I'm not surprised that I couldn't find much information on this bug because most people who version control larger Flash projects are likely using Flex Builder.

I've submitted a bug to Adobe but hope there's a more direct solution. Is anyone else having such an issue? Does anyone have any insight into how Flash CS3 publishes or how SVN hidden files affect other applications?

package examples {

import flash.external.ExternalInterface;

public class JavaScript {

    public static function getProperty(name:String):Object {
        var property:Object;
        if (ExternalInterface.available) {
            property = ExternalInterface.call("function() { return " + name +"; }");
        } else {
            property = new Object()
        }
        return property;
    }

    public function JavaScript() {}
}
}

The getProperty() method creates a dynamic anonymous function that simply returns a value.
With such a utility, you can easily access JavaScript properties like so:

trace(JavaScript.getProperty("window.location.href"));

Who needs the FABridge? Just kidding...

I've been using FlexUnit for a few years. And during this time I naively thought you _had_ to write tests using the structure that Darron Schall wrote about (http://www.darronschall.com/weblog/archives/000216.cfm). However, I never really cared much for that structure. I found it strange, and it didn't provide the flexibility I wanted in unit tests. For client work I just accepted this. However, recently I started writing a new chapter for the pending Programming Flex 3, and I decided to mention unit tests with FlexUnit. It was at that point that I thought "there must be a better way to write these tests." It was only then that I ran a Google search and read Theo's blog post.

Although Theo's blog post describes how you can alternately write FlexUnit tests I'll summarize with examples as well.

Basically, the popular FlexUnit approach is to use a static method that returns a TestSuite for every test, and the test's constructor accepts a string parameter naming the test method to run. This is the approach that Darron writes about. It's an approach that was unfamiliar to me until working with FlexUnit. My previous experience with unit testing was purely via the (excellent) book Test Driven Development By Example, and in that book the tests are structured differently. Theo describes how to structure tests in that way. That way requires that the test constructor does not require a parameter, and instead the test runner will run all methods on the test class where the method names start with "test". I'll show a simple example.
Consider the following, very complex and useful class that you need to test.

package {
	public class Adder {

		public function Adder() {
		}

		public function add(a:Number, b:Number):Number {
			return a + b;
		}

	}
}

The following shows a simple example test case class. This class defines three test methods, which is clear because the method names start with "test".

package {
	import flexunit.framework.TestCase;

	public class AdderTest extends TestCase {

		public function AdderTest() {
			super();
		}

		public function testPositiveInts():void {
			var adder:Adder = new Adder();
			assertEquals(adder.add(5, 4), 9);
		}

		public function testNegativeInts():void {
			var adder:Adder = new Adder();
			assertEquals(adder.add(-5, -4), -9);
		}

		public function testNaN():void {
			var adder:Adder = new Adder();
			assertTrue(isNaN(adder.add(5, NaN)));
		}

	}
}

The test runner looks like the following.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="creationCompleteHandler();" xmlns:flexui="flexunit.flexui.*">
	<mx:Script>
		<![CDATA[
			import flexunit.framework.TestSuite;

			private function creationCompleteHandler():void {
				var suite:TestSuite = new TestSuite();
				suite.addTestSuite(AdderTest);
				testRunner.test = suite;
				testRunner.startTest();
			}

		]]>
	</mx:Script>
	<flexui:TestRunnerBase id="testRunner" width="100%" height="100%" />
</mx:Application>

Note that we use addTestSuite() to add a reference to the test case class to the test runner. This will automatically run all the methods starting with "test".
Apart from the simplicity and clarity of this way of structuring tests you also get to use setUp() and tearDown(), which automatically run before and after every test method. The following is another example illustrating setUp() and tearDown(). This time we'll use a sort-of VO class called Example that has a static method for creating a new Example object from XML data.

package {
	public class Example {

		private var _a:String;
		private var _b:String;

		public function get a():String {
			return _a;
		}

		public function set a(value:String):void {
			_a = value;
		}

		public function get b():String {
			return _b;
		}

		public function set b(value:String):void {
			_b = value;
		}		

		public function Example() {
		}

		static public function parseFromXml(xml:XML):Example {
			var example:Example = new Example();
			example.a = xml.a.toString();
			example.b = xml.b.toString();
			return example;
		}

	}
}

The test for this looks like the following.

package {
	import flexunit.framework.TestCase;

	public class ExampleTest extends TestCase {

		private var _example:Example;

		public function ExampleTest() {
			super();
		}

		override public function setUp():void {
			_example = Example.parseFromXml(Value 1Value 2);
		}

		override public function tearDown():void {
			_example = null;
		}

		public function testA():void {
			assertEquals(_example.a, "Value 1");
		}

		public function testB():void {
			assertEquals(_example.b, "Value 2");
		}

	}
}

Notice that both setUp() and tearDown() are overridden.

We were asked to build a presentation that featured video of a person talking about the client’s product while presenting statistic and data in an exciting visual way. We decided to do this presentation with Flash Timeline animation, Actionscript, FLV video files and some luck. The idea was to get a production house to produce video excerpts with alpha layers. A script was conceived and the video assets were delivered within a few weeks to a month (give or take the corrections and post-production snafus). While we were waiting for the video to arrive, I built the shell application that would house the video sections (SWF files with external video). Each section would contain the various video takes in the order of the production script. You never know how a script like this will play until you actually build the different sections. This was definitely the case for this project.

For me…. The developer… I wanted to control everything to the nth degree. The shell loads all of the video sections (swfs), animates the transition moving from one section to another via script, and has a navigation link bar with a drop down menu, all the things we do best in the programming structured discipline. But for the video sections themselves, it is a different story. I needed to consider the best environment for the animator/designer to work freely, to give them enough space for their animations and somehow gel the programming and video together.

That is where cue points come in (and save the day). The designer/animator created a list of titles for the animation in order of the video script. We developed a system where the cue point names would be the frame titles for the main movie clip; which would house the animations. I embedded cue points into the video to then play animation content at different instances of the presentation. This planning and collaborating was done well before any flash production started.

Example event handler for the cue points from the FLVPlayback (videoPlayer)
….
videoPlayer.addEventListener("cuePoint", onCuePointHandler);
….

function onCuePointHandler(event:MetadataEvent){

var cuePointName:String = event.info.name;
mainAnimation.gotoAndStop(cuePointName);
}

This is not a perfect system by any means. Most developer would poo poo the notion of using FLVPlayback, instead creating a video player class and going the route of a fully Actionscript solution. But I needed to keep in mind that the animator/designer would be using the timeline as his tool. We needed to see everything on the timeline. Animators/designers who work with the timeline seem to come up with amazing yet manageable animations that could never be created via script. Besides, it is a visual medium after all.

After creating one video section, we began to developer an organic workflow with the other sections. I built the FLAs with the cue point embedded video and code for referencing frame sections (named by the animation names). The designer/Animator added animations within the empty frame sections that are called based on the cue points fired. We had a system and we stuck to it throughout the project. The results were easy to see. The process of removing and moving parts that did not work was simple.

It is true that nothing is ever written in stone when you create a presentation like this. Here is an example of this fact. When we tested pieces of the presentation on the web, we noticed a big problem. The video did not always synch up with animation. Keep in mind that most of the animations consisted of movie clips embedded within movie clips. The solution was to create additional cue points, directly fire (or play) beginning/ending animations when needed and remove unnecessary frames. This improved the performance greatly and solved the lag problem on the web.

I will be honest with you. This approach is a bit wacky. In fact, I would revise the process if another projects like this comes up again. It got the job done and it did not break the original plan and system. As long as you keep things consistent and have a plan, you will always find a way out of any jam.

In this case I had a requirement to create a unique name to use when connecting a LocalConnection. The idea is that two .swf files need to communicate over this LocalConnection, and both of them need to know the name of the connection. Seems simple enough. I could just hard code the same value into both .swf files. However, the deal is that these two .swf files exist in the same HTML page, and I also would like to be able to open more than one instance of the HTML page in different browser windows. If the name of the connection is hard coded into the .swf files then it will work for one instance of the page, but subsequent instances will throw errors because the connection will already be in use. In such cases the error might be something like the following (which is particularly unhelpful in diagnosing the actual error since it doesn't really indicate what caused the error.)

Error #2044: Unhandled statusEvent:. level=error, code=

Note that you might see this error in other cases, and it doesn't necessarily indicate that the solution described in this post is appropriate. This error could be caused by lots of different scenarios. For example, you would see this error if you were trying to send requests across domains and the .swf files weren't properly configured (see allowDomain() in the LocalConnection documentation.) Probably the best way to determine the actual cause is to listen for status events on all LocalConnection object, and log the status codes. However, in this particular case the errors were because an .swf (in a new HTML window) was trying to establish a connection using the same name as a pre-existing connection.

One obvious solution to this would be to create a unique name using JavaScript, and then I can pass that in to each of the .swf files using FlashVars. That would allow each HTML page to create a unique name and pass in the same name to each of the .swf files, ensuring that those two .swf files can communicate over the same channel, but other .swf files in other pages wouldn't conflict. That would work except that in this particular case one of the .swf files is not embedded directly in the HTML page, and it does not have access to the JavaScript in the HTML page. This is because one of the two .swf files is embedded inside another plugin that is, itself embedded in the HTML, and that plugin doesn't have a way to pass a value from the HTML page to the Flash Player instance it embeds.

Therefore, the solution I'm using follows. Note that we'll refer to the .swf files as sending.swf and receiving.swf. In this case sending.swf is the instance embedded in the HTML page directly, and receiving.swf is embedded in the plugin.

1. Initially receiving.swf calls connect() for a LocalConnection object using a hard coded value of _defaultConnection.
2. Receiving.swf's local connection client defines a method called setNewConnectionName(), which accepts a string parameter. When this method is called it first calls close() for the LocalConnection object, and then it calls connect(), using the parameter value.
3. Once both .swfs are loaded into their respective players sending.swf creates a new, unique connection name. You could use any algorithm to create a unique name. In this case I use the following: var connectionName:String = "_" + (new Date()).getTime();
4. Then sending.swf calls send("_defaultConnection", "setNewConnectionName", connectionName); for the LocalConection object.
5. After that point sending.swf always calls send() with the new, unique connection name.

This post is not original. Many others have posted about the Firefox "issue" regarding displaying content at 100% height. I'm just posting a reminder, and a Flex and SWFObject-specific version.

The "issue" is that in most cases you probably won't see the content or you may only see part of the content depending on the _actual_ height of the container of that content. When we build Flex applications they frequently are the only visible content in an HTML page, and the .swf itself is embedded in an otherwise empty <div> tag. The result is that if we've forgotten about this issue we're likely to wonder why we don't see the Flex application at all in Firefox. The reason is that Firefox is (apparently, from what I've read) compliant with the W3C specification for how to treat height. Apparently that specification says that when height is set to a percentage the height of the object should be a percentage relative to the height of it's container. This is the important part. If the container of the object doesn't have enough actual height then the content for which you've set the percentage will not display as you expected. Typically when we set the height to 100% we expect the content to occupy the entire height of the browser. If we haven't correctly configured the containers to have enough height we won't see anything showing up in Firefox.

The solution is to set the height of all the containers as well. Assuming that you're embedding the .swf in a div tag nested inside the body tag, which is itself nested in the html tag then you can use the following CSS to allow the content to really display at 100%.

html, body, div {
  height: 100%;
}

We use SWFObject to embed Flex and Flash content, and we use the static publishing method with nested <object> tags. Therefore, the following is an example of a simple HTML page we might have to embed an .swf to 100% width and height in the browser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>Flex Example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <script type="text/javascript" src="swfobject.js"></script>
  <script type="text/javascript">
    swfobject.registerObject("flexApplication", "9.0.0");
  </script>
  <style>
    html, body, div {
      height: 100%;
    }
  </style>
</head>
<body>
  <div>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        width="100%" height="100%" id="flexApplication">
        <param name="movie" value="example.swf" />
        <!--[if !IE]>-->
          <object type="application/x-shockwave-flash" data="example.swf"
               width="100%" height="100%">
        <!--<![endif]-->
          <p>This site is best viewed as a Flex application, which requires
                       Flash Player 9. For users who prefer not to use Flash Player we have
                       provided a <a href=’textVersion.html’>text-only version
                       of the site</a/>.</p>
        <!--[if !IE]>-->
          </object>
        <!--<![endif]-->
    </object>
  </div>
</body>
</html>

By programmaticly skinning the buttons, I was able to add uniquely formatted text to a sprite that is then drawn to the button state skin. If you're new to Programmatic Skinning, check out Joey Lott and Chafic Kazoun's book - Programming Flex 2.

Here is a scaled down version of this functionality. In most cases, you would use a different background image per button state. In this example, I am embedding one background image and a text element with an embedded font.

package com.myProject.skins
{
   import flash.display.BitmapData;
   import flash.display.IBitmapDrawable;
   import flash.display.Sprite;
   import flash.text.TextField;
   import flash.text.TextFieldAutoSize;
   import flash.text.TextFormat;
   import flash.text.AntiAliasType;
   import mx.controls.Button;
   import mx.core.UIComponent;
   import mx.skins.ProgrammaticSkin;

   public class CustomButtonSkin extends ProgrammaticSkin
   {

      [Embed(source='C:\\WINDOWS\\Fonts\\framd.ttf',
      fontName='FranklinMed', mimeType='application/x-font')]
      private var FranklinMed:Class;

      /* This path is assuming that you have an image in this folder */
      [Embed(source="assets/images/skinsRed.png")]
      private var skinImgRed:Class;

      public function CustomButtonSkin(){}

      override protected function updateDisplayList(unscaledWidth:Number,
           unscaledHeight:Number):void
      {
           var _backgroundImg:Sprite = new Sprite();
           var _mainSprite:Sprite = new Sprite();
           var _bitmapData:BitmapData =
                new BitmapData(int(unscaledWidth), int(unscaledHeight));
           var _mainBitmapData:BitmapData =
                new BitmapData(int(unscaledWidth), int(unscaledHeight));
           var _skinImg:IBitmapDrawable = new skinImgRed();

           /*
               Drawing the embedded image to sprite(backgroundImg)
               and then add it to mainSprite.
           */
           _bitmapData.draw(_skinImg);
           _backgroundImg.graphics.beginBitmapFill(_bitmapData);
           _backgroundImg.graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
           _backgroundImg.graphics.endFill();
           _mainSprite.addChild(_backgroundImg);

           /*
              Create and format the textfield. Then add it to mainSprite.
              Note: Using an embedded font in order to change the rotation.
           */
           var _labelName:TextField = new TextField();
           _labelName.embedFonts = true;
           _labelName.textColor = 0xffffff;
           _labelName.autoSize = TextFieldAutoSize.RIGHT;
           _labelName.text = "dynamic text"; // example - Button.Data property
           var _textFormat:TextFormat = new TextFormat();
           _textFormat.font = "FranklinMed";
           _textFormat.size = 14;
           _labelName.antiAliasType = AntiAliasType.ADVANCED;
           _labelName.setTextFormat(_textFormat);
           _labelName.rotation = -90;
           _labelName.y = 10 + _labelName.textWidth;
           _mainSprite.addChild(_labelName);

           /* Draw mainSprite to CustomButtonSkin object */
           _mainBitmapData.draw(_mainSprite);
           graphics.beginBitmapFill(_mainBitmapData);
           graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
           graphics.endFill();

      }

   }

}

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