PDA

View Full Version : Skinning the Accordoin component


firdosh
04-16-2005, 07:30 AM
The macromedia help files shows this way to skin the accordion headers
onClipEvent(initialize){
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

thanks
cheers :)
firdosh

SrinivasSM
04-26-2005, 09:36 AM
Hi,

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.

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

cheers :)
firdosh

skyymap
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:
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

firdosh
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 :)
firdosh

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

Post the code so we can looks at this.

- the Skyymap team

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

PLEASE PUT YOUR CODE IS THE AS TAGS!!!!!!!!!!!!!!!