Help with dynamic movie clips!

[dante2010]

Hi,

I'm trying to build an app where I can have dynamic images load into a scrollpane, with each being clickable.

I have the following done in AS.


total = 6;
depth = 5;
y = 10;
for (i=1; i<total; i++) {
var showMain = holder.attachMovie("cardButton", "showClip"+i, depth);
showMain._y = y;
showMain.loadMovie("images/category_source/"+i+".jpg", "categoryImage"+i);
showMain.onRollOver = function() {
this._alpha = 70;
};
showMain.onRollOut = function() {
this._alpha = 100;
};
depth++;
y += 80;
}
_root.myScrollPane._x = 18.4;
_root.myScrollPane._y = 51;
_root.myScrollPane.setSize(500, 217);
_root.myScrollPane.setDragContent(false);
_root.myScrollPane.setVScroll(true);
_root.myScrollPane.setHScroll(false);
_root.myScrollPane.setScrollContent(holder);
_root.myScrollPane.refreshPane();


This is streamlined code from what I was originally working with. I have a whole section where I get the total images from XML. For simplicities sake I've removed that here and just set total = 6.

What I cannot figure out with the above code is:

1) How to get my holder mc to load inside the scrollpane.
2) How to attach a onRollOver, onRollOut and OnRelease function to each mc.

I have attached my source file as well.

I'd greatly appreciate someone helping me out with this. I've posted to a few other boards and basically gotten 0 response on the subject. Makes me start to think what I'm trying to do isn't possible, even though they very much look like they should be doable.

[skyflower]

I did something very similar the other day
I set the content of the scroll pane to a movie clip called works_mc
and then I loaded all other images inside the works_mc movie

[dante2010]

Ok.... how did you go about doing it exactly? ;)

[skyflower]

lol
I put a scroll pane on my stage
I set content of my scroll pane to works_mc
I opened works_mc and put all the loading actions there
:p

[red penguin]

Yes, like so:

scrollPaneClip.contentPath = "header_mc";
var showMain:MovieClip = scrollPaneClip.content.attachMovie("cardButton", "showClip"+i, depth);

[dante2010]

OK...

So in the instance of working with my code, I would add:


_root.myScrollPane.contentPath = "holder";
var showMain:MovieClip = myScrollPane.holder.attachMovie("cardButton", "showClip"+i, depth);


??

I'm obviously still missing something because this does nothing.

[red penguin]

do you have in the Library a clip with the Linkage of 'holder'?

[dante2010]

Yes I believe I do.

I went to holder -> properties -> export for actionscript .. and then put in the name 'holder' for the identifier.

If you are able to load the .fla I attached you can check to see if I'm doing it correctly...

[red penguin]

Wow.

Dude. Check your publishing settings....

[dante2010]

What should I be looking for when I check them?

[red penguin]

I won't even entertain that question.

I will, however, ask *you* a few questions.

a) Where did you get this file?
b) What version of Flash are you using?
c) What version is the ScrollPane Component is in that file?

This should answer your query from above.

[dante2010]

a) I created the file myself
b) Flash MX 2004 pro
c) How do you tell the version of the scrollpane?

I take it the problem is I have actionscript set to 1.0?

[dante2010]

Ok so I've got the mc's loading inside the scrollpane. Thanks for that. Can you tell me now why the scrollpane doesn't have any vertical scroller? The mc's go beyond it's height... so shouldn't there be scrollers? They're set to auto.

I am using the following code:


myScrollPane.contentPath = "holder";
var sContent:MovieClip = myScrollPane.content;
for(var i:Number = 1;i < 7; i++){
var aClip:MovieClip = sContent.attachMovie("cardButton", "attachedClip_" add i, i);
aClip.loadMovie("images/category_source/"+i+".jpg", "categoryImage"+i);
aClip._x = 10;
aClip._y += i * (aClip._height + 100);
aClip.testVar = i;
}

[skyflower]

you have to refresh your scroll pane after you are done loading
myscrollpane.invalidate()

[dante2010]

OK. Can anyone help me with my second question?

2) How to attach a onRollOver, onRollOut and OnRelease function to each mc.

[red penguin]

Uhm. The same way you would define a handler for any other clip.

aClip.onRelease = function()
{
// do something...
}

[skyflower]

inside your for loop, you put

aClip.onRelease = function() {
...
}

etc.

[dante2010]

Ok, I now have the following code:


myScrollPane.contentPath = "holder";
var sContent:MovieClip = myScrollPane.content;
for(var i:Number = 1;i < 7; i++){
var aClip:MovieClip = sContent.attachMovie("cardButton", "attachedClip_" add i, i);
aClip.loadMovie("images/category_source/"+i+".jpg", "categoryImage"+i);
aClip._x = 10;
aClip._y += i * (aClip._height + 100);
aClip.testVar = i;

aClip.onRelease = function()
{
trace ("HI");
}

}

myScrollPane.invalidate();


The scrollpane still has no scrollbars. The onRelease doesn't seem to work either. I click on my images and the trace is never called.

[red penguin]

a) Not sure if this has been said, but look for these properties of the ScrollPane

ScrollPane.hScrollPolicy
ScrollPane.vScrollPolicy

b) I'm going to take you through the steps just like the compiler....only slower.


Get the content for a ScrollPane from the Library
Create a pointer to that content
Loop to add content to the ScrollPane content
- attach a clip for the Library
** tangengial process! find something to load and begin loading!
- move the clip around
- assign a var to the clip
- assign a handler to the clip
invalidate the ScrollPane
** finish loading the clip!

Now. That last one? Can happen anywhere. It depends on the size of whatever is loading into the clip! And what happens when we load things into clips?

BINGO! All data previously assigned is wiped. Gone. Nada. Zero. Zilch. Zip. Null. Void. El none. (ok, that last one doesn't count)

See what's happening?

This is why the MovieClipLoader CLass was developed. To explicitly handle the loading of things like this. We know when it starts, is happening, stops so then we can assign and manipulate. So what should you do? Use that class to load them! Sounds like a bitch, but in the long run, it's well worth the time and effort. Believe me.

Phew. Good thing I don't have any deadlines today.

And why are you calling invalidate?

[dante2010]

I will read up on moviecliploader. Thanks.

I called invalidate because someone else in this thread said that's what I had to do to refresh the scollpane.

In regards to the scrollpane, I've set the following before the for loop:

myScrollPane.vScrollPolicy = "on";

.. and I still don't see scrollbars.

[red penguin]

I see it fine with this code...

total = 6;
depth = 5;
y = 10;
myScrollPane.contentPath = "holder";
var sContent:MovieClip = myScrollPane.content;
for (i=0; i<total; i++) {
var showMain:MovieClip = sContent.attachMovie("cardButton", "showClip"+i, depth++);
showMain._y += showMain._height * i;
//showMain.loadMovie("images/category_source/"+i+".jpg", "categoryImage"+i);
showMain.onRollOver = function() {
this._alpha = 70;
};
showMain.onRollOut = function() {
this._alpha = 100;
};
//depth++;
//y += 80;
}
_root.myScrollPane._x = 18.4;
_root.myScrollPane._y = 51;
_root.myScrollPane.setSize(500, 217);
_root.myScrollPane.scrollDrag = false;
//_root.myScrollPane.setVScroll(true);
//_root.myScrollPane.setHScroll(false);
//_root.myScrollPane.setScrollContent(holder);
//_root.myScrollPane.refreshPane();

I've modified the cardHolder clip to have a box because I don't want to load...just check that I can see the scrollers...

[dante2010]

Ok, if I take out my .loadMove and just put a box in the cardButton clip, I see the scrollbars as well. And I get my onRelease.

So I guess my problem just lies with working out things with the moviecliploader class?

[red penguin]

I would venture a guess and say that's an affirmative. The Component doesn't know the dimensions.... A quick fix would be to set an interval for, say, 2 seconds and then...
myScrollPane.refreshPane();

[dante2010]

Ok.. I'm still having some problems with properly loading the images. I'm now usi ng moviecliploader to do so, but it's loading the same image over and over and over again. And my onRelease is still never assigned.

I have now the following code:


myScrollPane.vScrollPolicy = "on";
myScrollPane.contentPath = "holder";
var sContent:MovieClip = myScrollPane.content;

myMCL = new MovieClipLoader();

myMCL.onLoadComplete = function (targetMC)
{
targetMC.onRelease = function()
{
trace ("HIT");
}
}

depth = 10;
y = 10;

for (i=1; i<6; i++) {



var aClip:MovieClip = sContent.attachMovie("cardButton", "categoryImage" + i, depth);
myMCL.loadClip("images/category_source/"+i+".jpg" , "categoryImage"+i);
aClip._x = 5;
aClip._y = y;

depth+=1;
y+= 80;

}

[dante2010]

Anyone able to lend me a hand with this latest hurdle? I'm almost there! :)

[creynders]

And my onRelease is still never assigned.
That's because you use the parameter of the onLoadComplete the wrong way around. The target_mc parameter is used to define to which movieclip the onLoadComplete should react, it won't provide you with a reference to the movieclip instance which finished loading content.
from the help files:
To specify that the listener should be invoked only for a particular clip, and not for every clip, pass a value for target_mc.

[dante2010]

So how would I reference the dynamically attached clip from within the onLoadComplete?

[red penguin]

I would suggest making a completely separate fla to test the MovieClipLoader class implementation. Once you can use the methods properly there, THEN apply it to your main fla.

So: Load in a jpg to a clip and use the .onLoadComplete() method to trace things and assign simple porperties/handlers....

[dante2010]

Ok, I've played around with moviecliploader, and been able to assign an onPress event to my clips. Code is as follows:


stop();

myMCL = new MovieClipLoader(); //define MovieClipLoader
myListener = new Object();
myMCL.addListener(myListener);

myListener.onLoadComplete = function(targetMC){

targetMC.onPress = function() {
trace("HIT");
}
}


for (i=1; i<=4; i++){
this.attachMovie("img", "img" + i, i);
this["img"+i]._x = i*110;
myMCL.loadClip("images/category_source/"+ i +".jpg" , this["img"+i]);

}


I still don't understand why using targetMC. works in this example, yet in my code it doesn't seem to. My code is currently as follows:


myXMLData = new LoadVars();
myXMLData.flashIdentity = "Clickerprint";
myXMLData.question = "getCategories";

myCategoryReplyXML = new XML();
myCategoryReplyXML.ignoreWhite = true;
myCategoryReplyXML.onLoad = myOnLoad;

myXMLData.sendAndLoad("http://www.___.com/service.php", myCategoryReplyXML);

myScrollPane.contentPath = "holder";
var sContent:MovieClip = myScrollPane.content;

myMCL = new MovieClipLoader();
myListener = new Object();
myMCL.addListener(myListener);

myListener.onLoadComplete = function(targetMC)
{
targetMC.onRelease = function()
{
trace ("HIT");
}
}


function myOnLoad(success:Boolean) {
if(success){

xmlNode = this.firstChild;
total = xmlNode.childNodes[0].childNodes.length;

depth = 10;
y = 40;

for (i=0; i<total; i++) {

cardNum = xmlNode.childNodes[0].childNodes[i].attributes.value;

var aClip:MovieClip = sContent.attachMovie("cardButton", "attachedClip_" + i, depth);
myMCL.loadClip("images/category_source/"+ cardNum +".jpg" , "attachedClip_" + i);
aClip._x = 60;
aClip._y = y;

depth+=1;
y+= 80;

}

}
}


This still loads the same image over and over again... and no onRelease is ever attached to my dynamic clips.

If I do a trace(cardNum) inside the for loop I get a different number each time.. so it's not loading the same image based on the fact that cardNum is always the same.

[dante2010]

Anyone able to help?

[dante2010]

I was told to use onLoadInit instead... but that doesn't seem to work either.

[red penguin]

Personally, I think the only way this will be solved is if you zip an entire example. Pics, etc...Stripped down version...etc...

However, I don't have much time today....maybe tonight/tomorrow but it is a simple debug that needs to happen.

[dante2010]

I would greatly appreciate if you could take a look at the flash file itself.

I've zipped up all needed parts and attached it here.

[red penguin]

man, that took all of 3 minutes:

myXMLData = new LoadVars();
myXMLData.flashIdentity = "Clickerprint";
myXMLData.question = "getCategories";

myCategoryReplyXML = new XML();
myCategoryReplyXML.ignoreWhite = true;
myCategoryReplyXML.onLoad = myOnLoad;

myXMLData.sendAndLoad("http://www.clickerprint.com/service.php", myCategoryReplyXML);

myScrollPane.contentPath = "holder";
var sContent:MovieClip = myScrollPane.content;

myMCL = new MovieClipLoader();
myListener = new Object();
myMCL.addListener(myListener);

myListener.onLoadInit = function(targetMC)
{
trace("onLoadInit: " add targetMC)
targetMC.onRelease = function()
{
trace ("HIT");
}
}


function myOnLoad(success:Boolean) {
if(success){

xmlNode = this.firstChild;
total = xmlNode.childNodes[0].childNodes.length;

depth = 10;
y = 40;

for (i=0; i<total; i++) {

cardNum = xmlNode.childNodes[0].childNodes[i].attributes.value;

var aClip:MovieClip = sContent.attachMovie("cardButton", "attachedClip_" + i, depth);
//myMCL.loadClip("images/category_source/"+ cardNum +".jpg" , "attachedClip_" + i);
//myMCL.loadClip(cardNum +".jpg" , "attachedClip_" + i);
myMCL.loadClip(cardNum +".jpg" , aClip);

aClip._x = 60;
aClip._y = y;

depth+=1;
y+= 80;

}

}
}


Note the 2 commented out lines. The 1st is because I didn't have the same dir structure and the 2nd is where you were failing...

Notice the difference?
aClip is a ref to the attached clip. You were simply using "attachedClip_" + i...

[dante2010]

Thank you very much. I appreciate the effort you have put in to help me through my problem with this code.

[red penguin]

glad to have helped and hope you've learned something...

[forgueam]

I have written an app that uses almost this exact same code, but I had a question about the "click-ability" of the movieclips loaded into the scrollpane. Is it possible to attach a variable to the movieclip after it is created, and have that variable be used when the movieclip is clicked? Below is sample code of what I would like to do, but is not working:


var ScrollPane = _root.skin.Explorer.ScrollPane;
var GalleryMC = ScrollPane.content.createEmptyMovieClip("Gallery"+Gallery.id, 1);

for (var i = 0; i < Gallery.images.length; ++i) {
var Image = new Object();

Image.name = Gallery.images[i].name;
Image.width = Gallery.images[i].width;
Image.height = Gallery.images[i].height;


var ImageMC = GalleryMC.createEmptyMovieClip("Pic"+i, i);
// NOTE THE FOLLOWING LINE:
ImageMC._ImageName = Image.name;

var PicLoader = new MovieClipLoader();
PicLoader.onLoadInit = function (targetMC) {
// NOTE THE FOLLOWING LINE:
targetMC.onRelease = function() { alert(targetMC._ImageName); };
ScrollPane.invalidate();
}
PicLoader.loadClip(Gallery.path+"/"+Image.name.split(".jpg").join("_thumb.jpg"), ImageMC);
}


Although all of the movieclips are click-able, the problem is that ALL of them are sending the Image.name value of the LAST LOADED ImageMC instance to the alert() function when clicked. Any ideas?