Tom Ortega II

Flex Component Kit: Step by Step

In Flash*Flex*AS, Programming, Technology and Software on May 1, 2007 at 3:22 am

I’ll show you step by step how this new kit works.

Now, I know all the hype about Open Source has everyone’s attention. However, the Flex Component Kit for Flash CS3 is the bigger news in my opinion. It’s going to take some time before we see the fruits of the Open Source project. The kit, however, is going to deliver some beautiful eye-candy, very quickly. Everyone needs to give a big thanks to Glenn Ruehle (Glenn, start a blog!) and Ely Greenfield for making this wonderful little tool. Now, you can see Glenn give a nice demo of this here, and you should watch it cuz Glenn can deliver himself a mean connecto (breezo). You can also read the instructions that come with the kit, and you should cuz it makes things clear. However, if you don’t want to do either, here’s a little step by step with screenshots and SWFs to help you understand.

First and foremost you need to install Flash CS3, the Flex Component Kit and prep Flex Builder. Go check out the Labs site for that info.

We’re eventually going to build this simple app. As you can see, it’s just a simple ball component that grows and shrinks. Now, the neat thing here is that you’re not just going to be building and seeing the finished product. You’re going to be seeing the various levels of the kit. You’ll come to see how labels become states, how animations become transitions and how the boundingBox works and why. The beauty and true power of the kit is not clear until you see AND understand all those pieces.

The path I’m taking is complete newbie on both Flash CS3 and Flex Builder 2. Each step has a number, the app to use, a corresponding image and a series of substeps. The image is to help you visualize the substeps and has red “highlights” to show emphasis.

Warning: This little experiment is not for the faint of heart. It is quite lengthy. I promise though, by the time you’re done, you’ll know why the kit is so exciting. Sorry for the crappy Step 1.1 style. I wanted and wrote Step 1.A and so on, but WordPress doesn’t want to keep the Letter list type. Let’s get started.

Step 1: Draw the BlueBall
App: Flash CS3
Step 1 Image

  1. Switch to the Oval Tool (Top Red Rectangle on Tool Palette on Step 1 Image)
  2. Pick Black for the Stroke Color and Blue for the Fill Color. (Bottom Red Rectangle on Tool Palette on Step 1 Image)
  3. Draw a circle on stage. You can hold the “Shift” key down to maintain a perfect Circle. Make sure it’s big enough so you can shrink it later (Mine is 174 pixels)

Step 2: Convert drawing to symbol
App: Flash CS3
Step 2 Image

  1. Select the entire image and in the “Modify” menu, choose “Convert to Symbol…” (Top Red Shape on Step 2 Image)
  2. In “Convert to Symbol” dialog box, make sure “MoviClip” is selected and name the symbol “BlueBall”. Leave all other settings alone.
  3. Click “OK”. This adds the “BlueBall” symbol permanently to your library while leaving a “copy” of that symbol on the stage.

Step 3: Clear Stage and Create Empty BallComponent Symbol
App: Flash CS3
Step 3 Image

  1. After the symbol is created, select the blue ball on the stage canvas and delete it. The stage should be empty now. Note: This just deletes a “copy” of the symbol.
  2. Verify that the BlueBall symbol is in your library. (Lower Red Rectangle on Step 3 Image) If it’s not, start over.
  3. Now that the canvas is empty, in the “Insert” menu choose “New Symbol…”.
  4. This will open up the “Create New Symbol” dialog box.
  5. Name the new symbol “BallComponent”. Leave all other settings alone.
  6. Click “OK”. This adds the blank “BallComponent” symbol directly to your library.

Step 4: Add BlueBall to BallComponent
App: Flash CS3
Step 4 Image

  1. Click on “BlueBall” symbol in the “Library Panel”. (Small Red Rectangle on Step 4 Image)
  2. While still holding the mouse button down, drag the symbol onto the white canvas and release the mouse button. (Large Red Square on Step 4 Image)
  3. Drag the “BlueBall” symbol on the stage and move it towards the center of the canvas. (Red Arrow on Step 4 Image)
  4. Align the black cross-hair (aka plus sign aka registration point) of your “BlueBall” symbol to the cross-hair in the center of the stage. They should overlap completely and appear as one. (Small Red Square on Step 4 Image)

Flex expects the registration point to be the top-left corner of the component.

Step 5: Rename Layer and Add a Keyframe
App: Flash CS3
Step 5 Image

  1. In the timeline, double click the text “Layer 1” and replace it with “BlueBall”. (Red Rectangle on Step 5 Image)
  2. Right click on frame 25 for the “BlueBall” layer and pull up the pop up. (Red Square on Step 5 Image)
  3. Choose “Insert Keyframe”. Note: Be sure to choose correctly and do NOT choose “Insert Blank Keyframe”.

Step 6: Animate BlueBall
App: Flash CS3
Step 6 Image

  1. Verify you’re still on Frame 25, the pink playhead should be on Frame 25. (Check against Step 6 Image)
  2. Click on the “BlueBall” symbol on the canvas.
  3. Make sure “Constrain” is checked in Transform Panel. Note: If you do not see the Transform Panel, in the “Window” menu choose “Transform”.
  4. Change the value of the height or width from “100.0%” to “50.0%”. (Red Rectangle on Step 6 Image)
  5. Right click on Frame 24 or lower on the “BlueBall” layer and choose “Create Motion Tween”.

Step 7: Create Flex Project
App: Flex Builder 2
Step 7 Image

  1. From the File Menu choose “New” then “Flex Project”. (See Step 7 Image for visual aid)
  2. Select “Basic” for “How will your Flex App access data?”. (Top Red Square on Step 7 Image)
  3. Give “BallTest” as your project name. (Bottom Red Square on Step 7 Image)
  4. Write down the default location. It will be in the “Flex Builder 2” directory, which by default Flex Builder puts in your “Documents” (Mac) or “My Documents” (Windows).
  5. Click “Finish”. This will create then open up the BallTest.mxml file.

Step 8: Set Frame rate and Export BallComponent
App: Flash CS3
Step 8 Image

  1. Click on some white space on the canvas. (Small Upper Red Square on Step 8 Image)
  2. This will show the Document properties, which includes the Frame rate.
  3. Change the Frame rate from “12” to “24”. (Lower Red Rectangle on Step 8 Image)
  4. In the “Commands”menu, choose “Make Flex Component”. Note: This will add the UIComponent clip to your library.
  5. Right click on “BallComponent” in the Library Panel. Note: Do not right click on “BlueBall” in the library.
  6. In the pop up, choose “Export SWC File…”. Note: Popup is moved in Step 8 Image for demo purposes. (Red arrow from Library on Step 8 Image)
  7. Browse to your Flex Builder 2 “BallTest” directory and name the file “BallComponent.swc”. (Large Red Square on Step 8 Image)

Step 9: Modify Layout and Add 2 Buttons
App: Flex Builder 2
Step 9 Image
Step 9 SWF

  1. In the mx:Application tag, change the value of the layout property from “absolute” to “horizontal”.
  2. Add a button with the label property value of “Make Small”.
  3. Add a second button with the label property value of “Make Big”. (Finished code is visible on Step 9 Image)
  4. Run the application. (It should look like Step 9 SWF) The buttons don’t do anything yet and there’s no BallComponent.

Step 10: Add BallComponent.swc to BallTest Project
App: Flex Builder 2
Step 10 Image

  1. Right click on the BallTest Project folder in the Navigator Panel.
  2. Choose “Properties”.
  3. In the “Properties for BallTest”, choose the “Flex Build Path” on the side. Note: This is NOT the section open by default. (Big Red Square on Step 10 Image)
  4. Click the “Add SWC…” button. (Small Red Rectangle on Step 10 Image)
  5. Browse to the “BallTest” project directory and select “BallComponent.swc”
  6. Click “OK”.

Step 11: Add BallComponent tag to BallTest Application
App: Flex Builder 2
Step 11 Image

Step 11 SWF

  1. Note: The one sad thing that images and text cannot show is how nice these next steps are. You can start to type “BallComponent” in the editor and it should create the following code for you.
  2. Add the: xmlns:local=”*” property to the application tag.
  3. Add the <local:BallComponent/> tag between the two buttons. (Added code is highlighted in blue on Step 11 Image)
  4. Run the application. (It should look like Step 11 SWF)

If you’ve made it down this far, congrats. This is where it starts to get fun! Yeah, it was pretty boring up to that point. Sorry, but it was needed so that we could have some files to work with. At this point in the project, we see how Flex auto loops the animation from Flash. The animation is of the ball shrinking, never growing. This is because we’re seeing frame 1 to frame 25, over and over. We also see how Flex is constantly updating the width of the BallComponent to match the constantly changing ball animation.

Step 12: Stopping the Loop
App: Flash CS3
Step 12 Image
Step 12 SWF

  1. Add a new layer to the BallComponent Timeline. (Click the icon in the Small Red Square on Step 12 Image)
  2. Rename the layer “ActionScript”. (See step 5A if you don’t remember how to rename a layer)
  3. Right click on Frame 1 in the ActionScript layer.
  4. Choose “Insert Keyframe”. (All the above steps on one half of Step 12 Image, all the below steps on the other half)
  5. Click on Frame 1, then in the “Window” menu choose “Actions”.
  6. Type the code: Stop();
  7. Close the “Actions” Panel.
  8. Re-export the BallComponent.swc to the BallTest Flex directory. (See steps 8.6 & 8.7 if you don’t remember how to export the component)
  9. Re-run the Flex Application. (It should look like Step 12 SWF)

When you build your Flex app this time, you’ll notice that the looping is gone. This is because we specifically added the code “Stop();” to Frame 1.

Step 13: Adding Flash Frame Labels
App: Flash CS3
Step 13 Image

  1. Add a new layer to the BallComponent Timeline. (See step 12.1 if you don’t remember how to add a new layer)
  2. Rename the layer “State Labels”. (See step 5.1 if you don’t remember how to rename a layer)
  3. Right click on Frame 1 in the State Labels layer.
  4. Choose “Insert Keyframe”.
  5. Click on Frame 1 in the State Labels layer.
  6. In the Properties Panel, make the Frame Label equal “big”. (Steps 13.3 to 13.6 on one half of Step 13 image)
  7. Right click on Frame 25 in the State Labels layer.
  8. Choose “Insert Keyframe”. (See steps 12.3 and 12.4 if you don’t remember how to add keyframes.)
  9. Click on Frame 25 in the State Labels layer.
  10. In the Properties Panel, make the Frame Label equal “small”. (Steps 13.7 to 13.10 on the other half of Step 13 image)
  11. Re-export the BallComponent.swc to the BallTest Flex directory. (See steps 8.6 & 8.7 if you don’t remember how to export the component)

Step 14: Using Labels as States in Flex
App: Flex Builder 2
Step 14 Image
Step 14 SWF

  1. Add the value “myFlashBall” to id property of the BallComponent tag.
  2. On the “Make Small” button, add this code to the click event: myFlashBall.currentState=’small’;
  3. On the “Make Big” button, add this code to the click event: myFlashBall.currentState=’big’;
  4. Re-run the Flex Application. (It should look like Step 14 SWF)

Playing with this SWF, you can see how the frame labels from Flash automatically turned into states in Flex for that component. No extra code needed from us to create those states. A Flash Frame Label = Flex Component State. We just point them out in our code. How sweet is that? Ah, but what about that animation we have on the timeline? Can’t we use that? We sure can.

Step 15: Adding transition labels
App: Flash CS3
Step 15 Image

  1. Add a new layer to the BallComponent Timeline. (See step 12.1 if you don’t remember how to add a new layer)
  2. Rename the layer “Transition Labels”. (See step 5.1 if you don’t remember how to rename a layer)
  3. Right click on Frame 1 in the Transition Labels layer.
  4. Choose “Insert Keyframe”.
  5. Click on Frame 1 in the Transition Labels layer.
  6. In the Properties Panel, make the Frame Label equal “big-small:start”. (Steps 15.3 to 15.6 on one half of Step 13 image)
  7. Right click on Frame 25 in the Transition Labels layer.
  8. Choose “Insert Keyframe”. (See steps 12.3 and 12.4 if you don’t remember how to add keyframes.)
  9. Click on Frame 25 in the Transition Labels layer.
  10. In the Properties Panel, make the Frame Label equal “big-small:end”. (Steps 15.7 to 15.10 on the other half of Step 13 image)
  11. Re-export the BallComponent.swc to the BallTest Flex directory. (See steps 8.6 & 8.7 if you don’t remember how to export the component)

Step 16: Adding transition code
App: Flex Builder 2
Step 16 SWF

  1. NO ADDITIONAL CODE!
  2. Re-run the Flex Application. (It should look like Step 16 SWF)

As you can see, just be adding another set of labels in Flash you automatically get transitions in Flex. This requires no other code input into the Flex file. As long as you follow the convention of: {StartingFrameLabel}-{EndingFrameLabel}:start and {StartingFrameLabel}-{EndingFrameLabel}:end. Not only that, but the Component Kit is smart enough to use one animation in two different directions (big to small and small to big). That, to me, is just pure genius.

This is because of how Flex tries to find transitions. From the docs, Flex searches for frame labels that match the view state change in the following order:

  1. currentViewState-destinationViewState (no wildcards)
  2. currentViewState-destinationViewState (reversed)
  3. *-destinationViewState
  4. *-destinationViewState (reversed)
  5. currentViewState-*
  6. currentViewState-* (reversed)
  7. *-*

You can swap out the term StartingFrameLabel for currentViewState and EndingFrameLabel for destinationViewState. Those terms make more sense to me since you have to add the “:start” and “:end” suffixes to the start frame and end frame, respectively.
There is only one thing left though; That is the auto resizing of the Flex component during Flash resizing animation. We want Flex to keep using the same width, regardless of state or transition.

Step 17: Adding a bounding box
App: Flash CS3
Step 17 Image

  1. Add a new layer to the BallComponent Timeline. (See step 12.1 if you don’t remember how to add a new layer)
  2. Rename the layer “BoundingBox”. (See step 5.1 if you don’t remember how to rename a layer)
  3. Click on any frame in the BoundingBox layer.
  4. Choose the rectangle tool. (Wide Red Rectangle on Tools Panel on Step 17 Image)
  5. Find Stroke Color and Fill Color. (Tall Red Rectangle on Tools Panel on Step 17 Image)
  6. Choose “Black” as the Stroke color and make the Fill Color is the white box with red strike, i.e. “invisible”. (Follow the colors on Step 17 Image )
  7. Draw a square that is the size and height you want your Flex component.
  8. Select the entire BoundingBox image and in the “Modify” menu, choose “Convert to Symbol…”. (Note: Make sure you only have the box selected and not the blue ball.)
  9. After the symbol is created, click on it.
  10. Type “boundingBox” as the Instance name. (See Small Red Box at bottom of Step 17 Image)
  11. Re-export the BallComponent.swc to the BallTest Flex directory. (See steps 8.6 & 8.7 if you don’t remember how to export the component)

Step 18: Adding boundingBox code
App: Flex Builder 2
Step 18 SWF

  1. NO ADDITIONAL CODE!
  2. Re-run the Flex Application. (It should look like Step 18 SWF)

The reason why you don’t need any additional code in your Flex file is because again of the kit. Flex will look for a movieclip with the name of “boundingBox”. When it finds it, then it uses that as the set width and height of your application.

I hope this post turns out to be helpful for those who are wondering about the kit. I can’t wait to try some more advanced stuff with the kit. When I do, I’ll post them here to my blog as well.

For those who want the “Solution” code, here is a zip of the completed Flash CS 3 fla file and the completed Flex Builder 2 Project.

Advertisements
  1. I’m trying to make my 1st flash game and I’m having a lot of trouble figuring out how to control the animations of an embedded symbol. I came across this post, and I thought that maybe it was in the right direction for me.

    I got lost in step 7.

    To my knowledge there is no commands menu after right clicking on a symbol in the library from which you can specify “Make Flex Component”

    ?

  2. Sorry, Rory. Steps 8.4 and 8.5 were accidently mixed up. They’ve been put in proper order now. Thanks for catching that.

  3. Thanks man! you tutorial has helped me to complete my first test of flash and flex integration.

  4. Woohoo! I’m glad to have been part of that magic moment. =)

  5. Thanks for this tutorial. Wow. It worked for me on the first try! See you in Seattle.

  6. Hello,
    I followed your tutorial, but keep running in to the same problem.
    I downloaded your zip and imported the files into a new project called BallTest.

    I right clicked the Flex Project, went to the Properties > Flex Build Path > Library Path
    I added the BallComponent.swc

    Before I even compile, the problem pane says :
    An internal build error has occured. Please check the Error Log
    unable to load SWC BallComponent.swc

    In the Error log I can find :

    !ENTRY com.adobe.flexbuilder.project 4 43 2007-07-16 17:11:01.699
    !MESSAGE Uncaught exception in compiler
    !STACK 0
    unable to load SWC BallComponent.swc
    at flex2.compiler.swc.SwcCache.getSwc(SwcCache.java:230)
    at flex2.compiler.swc.SwcCache.getSwcs(SwcCache.java:151)
    at flex2.compiler.swc.SwcCache.getSwcGroup(SwcCache.java:78)
    at flex2.compiler.swc.SwcCache.getSwcGroup(SwcCache.java:67)
    at flex2.compiler.CompilerSwcContext.load(CompilerSwcContext.java:52)
    at flex2.tools.oem.Application.recompile(Application.java:723)
    at flex2.tools.oem.Application.compile(Application.java:530)
    at flex2.tools.flexbuilder.BuilderApplication.compile(BuilderApplication.java:224)
    at com.adobe.flexbuilder.project.compiler.internal.ASApplicationBuilder$MyBuilder.mybuild(Unknown Source)
    at com.adobe.flexbuilder.project.compiler.internal.ASApplicationBuilder.build(Unknown Source)
    at com.adobe.flexbuilder.project.compiler.internal.ASBuilder.build(Unknown Source)
    at com.adobe.flexbuilder.project.compiler.internal.FlexIncrementalBuilder.buildApplication(Unknown Source)
    at com.adobe.flexbuilder.project.compiler.internal.FlexIncrementalBuilder.build(Unknown Source)
    at org.eclipse.core.internal.events.BuildManager$2.run(BuildManager.java:603)
    at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:37)
    at org.eclipse.core.internal.events.BuildManager.basicBuild(BuildManager.java:167)
    at org.eclipse.core.internal.events.BuildManager.basicBuild(BuildManager.java:201)
    at org.eclipse.core.internal.events.BuildManager$1.run(BuildManager.java:230)
    at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:37)
    at org.eclipse.core.internal.events.BuildManager.basicBuild(BuildManager.java:233)
    at org.eclipse.core.internal.events.BuildManager.basicBuildLoop(BuildManager.java:252)
    at org.eclipse.core.internal.events.BuildManager.build(BuildManager.java:285)
    at org.eclipse.core.internal.events.AutoBuildJob.doBuild(AutoBuildJob.java:154)
    at org.eclipse.core.internal.events.AutoBuildJob.run(AutoBuildJob.java:217)
    at org.eclipse.core.internal.jobs.Worker.run(Worker.java:58)

    I’m going crazy here. Is this a bug, or what is going wrong.
    It seems that even if I start from scratch, this error appears.
    Allthough when I dl .swc’s from the net and put them in the same folder.
    I can add the swc’s without any problem.

    Can it be some setting I skipped in the Flash?

  7. Hmm…I’ve never seen that before. I’m thinking that something went awry in the installation steps.

    You installed the Flex Component Kit extension in Flash CS3 and also patched the Flex Builder install?

  8. Well, I kinda had it working. But not as you instructed.
    In setp 8, you say to first select the canvas, set the frame rate and select
    “Make Flex Component” from the “Commands”menu.

    Flash, first off all tells you that you nee to select a library item frst.
    So I select the BallComponent and select Make Flex Component.
    Then, I rightclick the component and select “Export SWC File…”.
    I save the swc file, but than I get the error decribed above.

    If, on the other hand, in stead of doing this “Export SWC File…”, I simply export the whole fla, and check Export SWC in the publish settings, my component becomes available under the tag.

    This works, but I’m still not sure what is going on here.

  9. .. continued

    So,after setting the Library Path to the new swc (of the whole fla, not just the ball), my component becomes available in flex under the local tag.

  10. Kurt,
    I got the same problem as your when adding .swc file but I found out that you just need to download the patch as Tom Ortega II said.
    Thanks

  11. Hi,

    Nice tutorial! If I had a text box done in Flash rather than the animated ball, how would I modify the content of the text box in Flex? Is there a text property?

    Thanks,

    -v

  12. If you use dynamic Text and give it an instance name, you should be able to access the text attribute if I’m not mistaken.

  13. Nice post. Helped a lot.

    Thanks


    Chetan Sachdev

  14. Sorry, Rory. Steps 8.4 and 8.5 were accidently mixed up.

  15. Very thanks! You tutorial has helped me to complete my first test of flash and flex integration too.

  16. Flash, first off all tells you that you nee to select a library item frst.
    So I select the BallComponent and select Make Flex Component.

  17. I’m trying to get this to work but it won’t display anything. I got as far as step 11. The BallComponent tag is recognized by Eclipse when I start typping, but when testing the app I can only see the two buttons and no blue ball whatsoever.

    I’ve done a couple of different examples I found on other blogs, always with the same result (I mean, with no result at all).

    I’m using the trial version for Flex Builder 3, and the Flex Integration Kit for Flex 2.0.1. I presume this is the issue but unfortunately I can’t find the version 3 component anywhere. People said it should be included in the version 3 SDK but it isn’t there (or maybe I’m too blind to see it?).

    Can anyone help me?

  18. quick update in case someone is having the same problem: here’s the addon for Flex 3.

    Flex Skin Design Extensions & Flex Component Kit for Flash CS3 downloads

    (I don’t know why they hid it so much)

  19. […] “Well, we could just use the bounding box technique that has been outlined in several Flex Component Kit Tutorials.” Easy […]

  20. I also use the trial version for Flex Builder 3, and the Flex Integration Kit for Flex 2.0.1. Maybe there is an issue in that, but I can’t find the version 3 too, is there a free download versions?. Some people indeed say that it should be included in the version 3 SDK but I looked in there and didnt find neither..where are my brains?)

  21. […] thinking to when I was gonna style my class.  One of the things I think is very underused is the Flex Component Kit for Flash.  Therefore, when I go to skin the game piece, I’m going to use Flash to hopefully create […]

  22. Good job! Thanks for the tutorial. It really helped this Flash newbie.

    Chris

  23. Hi, Rory.
    Is there a text property?
    Thanks

  24. Great tutorial! I’ve tried the instructions that come with the kit without success, but thanks to you I’m in the right way now.
    Thanks!

  25. Anybody have problem when export many component in one swc. In library, i select many(more than one) and run command and publish swc. But when i use in flex, it show all component when i use one component. Any ideas

  26. Thanks, very useful!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: