Tip of the Day – Using interactive assets from Flash in Flex

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):

Get Adobe Flash player

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
installfck_01

Click Next
installfck_02

Let it run
installfck_03

You’re welcome Adobe
installfck_05

Extension Manager > About Extension Manager
installfck_06

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)
installfck_07

Once downloaded, unzip and double-click FlexComponentKit.mxp
installfck_08

Read this whole agreement and only if you agree the terms click “Accept”
installfck_09
…how many of you read that?

Okay, you should see this now.
installfck_10

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”.
fck_part2_01

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

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.
fck_part2_03

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

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

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

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.
fck_part2_07

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:

Get Adobe Flash player

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.

Related Posts

10 Comments

Amit

about 6 years ago

imho there's a slightly better way and more efficient.. you actually build all your assets in flash and convert them to movieclips/sprites by clicking the F8 (each asset at a time), then when converting it -choose "export to ActionScript", after doing that you need to check the "export swc" in the publish settings panel and then include this entire "virtual library" in your flex project (same as you did), you then only need to access those assets as first-class citizens, you even get code completion for nested sprites/movieclips.

Nate

about 6 years ago

@ Amit Thanks Amit, I thought my way was quite a bit longer than it should be. There just simply isn't a lot of documentation out there about doing this, that I can find.

jed

about 6 years ago

Great article! I agree, the interaction between the rest of the CS line and Flex needs to be better documented and available. The motion of all the buttons together is really fun. Thanks for sharing.

Hays

about 6 years ago

Over all this works pretty nicely but the part that I don't like is that you still can't see the contents of the SWC when in Flex Builder. Maybe I am just spoiled by FlashDevelop... other wise this is a nice solution. The JSFL is very similar to the script I wrote, I was glad to see that it converts all the objects you have selected.

Nate

about 6 years ago

@Hays Of course there isn't any reason you can't use the SWC generated here within FlashDevelop. That's really a feature they should put into Flex Builder though.

novio

about 6 years ago

I'm amazed to see that very few people use SWF libraries to get Flash content into Flex. The workflow with the Flex component kit for Flash is such a pain to use, I think. For more information about the SWF library approach, check out this article: http://www.novio.be/blog/?p=31 and see Flash action in Flex going on at http://www.billy.be/ for example. Well, what I mean is that you can do what you want. Agreed, the workaround wrapping MovieClips and Sprites in a UIComponent in order to get them on the display list in Flex is a bit awkward...

Neeraj

about 6 years ago

It's really interesting , i was searching something like that .. Thanks for such a great article

Arulraj

about 5 years ago

really a useful post... thanks

Gaurav Kumar

about 5 years ago

Hi from a newbie! This seems like something that may be useful to me. But in my case, I need to use a full set of menu created from one of those sites that create flash menus as swf online. How would I go about creating the AS for such component. Any help would be highly appreciated. Regards

ali

about 4 years ago

greate article man..but, can you teach me how to passing the button click event in flash to flex application? Really hope your help for this matters. Thanks

Leave a Comment