KoolMoves 7 technology preview

All I see is

import km.components.~~;

var acc:Accordion = new Accordion();

Example would be nice.

PHP Code:

---

var acc:Accordion = new Accordion();

acc.panelPlacement = 'left';
acc.operationMode = 1;
acc.sizeToContent = true;

acc.setSize(400,320);
acc.move(40,40);

var s1:Shape = new Shape();
var s2:Shape = new Shape();
var s3:Shape = new Shape();
var s4:Shape = new Shape();

s1.graphics.beginFill(0xff0000);
s1.graphics.drawCircle(50,50,30);
s2.graphics.beginFill(0x00ff00);
s2.graphics.drawCircle(50,50,60);
s3.graphics.beginFill(0x0000ff);
s3.graphics.drawCircle(20,20,20);
s4.graphics.beginFill(0xffff00);
s4.graphics.drawCircle(80,80,20);

var p1:AccordionPanel = new AccordionPanel();
p1.header.label.valign = 'bottom';

acc.addPanel(p1,'caption 1', s1);
var p2:AccordionPanel = acc.addPanel(p1.clone(),'caption 2', s2);
var p3:AccordionPanel = acc.addPanel(p1.clone(),'caption 3', s3);
var p4:AccordionPanel = acc.addPanel(p1.clone(),'caption 4', s4);

p1.duotone = [0x600000,0xffe0e0];
p2.duotone = [0x006000,0xe0ffe0];
p3.duotone = [0x000060,0xe0e0ff];
p4.duotone = [0x606000,0xffffe0];

addChild(acc); 


---

weird that I cannot get this to work....

Cannot create property sizeToContent on km.components.Accordion.
at doc_fun::MainTimeline/frame1()

@Stoke, nice picture :D

@Bret & Chris, the Accordion from the beta wasn't finished yet.
I updated the example I posted before so you can see the supported options
http://www.waterlijn.info/km/as3/Accordion2.html

That example is really majic Wilbert, truley first class work.

Thanks Laurence.
Here's a little modified example with a bit different look
http://www.waterlijn.info/km/as3/Accordion2a.html

Thats great, could you please help me with a bit of example code that would allow me to do what you did in the 1st panel, include a content-pane. Thanks.

The bar differences and the embedded icon make the "2a" a version I would like to peek at :)

@Laurence & Chris,
What I did was not that complicated.

For the contentpane, I placed one on stage using the gui and also set content using the gui. When I added the panel it should be in to the accordion, I passed the contentpane for content

Code:

---

myAccordion.addPanel(panel1,'', contentpane1);

---

Since AS3 supports reparenting, it is automatically removed from where it was before it is added to the panel. You have to move the contentpane to (0,0) if you want it to be in the top left of the panel. You can use the setSize function of the contentpane to make it fit the panel.

The panel headers and backgrounds where skinned using the setSkin function and the icon was assigned like this

Code:

---

panel1.header.label.icon = new home_icon_png(0,0);

---

Where home_icon_png is the class name I assigned to the icon when I added it to the symbol library.
The shading behind the header texts was done by adding a filter to each header label.

Code:

---

panel1.header.label.filters = [new DropShadowFilter(2,45,0,.5,2,2,2)];

---

Thanks for the breakdown Wilbert. You've done a wonderful job!

Yep, that works a treat, I substituted the contentpane for a mediaplayer, and it simply slotted in. Excellent:)

I want to show an Accordian populated with live data and reacting to the content it's populated with. The commenting panel and media panels are still being worked out and commenting will eventually work just like it does in the main blog.

http://krazyaboutpizza.co.uk/index.php?page=248

This one uses duotone but also highlights the open panel in a distinct color.

Nice work Chris.
The RTE integrates very well with the Accordion.
Since you added some glow to the header labels that makes them appear a bit bigger, you might consider setting a bigger headerSize for the panels.
I was also wondering if you did use the new setDataXML function to populate the List or are doing things manually.

Will do on the header size.

I'm using the same backends that the blog uses which create inline XML suited for Flex/E4X so to save time (and a rewrite) I'm busting the XML in KM manually (to share the same backend) and using setItemArray.

Ohhh damn cool Chris, I see some very exciting things on the horizon.
By the way, you can meet the misses here (sorry Necro, I just played with the jpg)

A few drag containers
http://www.waterlijn.info/km/as3/DragContainers.html

2nd Accordian added with dynamic backgrounds.

http://krazyaboutpizza.co.uk/index.php?page=248

:cap: Great work Chris.
I created in KoolMoves 7.0 a reflection of the real-time FLV with AS3. Can yours see it here

Outstanding! That looks great :thumbsup:

NumericStepper