Hi there guys
I have this xml gallery guys basterdised to the best of my ability, a
grid of thumbnails are created on the stage and each thumbnail has a
descriptive tooltip and when clicked opens a movieclip containing
specific content belonging to the chosen thumbnail.
I’m trying to create a function that builds a side bar menu containing
several buttons describing the type of job its is (advertising, branding,
design, web… etc) and once one of the buttons is pressed the only
active thumbnails are the ones that refer to the sidemenu item pressed.
In a word I’m very lost, I’ve tried various things within my ability and
now my heads fallen off.
Any sort of help would be greatly appreciated.
here’s the .as file and a brief bit of the .xml file to give an idea of
the structure.
Thanks guys
/*///////////////////////////////////////////////////////////////
Portfolio thumbnail and content layout
////////////////////////////////////////////////////////////////*/
import com.mosesSupposes.fuse.*;
ZigoEngine.register(Shortcuts,Fuse,PennerEasing,FuseFMP);
com.mosesSupposes.fuse.FuseFMP.simpleSetup();
System.useCodepage = true;
mc_large._x = -1000;
var rowcount:Number = 0;
var colcount:Number = 0;
var spacing:Number = 58;
var numcolumns:Number = 6;
var numrows:Number = 5;
var contactholder:MovieClip;
var thumbpath:String = "portfolio/thumbs/";
var largepath:String = "portfolio/";
//XML Control
var galleryXML:XML = new XML();
galleryXML.ignoreWhite = true;
galleryXML.onLoad = function(success) {
numimages = this.firstChild.childNodes.length;
totalImg.text = numimages;
contactholder = _root.createEmptyMovieClip("container", 0);
for (var i:Number=0; i<numimages; i++) {
var advalue = this.firstChild.childNodes*.attributes.name+"
";
var imgfile:String = this.firstChild.childNodes*.childNodes[2].firstChild;
var thumbholder:MovieClip = contactholder.createEmptyMovieClip("tholder"+i, i);
var thumbloader:MovieClip = thumbholder.createEmptyMovieClip("thumb_img",0);
thumbloader.loadMovie(thumbpath+ imgfile);
contactholder._y = Math.floor((Stage.height - contactholder._height) / 3);
contactholder._x = Math.floor((Stage.width - contactholder._width) / 2.5);
////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
thumbholder.imgtitle = this.firstChild.childNodes*.childNodes[1].firstChild;
thumbholder.imgfile = imgfile;
//
thumbholder.tooltip =+ this.firstChild.childNodes*.childNodes[1].firstChild;
trace("tooltip title: " + this.firstChild.childNodes*.childNodes[1].firstChild);
//
thumbholder.advalue = this.firstChild.childNodes*.attributes.name+"
";
_root.advalue = advalue;
_root.ats.text = advalue+"
";
//
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
thumbholder.kwordlength = this.firstChild.childNodes*.childNodes[3].childNodes.length;
_root.numimages = numimages;
thumbholder.keywords = "
";
for(var k:Number=0;k<thumbholder.kwordlength;k++) {
thumbholder.keywords += this.firstChild.childNodes*.childNodes[3].childNodes[k].firstChild+"
";
}
thumbholder._x = colcount * spacing;
thumbholder._y += rowcount * spacing;
thumbholder._alpha=0;
thumbholder.alphaTo(100,0.5,"easeInOutQuad");
rowcount++;
if(rowcount >= numrows) {
rowcount=0;
colcount++;
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
thumbholder.onRollOver = function(tipOn) {
tipOn = this.hitTest(_root._xmouse, _root._ymouse, true) ? true : false;
format = new TextFormat("Praxis LT SemiBold", 19, 0xffffff);
if (tipOn) {
this.createTextField("tip", 10000, 0, 0, 0, 0);
this.tip._alpha=0;
this.swapDepths(this.getNextHighestDepth());
startDrag (this.tip);
with (this.tip) {
this.tip.alphaTo(100,0.5,"easeOutBounce");
this.tip.DropShadow_distance = 5;
this.tip.DropShadow_alpha = .5;
this.tip.DropShadow_blur = 5;
trace("Tooltip: " + this.tooltip);
trace("Tooltip: " + this.advalue);
text = this.advalue+this.tooltip;
_x = this._xmouse+10;
_y = this._ymouse-30;
autoSize = "left";
background = true;
embedFonts = true;
selectable = false;
backgroundColor = 0x000000;
setTextFormat(format);
}
} else if (!tipOn) {
this.tip.alphaTo(0,0.5,"easeOutBounce");
//this.tip.removeTextField();
this.tip.stopDrag ();
}
}
thumbholder.onRollOut = function() {
this.tip.alphaTo(0,0.5,"easeOutBounce");
//this.tip.removeTextField();
this.tip.stopDrag ();
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
thumbholder.onRelease = function() {
if(container._alpha == 100) {
container.alphaTo(0,0.5,"easeOutBounce");
mc_large._x = 0;
mc_large.swapDepths(this.getNextHighestDepth());
mc_large.file.text = this.imgfile;
mc_large.mc_img.loadMovie(largepath+ this.imgfile);
mc_large._y = Math.floor((Stage.height - mc_large._height) / 2);
mc_large._x = Math.floor((Stage.width - mc_large._width) / 2);
mc_large.mc_img.alphaTo(100,1.0,"easeOutBounce",0.1);
mc_large.mc_img.blurTo(0, 2, 0.5,"easeOutBounce",0.3);
//mc_large.mc_img.Blur_blurTo = 100;
//_root.alt.DropShadow_alpha = .5;
//mc_bg.mc_img.alphaTo(100,1.0,"easeOutBounce",0.1);
//mc_bg.file.text = this.imgfile;
//mc_bg.mc_img.loadMovie(largepath+ this.imgfile);
//
mc_large.btn_exit.alphaTo(100,0.5,"easeOutBounce",0.3);
mc_large.btn_info.alphaTo(100,0.5,"easeOutBounce",0.4);
//
/* Copy Box */
//
mc_large.createEmptyMovieClip("copyContainer", 10000, -250, -250, 0, 0);
copyWidth = 430;
mc_large.copyContainer.createTextField("copyBox", 10001, 230, 170, copyWidth, 100);
var myformat = new TextFormat("Praxis LT Light", 14, 0x000000);
mc_large.copyContainer.copyBox.selectable = false;
mc_large.copyContainer.copyBox.autoSize = "left";
mc_large.copyContainer.copyBox.border = false;
mc_large.copyContainer.copyBox.text = this.keywords;
if (mc_large.copyContainer.copyBox.textWidth > copyWidth){
mc_large.copyContainer.copyBox.multiline=true;
mc_large.copyContainer.copyBox.wordWrap=true;
}
myformat.leftMargin = 10;
myformat.rightMargin = 10;
myformat.leading = 0;
mc_large.copyContainer.copyBox.multiline = true;
mc_large.copyContainer.copyBox.wordWrap = true;
mc_large.copyContainer.copyBox.background = true;
mc_large.copyContainer.copyBox.embedFonts = true;
mc_large.copyContainer.copyBox.selectable = false;
mc_large.copyContainer.copyBox.backgroundColor = 0xA9D5DE;
mc_large.copyContainer.copyBox.setTextFormat(myformat);
//
mc_large.copyContainer._alpha=0;
mc_large.copyContainer._alpha=0;
//
//mc_large.copyContainer.DropShadow_distance = 1; // adds a dropshadow & set distance
//mc_large.copyContainer.DropShadow_alpha = .2; // filter alphas are 0-1 multipliers
//
/* End Copy Box */
/* Title Box */
//
mc_large.createEmptyMovieClip("titleContainer", 11000);
mc_large.titleContainer.createTextField("titleBox", 11001, 230, 128, 430, 10);
var myformat = new TextFormat("Praxis LT Semibold", 30, 0x000000);
mc_large.titleContainer.titleBox.selectable = false;
mc_large.titleContainer.titleBox.autoSize = "left";
mc_large.titleContainer.titleBox.border = false;
mc_large.titleContainer.titleBox.text = this.imgtitle;
myformat.leftMargin = 10;
myformat.rightMargin = 10;
myformat.leading = 0;
mc_large.titleContainer.titleBox.multiline = false;
mc_large.titleContainer.titleBox.wordWrap = false;
mc_large.titleContainer.titleBox.background = true;
mc_large.titleContainer.titleBox.embedFonts = true;
mc_large.titleContainer.titleBox.selectable = false;
mc_large.titleContainer.titleBox.backgroundColor = 0xA9D5DE; /*0xA9D5DE*/
mc_large.titleContainer.titleBox.setTextFormat(myformat);
//
mc_large.titleContainer._alpha=0;
mc_large.titleContainer._alpha=0;
//
//mc_large.titleContainer.DropShadow_distance = 1; // adds a dropshadow & set distance
//mc_large.titleContainer.DropShadow_alpha = .2; // filter alphas are 0-1 multipliers
//
} else {
mc_large.titleContainer.alphaTo(0, 1, "easeOutBounce",0.3);
mc_large.copyContainer.alphaTo(0, 1, "easeOutBounce",0.1);
//
mc_large.btn_exit.alphaTo(0,0.5,"easeOutBounce",0.7);
mc_large.btn_info.alphaTo(0,0.5,"easeOutBounce",0.5);
mc_large.mc_img.alphaTo(0,0.5,"easeOutBounce",1.0);
//
mc_large.xSlideTo(-2000, 0.1, "easeOutQuad",2.2);
container.alphaTo(100,0.5,"easeOutBounce",1.5);
}
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
}
};
galleryXML.load("portfolio.xml");
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
mc_large.btn_info.onRollOver = function() {
//this.colorTo(0xffffff, 0.2, "easeInQuad");
//mc_large.btn_info.altTip("Project Overview");
}
mc_large.btn_info.onRollOut = function() {
this.colorTo(0x3C1E10, 0.2, "easeInOutQuad");
}
mc_large.btn_info.onRelease = function() {
mc_large.copyContainer.alphaTo(100, 0.5, "easeOutBounce",0.7);
mc_large.titleContainer.alphaTo(100, 0.5, "easeOutBounce",0.5);
mc_large.mc_img.blurTo(100, 2, 0.5,"easeOutBounce");
}
/////////////////////////////////////////////
mc_large.btn_exit.onRelease = function() {
mc_large.titleContainer.alphaTo(0, 1, "easeOutBounce",0.3);
mc_large.copyContainer.alphaTo(0, 1, "easeOutBounce",0.1);
//
mc_large.btn_exit.alphaTo(0,0.5,"easeOutBounce",0.7);
mc_large.btn_info.alphaTo(0,0.5,"easeOutBounce",0.5);
mc_large.mc_img.alphaTo(0,0.5,"easeOutBounce",1.0);
//
mc_large.xSlideTo(-2000, 0.1, "easeOutQuad",2.2);
container.alphaTo(100,0.5,"easeOutBounce",1.5);
}
mc_large.btn_exit.onRollOver = function() {
mc_large.g_back.alphaTo(100,0.3,"easeOutBounce");
mc_large.g_back.xSlideTo(223,0.3,"easeOutBounce");
//this.altTip("Back");
}
mc_large.btn_exit.onRollOut = function() {
mc_large.g_back.alphaTo(0,0.3,"easeOutBounce");
mc_large.g_back.xSlideTo(203,0.3,"easeOutBounce");
mc_large.g_back.xSlideTo(243,0.3,"easeOutBounce",0.6);
}
///////////////////////////////////////////////////////////////////////////
MovieClip.prototype.altTip = function(str) {
this.useHandCursor = true;
format = new TextFormat("Praxis LT Semibold", 19, 0xffffff);
this.onRollOver = function() {
_root.createTextField("alt", 1048575, 0, 0, 0, 0);
_root.alt._alpha=0;
this.ID_NAVTIP = setInterval(function (_this) {
_root.alt.alphaTo(100,0.3,"easeOutBounce");
_root.alt.DropShadow_distance = 5;
_root.alt.DropShadow_alpha = .5;
_root.alt.text = " "+str+" ";
_root.alt.autoSize = "left";
_root.alt.embedFonts = true;
_root.alt.background = true;
_root.alt.border = false;
_root.alt.selectable = false;
_root.alt.backgroundColor = "0x000000";
_root.alt.setTextFormat(format);
_root.alt._x = _root._xmouse+10;
_root.alt._y = _root._ymouse-30;
}, 0);
};
this.onRollOut = function() {
_root.alt.alphaTo(0,0.5,"easeOutBounce");
//_root.alt.removeTextField();
clearInterval(this.ID_NAVTIP);
};
};
mc_large.btn_exit.altTip("Back");
mc_large.btn_info.altTip("Project Overview");
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////// end content controls ///////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
stop();
<?xml version="1.0" standalone="no" encoding="UTF-8" ?>
<imagelist>
<image name="Advertising">
<id>1</id>
<title>You can in the Isle Of Man</title>
<file>ucan.jpg</file>
<keywords>
<keyword rank="1">The Isle of Man Government required a campaign designed to promote the Isle of Man as a business centre with the objective of re-aligning the Isle of Man’s brand image with its brand identity as a leading business centre.</keyword>
<keyword rank="2">Analysing the Island’s strengths, it became apparent that the working relationship between Government and the private sector is unusually close, creating a nimble, pro-active sense of ‘can do’ - across many sectors from E-commerce to Finance, to the DTI.</keyword>
<keyword rank="3">We pushed our positioning statement ‘You can on the Isle of Man’ to the fore, designed to pull this into a powerful proposition, to counter the often typical lack of knowledge about the Island’s unique features and strengths.</keyword>
</keywords>
</image>
<image name="Branding">
<id>2</id>
<title>Vision</title>
<file>vision.jpg</file>
<keywords>
<keyword rank="1">The creation of a new retail opthamology brand in Moscow required clear thinking, especially when that brand would instantly achieve market leadership through a coordinate launch in 10 sites.</keyword>
<keyword rank="2">The logo was designed to create an immediate promise through the dual eagle/human faces. This theme was carried through to store signage and large format poster design as well as a full range of marketing support materials and point of sale.</keyword>
</keywords>
</image>
<image name="Advertising">
<id>3</id>
<title>Manx Telecom</title>
<file>mt.jpg</file>
<keywords>
<keyword rank="1">Client research indicated a consumer misconception that fixed line call charges to international numbers were uncompetitive when compared to UK provider deals.</keyword>
<keyword rank="2">The treatments took this issue head on with a direct price comparison with British Telecom to help reposition Manx Telecom as a competitive provider.</keyword>
<keyword rank="3">Note: Prices quoted on the advertising treatments are no longer current.</keyword>
</keywords>
</image>
</imagelist>
