A work-flow for component creation
Introduction
The new component architecture in Flash CS3 is a vast improvement on the V2 component architecture used in Flash MX2004 and Flash 8. Fundamentally, the problem with the V2 architecture was that skinning a component was unintuitive at best and painful the rest of the time. This meant that they were unsuited to the people who would benefit from them the most, namely the large Flash designer community who gain from the functionality of components but don’t have the skills or patience to go through some monster skinning process. This walkthrough is intended to describe the work-flow of component creation. It does not cover any of the details of actually coding components or any of the architectural details of the new fl.core.UIComponent class.
With the arrival of Flash CS3, Adobe has introduced a new component architecture that no longer uses the .SWC file as a container for ActionScript3 components. Components are now delivered to the end user in the form of a .FLA file. A correctly formed .FLA file placed in the correct folder [ $(AppConfig)/ Components ] will present the components that it contains in the components panel of the Flash IDE.
When the end user drags a FLA based component out of the components panel into their Flash document, a number of things happen:
An instance of the component is created in the document. At author-time, a live preview is displayed, which generally uses the default skin of the component.
A number of additional items are also imported in to the library. Mainly these are the skins of the component, and also a mysterious compiled clip called ComponentShim (more about this later…)
The very thought of handing a V2 component to a designer for them to reuse, was in my opinion, quite a laughable concept. This is where the new .FLA based components really shine.
The real advantage of FLA-based components is that the user is now able to double click the component, and edit the library resources that it uses. This means that components no longer feel locked-down, and the look of the component can be easily customized without a degree from the Macromedia V2 School of Rocket Science™. This paves the way for components to start being really useful in situations where there are clear divisions between programming and design. With the advent of ActionScript 3, it’s possible that the gap between development-oriented and design-oriented Flash users will widen. The new component architecture offers a bridge over the chasm.
I’m not going to spend too long describing how to use the new components. This is well covered in the CS3 documentation, and there is more info over at Aral’s blog and more recently on Grant Skinner’s blog.
My interest in components is from the perspective of a programmer lacking in design skills. Components will allow me to deliver easily re-usable functionality without tying the users of the component to my (rather poor) concept of a look and feel. So I need to know how to make component .FLA files that work in the same way as the ones delivered with CS3. Let’s start setting up a simple component…
Setting up our first component
- Create an empty Flash ActionScript 3 document. Save it in an empty folder as CustomComponents.fla
- Add the following class path to the document’s settings:$(AppConfig)/Component Source/ActionScript 3.0/User InterfaceThis is where the core component code resides (in particular fl.core.UIComponent)
- Create an ActionScript class for your component. Save it as MyComponent.as in the same folder as the CustomComponents.fla file.The class should extend fl.core.UIComponent, so the opening lines of your component class should look something like this:
- Create a MovieClip symbol in the library, and change its name to “Avatar” (users of the V2 architecture are more likely to remember this as the asset formerly know as BoundingBox, and functionally, the Avatar fulfills a similar role). Enter edit mode on that symbol, and on frame 1 (the only frame) draw a rectangle with x and y coordinates of 0 and no fill. It’s probably best to use a hairline stroke, as when this symbol is used later, it is likely to be scaled, which will do odd things to non-hairline strokes.
- Create a MovieClip symbol in the library, and give it the same name as the class you defined above (e.g. MyComponent)
- Edit this symbol, and rename layer 1 to Avatar, and drag in the Avatar symbol from the library to x and y coordinates of 0. Ensure that this is the only symbol instance on frame 1 of your component MovieClip. UIComponent will use this instance to set its default width and height, and then remove it from the display list immediately. It only does this for the DisplayObject at index 0, so we don’t want any other display objects on this frame.
- Create a new layer called “skins”, and create an empty key-frame on frame 2. This is where we will be placing subsequent symbols from the library that represent the various skins for our component.
- Create a new MovieClip symbol in the library and call it MyComponentSkin1 (this time, in the linkage properties, check “export for AS” and “export in 1st frame”, and enable 9-slicing). Draw something pretty on frame 1.
- Edit frame 2 layer “skins” of MyComponent, and drag MyComponentSkin1 from the library into this frame. Don’t worry about positioning it… it’s never used at runtime; this is the view that will open when the user double clicks the component. When the component gets more complicated, it might be worth adding a guide layer to this frame with some labels for the various skin assets.
- Right click MyComponent in the library and choose Linkage… In the following dialog box, provide the following details:Class: MyComponentBase class: flash.display.MovieClipCheck “Export for ActionScript”Check “Export in first frame”
- Right click MyComponent in the library and choose Component Definition… In the following dialog box, provide the following details:Class: MyComponentThere are several other options on this panel that can be configured, but leave them (for now…)
package { import fl.core.UIComponent; import flash.display.*; public class MyComponent extends UIComponent { var mc:MovieClip; public function MyComponent() { super(); } protected override function draw():void { if (mc == null) { var classDef; try { classDef=this.loaderInfo.applicationDomain.getDefinition(getSkinName()); } catch (e:ReferenceError) { //there's no guarantee the try block will work //as the skin may be missing //in which case, abort!!! return; } mc=new classDef as MovieClip; addChild(mc); } mc.width=width; mc.height=height; } protected function getSkinName():String { return "MyComponentSkin1"; } } } |
What is a ComponentShim, and why do I need one?
Tracking down the ComponentShim
One of the more confusing aspects of the new FLA-based architecture is a compiled clip called ComponentShim. The documentation refers to it only once with the following rather cryptic line:
“The ComponentShim SWC is placed on Stage on Frame 2 in every User Interface component to make available the precompiled definitions.”
That’s all you get. A web search turns up even less. A quick search of the CS3 file system finds no .SWC file called ComponentShim. The only clue is a file called ComponentShim.fla, which has provided some insight into the purpose and creation of the ComponentShim.
If you pull any of the components supplied with CS3 out of the components panel into a new document, along with the component skins, one of the additional symbols that is imported into your library is a Compiled Clip called ComponentShim It is placed in a library folder called “_private”. An instance of ComponentShim can be found on frame 2 of all of the components supplied with CS3 (in User Interface.fla). A few questions immediately spring to mind… Why is it there? How is it made?
V2 architecture developers are probably familiar with compiled clips. These are non-editable MovieClips in the library that contain their own assets and code in a ready-compiled format. Indeed, in the not-so-distant past, when you dragged a V2 component from the components panel onto the stage, its symbol instance in the library was of type “compiled clip”. When they are used in a project, the contents of the compiled clip are built in to the resultant SWF, without any need to recompile the code that they contain. If classes in the precompiled code of a compiled clip are not used in a client project, then the byte code for those classes is not copied into the resulting SWF. It turns out that this behaviour is a great benefit to the FLA-based component architecture, and gets us out of some tricky issues.
Looking at component usage
When the end user drags a component (without a ComponentShim) into their project, a number of items are added to the library. These are the component item itself, and all the associated assets of the component. When the time comes for the user to publish their project, a problem arises… the component is derived from (in our case) the MyComponent.as code, which is in turn derived from UIComponent. However, in the end-user’s project, neither of these files is in the document’s class path (if you remember when setting up the component FLA, additional class paths needed to be added). When document is exported, Flash sees that MyComponent uses class MyComponent, but cannot find a definition for MyComponent. So, by default, it auto-generates its own version of the MyComponent class, a very simple subclass of MovieClip, with no other code and no reference to UIComponent. MyComponent doesn’t work, because it has no code, and ends up with the behavior of a basic MovieClip.
ComponentShim to the rescue
As a component developer, sometimes we don’t want to supply our component code to the end user. Even if we do, we don’t want them to jump through the additional hoop of setting up their class path to include the MyComponent code and the UIComponent code. This is where the ComponentShim comes to the rescue. If all the required code is included in a precompiled format in the component’s assets, it means that we don’t have to supply the component code, nor is there a requirement for the end-user to set-up their class path to include the necessary code. The ComponentShim is a precompiled clip containing all the classes that are used by components in the component .FLA, but with none of the assets. With the ComponentShim included as an asset, this code is already available and no further action is required by the end user to get this code working with the component they are trying to use. An added benefit is that when the end-user compiles their project, they don’t need to recompile the component code every time they export.
How to make a ComponentShim
- Create a new ActionScript3 Flash document.
- Set up the class paths for the document with exactly the same paths as in the component .FLA we created above
- For each component in the original component .FLA, create a MovieClip symbol in the library. In the linkage settings set its class to the class used by the component and ensure that “Export for ActionScript” and “Export in first frame” are checked.
- Add one more symbol to the library, called “ComponentShim source”. (I have found that it is useful to put some sort of graphic/text on frame 1 of this symbol, something Adobe does not do. With no graphical presence, when we use it later it is easy to lose the instance on the stage, as it completely disappears. Once again make sure that “Export for ActionScript” and “Export in first frame” are checked in the linkage properties of the symbol. Associate it with some non-existent class, so that Flash auto generates a class for it. I’d suggest then class name “ComponentShim”, but technically the choice of name is completely irrelevant, as long as there is no collision with other class names.
- Right click the ComponentShim symbol in the library, and choose “Convert to Compiled Clip”.
- If all the classes compile correctly, then a new compiled-clip symbol will be created called “ComponentShim source SWF”. Select the symbol in the library and rename it to “ComponentShim”. This is now in essence a compiled repository of all the component code, with none of the associated assets.
- Drag the “ComponentShim” symbol from its library into your component .FLA library.
- For each component in your FLA-based component library, drag an instance of ComponentShim from the library on to frame 2 of the component. If you are working through this walkthrough, then currently the only component in the library is “MyComponent”, so you will need to do this only once.
A working component. Kind of…
By this point, we should now have a working component. If we copy the component .FLA into the correct folder [ $(AppConfig)/ Components ] and restart Flash, then we will see a new branch in the Components Panel tree view labeled with the name of the .FLA, and with MyComponent as a sub-item. However, when this is dragged onto the stage, we do not see a rendition of our beautifully designed component. All we see is its bounding box (the Avatar instance we dropped on frame 1 of our component). It behaves in every way like a normal MovieClip that has been associated with a class. It has no live preview. Nowhere in the process above did we precompile a working version of our component for use as a live preview. This is one area where V2 SWC based components were better, because the generation of a live preview was done automatically. For FLA based components, it is necessary to create a live preview by hand.
Finishing the job
Creating a live preview SWF for the component
Hidden in the documentation is a new class called fl.livepreview.LivePreviewParent. In the linked document, two different methods are outlined for creating a live preview SWF. One of them is a hack and involves creating a SWC file from your component, renaming the SWC file so it has a ZIP extension, and extracting the SWF file that it contains.
Unless I have missed something, I think CS3 is a let down on this front. How easy would it have been to add new option somewhere near “Export SWC file…” that exported only the live preview SWF automatically? It could even automatically take care of hooking it up to the component.
In order to gain an understanding of what a live preview SWF is, I worked through the second (9 step) method for creating a live preview SWF. The steps for doing this are copied verbatim from the fl.livepreview.LivePreviewParent documentation:
- Create a new Flash document.
- Set its document class to fl.livepreview.LivePreviewParent.
- Drag your component to the Stage and position it to x and y coordinates of 0.
- Check to ensure that the component parameters remain at their default settings. This should be the case if you drag the component from the Library panel or from the Components panel.
- Select Modify > Document from the main menu and, for the Match option, click Contents.
- Click OK.
- Publish the file to see the resulting SWF file as a custom live preview SWF file.
- Right-click the asset in the Library panel and select Component Definition from the context menu.
- The Component Definition dialog box allows you to specify a custom live preview SWF file for a component.
Steps 8 and 9 here are slightly misleading here, as it is not made clear that you should be operating back in your original document’s (CustomComponents.fla) library, not the library of the newly created document.
A fully working FLA-based component
At this point, you can save CustomComponents.fla and close Flash. Copy CustomComponents.fla to $(AppConfig)/Components and reopen Flash. Create a new ActionScript3 Flash file and open the components panel. You will see the CustomComponents entry, and within it, the new MyComponent. When this is dragged to the stage, it works just as a component should. Job done.
Pingback: Seb Lee-Delisle » Blog Archive » Components in Flash CS3
After spending the best part of a day figuring this out for myself, I was relieved to find someone else had encountered the same ambiguities and posted such an astute article on it. Thank you.
think you can post the finalized source in a packaged zip file?
thanks!
I cannot get this to work for some reason. I did it three times and I followed everything but my component does not show up in Flash CS3 when I close and re-open it. I think maybe it has to do with linkage of classes to objects, but I could be wrong.
Maybe adding fla’s for us to see would help.
No fla at the moment. There’s not much point in publishing one here, because I do not think that a finished .fla would be any more useful than the “User Interface.fla” file located in the flash installation directory. You should really use that file as your reference. Just take a copy of it and look inside.
You are copying your .fla to the same folder as “User Interface.fla”, aren’t you?
Has anyone successfully worked through this, I wonder?
[to spender]
yes, it works! One thing that you should’ve mentioned is that the checkbox “Display in Components panel” at “Component Definition” dialog (Step No.11) MUST BE CHECKED.
I was wondering why my component didn’t show up, while the .fla file was inaccessible (i.e. open by Flash). That’s how the solution came, though it’s evident.
Pingback: maliboo blog » Blog Archive » Dwa słowa o architekturze komponentów z Flash CS3
Yes. I have! It a very helpful tutorial. The componentShim is an interesting concept and this article has been crucial to my understanding of it…
Thanks
I don’t suppose you know how to add an icon to the component?? In AS 2.0 I used the [IconFile("icon.png")] metatag. In Flash CS3, under Component Definition, it appears you can add a Fireworks .png file. However, I have so far been unsuccessful!!!
Any ideas?!?!?!
I haven’t a clue… if you find out it would be great if you could add a note here. ta.
[to spender - It works. Thanks ever so much. I was losing my mind]
I was able to set the icon under the Component Definition. Just click the component icon located right under the “Description:” label. A drop-down list should then appear, at the bottom of which you can select “Custom” to specify your own .png file.
The way to change a component’s icon is hiding in plain sight. In the Component Definition window, the component image located just under the “Description:” label is actually a button. Click it, and a drop-down list should appear, at the bottom of which is the “Custom” option which lets you specify your own .png file.
Thanks very much for the article. It worked great, and I’m very grateful as I couldn’t find any info at the usual sources (Adobe, O’Reilly books …).
In steps 6 and 7 of creating a ComponentShim, do NOT use the name “ComponentShim” – e.g. use something like “MyComponentShim” instead. If you use “ComponentShim”, you won’t be able to drag any standard components onto documents that contain your component (the two instances of “ComponentShim” conflict).
Your article made a great help and I wonder konw if there are some other way to made the other computer to use the component easily which I made in my computer.
Like the V2 component which can made the .mxp file and you can install the component in any other computer.
How a bout Cs3 then?
Interesting concept but still a few issues;
Try this first -> Create a ui.fla file with some content, generate a ui.swf. Create a component .fla with some MC, select Component Properties of that MC and setting custom ui to file ui.swf does actually work in CS3. The custom ui swf appears in Parameter panel. That raises the question if this (old) method really won’t offer a solution anymore.
In the new method, the UI swf appears on stage when the component is dragged on stage. Will a user need to edit it there? It won’t appear in Parameter Panel. What if it’s placed way off-stage or even outside editable environment … very inconvenient to adjust.
Further, in the new method when one does steps and places component on stage and tests, it doesn’t give any errors. But creating a new 3rd layer with a 3rd keyframe with some actions, even a simple stop(); action gives error message;
Warning: 5002: The frame scripts of the symbol ‘MyComponent’ have been ignored because a compiled clip contains a definition for MyComponentBase. To override the MyComponentBase definition, place a custom class file within your classpath.
But the most important question, how/what does one create in the custom UI .swf in new method? In the old one one uses _root.xch to target the components parameter values of the instance placed on stage. The new method doesn’t allow parameters(variables) to be placed on objects but only in internal keyframes. To me it’s a real mystery how one would customize parameters/variables of a component in the new method.
I keep looking at this thread/page to see when a coplete solution is reached. I’ve been testing and trying but it’s time consuming, would even out-source it to save time for a financial compensation.
Pingback: FLA-basierte Komponenten in Flash CS3 erstellen » Blog Flash Actionscript CMS Typo3 WPF Ajax | Büro zweigang Braunschweig
patrick :
there is a workaround to the customui issue, provided by John Grden (http://www.rockonflash.com/blog/). it involves using JSFL and the MMExecute command to manipulate component properties. The magic JSFL line is:
fl.getDocumentDOM().selection[0].parameters
which will give you the parameters of the selected object. If it’s a component, then you’re in business…
This walk through has been more than helpful, but I’m running into some issues. I tried to do this:
import fl.controls.BaseButton;
protected var myBtn:BaseButton;
override protected function configUI():void {
super.configUI();
myBtn = new BaseButton();
myBtn.setSize(14,14);
addChild(downArrow);
}
basically trying to override the configUI and add a buttton, but i get this error.
TypeError: Error #2007: Parameter child must be non-null.
at flash.display::DisplayObjectContainer/addChildAt()
at fl.controls::BaseButton/fl.controls:BaseButton::drawBackground()
at fl.controls::BaseButton/fl.controls:BaseButton::draw()
at fl.core::UIComponent/::callLaterDispatcher()
I have spent countless hours trying to figure this out and I have no idea why something that seems to simple does not work. Any help would be greatly appreciated. Thanks.
Hi Spender,
That sounds hopefull. I’m franticly doing some reading. I’m vaguely aware of the JSAPI availability but it’s a bit beyond my knowledge.
Aside from returning parameter values, still need to see if fl.getDocumentDOM() can also set them. In other frames then frame 1… ->
About MMExecute, adobe documentation states;
In general, a user runs a JSAPI script by selecting Commands > Run Command. However, you can use this function in an ActionScript script to call a JSAPI command directly. If you use MMExecute() in a script on Frame 1 of your file, the command executes when the SWF file is loaded.
One other issue which gives small hope for ‘the old way’. See patrickjansen.net/cs3 . It has an .fla with a component in AS3 which actually uses a component Parameter to move a square. When adding a (bogus) .swf as Custom UI, and modifying the parameter value in Component Definition, the instance on stage actually updates the value. It doesn’t without custom UI .swf.
I have a small hope that if a custom UI .swf works in your above (‘new’) suggested method, it may possibly work the same way in the ‘old’ method. Wishfull thinking…
Maybe one of the people reading over our shoulders manages to achieve a working way and post it. In the meantime I’m digging into your suggestion.
ps: couldn’t find the specific blog topic of John Grden yet, Happen to remember the topic name?
Possibly getting close, see patrickjansen.net/cs3/mmexecute/
MMExecute(“fl.getDocumentDOM().library.items.length”)
works
MMExecute(“fl.getDocumentDOM().selection[0].parameters”)
does not work
Maybe if/once syntax is corrected it opens the way. And notice it’s using the ‘old’ custom UI swf method. Can feel solution inches away.
Patrick:
There’s no info about this on John’s blog (I think). This solution was provided when I asked him directly. To move forwards, I suggest you concentrate on manipulating component properties using only JSFL, and execute the JSFL from the command menu in Flash. Once you have this sorted, port the functionality into your customui swf using MMExecute. The “parameters” line does not represent the whole solution, and will require additional JSFL to make changes to parameter values.
theguy003:
Is “downArrow” defined and assigned in your project? That’s what you are trying to add, but I don’t see it in the code you pasted….
theguy003:
The reason you are getting run time errors is because BaseButton still tries to attach default skins for mouse states. The BaseButton skins are defined as the skins for Button, namely Button_upSkin, Button_overSkin, etc. The skins are brought into the FLA by the Button component, so dragging a copy of it into your FLA should resolve the errors you described.
You could also set all the skins following instantiation:
import fl.controls.BaseButton;
var b:BaseButton = new BaseButton();
b.setStyle(“upSkin”, “someClassName”);
// etc…
b.setSize(100,100); // Necessary, since the BaseButton doesn’t have an avatar
addChild(b);
Internally in the other components (such as ScrollBar), the components use a copyStylesToChild() method, which sets all the skins to BaseButton instances before invalidation. Basically it maps styles from the container component to the child. This enables the components to utilize BaseButton without needing the Button or Button skins. Note that the skins for all the BaseButton instances exist in the container component’s asset layer.
Hope this helps…
Spender.
Tnx once more for all the feedback. I actually managed to get and set component parameters now. And using the old way of custom UI so no need for componentshim and avatar etc. Hope I don’t encounter any problems rest of the way but looks hopefull.
patrick how did you managed to get and set component parameters the old way?
tapper:
Will try to elaborate.
First something I noticed: For instance -> Create a MC, add a numeric parameter ‘whateverparameter’ in Component definition. Create a frame loop in component with some clip using that parameter, e.g. a square moving up and down ‘whateverparameter’. Don’t forget to define ‘whateverparameter’ as variable :int. in timeline. Place it on stage and test. If I remember correct… it won’t work. Now change the parameter value of the component on stage. Now it should work.
And something else to notice, if component has a custom UI .swf, it will work right away when placed on stage. If done so and followingly the value is changed in Component Definition and another component instance placed on stage, the new one will immediately use the changed value and the first instance on stage keeps the old value.
Anyhow, answering your question,
First method I got working in custom UI is this.
MMExecute(“fl.getDocumentDOM().selection[0].parameters[0].value=111″);
will set the value of first parameter defined in component to 111.
But I also found out something ‘accidently’. Right from the start I never tested my old components since they still need to be rescripted. At some point however I stripped one blank but had left custom UI swf active. Just to see what happened I tried one of my custom UI .swf buttons and it actually updated the component parameter value. So it seems the old old way also works. above one to would be
_root.xch.whateverparameter = 111;
I’m really glad to see I likely have a working solution, at least for the moment.
Pingback: Building Flash CS3 components « ActionScript 3, Flash, Flex Reflections
Very nice tut!
Check out my article about building cs3 components at http://flexion.wordpress.com/2007/06/27/building-flash-cs3-components/
Very helpful tutorial, everything works fine.
I have an issue though. I can’t see the parameters of my component in the parameters panel. Any clues?
thanks
stelios
you’re using the [inspectable] meta tag, right? for instance:
package
{
public class MyComponent extends UIComponent
{
private var _myVal:Number=9;
[Inspectable(category="General", defaultValue=9)]
public function get myVal():Number
{
return _myVal;
}
public function set myVal(val:Number):void
{
_myVal=val;
}
//etc….
}
}
sorry that was a stupid mistake, its sorted now. Although another issue emerged.
I added some icons that I want to use by default. Basically the parameters set by the parameter panel will set the correct icons. Now in the resulting FLA the icons are there. But when I use the component in another FLA I cannot view the icons. I tried connecting the icons to each symbol in the library through the symbol properties dialogs but no good. Do I have to declare them with the STYLE tag?
Thanks
stelios
sorry for the many posts,
that has been sorted as well.
added another layer to the button component and placed the icons there,
this way they are included in the resulting component
In the UserInterface.fla there is only one componentShim while there are many components. How does this work? Since the componentShim is meant to keep the source of a component. Wouldn’t there had to be one componentShim for each component?
Pingback: Create .fla components for Flash CS3 « Jumpeye Flash Team Blog
gr0undtek: The component shim carries the code for all the components contained within userinterface.fla. It’s important to understand that during the compilation process of a project that uses the components, all pre-compiled code that is not used in the components that appear in the project is discarded. This confused me for a while until I understood that not all of the compiled code in the componentshim was linked into the resultant .swf
oops, I think I didn’t read step three of the component shim guide. It makes sense now thanks:)
Warning 5002:
This warning happens if there is no actual class for MovieClips, which are added to the Displaylist by the component. To avoid the error just write a base class for every MovieClip instead of letting Flash create a class. If the MovieClip contains other objects import all the classes for the objects and declare the objects as public if they exist as hardcopies. Also if the objects exist as hardcopies in the Movieclip, go to “Publish” – “Settings” and uncheck “Automatically declare stage instances” to avoid any name conflicts. When you now create a compiled clip there will be no warning.
For my investigation, the old _root.xch.parameter = xxx will work in custom UI when for CS3 components. But your custom UI must written and published in AS2.
Great article…
However I can’t quite get my custom component working. At runtime in a document containing my component I get a 1046 error: Type was not found or was not a compile-time constant: MyComponent.
So it seems like MyComponent class code did not make it into my ComponentShim. And I get an error after creating the compiled clip version of the Shim – not when it is compiled, but when I first click on the newly created compiled clip this pops up in the output window: ReferenceError: Error #1065: Variable MyComponent is not defined. I’m not sure what “variable” this refers to.
In my shim-making FLA, in the symbol I created for MyComponent (step 3), the class is set to MyComponent and clicking on the “validate class definition” button successfully resolves the class.
(Oh, I did not make a live preview yet, but that shouldn’t matter, should it?)
Oh for…
My MyComponent class definition was not marked public. Don’t mind me.
Hello,
I’m quite used to build Components, cause I make and sell them for a living – or at least for “part” of a living
– since some years now (components.holoville.com). I finally got to finish my first AS3 Component, using the old SWC method (I personally dislike the new FLA way, cause unless you really need to skin a Component it adds lots of unwanted stuff to your Library, and I know how a Flash Library can become confused 
… I like a Component to be a single symbol and nothing else: much clearer, and much more control over it). Ok, so, I though I might add some consideration about the Custom UI issue, about which I read a lot here and there…
I desperately tried to build a Custom UI using an AS3 SWF (cause, if I need a Custom UI, I want it to be AS3, and not AS2). After many tests, it seems that actually Flash CS3 really doesnt support Custom UIs at all. Yes, you can use “fl.getDocumentDOM().selection[0].parameters[0].value = x”, but that updates the Parameters only while in Authoring. The problem is, that Flash seems to build the Component in a different way if you give it a Custom UI SWF, so when it’s published the new and changed Parameters are no longer initialized, and only the default ones are kept. This is very strange, cause on the contrary if I shut down and reopen my FLA file, i get the changed Parameters, but again, only while in authoring.
I also found out that, if you don’t use a Custom UI SWF, but instead change the Parameters via a totally new custom Panel (always using “fl.getDocumentDOM().selection[0].parameters[0].value = x”) this seems to work. But a custom Panel instead of the Custom UI in the Component Inspector is too much of a nuisance for a user.
Ok, that’s what I found
Thus finally (and sadly) I resolved not to use a Custom UI, sigh…
And note that all my tests were made with the SWC/”Compiled Clip” way of building Components, so maybe there might be some difference with the FLA method.
No disrespect with maze, however I love the new FLA components. I have been creating AS2 components for a few years now for internal use and could not compile the code to allow designers to edit the assets. This has caused to many issues to bother listing. I want to keep the code black box and still give the designer freedom to change the look and feel. The new FLA based components do just that.
Well you can create Custom UI interfaces, the trick is to create the UI in AS2 and your FLA based component in AS3. Works without issues.
As for this tutorial, it is on the money other than you need to check (display in components panel) found in component definition dialog.
Don’t give up on FLA based components they bridge the gap between coders and designers….. Long Live AS3
I’ve noticed that the parameters in the parameter panel are displayed with alphabetical order. Anyone has a workaround on this or it is only happening on me?
P.S. Using the up/down arrows in the component definition dialog doesn’t work for me.
Pingback: joshua mostafa >> /dev/blog &
I have been working my way thru a tutorial on creating a drop down menu component in Flash CS3 found at http://www.adobe.com/devnet/flash/components.html author Jeff Kamerer. I am not a programmer, but I have a general idea how the process works. And I have been able to create the component by using the scripts supplied. However, I don’t know where to go from there. The test files contain a trace statement which shows the event is being targeted correctly. There is a dispatchEvent in the .as file after the correct menu has been captured which reads “dispatchEvent(new MenuEvent ( MenuEvent.ITEM_SELECTED, false, false, menuIndex, menuLabel, itemIndex, ItemLabel)); An example trace statement result would be [Menu Event type = "itemSelected" bubbles= false cancelable = false eventPhase = 2 menuIndex = 1 menuLabel = "Edit" itemIndex = 1 itemLabel = "Copy"] What I can’t figure out is how to or where to insert links to the appropriate sub-menu movies from that point. Your tutorial is very similar, so possibly you or your readers may be able to assist me. Thank you very much.
Hi,
I am having trouble following in one place and I hoped you could clarify.
In step three of the component shim you say:
” For each component in the original component .FLA, create a MovieClip symbol in the library. In the linkage settings set its class to the class used by the component and ensure that “Export for ActionScript” and “Export in first frame” are checked. ”
What if any thing should I call this symbol? And I can not see in any of the following steps when this component is used.
As in step four you say:
“Add one more symbol to the library, called “ComponentShim source”. (I have found that it is useful to put some sort of graphic/text on frame 1 of this symbol, something Adobe does not do. With no graphical presence, when we use it later it is easy to lose the instance on the stage, as it completely disappears. Once again make sure that “Export for ActionScript” and “Export in first frame” are checked in the linkage properties of the symbol. Associate it with some non-existent class, so that Flash auto generates a class for it. I’d suggest then class name “ComponentShim”, but technically the choice of name is completely irrelevant, as long as there is no collision with other class names.”
I create a second symbol making sure not to associate it to with any other class and the convert it to a compiled clip and then copy it into my initial component fla document?? Doesn’t that mean that this component has none of the class information in it? Was I suppose to do this with the first symbol that was associated to the custom component class?
I believe I have missed something..
Thanks in Advance
Matt
Great tutorial! Many thanks.
On the subject of adding Custom UI controls to a component, I managed to find a way around the bugs in the system to make this possible. I’ve written a tutorial on that subject here
…I’ve also added a link to this tutorial at the end of mine.
6 year old post, but still worth mentioning!
On the issue of the ordering of parameters, I found this blog post useful:
http://byxb.tumblr.com/post/11963923397/ordering-component-parameters-in-flash-cs5-cs5-5