grid add container on top of URL and a TEXT

[swisseuro]

hi i posted a week back about a problem i am having, i got a lot of help and thank you very much, i am add it again and having some problem figuring this out.

what i want to do is the following.
1. add a sprite movie clip i create on top of the thumbnail so i can only see whats in the circle.
i have so it is on the first thumbnail, but it doesn't repeat? and its not on top of the thumbnail?
2. add a dynamic text box to either the right or the left side, text comes from the XML file
text is coming from the XML i did a trace(), but the box i cant get it attached to it
3. go to a page also driven from the XML file
i figured that one out and have it all working! :)

please help me i think i got more grey hair from this...

Here is the code and i also attached the link to the complete zip of all the file. I see this as a great tutorial for myself if i get this working. Link to files is here
(http://www.vivaxone.com/grid/grid.zip)


// Import Stuff
import fl.controls.ProgressBar;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

var columns:Number;
var my_x:Number;
var my_y:Number;
var my_thumb_width:Number;
var my_thumb_height:Number;
var my_images:XMLList;
var my_total:Number;

var mask_mc:MovieClip;
var container_mc:MovieClip;
var preloaders_mc:MovieClip;


// Zero Counter in X and Y
var x_counter:Number = 0;
var y_counter:Number = 0;

var my_tweens:Array = [];
var container_mc_tween:Tween;

//Setup XML and Process it
var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("artists.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(e:Event):void
{
var myXML:XML = new XML(e.target.data);

columns = 2;
my_x = 30;
my_y = 30;
my_thumb_width = 100;
my_thumb_height = 100;
my_images = myXML.ARTIST;
my_total = my_images.length();


createContainer();
callThumbs();

myXMLLoader.removeEventListener(Event.COMPLETE, processXML);
myXMLLoader = null;
}

function createContainer():void
{
// Mask Container doesnt repeat and is not on top?
mask_mc = mask_mc;
mask_mc.x = my_x;
mask_mc.y = my_y;
addChild(mask_mc);

container_mc = new MovieClip();
container_mc.x = mask_mc.x;
container_mc.y = mask_mc.y;
addChild(container_mc);

container_mc.addEventListener(MouseEvent.CLICK, callURL);
container_mc.addEventListener(MouseEvent.MOUSE_OVE R, onOver);
container_mc.addEventListener(MouseEvent.MOUSE_OUT , onOut);
container_mc.buttonMode = true;

preloaders_mc = new MovieClip();
preloaders_mc.x = container_mc.x;
preloaders_mc.y = container_mc.y;
addChild(preloaders_mc);
}

function callThumbs():void {
for (var i:Number = 0; i < my_total; i++) {

var thumb_url = my_images[i].@THUMB;
var thumb_loader = new Loader();
thumb_loader.load(new URLRequest(thumb_url));
thumb_loader.contentLoaderInfo.addEventListener(Ev ent.COMPLETE, thumbLoaded);


thumb_loader.name = i;
thumb_loader.x = (my_thumb_width+10)*x_counter;
thumb_loader.y = (my_thumb_height+10)* i/1.25 ;

if (x_counter+1 < columns) {
x_counter++;
} else {
x_counter = 0;
y_counter++;
}

var preloader_pb:ProgressBar = new ProgressBar();
preloader_pb.source = thumb_loader.contentLoaderInfo;
preloader_pb.x = thumb_loader.x;
preloader_pb.y = thumb_loader.y-4+my_thumb_height/2;
preloader_pb.width = my_thumb_width;
preloader_pb.height = 8;
preloaders_mc.addChild(preloader_pb);
preloader_pb.addEventListener(Event.COMPLETE, donePb);
}
}

function thumbLoaded(e:Event):void
{
var my_thumb:Loader = Loader(e.target.loader);
container_mc.addChild(my_thumb);
my_tweens[Number(my_thumb.name)]=new Tween(my_thumb, "alpha", Strong.easeIn, 0,1,0.5, true);
my_thumb.contentLoaderInfo.removeEventListener(Eve nt.COMPLETE, thumbLoaded);
}


// Call artist URL
function callURL(e:MouseEvent):void
{
var url:String = my_images[e.target.name].@FULL;
var request:URLRequest = new URLRequest(url);
try {
navigateToURL(request, '_blank');
}
catch (e:Error)
{
trace("Error occurred!");
}
}

function donePb(e:Event):void
{
var my_pb:ProgressBar = ProgressBar(e.target);
preloaders_mc.removeChild(my_pb);
my_pb.removeEventListener(Event.COMPLETE, donePb);
}

function tweenFinished(e:TweenEvent):void
{

container_mc.addEventListener(MouseEvent.CLICK, callURL);
container_mc.buttonMode = true;
container_mc.addEventListener(MouseEvent.MOUSE_OVE R, onOver);
container_mc.addEventListener(MouseEvent.MOUSE_OUT , onOut);

var my_tween:Tween = Tween(e.target);
my_tween.removeEventListener(TweenEvent.MOTION_FIN ISH, tweenFinished);
}

function onOver(e:MouseEvent):void
{
var my_thumb:Loader = Loader(e.target);
my_thumb.alpha = 0.75;
}

function onOut(e:MouseEvent):void {
var my_thumb:Loader = Loader (e.target);
my_thumb.alpha = 1;
}

[swisseuro]

anyone can help, i tried the whole afternoon and nothing, how would i add the mask or the text with addChild it only show's once, please help me...

[ayumilove]

hm I'll try to help you later, currently debugging a forumer's application.

[swisseuro]

thanks so much... i check my email every 15 min, and be online

[swisseuro]

ok one step closer i figured out how to get the round circle in the container and repeat it based on the thumb_loader.x and thumb_loader.y

here is the code, now i only need the text and how to align it in the right direction.

Please help, i think i have an idea how to add the textbox, but alignment will be difficulty. I go eat be back in 30min.



// Import Stuff
import fl.controls.ProgressBar;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

var columns:Number;
var my_x:Number;
var my_y:Number;
var my_thumb_width:Number;
var my_thumb_height:Number;
var my_images:XMLList;
var my_total:Number;


var container_mc:MovieClip;
var preloaders_mc:MovieClip;
var mask_mc:MovieClip;


// Zero Counter in X and Y
var x_counter:Number = 0;
var y_counter:Number = 0;

var my_tweens:Array = [];
var container_mc_tween:Tween;

//Setup XML and Process it
var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("artists.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(e:Event):void
{
var myXML:XML = new XML(e.target.data);

columns = 2;
my_x = 30;
my_y = 30;
my_thumb_width = 100;
my_thumb_height = 100;
my_images = myXML.ARTIST;
my_total = my_images.length();


createContainer();
callThumbs();

myXMLLoader.removeEventListener(Event.COMPLETE, processXML);
myXMLLoader = null;
}

function createContainer():void
{
container_mc = new MovieClip();
container_mc.x = my_x;
container_mc.y = my_y;
addChild(container_mc);

container_mc.addEventListener(MouseEvent.CLICK, callURL);
container_mc.addEventListener(MouseEvent.MOUSE_OVE R, onOver);
container_mc.addEventListener(MouseEvent.MOUSE_OUT , onOut);
container_mc.buttonMode = true;

preloaders_mc = new MovieClip();
preloaders_mc.x = container_mc.x;
preloaders_mc.y = container_mc.y;
addChild(preloaders_mc);

mask_mc = new MovieClip();
mask_mc.x = container_mc.x;
mask_mc.y = container_mc.y;
addChild(mask_mc);
}

function callThumbs():void {
for (var i:Number = 0; i < my_total; i++) {


var thumb_url = my_images[i].@THUMB;
var thumb_loader = new Loader();
thumb_loader.load(new URLRequest(thumb_url));
thumb_loader.contentLoaderInfo.addEventListener(Ev ent.COMPLETE, thumbLoaded);

thumb_loader.name = i;
thumb_loader.x = (my_thumb_width+10)*x_counter;
thumb_loader.y = (my_thumb_height+10)* i/1.25 ;

if (x_counter+1 < columns) {
x_counter++;
} else {
x_counter = 0;
y_counter++;
}

var preloader_pb:ProgressBar = new ProgressBar();
preloader_pb.source = thumb_loader.contentLoaderInfo;
preloader_pb.x = thumb_loader.x;
preloader_pb.y = thumb_loader.y-4+my_thumb_height/2;
preloader_pb.width = my_thumb_width;
preloader_pb.height = 8;
preloaders_mc.addChild(preloader_pb);
preloader_pb.addEventListener(Event.COMPLETE, donePb);

var mask_pb:imageMask = new imageMask();
mask_pb.x = thumb_loader.x;
mask_pb.y = thumb_loader.y;
mask_mc.addChild(mask_pb);
}
}

function thumbLoaded(e:Event):void
{
var my_thumb:Loader = Loader(e.target.loader);

container_mc.addChild(my_thumb);
my_tweens[Number(my_thumb.name)]=new Tween(my_thumb, "alpha", Strong.easeIn, 0,1,0.5, true);
my_thumb.contentLoaderInfo.removeEventListener(Eve nt.COMPLETE, thumbLoaded);

}


// Call artist URL
function callURL(e:MouseEvent):void
{
var url:String = my_images[e.target.name].@FULL;
var request:URLRequest = new URLRequest(url);
try {
navigateToURL(request, '_blank');
}
catch (e:Error)
{
trace("Error occurred!");
}
}

function donePb(e:Event):void
{
var my_pb:ProgressBar = ProgressBar(e.target);
preloaders_mc.removeChild(my_pb);
my_pb.removeEventListener(Event.COMPLETE, donePb);
}

function tweenFinished(e:TweenEvent):void
{

container_mc.addEventListener(MouseEvent.CLICK, callURL);
container_mc.buttonMode = true;
container_mc.addEventListener(MouseEvent.MOUSE_OVE R, onOver);
container_mc.addEventListener(MouseEvent.MOUSE_OUT , onOut);

var my_tween:Tween = Tween(e.target);
my_tween.removeEventListener(TweenEvent.MOTION_FIN ISH, tweenFinished);
}

function onOver(e:MouseEvent):void
{
var my_thumb:Loader = Loader(e.target);
my_thumb.alpha = 0.75;
}

function onOut(e:MouseEvent):void {
var my_thumb:Loader = Loader (e.target);
my_thumb.alpha = 1;
}

[ayumilove]

your new code implements
1046: Type was not found or was not a compile-time constant: imageMask.
1180: Call to a possibly undefined method imageMask.

[swisseuro]

i am on MSN please hit me up there if you can...

[swisseuro]

i uploaded a new zip file with the new correction, following i figured out

Mask Shape and TextField are dynamic now and added correctly,
only two things now i need is align text field and scroll the whole thing if there are too many items on the stage.

align the Textfield
at the first column text should be right off it.
at the second column text should be left off it.

Link to new fla file click here (http://www.vivaxone.com/grid/grid.zip)

here is my new code:



// Import Stuff
import fl.controls.ProgressBar;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

var columns:Number;
var my_x:Number;
var my_y:Number;
var my_thumb_width:Number;
var my_thumb_height:Number;
var my_images:XMLList;
var my_total:Number;



var container_mc:MovieClip;
var preloaders_mc:MovieClip;
var mask_mc:MovieClip;
var artist_txt:MovieClip;


// Zero Counter in X and Y
var x_counter:Number = 0;
var y_counter:Number = 0;

var my_tweens:Array = [];
var container_mc_tween:Tween;

//Setup XML and Process it
var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("artists.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(e:Event):void
{
var myXML:XML = new XML(e.target.data);

columns = 2;
my_x = 30;
my_y = 30;
my_thumb_width = 100;
my_thumb_height = 100;
my_images = myXML.ARTIST;
my_total = my_images.length();


createContainer();
callThumbs();

myXMLLoader.removeEventListener(Event.COMPLETE, processXML);
myXMLLoader = null;
}

function createContainer():void
{
container_mc = new MovieClip();
container_mc.x = my_x;
container_mc.y = my_y;
addChild(container_mc);

container_mc.addEventListener(MouseEvent.CLICK, callURL);
container_mc.addEventListener(MouseEvent.MOUSE_OVE R, onOver);
container_mc.addEventListener(MouseEvent.MOUSE_OUT , onOut);
container_mc.buttonMode = true;

preloaders_mc = new MovieClip();
preloaders_mc.x = container_mc.x;
preloaders_mc.y = container_mc.y;
addChild(preloaders_mc);

mask_mc = new MovieClip();
mask_mc.x = container_mc.x;
mask_mc.y = container_mc.y;
addChild(mask_mc);

artist_txt = new MovieClip();
artist_txt.x = container_mc.x;
artist_txt.y = container_mc.y;
addChild(artist_txt);


}

function callThumbs():void {
for (var i:Number = 0; i < my_total; i++) {


var thumb_url = my_images[i].@THUMB;
var thumb_loader = new Loader();
thumb_loader.load(new URLRequest(thumb_url));
thumb_loader.contentLoaderInfo.addEventListener(Ev ent.COMPLETE, thumbLoaded);

thumb_loader.name = i;
thumb_loader.x = (my_thumb_width+10)*x_counter;
thumb_loader.y = (my_thumb_height+10)* i/1.25 ;

if (x_counter+1 < columns) {
x_counter++;
} else {
x_counter = 0;
y_counter++;
}

var preloader_pb:ProgressBar = new ProgressBar();
preloader_pb.source = thumb_loader.contentLoaderInfo;
preloader_pb.x = thumb_loader.x;
preloader_pb.y = thumb_loader.y-4+my_thumb_height/2;
preloader_pb.width = my_thumb_width;
preloader_pb.height = 8;
preloaders_mc.addChild(preloader_pb);
preloader_pb.addEventListener(Event.COMPLETE, donePb);

var mask_pb:imageMask = new imageMask();
mask_pb.x = thumb_loader.x;
mask_pb.y = thumb_loader.y;
mask_mc.addChild(mask_pb);

var at:ATXT = new ATXT();
at.x = thumb_loader.x+100;
at.txtBox.text = my_images[i].@NAME;
at.y = thumb_loader.y+50;
artist_txt.addChild(at);

}
}

function thumbLoaded(e:Event):void
{
var my_thumb:Loader = Loader(e.target.loader);

container_mc.addChild(my_thumb);
my_tweens[Number(my_thumb.name)]=new Tween(my_thumb, "alpha", Strong.easeIn, 0,1,0.5, true);
my_thumb.contentLoaderInfo.removeEventListener(Eve nt.COMPLETE, thumbLoaded);

}


// Call artist URL
function callURL(e:MouseEvent):void
{
var url:String = my_images[e.target.name].@FULL;
var request:URLRequest = new URLRequest(url);
try {
navigateToURL(request, '_blank');
}
catch (e:Error)
{
trace("Error occurred!");
}
}

function donePb(e:Event):void
{
var my_pb:ProgressBar = ProgressBar(e.target);
preloaders_mc.removeChild(my_pb);
my_pb.removeEventListener(Event.COMPLETE, donePb);
}

function tweenFinished(e:TweenEvent):void
{

container_mc.addEventListener(MouseEvent.CLICK, callURL);
container_mc.buttonMode = true;
container_mc.addEventListener(MouseEvent.MOUSE_OVE R, onOver);
container_mc.addEventListener(MouseEvent.MOUSE_OUT , onOut);

var my_tween:Tween = Tween(e.target);
my_tween.removeEventListener(TweenEvent.MOTION_FIN ISH, tweenFinished);
}

function onOver(e:MouseEvent):void
{
var my_thumb:Loader = Loader(e.target);
my_thumb.alpha = 0.75;
}

function onOut(e:MouseEvent):void {
var my_thumb:Loader = Loader (e.target);
my_thumb.alpha = 1;
}

[swisseuro]

ok newest code, text is there just alignment



// Import Stuff
import fl.controls.ProgressBar;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

var columns:Number;
var my_x:Number;
var my_y:Number;
var my_thumb_width:Number;
var my_thumb_height:Number;
var my_images:XMLList;
var my_total:Number;



var container_mc:MovieClip;
var preloaders_mc:MovieClip;
var mask_mc:MovieClip;
var artist_txt:MovieClip;


// Zero Counter in X and Y
var x_counter:Number = 0;
var y_counter:Number = 0;

var my_tweens:Array = [];
var container_mc_tween:Tween;

//Setup XML and Process it
var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("artists.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(e:Event):void
{
var myXML:XML = new XML(e.target.data);

columns = 2;
my_x = 30;
my_y = 30;
my_thumb_width = 100;
my_thumb_height = 100;
my_images = myXML.ARTIST;
my_total = my_images.length();


createContainer();
callThumbs();

myXMLLoader.removeEventListener(Event.COMPLETE, processXML);
myXMLLoader = null;
}

function createContainer():void
{
container_mc = new MovieClip();
container_mc.x = my_x;
container_mc.y = my_y;
addChild(container_mc);

container_mc.addEventListener(MouseEvent.CLICK, callURL);
container_mc.addEventListener(MouseEvent.MOUSE_OVE R, onOver);
container_mc.addEventListener(MouseEvent.MOUSE_OUT , onOut);
container_mc.buttonMode = true;

preloaders_mc = new MovieClip();
preloaders_mc.x = container_mc.x;
preloaders_mc.y = container_mc.y;
addChild(preloaders_mc);

mask_mc = new MovieClip();
mask_mc.x = container_mc.x;
mask_mc.y = container_mc.y;
addChild(mask_mc);

artist_txt = new MovieClip();
artist_txt.x = container_mc.x;
artist_txt.y = container_mc.y;
addChild(artist_txt);


}

function callThumbs():void {
for (var i:Number = 0; i < my_total; i++) {


var thumb_url = my_images[i].@THUMB;
var thumb_loader = new Loader();
thumb_loader.load(new URLRequest(thumb_url));
thumb_loader.contentLoaderInfo.addEventListener(Ev ent.COMPLETE, thumbLoaded);

thumb_loader.name = i;
thumb_loader.x = (my_thumb_width-5)*x_counter;
thumb_loader.y = (my_thumb_height-5)* i/1.25 ;

if (x_counter+1 < columns) {
x_counter++;
} else {
x_counter = 0;
y_counter++;
}

var preloader_pb:ProgressBar = new ProgressBar();
preloader_pb.source = thumb_loader.contentLoaderInfo;
preloader_pb.x = thumb_loader.x;
preloader_pb.y = thumb_loader.y-4+my_thumb_height/2;
preloader_pb.width = my_thumb_width;
preloader_pb.height = 8;
preloaders_mc.addChild(preloader_pb);
preloader_pb.addEventListener(Event.COMPLETE, donePb);

var mask_pb:imageMask = new imageMask();
mask_pb.x = thumb_loader.x;
mask_pb.y = thumb_loader.y;
mask_mc.addChild(mask_pb);

var at:ATXT = new ATXT();
at.x = thumb_loader.x+110;
at.txtBox.text = my_images[i].@NAME;
at.y = thumb_loader.y;
artist_txt.addChild(at);

}
}

function thumbLoaded(e:Event):void
{
var my_thumb:Loader = Loader(e.target.loader);

container_mc.addChild(my_thumb);
my_tweens[Number(my_thumb.name)]=new Tween(my_thumb, "alpha", Strong.easeIn, 0,1,0.5, true);
my_thumb.contentLoaderInfo.removeEventListener(Eve nt.COMPLETE, thumbLoaded);

}


// Call artist URL
function callURL(e:MouseEvent):void
{
var url:String = my_images[e.target.name].@FULL;
var request:URLRequest = new URLRequest(url);
try {
navigateToURL(request, '_blank');
}
catch (e:Error)
{
trace("Error occurred!");
}
}

function donePb(e:Event):void
{
var my_pb:ProgressBar = ProgressBar(e.target);
preloaders_mc.removeChild(my_pb);
my_pb.removeEventListener(Event.COMPLETE, donePb);
}

function tweenFinished(e:TweenEvent):void
{

container_mc.addEventListener(MouseEvent.CLICK, callURL);
container_mc.buttonMode = true;
container_mc.addEventListener(MouseEvent.MOUSE_OVE R, onOver);
container_mc.addEventListener(MouseEvent.MOUSE_OUT , onOut);

var my_tween:Tween = Tween(e.target);
my_tween.removeEventListener(TweenEvent.MOTION_FIN ISH, tweenFinished);
}

function onOver(e:MouseEvent):void
{
var my_thumb:Loader = Loader(e.target);
my_thumb.alpha = 0.75;
}

function onOut(e:MouseEvent):void {
var my_thumb:Loader = Loader (e.target);
my_thumb.alpha = 1;
}