Hello everyone. I’m looking for a little guidance on how to do something. I’ve been trying to figure out the best way to do this for awhile but, it eludes me. I just don’t know enough about AS… yet. I was hoping there are a few out there who could just point me in the right direction.
I am trying to make an accordian style portfolio. Imagine a row of horizontal columns, click here for visual example . When you click on one column it expands (resizes) to the width and height of the image to be loaded based on an xml file. If another image is already open that image would fade out and the column would resize back to its original width and height.
Main problem is, I can’t get past figuring out how to do both, the loading and creation of the columns by xml and also the dynamic resizing of the columns at the same time. I can either do, the xml and have the images load and columns made or just make the columns sort of move and behave like i want them to with no images. I seem to only get so far and then as soon as i try to incorporate another feature I get confused and lost as to how to go about it.
Below is the AS I have so far and if you click here you can see what it looks like so far although, things are just kinda stacked on top of each other.
ActionScript Code:
[FONT=Courier New][LEFT][COLOR=#0000ff]fscommand[/COLOR][COLOR=#000000]([/COLOR][COLOR=#ff0000]"fullscreen"[/COLOR], [COLOR=#000000]**false**[/COLOR][COLOR=#000000])[/COLOR];
[COLOR=#000000]var[/COLOR] pictures:[COLOR=#0000ff]Array[/COLOR] = [COLOR=#000000]new[/COLOR] [COLOR=#0000ff]Array[/COLOR]COLOR=#000000[/COLOR];
xmlData = [COLOR=#000000]new[/COLOR] [COLOR=#0000ff]XML[/COLOR]COLOR=#000000[/COLOR];
xmlData.[COLOR=#0000ff]ignoreWhite[/COLOR] = [COLOR=#000000]true[/COLOR];
xmlData.[COLOR=#0000ff]onLoad[/COLOR] = loadXML;
xmlData.[COLOR=#0000ff]load[/COLOR]COLOR=#000000[/COLOR];
[COLOR=#0000ff]lineTo[/COLOR]
[COLOR=#000000]function[/COLOR] loadXMLCOLOR=#000000[/COLOR][COLOR=#000000]{[/COLOR]
[COLOR=#0000ff]if[/COLOR] COLOR=#000000[/COLOR][COLOR=#000000]{[/COLOR]
photoNode = [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]firstChild[/COLOR].[COLOR=#0000ff]childNodes[/COLOR];
[COLOR=#0000ff]for[/COLOR][COLOR=#000000]([/COLOR][COLOR=#000000]var[/COLOR] i = [COLOR=#000080]0[/COLOR]; i< photoNode.[COLOR=#0000ff]length[/COLOR]; i++[COLOR=#000000])[/COLOR][COLOR=#000000]{[/COLOR]
pictures.[COLOR=#0000ff]push[/COLOR]COLOR=#000000[/COLOR];
xWidth = photoNode[COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR].[COLOR=#0000ff]attributes[/COLOR].[COLOR=#000080]xSize[/COLOR];
yHeight = photoNode[COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR].[COLOR=#0000ff]attributes[/COLOR].[COLOR=#000080]ySize[/COLOR];
[COLOR=#000000]var[/COLOR] picFrame:[COLOR=#0000ff]MovieClip[/COLOR] = holder.[COLOR=#0000ff]attachMovie[/COLOR][COLOR=#000000]([/COLOR][COLOR=#ff0000]“frame”[/COLOR], [COLOR=#ff0000]“frame”[/COLOR] + i, i[COLOR=#000000])[/COLOR];
picFrame.[COLOR=#000080]container[/COLOR].[COLOR=#0000ff]loadMovie[/COLOR]COLOR=#000000[/COLOR];
picFrame.[COLOR=#0000ff]_x[/COLOR] = i*COLOR=#000000[/COLOR];
picFrame.[COLOR=#0000ff]border[/COLOR].[COLOR=#0000ff]_width[/COLOR] = xWidth;
picFrame.[COLOR=#0000ff]border[/COLOR].[COLOR=#0000ff]_height[/COLOR] = yHeight;
[COLOR=#808080]//[/COLOR]
[COLOR=#808080]picFrame.border.xWidth = xWidth;[/COLOR]
[COLOR=#808080]picFrame.border.yHeight = yHeight;[/COLOR]
picFrame.[COLOR=#0000ff]onEnterFrame[/COLOR] = checkLoadProgress;
[COLOR=#000000]}[/COLOR]
[COLOR=#808080]*//trace("loaded");*[/COLOR]
[COLOR=#000000]}[/COLOR]
[COLOR=#0000ff]else[/COLOR][COLOR=#000000]{[/COLOR]
[COLOR=#0000ff]trace[/COLOR][COLOR=#000000]([/COLOR][COLOR=#ff0000]"failed"[/COLOR][COLOR=#000000])[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]function[/COLOR] checkLoadProgressCOLOR=#000000[/COLOR][COLOR=#000000]{[/COLOR]
[COLOR=#000000]var[/COLOR] bLoaded = [COLOR=#0000ff]this[/COLOR].[COLOR=#000080]container[/COLOR].[COLOR=#0000ff]getBytesLoaded[/COLOR]COLOR=#000000[/COLOR];
[COLOR=#000000]var[/COLOR] bTotal = [COLOR=#0000ff]this[/COLOR].[COLOR=#000080]container[/COLOR].[COLOR=#0000ff]getBytesTotal[/COLOR]COLOR=#000000[/COLOR];
[COLOR=#0000ff]if[/COLOR] [COLOR=#000000]([/COLOR]bLoaded && bLoaded == bTotal[COLOR=#000000])[/COLOR]
[COLOR=#000000]{[/COLOR]
[COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]border[/COLOR].[COLOR=#0000ff]_width[/COLOR] = [COLOR=#0000ff]this[/COLOR].[COLOR=#000080]xWidth[/COLOR];
[COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]border[/COLOR].[COLOR=#0000ff]_height[/COLOR] = [COLOR=#0000ff]this[/COLOR].[COLOR=#000080]yHeight[/COLOR];
[COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]onEnterFrame[/COLOR] = [COLOR=#000000]**null**[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]}[/COLOR]
[/LEFT]
[/FONT]
I hope, it will eventually work something like this, which i made (along with 100 other attempts) using onClipEvent. But, I couldn’t figure out how to integrate it with the images loaded from xml and also have them dynamically resize to the size of the image. Maybe I just need to look at it again.
Please, I would love to hear any advice on this or even just ask me questions about it to clarify the idea. It might help me to figure out some things.
Thanks.
jensou
