In the previous article we dealt with the initial concepts of the component clip and how to associate it with a class. Now we are going to move onto the class and how we merge the two to create our component (read this if you need a refresher).
As we have a component clip to work from and we have added in our classpath via the Linkage identifier and the component definitions dialogs, we can now set about putting the class framework together. Firstly we need to put our class in a package (that’s just a folder structure on your file system if you weren’t already aware).
Class packages usually follow a namespace format and the commonest form of this is a domain name. This is achieved by chopping up the domain name and creating a file system based on it in reverse. So for my package structure I have com.flashgen.xxx, where xxx is a specific subpackage. This would be represented on your file system along the following lines:
So all we need to do now is apply this to the clip to produce our test SWF and finally our SWC ready for use to add to our components directory so Flash can read it in, or distribute it so others can benefit from our new component :).
So What Exactly Does A Component Clip Require To Be A Component?
Well to put it simply it’s just a movicelip named after the component with two layers, the first layer is called Actions and only contains one frame, in this frame we add a stop(); action. The second frame is a little bit more indepth and contains two empty key frames, for clarity we’ll name this layer Assets. In the first frame of this layer we need to drag out a copy of the BoundingBox moviceclip from the library and place it so it’s aligned top left to the central registration point of the component movieclip, (grab the Basic Component Framework files from here if you haven’t already).
Next we need to resize this so it is set to the dimensions required by our component for its default width and height – for example if we were creating a Button component we may set the BoundingBox clip width to 100 and its height to 22; this would set the default dimensions of our component to these settings when it initializes alleviating the need for the user to set a default value for them before they can actually use the component.
Finally we need to set the instance name of the BoundingBox to, strangely enough, boundingBox_mc. Realistically speaking we can call it anything but to make it easier to learn more about how the components by Adobe are constructed we’ll try and keep the naming conventions close to theirs where the component framework is concerned.
In the second key frame of the Assets layer we place all our visual assets – skins, graphics, icons etc. that are part of our component as well as one of the following clips from Adobe’s component framework:
- If we are creating a non UI based component we place an instance of UIObject or UIComponent from our library in this frame*.
- If we are making a generic UI based component then we drag an instance of UIComponent onto the frame
- And finally if we are extending another component we would drag the uncompiled version of the component we are extending from. i.e. that components component clip.
* UIObject adds less overhead to your component compared to UIComponent if you require no graphical assets at all in your component so I recommend you opt for this when coding non visual components
Making Our First Test File
Now we have added the relevant instance of the component framework to our component clip we are ready to test it. First open up the linkage dialog box and make sure that the Export for Actionscript is checked; we don’t need to check the other export option as we aren’t exporting this in the same manner as other linked assets. Once we have the linkage set we are ready to make our first test SWF. To do this right click on the component clip and select on Convert to Compiled Clip.
If the compile is successful a SWF will appear in your library named after the component clip but with the suffix SWF, if it fails the output window will give you insight as to the reasons why it failed. Now in Flash MX2004 that’s all she wrote, however in Flash 8 you’ll probably get a warning in the output panel informing you that a symbol already exisats with the same linkage name. Take it as just this a warning – I did post this as a bug during 8ball but was informed it wasn’t, you decide :P
We can drag this compiled clip into another empty FLA and export it to test whether our new component functions correctly. Once we are happy that all the assets are exported correctly in our component and the functionality is as desired we can finally export our component as an SWC. So switching back to our component file open the symbol context menu again and instead of selecting Convert to Compiled Clip this time select Export SWC File…
Once you have selected Export SWC File… a dialog box will open and ask for a location and a name for the SWC. Make sure you name the SWC with the same name you gave your component clip. For example if you called your component class ExampleBox.as, your component clip would be called ExampleBox, as would it’s linkage name and finally it’s SWC.
The reason you have to make sure the SWC is named correctly is due to the fact that once it is imported into the component library in the IDE, Flash reads the name from inside the SWC not the actual file name. So if you accidently named two component clips the same but named their SWC’s differently in your file structure they would be different but in the component panel they would both appear but have the same name!
Now that we have successfully exported our SWC to a directory of our choice we only have to add it to our component panel. Now Adobe’s docs detail where Flash stores all it’s user files.
- On a Windows it would be Boot Drive:\Documents and Settings\(username)\Local Settings\Application Data\Macromedia\(Flash MX 2004 or Flash 8 )\(language)\Configuration\Components
- On a Mac it would be Macintosh HD/Users/(username)/Library/Application Support/Macromedia/(Flash MX 2004 or Flash 8 )/(language)/Configuration/Components
For your own components I would suggest making your own folder inside this folder – I have one called FGComponents and I place all my components into this. Once you have copied your new SWC into this directory or a sub directory you will need to reload the component panel. You can do this by opening the panel menu, (the little file icon in the top right of the component panel bar), and selecting Reload.
Once the panel refreshes you should see your subdirectory and if you expand it you’ll find your new component inside. Now all that is left to do is drag it from the panel to a nice fresh FLA and have a play.
Have fun and if you want a file to play with grab this one and have a mess about. Happy coding :)