# Kirupa portfolio w/loader and preloader and border added

**URL:** <https://forum.kirupa.com/t/kirupa-portfolio-w-loader-and-preloader-and-border-added/208225>\
**Category:** Uncategorized\
**Created:** [November 26, 2006, 5:21pm UTC](https://forum.kirupa.com/t/kirupa-portfolio-w-loader-and-preloader-and-border-added/208225 "2006-11-26T17:21:02Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![shawn\_gibson](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@shawn\_gibson](https://forum.kirupa.com/u/shawn_gibson)\
**Post date:** [November 26, 2006, 5:21pm UTC](https://forum.kirupa.com/t/kirupa-portfolio-w-loader-and-preloader-and-border-added/208225/1 "2006-11-26T17:21:02Z")

</div>

As per: [http://www.kirupa.com/web/xml/examples/portfolio.htm](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](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](https://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](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