Using Flash Component inside a Flash Builder Project

Flash and Flash Builder both have their strengths and often in a project it is desirable to create assets in Flash and use it in Flash Builder. To simplify the task, there is a Flash Professional Component object in the Components panel inside Flash Builder to help you get started.

Step 1: Insert the Flash Professional Component onto the Design view of your Flex project

Step 2: Click create in Flash Professional button at the Properties panel.

Step 3: Flash launches. Edit the component to suit your need.

Step 4: Click Done and your component will be displayed in Flash Builder design view and the Components panel.

Now the above sounds simple. But there are some details to take note.

1. If you want to add AS3 code onto the component, make sure that you write the class file by extending the mx.flash.UIMovieClip class, not the usual flash.display.MovieClip class. Like the follow:

package  {

import mx.flash.UIMovieClip;

public class Bot extends UIMovieClip {

public function Bot() {
// constructor code
}

}

}

2. Any public methods or properties you defined with the component will be available (with code-hinting) in the Flash Builder IDE.

3. The swc file generated in the process can be used at other Flash Builder project by adding that into the Libaray path. As swc is complied, that in itself hides the AS3 code from casual viewing.

Advertisements

~ by brianchau on May 25, 2011.

5 Responses to “Using Flash Component inside a Flash Builder Project”

  1. Thank you for this article.
    I have a problem.
    I am using flash cs5.5 and flash builder 4.5
    How to edit class definition as you mentioned in

    package {

    import mx.flash.UIMovieClip;

    public class Bot extends UIMovieClip {

    public function Bot() {
    // constructor code
    }

    }

    }

    I am not finding a way to edit the class definition.
    Please reply i am googling on this issue for a lot of time.

  2. Anuj,

    If you follow steps 1, 2, and 3 above, Flash CS5.5 will create everything ready for you. The Symbol properties panel would show that Base Class is: mx.flash.UIMovieClip so you don’t even need to do it manually. You can edit the Class file as:
    package {

    import flash.display.MovieClip;

    public class Bot extends MovieClip {

    public function Bot() {
    // constructor code
    }
    }

    }

  3. ok
    i tried this but it is not working, after editing in flash , it is still showing the same image for the default image, i am using flash pro cs5 and flashbuilder 4, thanks

  4. am new to flex and action script. basically am .net developer. my requirement is i have two tables assigned to two Objects in action script. i want to show that data in mxml File means(UI) is there any data control(Element) to add data dynamically . am using Flash builder 4.5 . am developing application for mobiles . Panel gives this error Adobe discourages using Panel when targeting profiles: mobileDevice. thanks in advance.

  5. hello, I clicked on the “Create in Flash Pro…” button but nothing happens after launching Flash! What should I do?

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: