Flash CS3 component creation : SWC to FLA

Here we will see how to cenvert a SWC based component to FLA based component. I hope you are following along my past posts. So, what we have here is a SWC and its source code ( The FLA and the Class file ). Now, to begin with, remove the SWC, because we no longer want it. Copy the FLA(scrollBar.fla) two times to make 2 more files.This is just to take the back up of the original SWC component file.What we need is two files, one component source file and one component Shim file ( Do not worry too much about the name, just think of it as another file :) ).So rename the 2 copied files as “FLA scrollBar.fla” and “FLA scrollBar Shim.fla”.

Open “FLA scrollBar.fla” and open its library.You will see, one compiled clip and one moveClip named “samScrollBar_bkup” along with the scrollbar component parts (mc_down,mc_slider,mc_sliderBg,mc_up).This is fine, I made “samScrollBar_bkup” just before compiling the SWC component.So do not worry much about it.Even if you do not have “samScrollBar_bkup” or the compiled clip, it does not make any difference.Only thing that differ would be for you to recreate one scrollbar component, if these things were not there . So problem, we are not going to do anything here. I was just making you aware of the FLA. :)

Lets make the real trick here. The “Component Shim”. Close the “FLA scrollBar.fla” and open “FLA scrollBar Shim.fla”. This is also having the same structure as the previous movieclip as we have copied from the same source.We will change this files to make our component Shim (forget about the name for the time being, think of it as a requirement for FLA component).
Create a blank Movieclip in Library and name it “sam_scrollbar_shim_source” (name is not important as long as it does not ovelap with another name in the program). Rightclick the clip on Library and click “Properties…”, which will open “SymbolProperties”.In the “Symbol Properties” dialogue box, set this clip to “Export for ActionScript” and uncheck “Export in first frame”, in the “Class” field, Flash will automatically put a class name,do not modify it. Click “Ok”, flash will prompt you that “The class definition is not found, so a default class will be created”, click “Ok”.
Double click the same clip to go inside its symbol editing mode.Create 2 layers with names as “shim name” and “component parts”.Create 2 frames in both the layers. Put some text in the “shim” layer.I put it as “Shim”, this is not mandatory, but simply for some visual reference on stage.You can delete this “Shim” layer too. Now the “component parts” layer should contain 2 keyframes.Let the first frame be blank.In the second frame, we need to put all the component parts.So drag each of the movieclip ( which make up the component;mc_down,mc_slider,mc_sliderBg,mc_up ) to this layer.One more clip we need to add here is the component movieclip itself.But in the library we do not have a component movieclip, what we have is one compiled clip and one clip with name “samScrollBar_bkup”.We could use them, but I want to show you that actually we do not need a component clip, rather a clip with name same as our component clip and with its identifier and class same as component clip.So delete “samScrollBar_bkup and the compiled clip from library.What we have in library is only the component parts.Now create a movieclip in library with name “samScrollBar”, set it to “Export for ActionScript” and uncheck “Export in first frame”.In the class field add the class name we used to create the component “SamScrollBar”. Thats it. Now save the file. Come out of any symbol editing mode to the main timeline. Now go inside “sam_scrollbar_shim_source” movieclip and on the second frame of layer “component parts” make sure that you have all of the component part movieclips along with “samScrollBar” clip is present, if previously not present, drag each one of the clip to this frame.Come back to main timeline. Rightclick on “sam_scrollbar_shim_source” movieclip on Library and click on “Convert to Compiled clip”.That will take some time and will create a clip named “sam_scrollbar_shim_source SWF” in the Library. Rename this clip to “sam_scrollbar_shim”.
Now open the “FLA scrollBar.fla” file.Copy “sam_scrollbar_shim” clip from “FLA scrollBar Shim.fla” files library to “FLA scrollBar.fla” files library.
Close the “FLA scrollBar Shim.fla” file. Double click on the “samScrollBar” clip to go inside it.You should see 2 layers in it, as “avatar” and “assets”.Make another layer in it and drag it named “Component shim”.Currently this clip has 2 frames, add another frame in the “Component shim” layer.So on frame 3 of the “Component shim” layer add a keyframe. Do not make anychanges anywhere else :) .In the third frame of “Component shim”, put the “sam_scrollbar_shim” clip, which we just copied from other file. Make sure, your first layer contains only the “avatar”(bounding box), second frame contains only the “assets”(component parts) and third frame contains only the “componentShim”.
Come out of the symbol editing mode to the main timeline. Rightclik on “samScrollBar” clip on library and click on “Component Definition”. That will open “Component Definition” dialogue box.Do not do anything, just click “Ok”.Thats all :).
Now, copy the FLA(FLA scrollBar.fla) to the components directory (typical path is “C:\Documents and Settings\saumyar\Local Settings\Application Data\Adobe\Flash CS3\en\Configuration\Components”) and restart flash. You will see your FLA component in the components panel :)

Everything else is just good practice. Best practices will include, locking the “componentShim” layer and “avatar” layer, while making the Shim clip, removing the graphics present in them. As you see, when we make the scrollbar clip, we simply make an empty clip and add the same “class” name to it in the exports settings dialogue box. You can do the same thing for all the component parts too, so that in the component shim there would be no visual disturbing elements.

I would say, these are the only steps, but there are a lot of things to understand and get used to. You can make the component in 2 frames too, but for that one need to write some extra scripts. So the choice is yours, I was just trying to make you understand the basic and all steps in a V3 component, rest is all yours. :)