View Full Version : Skinning the Accordoin component

04-16-2005, 07:30 AM
The macromedia help files shows this way to skin the accordion headers
falseUpSkin = "fbsAccordionHeaderSkinFalseUp";
trueUpSkin = "fbsAccordionHeaderSkinTrueUp";
How do I go about this if I am dynamically attaching the component.
I tried
mycom.addEventListener("initialize",myMethod); but this doesnt work

cheers :)

04-26-2005, 09:36 AM

I hope "fbsAccordionHeaderSkinFalseUp" and "fbsAccordionHeaderSkinTrueUp" are two movie clips.If yes then instead of the present Linkage indentifier name use "falseUpSkin"
and "trueUpSkin" for the respective clips.

05-04-2005, 11:18 PM
Hey Srinivas ,
I tried what you suggested bu that did not work either.

cheers :)

05-06-2005, 06:19 AM
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. :cool:

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:
3. Publish the movie

// **** REAL WORLD EXAMPLE **** //
- click on "Free Reports" + "our process"

here is the code used:
path = _root.pfgFreeReportsACC_mc.pfgFreeReports_acc
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

05-06-2005, 02:18 PM
Hey skymap,
it works when you have the component on stage but it dosent work when u dynamically add it using createClassObject.

cheers :)

05-07-2005, 03:07 AM
firdosh -

Post the code so we can looks at this.

- the Skyymap team

05-07-2005, 03:11 AM
I Will Post This Again Like I DID IN OTHER THREADS!!!!!