So how do you actually make a component in Flash MX2004 / 8 utilizing actionscript 2.0?
Well the answer is fairly simple to give, but does open up a plethora of questions… Flash components are formed of two distinct parts:
- The Class file
- The Component clip
The Class file must have the same name as the component clip. Therefore if we were making a component called ExampleBox, our component clip would be called ExampleBox as would our class. This does not mean that there can only be one class per component, as with all classes we can instantiate instances of other imported classes within our component class to do specific tasks. As we move further into component development you’ll see that it makes design sense to use specific classes to deal with specific requirements.
Now depending on what type of component you are creating you have the choice of extending from different classes*, if you wish to create a non visual component, like the DataHolder, Remoting connector etc. then you can extend your component from UIObject. If on the other hand you are developing a visual component then you are more likely to extend it from UIComponent or one of the many visual components that subsequently extend directly or indirectly from it – Button, ComboBox, Datagrid, TextInput etc.
*this statement only TRULY applies if you wish to create components that will easily hook into the Adobe (formerly Macromedia) component framework. If that isn’t important to you then you can quite simply start from a base class and build / extend upon it as you develop more components / classes.
The second part of our component is the Component clip itself. This is what will eventually be used to create an SWC, now I tend to keep each component in a separate FLA, but not always, whereas Adobe keep all of theirs together, (it is in a FLA called StandardComponentsFLA.fla and you will find it in ‘yourFlashDir’ > en > configuration > componentFLAs). It is entirely upto you how you store your components so do what you prefer.
To make the component clip create an empty movieClip in your library and name it after your component class – If you don’t know how to do this component development may be a bit advanced for you :P. Once you have the clip created open the Linkage dialog for our new symbol and set the linkage name to the component class name also and while it is still open add in the full package path of your class in the AS 2.0 class field.
For example if we were making a component called ‘ExampleBox’, our movieClip symbol would be called ‘ExampleBox’, as would our Linkage name would be ‘ExampleBox’ and for my class it would read ‘com.flashgen.examples.components.ExampleBox’ as illustrated below.
Once we have those set we need to add the class to the Component definitions, again this can be found on the context menu for the movieClip symbol. Once you have added the full class name in the AS 2.0 class field click OK.
Now if you already have your component class created two things will happen, Flash will automatically check your class for any errors before adding in any inherited properties to your component clip, (defined by the meta [Inspectable] – we’ll deal with this and other meta later). And if successful it will change the movieclip icon in the library to the default component icon. If you selected an alternative icon from the component definition dialog then that will be displayed. You can add custom icons but again this we’ll cover off once we get to meta in our class file.
If, however, you don’t have the class Flash will throw an exception and tell you in can’t find the class – Something you can live with while we move onto the actual creation of the class.
Before we move onto the class we need to make sure our symbol library is set up correctly – now realistically I could go into great graphic detail about how to lay your folders out but I would suggest grabbing the zip below and just having a look at it (you’ll need it for the next step in creating a component anyway so download it and we can move on :P).
Grab the files here: Basic Component Framework
One Comment