Hey guys.
I am not sure if you have gotten your question answered. If you have, please ignore this tutorial. If not, let's get started.
Skinning the Accordion component by Skyymap, Inc. 05/05/2005
A skin is nothing more than a movie clip that is associated or "linked" with the internal component's movie clip. When you publish the flash movie, the component first draws the component without the new skin. Then it re-draws itself with the new skin by calling the "linked" movie clip from the library. Of course you do not see these draws and re-draws, but as a rule of thumb it is always a good idea to have at least 2 frames on your time line to allow the component to initialize properly. In this example, we will be using our standard of 10 frames.
// **** SETUP THE STAGE **** //
1. Create a new flash document
2. Select frame 10 on your timeline and insert a new keyframe.
3. name the layer "actions"
4. Insert a new layer and call the layer "component"
5. With the "component" layer selected, drag an accordion from the component panel onto the stage
6. Name the component "example_acc"
// **** MOVIE CLIP CREATION **** //
1. Create an image for the accordion header.
2. make the new image a movie clip [F8] called "trueSkin_mc" and delete it from the stage. [not to worry - its in the library].
3. Open your library [F11] and right click on the newly created movie clip.
4. Select "Linkage" and check "export for actionscript" + "export in first frame"
5. The text area "Identifier" should have automatically pre-filled with the name of your movie clip. If it has not - make sure the text in the identifier is exactly the same as your movie clip!
6. Click on the "OK" button on the "linkage" dialogue box.
7. double click on the movie clip(trueSkin_mc) and make sure the new image's x+ y are set to 0.0
8. return to the main timeline.
// **** CODE **** //
1. on frame 1 of the "actions" layer add:
this.example_acc.falseOverSkin = "trueSkin_mc";
2. on frame 10 of the "actions" layer add:
stop();
3. Publish the movie
// **** REAL WORLD EXAMPLE **** //
http://www.theperpetual.com
- click on "Free Reports" + "our process"
here is the code used:
path = _root.pfgFreeReportsACC_mc.pfgFreeReports_acc
path.drawFocus="";
path.setStyle("openDuration", 500);
path.setStyle("openEasing", mx.transitions.easing.Bounce.easeOut);
path.selectedIndex = _root.pfgFreeReportsACC_mc.pfgFreeReports_acc.numC hildren - 6;
path.setStyle("color" , "0x003366");
path.setStyle("borderStyle" , "none");
path.setStyle("verticalGap" , 1);
path.depthChild0._alpha = 0;
path.falseOverSkin = "pfgFreeReportsAccordianTrueSkin_mc";
path.trueOverSkin = "pfgFreeReportsAccordianTrueSkin_mc";
path.falseUpSkin = "pfgFreeReportsAccordianFalseSkin_mc";
path.falseDownSkin = "pfgFreeReportsAccordianTrueSkin_mc";
path.trueUpSkin = "pfgFreeReportsAccordianTrueSkin_mc";
path.trueDownSkin = "pfgFreeReportsAccordianTrueSkin_mc";
// end all