2008
accordion class – flash actionscript3 (as3)
in flash as3 you don’t have any accordion component, not that i like using those components,i’d prefer use a nicely written code instead :)
so there i was looking for a vertical accordion for one of my works, i came accross this nice class, that does everything in a very simple code. the only problem i found it that it had only a horizontal version…
looking at the comments i saw there is a need for a vertical one,
so i fixed the code in a way that it can work both ways.
the new accordion constructor has an extra of 2 parameters :
public function accordion($width:Number, $height:Number, panelNumber:Number=0, navWidth:Number=0,navHeight:Number=0,allignment:Boolean=false)
the navHeight – represent the height of the navigation panel for Vertical mode,
and the alignment flag – false is for horizontal, and true … welp you’ll figure that out yourself.
the only thing left open in working with 2 accordions one inside the other :), i’ve managed to get that one going, but there is a problem with something not allowing the inner accordions btns to work as supposed. i’ll try to give it my time soon.
anyway great thanks to the one who wrote it, feel free to give the original page a visit.
download the sourcecode for my version : vertical and horizontal accordion source code
Thank you very much for this blog post this is a great accordion the best one Ive found online thats easy to use.
Great work. Stupid question, but how do you actually customise it to have your own content on each slide?
inside your flash , in the library section you can see 2 sample movieclips
one for the panel, and one for the content.
build your own movieclips, name them and then in the code file , place your names instead of the samplePanel and sampleContent movieclips.
at the moment, this accordion actually kinda fixed to the sizes mentioned on the constructor (when you first create a new instance)
i have a minpulated version of it, more user friendly one, i need to fix some last issues on and post it here.
let me know if you handled it.
Don’t you into problems naming your classes without a Capital letter at the start? That’s one of the first basics of object oriented programming.
Thanks very much! Should have known that really… or at least fiddled a bit more before asking. But this time I have a question I am truly stumped on.
I am trying to add a hover button inside the navigation buttons – a simple little thing so that when I move my mouse over the buttons the text changes colour. A simple button symbol doesn’t work which I expected – but I am also having quite a bit of trouble doing this with code.
Any ideas?
Thanks a lot in advance.
Pat.
Thank you very much! Need this one for a project, I’m happy finding scuh nice solution in here! :_)
Excellent script m8 thanks for sharing.
Hi, first I have to thanks for this gr8 script.
I am just a beginner for actionscript. Could you pls explain how to give a link (get url) for each panel images?
Excellent template to work from – thanks a bunch! Hope to return the favor sometime.
Very good working, i will say such should be encouraged.
thnkx
Thank You. It’s very good.
Great accordion, good work!
I’m fairly new to AS3, could you let me know how I would make a panel content close if I click on the same panel that opened it…
If thats possible
Thanks
Chris
man i havn’t touched that script for ages,
i started working on an improved version months ago, but its still a work in progress, so i guess you will need to solve that one by your self.
You my friend have just saved me a lot of time, thank you!
hey there,
was just messing with your script and was wondering..where is the part where you’re duplicating the menus? Can’t seem to figure it out.
thanks!
-aof
Hi first of all great accordion.
I have a question. lets say i have 4 different contents with different descriptions ( text in the left corner )
1. how can i change the Panel description of each Panel.
2.how can i set the size of each panel content because each content have a differtent size in.
thanks
I am looking for something like this but where each panel is part of an image and when you roll over it, it does the accordian motion and shows a different image. Can that be done with this? I am SO new to as3.
Thank you!
Mazel Tov!
This helps me a lot.
You’re a mensch.
Help.
How can I change the labels and load different submenus in the content?
Can’t figure out at all :-(
Dude, this rocks!.. thanks
please can you help when i try to import the class with a.s / import main;
i have nothing on my stage
Hi ….thanks a lot for ur code ….i modified this a bit ….it will auto height according to the content in the panel ….it’s only availabel for vertical bcoz i have no time now…..
here’s the code …..may be u can think of doing it properly …..
package src.navigation{
import flash.display.*;
import flash.geom.*;
import flash.events.*;
import caurina.transitions.Tweener;
public class accordion extends MovieClip{
private var mywidth;
private var myheight;
private var navW;
private var navH;
private var panelN;
private var panelW;
private var panelH;
private var panelWithBtnWidth;
private var panelWithBtnHeight;
public var currpanel:Number;
private var vertical:Boolean;
private var BG_COLOR = 0xFFFFFF;
public static const EVENT_ON_CHANGE = “change”;
// first one is always open
public function accordion($width:Number, $height:Number, panelNumber:Number=0, navWidth:Number=0,navHeight:Number=0,allignment:Boolean=false){
vertical=allignment;
mywidth = $width;
myheight = $height;
panelN = panelNumber;
navW = navWidth;
navH = navHeight;
this.graphics.beginFill(0xFFFFFF);
this.graphics.drawRect(0,0, mywidth, myheight);
this.graphics.endFill();
panelW = $width-panelNumber*navWidth;
panelH = $height-panelNumber*navHeight;
panelWithBtnWidth=panelW+navWidth;
panelWithBtnHeight=panelH+navHeight;
var mk:Sprite = new Sprite();
mk.graphics.beginFill(0xFF0000);
mk.graphics.drawRect(0,0, mywidth, myheight);
mk.graphics.endFill();
this.addChild(mk);
this.mask = mk;
}
public function openPanel(pNumber:Number):void{
var obj;
var i;
for(i=1;i<this.numChildren;i++){
obj = this.getChildAt(i) as Sprite;
obj.getChildByName("btn").addEventListener(MouseEvent.CLICK, handleOpenClick);
obj.getChildByName("btn").buttonMode=true;
}
obj = this.getChildAt(pNumber) as Sprite;
obj.getChildByName("btn").buttonMode=false;
obj.getChildByName("btn").removeEventListener(MouseEvent.CLICK, handleOpenClick);
var height_ = 0;
// get complete height
height_ = Sprite(this.getChildAt(pNumber)).getChildByName("content").height;
height_ += this.numChildren*navH;
for(i=pNumber+1; i<this.numChildren;i++){
obj = this.getChildAt(i);
//height_ = obj.getChildByName("content").height;
trace("height_ : " + myheight + ":" + height_);
////////////////////////
if (!vertical) Tweener.addTween(obj, {x:mywidth-(this.numChildren-i)*navW, time:1.0, transition:"easeOutCubic", rounded:true});
else Tweener.addTween(obj, {y:height_-(this.numChildren-i)*navH, time:1.0, transition:"easeOutCubic", rounded:true});
////////////////////////
}
for(i=1; i<=pNumber;i++){
obj = this.getChildAt(i);
////////////////////////
if (!vertical) Tweener.addTween(obj, {x:(i-1)*navW, time:1.0, transition:"easeOutCubic", rounded:true});
else Tweener.addTween(obj, {y:(i-1)*navH, time:1.0, transition:"easeOutCubic", rounded:true});
////////////////////////
}
currpanel=pNumber;
dispatchEvent(new Event(EVENT_ON_CHANGE));
}
public function addPanel(btnBackground:MovieClip,contMovie:MovieClip){
var pnl:Sprite = new Sprite();
var color = BG_COLOR;// Math.round( Math.random()*0xFFFFFF );
pnl.graphics.beginFill(color);
panelWithBtnHeight = panelWithBtnHeight – navH;
panelWithBtnHeight += contMovie.height;
/////////////////
if (!vertical) pnl.graphics.drawRect(0,0,panelWithBtnWidth,myheight);
else pnl.graphics.drawRect(0,0,mywidth,panelWithBtnHeight);
/////////////////
pnl.graphics.endFill();
var btn:MovieClip = getBtnBase();
var msk:MovieClip = getBtnBase();
pnl.addChild(btnBackground);
pnl.addChild(btn);
btn.addChild(msk);
btn.mask = msk;
var localcont = contMovie;
pnl.addChild(localcont);
localcont.name = "content";
pnl.name = "panel";
/////////////////
if (!vertical) localcont.x+=navW;
else localcont.y+=navH;
/////////////////
var contmask:MovieClip = getContentBase(localcont);
localcont.addChild(contmask);
localcont.mask = contmask;
this.addChild(pnl);
/////////////////
if (!vertical) pnl.x= (this.numChildren-2)*navW;
else pnl.y= (this.numChildren-2)*navH;
/////////////////
btn.panelNumber = this.numChildren-1;
btn.mouseChildren=false;
btn.buttonMode=true;
btn.name="btn";
}
public function getPanelContentsAt(i):MovieClip{
var obj:Sprite = this.getChildAt(i) as Sprite;
return obj.getChildAt(2) as MovieClip;
//trace(this.getChildAt(i).getChildAt(0));
}
private function handleOpenClick(evt:Event){
if(evt.target.panelNumber){
openPanel(evt.target.panelNumber);
}
}
private function getBtnBase():MovieClip{
var btn:MovieClip = new MovieClip();
var color = Math.round(Math.random()*0xFFFFFF);
btn.graphics.beginFill(color,0);
/////////////////
if (!vertical) btn.graphics.drawRect(0,0,navW,myheight);
else btn.graphics.drawRect(0,0,mywidth,navH);
/////////////////
btn.graphics.endFill();
return btn;
}
private function getContentBase(localcont:DisplayObject):MovieClip{
var cont:MovieClip = new MovieClip();
var color = Math.round(Math.random()*0xFFFFFF);
cont.graphics.beginFill(color,0.5);
/////////////////
if (!vertical) cont.graphics.drawRect(0,0,panelW,myheight);
else cont.graphics.drawRect(0,0,mywidth,localcont.height);
/////////////////
cont.graphics.endFill();
return cont;
}
}
}
This is very well done, thank you for sharing :D
I am trying to use your accordian customized for my needs. I am unable to add a list inside the panel and provide a dataProvider. If i just add the list, it just flickers inside the panel and when i provide the dataProvider, i get a compile timer error that am accessing an unknown property called dataProvider for the list component. could you please help. i am trying to figure this out for the last few hours with no progress.
Hi There. great accordian.
I was wondering. do you think you could tell me how O make the content have a clear background but still mask each other out rather than just cover each panel. I wanted to use a background image on the background which I dont want to move. I only want to animate the text.
thanks very much.
Michael
Hi grat job.
I haven’t seen a better accordion component for flash so far.
You are the man.
However, I’m trying to add a event listener to the main sections in order to load a file (to be shown outside the panel) wile that barr is clicked and the panel is just opening.
could you gimme a clue on how to do that ?
Thanks in advance.
Roberto Leite
Brazil