Nate Beck – Adobeholic

So for the most part… up to this point I haven’t really needed to use extensive Flash animations within Flex. I mean like most people, I’ve embedded swf assets into my Flex application by using the [Embed] metadata tag. However, using the Embed metadata tag, in my opinion, is for static assets or simple animations… you know… images, animation only swfs, fonts, etc…

Today I found a cool button that I wanted to use in my Flex application.

The button (roll your mouse over me):

The thing about this button is that it has complex roll over and roll out animations. Of course we could create the same thing within Flex using an ActionScript tween class… but some things are better left to the Flash timeline.

So how do we get our button into Flex, with all of its animation and interactivity intact? The answer, my friends, is to use Adobe’s Flex Component Kit.

Doing some research online, it’s not really clear where to get it, or how to use it. According to labs, it’s released within Flex 3… but I don’t have a clue where. So we’re going to do this my way…

Step 1 : Install Adobe Extension Manager 2.1

Obviously, you can skip this step if you already have Extension Manager 2.1 installed.

If you didn’t install the Adobe Extension Manager when you installed your copy of CS4, you can download it here —> Download Adobe Extension Manager

If you already had Adobe Extension Manager installed… just be sure it has been updated to version 2.1.

Download and open up Setup.app

Click Next

Let it run

You’re welcome Adobe

Extension Manager > About Extension Manager

Says 2.1… cool, we’re ready to move on to step 2.

Step 2 : Install the Flex Component Kit

Now we need to go download the extension —> Download the Flex Component Kit (you need an adobe.com account)

All the way at the bottom you’ll find the extension we’re looking for… Flex Component Kit for Flash CS3 Professional (I know it says CS3 and we’re working in CS4, don’t worry)

Once downloaded, unzip and double-click FlexComponentKit.mxp

Read this whole agreement and only if you agree the terms click “Accept”

…how many of you read that?

Okay, you should see this now.

Documentation for this component can be found here —> FCK Docs

Onward!

Step 3 : The Flash Side

Let’s take our button and load it into Flash. We’re going to name it “MyButton”.

Create an AS3 class to handle all of the button interactions we need

package {
	// MyButton
	import mx.flash.UIMovieClip;
	import flash.events.MouseEvent;
 
	public class MyButton extends UIMovieClip
	{
		public function MyButton()
		{
			super();
 
			buttonMode = true;
			useHandCursor = true;
 
			addEventListener(MouseEvent.MOUSE_OVER, onOver);
			addEventListener(MouseEvent.MOUSE_OUT, onOut);
		}
 
		public function onOver(event:MouseEvent):void
		{
			gotoAndPlay(1);
		}
 
		public function onOut(event:MouseEvent):void
		{
			gotoAndPlay("end");
		}
 
	}
}

Make sure you have MyButton selected in the Library, and then use Commands > Convert Symbol to Flex Component.

Your output panel will let you know the command worked properly.

Test the movie by pressing ⌘ + enter (ctrl + enter on the PC).

Publish the movie, which creates both a SWF and a SWC file.

Now that we have our SWC file, we’re ready to move into Flex Builder.

Step 4 : The Flex Side

Copy our newly create SWC file into our libs directory.

With the SWC in our libs directory, it will automatically be included in the classpath of our Flex application (see this tip for more information on the libs directory).

The SWC file includes the MyButton class, so we can now write our code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:local="*" 
	layout="absolute" backgroundColor="0x000000" backgroundGradientAlphas="[0,0]" 
	creationComplete="onReady()">
	<mx:Script>
		<![CDATA[
			private function onReady():void
			{
				// How to use the custom button in ActionScript 
				/*
				var button:MyButton = new MyButton();
				button.x = 35;
				button.y = -10;
 
				addChild(button);
				*/
 
				// And just for fun				
				makeGrid();
			}
 
			private function makeGrid():void
			{
				var pad:int = 35;
				var gridWidth:int = 10;
				var gridHeight:int = 10;
				var yOffset:int = -45;
				var xOffset:int = -25;
 
				for(var h:int=1; h<=gridHeight; h++) {
					for(var w:int=1; w<=gridWidth; w++) {
						var button:MyButton = new MyButton();
						button.x = w*pad+xOffset;
						button.y = h*pad+yOffset;
						myPanel.addChild(button);
					}
				}
 
			}
		]]>
	</mx:Script>
	<mx:Panel id="myPanel"
		layout="absolute" left="10" right="10" top="10" bottom="10" 
		backgroundColor="#1D1D1D" title="Hey look, I'm a Flex Panel"/>
 
	<!-- How to use the custom button in MXML -->
	<!--<local:MyButton x="-5" y="-10" />-->
</mx:Application>

And here’s what it looks like:

Weeeeee…. that’s fun, you can download the source here.

The source there is an Archived Flex project, all you need to do is Import it into Flex Builder and you’re good to go.

That was a long tip, any questions please post them.

Today I needed to prototype a chromeless AIR application for use in a kiosk. It’s actually a whole lot easier than I thought it would be.

Here’s a quick example of what you can do with Adobe AIR and FlexMDI.

The cool thing about Adobe AIR is that it can run on Linux. So if I needed to deploy thousands of kiosks I could install Linux on them and save on windows licensing.

Here is the application source:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:flexmdi="flexlib.mdi.containers.*" 
    layout="absolute" backgroundColor="0x000000" showFlexChrome="false"
    applicationComplete="onReady()">
 
    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            import mx.controls.Button;
            import mx.core.Application;
            import mx.events.MenuEvent;
            import flexlib.mdi.containers.MDIWindow;
            import flash.display.StageDisplayState;
            import net.natebeck.BrowserWindow;
 
            [Bindable] public var ADOBE:String = "Adobe";
 
            // FlexMDI Manager layout types
            [Bindable] public var TILE:String = "Tile";
            [Bindable] public var TILE_FILL:String = "Tile and Fill";
            [Bindable] public var CASCADE:String = "Cascade";
 
            // File Menu
            [Bindable] public var EXIT:String = "Exit";
 
            [Bindable] public var buttons:Array = []
 
            private function onReady():void
            {
                // Enter Fullscreen Interactive State
                stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
 
            }
 
            public function openWindow(event:MenuEvent):void
            {
                var location:String = "";
 
                switch(event.label) {
                    case ADOBE:
                        location = "http://www.adobe.com";
                        break;
                    case CASCADE:
                        mdic.windowManager.cascade();
                        break;
                    case TILE:
                        mdic.windowManager.tile(false, 10);
                        break;
                    case TILE_FILL:
                        mdic.windowManager.tile(true, 10);
                        break;
                    case EXIT:
                        var exitingEvent:Event = new Event(Event.EXITING, false, true); 
                        this.nativeApplication.dispatchEvent(exitingEvent); 
                        if (!exitingEvent.isDefaultPrevented()) { 
                            this.nativeApplication.exit(); 
                        } 
                        break;
                }
 
                if(location.length > 0) {
                    var window:BrowserWindow = new BrowserWindow();
                    mdic.windowManager.add(window);
                    window.title = event.label;
                    window.location = location;
                    window.maximize();
                }
 
            }
        ]]>
    </mx:Script>
 
 
    <mx:ApplicationControlBar dock="true">
        <mx:MenuBar id="myMenuBar" labelField="@label" width="100%" height="100%"
            itemClick="openWindow(event);" >
            <mx:XMLList>
                <menuitem label="File" >
                    <menuitem label="Exit"/>
                </menuitem>
                <menuitem label="Launch" >
                    <menuitem label="Adobe"/>
                </menuitem>
 
                <menuitem label="Window" >
                    <menuitem label="Tile"/>
                    <menuitem label="Tile and Fill"/>
                    <menuitem label="Cascade"/>
                </menuitem>
 
            </mx:XMLList>
        </mx:MenuBar>
    </mx:ApplicationControlBar>
 
    <flexmdi:MDICanvas id="mdic"  top="10" bottom="10" left="10" right="10"/>
 
</mx:WindowedApplication>

And here is Browser.mxml

<?xml version="1.0" encoding="utf-8"?>
<flexmdi:MDIWindow 
    xmlns:flexmdi="flexlib.mdi.containers.*"
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="400" height="300">
 
    <mx:Script>
        <![CDATA[
            [Bindable] public var location:String = "";
        ]]>
    </mx:Script>
 
    <mx:HTML width="100%" height="100%" location="{location}" />
 
</flexmdi:MDIWindow>

The full application can be downloaded here.

:: Update ::

There seems to a be a little bug in the applicaiton… when you’re rendering HTML with Flash Content within it. It won’t display in StageDisplayState.FULL_SCREEN_INTERACTIVE mode. However, if you hit the ESC key… the flash content will show up. I’ll have to check and see if there is a bug filed on this.

Something that I have wanted to do for a while is to be notified whenever anyone checks into the Flex SDK. That way I can keep up with all the changes as they happen. I finally figured out how to set it up today.

1. Visit the commits forum. Click the subscribe button.
   
2. Select Email or Email Digest.
   
3. I use gmail, Select Settings > Filters > Create a new filter. Setup the panel as shown.
   

   UPDATE (3/30/2009):

   The subject on the Flex SDK commit emails has changed slightly. The filter in the email no longer works. I am now using this filter instead: “svn:fx” of “[svn]”

4. Click Next Step, I use these setting so the emails don’t crowd my inbox.
   
5. Woot, now I can see all of the changes to the Flex SDK as they happen.
   

Joan announced yesterday about, A Public Forum For the Flex Community Tomorrow.

There has been some good and bad feedback regarding the open source aspects of the Flex SDK and the team has decided to go out into the community to hear your thoughts. You can call in to air your concerns or share ideas.

Lately there has been a big upheaval throughout the Flex community dealing with the Fx prefixes in Flex 4. I’m not going to get into it here, but long story short… many people in the community aren’t happy about it.

Even though the Flex SDK is “open source”, it is still tightly controlled by Adobe. All of the planning, new features, all the decisions reside within Adobe. There is the Flex Bug System and it accepts feature requests from the community, which they take into account… but let’s face it, it’s a weak solution.

Today, I had the opportunity to attend the forum. It was absolutely a step in the right direction. Sure, they might have ticked some people off… Nobody likes being told, “This is how we are going to do it, and you have no choice”. That’s not what open source software is about. Sure, it might be too late to take the Fx prefix out of Gumbo… but at least Adobe came to their senses and realized that the community is as vested in this technology as they are.

From my own personal experience… there is a certain disappointment that comes when you’ve invested your own time to contribute to the Flex SDK just to have it deferred or ignored. We’re not being paid to build these things. Don’t take this blog post as a complaint about Adobe or the Flex SDK team, it’s not meant to be that at all. I just think that if Adobe trusts more in the community we can build something amazing.

I think it would be a great thing for Adobe to promote select community members… invite them into planning and discussions, assign features and bugs to them, involve them in decision making. I can rattle off a list of people who would love to be involved on that level with the Flex SDK, me being one of them.

I said it during the meeting, and I’ll say it again. The Flex SDK team should realize that even though it’s their full-time job to make this platform the best it can be.. for a lot of us, it’s our full-time job dealing with the decisions that are made.

:: Update ::

The recording is now available.

Additional Links

Jesse Warden’s thoughts on the issue
Tom Chiverton’s thoughts on the talk

I have an extensive background using the Microphone class within Flash Player. Anytime you try to connect to a user’s microphone, Flash Player displays a privacy dialog box that alerts the user to choose whether to allow or deny access to the microphone.

I’m sure you’ve seen it, this is what it looks like:

You widget (or app) MUST be a minimum of 216 x 138 (some people will argue you can do 215 wide, but in my testing sometimes 215 pixels wide can cause issues). When the player window is too small, the settings panel will either:

1. Not show up at all, or
2. Show up clipped and in some browsers mouse events will not register in Flash

You cannot disable the settings panel.

Here are a few helpful tips that I have figured out:

• The widget needs to be 216 x 138 ONLY when you’re asking for permission to the microphone. If you have control of Javascript on the page, you can change the size of the flash object on the page temporarily while you show the settings panel.
• You can use “Security.showSettings(SecurityPanel.PRIVACY);” to control when you want the settings panel to show up. Using the Security.showSettings method is helpful because there is a Remember button on that panel. If the user chooses “Remember”, then you never have to show the Settings panel again.



• The Microphone status events get dispatched when a user changes a Microphone setting within the settings panel. ( _mic.addEventListener(StatusEvent.STATUS, onMicStatus); )
• On your Microphone class, the “muted” property will tell you if you have access to the microphone or not.

These tips can be adapted for the camera settings panel as well.

Today was my first real day as Senior Adobe Developer for T-Mobile… and to be completely honest with you guys… I’m completely exhausted and uninspired at the moment

So… with an honest intent to keep up my 30 day tips streak… I’m going to tell you to check out Mike Chambers’ new iPhone application. It may seem silly, but I find having the AS3 Language Reference on my phone incredibly useful at times. For example, when I’m flying, when I have no internet connectivity, or when I’m out at lunch and am trying to brainstorm a solution.

Learn more about AS3 API Reference iPhone application.

*Nate passes out*