In addition I would like a new thumbnail button be appear (page 1, page 2, ecc..) in order to jump between the various pages.

Can anyone help ?

Thanks

about the form, I’m using XP and Firefox 3. the text is a few pixels too small but It’s no biggie i just zoom in. here’s a screen shot.

image shack

There are a bunch of ways to do this, but I’ve written one that requires the least change to the existing script so it can be easily added here and easily explained. Based on the questions, we’re assuming you know how to get the path of the object for each box (thumbnail or other content) from your XML. We may follow this up with a more in-depth post, but this will definitely get you started. Just add the following to the if segment of the if..else statement (after line 23) of the last script:

var ldr:Loader = new Loader();
box.addChild(ldr);

var loadPath:String = "path_to_content_from_xml.jpg";
ldr.load(new URLRequest(loadPath));
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, onContentReady,
					 false, 0, true);
function onContentReady(evt:Event):void {
	var loaded:DisplayObject = evt.target.content;
	loaded.x -= box.width/2;
	loaded.y -= box.height/2;
	loaded.width = box.width;
	loaded.height = box.height;
}

To load the external display data, you need an instance of the Loader class. The first two lines of the insert create the instance and load it to the box.

The next block of the insert loads the content and process it after loading for cosmetic purposes. The first line is the thumbnail path that, based on the questions, would be parsed from an XML instance. The next line loads the content, and the third line of the block adds an event listener that will trigger a function that positions and scales the content after loading.

Finally, the event handler function is added. This will vary depending on your needs. In the original example, a movie clip in the library contained a shape, an the clip has a center registration point. All this function does is set the x and y of the loaded content to the upper-left corner of the container, and sets the width and height of the loaded content to that of the container.

This entire listener and function could be eliminated if you sized the loaded content to the container and used a container with a top-left registration point. Or, you may require additional treatment, such as when the content doesn’t match the shape of the container. That is, this simple example just matches the width and height of the container, but doesn’t scale proportionally. You could add code to accomplish that if desired, or even switch to using a component that will auto-scale, if you prefer.

Zevan wrote an introduction to TweenLite that does what you’re asking about. The last example in the post, the fake banner, tweens in 5 elements or so, sequentially. You should be able to adapt the technique for Tweener fairly easily. Let us know if that helps.

Naming the box is accomplished by setting the name property, at line 13 of the last script above. (The new line is in bold.)

var box:Box = new Box();
box.name = “box” + boxCount;

However, you can’t access an instance name that is programmatically assigned, the same way as manual assignments. Instead, use the following:

var clip:MovieClip = getChildByName(”box0″);
or, if in a loop:
var clip:MovieClip = getChildByName(”box” + i);
where i is the loop counter.

@thawootah, would you mind sending an email using the contact form to describe the trouble you’re having with the comment form? It looks very clear to me so I think this might be a platform/browser-specific CSS issue. Can you tell me which OS/browser you’re using and why you can’t see what you’re typing? Thanks.

or say you use dynamic text in the clip or a image how would you point xml into it?

also i can barely see what I’m typing in this form haha. Good tutorial though.

If so, how would you do this? — var box:Box = new Box();— doesn’t seem to offer that option.

thanks for this great tutorial (and not just that one).

i`m building a gallery with this notion of the grid and i try to use Tweener to make the thumb appear one by one and not all at the same time, but i fail to do so.

how can i do that?

best regards