Kirupa portfolio w/loader and preloader and border added

1

As per: http://www.kirupa.com/web/xml/examples/portfolio.htm

I am not sure if anyone would be interested in this, but I added a progressbar and loader for the main image loading in the tutorial, added a API-drawn border and put it into a movie clip that I attach various galleries to by button simply by calling a reference to the appropriate xml file in the button. For my site, it needed to load all images of various sizes to a right location, hence the weird math…and it seems to have a minor glitch in the loading which I can’t figure out occasionally (in IE anyways, less often in FF) if anyone knows what’s wrong,

Here’s what it looks like (I’m trying to rebuild my site from scratch, so please excuse the appearance): http://www.faceitphoto.ca/XML/main.html

The appropriate code is below and I’ll link to a zip with I hope everything required to make it run as-is:

This is in the XML-generating movieclip that gets attached via a button:

var thumb_spacing = 40;

function GenerateXMLfile(loadContent_xml) {
var portfolioPictures = loadContent_xml.firstChild.childNodes;
//create scrollpane menu_mc and insert thumbnail_mc per gallery
for (var i = 0; i<portfolioPictures.length; i++) {
var currentPicture = portfolioPictures*;
var currentThumb_mc = menu_mc.createEmptyMovieClip(“thumbnail_mc”+i, i);
currentThumb_mc._x = i*thumb_spacing;
currentThumb_mc.createEmptyMovieClip(“thumb_container”, 0);
currentThumb_mc.thumb_container.loadMovie(currentPicture.attributes.thumb);
currentThumb_mc.title = currentPicture.attributes.title;
currentThumb_mc.image = currentPicture.attributes.image;
currentThumb_mc.description = currentPicture.attributes.description;
currentThumb_mc.bgcolor = currentPicture.attributes.bgcolor;

    currentThumb_mc.onRollOver = currentThumb_mc.onDragOver=function () {
        bg_txt.text = this.bgcolor;
        info_txt.text = this.title;
        _root.description_txt.text = (this.description);
    };

    currentThumb_mc.onRollOut = currentThumb_mc.onDragOut=function () {
        bgText.text = "";
        info_txt.text = "";
    };

    currentThumb_mc.onRelease = function() {
        _global.theCurrentImage = this.image;
        _root.description_txt.text = (this.description);
        _global.myGlobalColor = this.bgcolor;
        _root.back.colorTo(myGlobalColor, 3, "linear");
        doLoadImage();
    };
}

}

// xml object for xml content (defines sources for selections)
var loadContent_xml = new XML();
loadContent_xml.ignoreWhite = true;
loadContent_xml.onLoad = function(success) {
if (success) {
GenerateXMLfile(this);
} else {
trace(“Error loading XML file”);
}
// no success? trace error (wont be seen on web)
};

// load
loadContent_xml.load(_root.theCurrentSubFile_xml);

//the bulk of the new stuff follows

function addBorder() {

this.createEmptyMovieClip("rectangle_mc", 1002);

//rectangle_mc._alpha=0;
rectangle_mc._x = strokeX;
rectangle_mc._y = strokeY;
strokeColor = myGlobalColor;
strokeAlpha = 100;

drawRoundedRectangle(rectangle_mc, strokeWidth, strokeHeight, 10, 0xFF0000, 0);
//rectangle_mc.alphaTo(100,2);

function drawRoundedRectangle(target_mc:MovieClip, boxWidth:Number, boxHeight:Number, cornerRadius:Number, fillColor:Number, fillAlpha:Number):Void {
    with (target_mc) {
        beginFill(fillColor, fillAlpha);
        lineStyle(6, strokeColor, strokeAlpha, true);
        moveTo(cornerRadius, 0);
        lineTo(boxWidth-cornerRadius, 0);
        curveTo(boxWidth, 0, boxWidth, cornerRadius);
        lineTo(boxWidth, cornerRadius);
        lineTo(boxWidth, boxHeight-cornerRadius);
        curveTo(boxWidth, boxHeight, boxWidth-cornerRadius, boxHeight);
        lineTo(boxWidth-cornerRadius, boxHeight);
        lineTo(cornerRadius, boxHeight);
        curveTo(0, boxHeight, 0, boxHeight-cornerRadius);
        lineTo(0, boxHeight-cornerRadius);
        lineTo(0, cornerRadius);
        curveTo(0, 0, cornerRadius, 0);
        lineTo(cornerRadius, 0);
        endFill();
    }
}

}

function doLoadImage() {
this.createClassObject(mx.controls.Loader, “loader1”, 1000);
//loader1.scaleContent = false;
this.createClassObject(mx.controls.ProgressBar, “progressbar1”, 1001);
progressbar1._x = 700;
progressbar1._y = 500;

function progress(eventObject:Object) {
    var alreadyLoaded = eventObject.target.getBytesLoaded();
    var total = eventObject.target.getBytesTotal();
    progressbar1.setProgress(alreadyLoaded, total);
}

function complete() {
    progressbar1.setVisible(false);
    var image_mc:MovieClip = loader1.content;
    image_mc._x = (Stage.width-(image_mc._width))-45;
    image_mc._y = Stage.height/(image_mc._height)+47;
    _global.strokeWidth = image_mc._width;
    _global.strokeHeight = image_mc._height;
    _global.strokeX = image_mc._x;
    _global.strokeY = image_mc._y;
    loader1._alpha = 0;
    doReveal();
}

function doReveal() {
    loader1.setVisible(true);
    addBorder();
    loader1.alphaTo(100,2);
}


loader1.addEventListener("progress", progress);
loader1.addEventListener("complete", complete);
progressbar1.mode = "manual";
loader1.contentPath = theCurrentImage;
loader1.setVisible(false);

}

Here’s the complete download to all that should be needed if anyone is interested:

http://www.faceitphoto.ca/XML.rar

Does anyone know how to put the menu for the thumbs into a ScrollPane? I can’t figure that out, and I’d like my whole site to be driven by components that I tweak and create dynamically on the fly - it’s a great way for me to learn and prep myself for Flex 2 which I’m hoping to venture into. I’m VERY new at all this…as my persistent use of the help files and some probably really retarded logic probably shows:)

I hope this post proves useful (and not offensive) to anyone…

Shawn