We help IT Professionals succeed at work.

Flash 8 load dynamic images+text into scrollpane component

marcparillo
marcparillo asked
on
4,044 Views
Last Modified: 2012-06-21
I can't find a clear explanation about loading dynamic images and text into a scrollpane component in Flash 8.  I've seen variations of what I need, but I can't seem to work it out.   I want to read an XML document, extract image and text info, scale the image down to 20%, load the image and text into separate movie clips and then load all those movie clips into a container movie clip "mcMain" that serves as the content for a scrollpane component.  

I can only get as far as the code below and then I get lost -- I can create individual movie clips, but then how do I attach them all to mcMain?

Thanks in advance,
$marc


////////////////
scrollPane.contentPath = "scrollMovieClip";
mcMain = scrollPane.content;

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
thumbnails = [];
total = xmlNode.childNodes.length;

for (i=0; i<total; i++) {
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
thumbnails[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;

mcMain.attachMovie("individualContainerClip", "indi"+i, mcMain.getNextHighestDepth(), {_y:80*i, _x:10});
loadMovie (thumbnails[i],mcMain["indi"+[i]]);

         
};
   
   scrollPane.invalidate();
}



}
Comment
Watch Question

This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Arul,
Based on your suggestion, and some research of my own, I came up with the following working example.  

**One other question -- can you explain how I can attach variables to each movie clip for future reference?  As you'll see in the code, the only work-around I could come up with was to attach text to hidden text boxes and then refer to the contents of the text.  I'm using Flash Player 7.  Take a look at this code.  If you can point out any glaring problems, I would greatly appreciate it!

Thanks!!!

ACTIONSCRIPT:
------------------------------------
var mcMain:MovieClip;
scrollPane.setStyle("themeColor", "haloBlue");
scrollPane.setStyle("borderStyle", "none");

init();

function init() {
scrollPane.contentPath = "scrollMovieClip";
mcMain = scrollPane.content;
}

var ilist:XML = new XML();
ilist.ignoreWhite = true;
var n = random(100000000);
ilist.load("xml/myxml.xml");
ilist.onLoad = function():Void{
ilist = this.firstChild;
total = ilist.childNodes.length;

caption = [];
description = [];
thumbnail = [];
video = [];

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

caption[i] = ilist.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = ilist.childNodes[i].childNodes[1].firstChild.nodeValue;
thumbnail[i] = ilist.childNodes[i].childNodes[2].firstChild.nodeValue;
video[i] = ilist.childNodes[i].childNodes[3].firstChild.nodeValue;
       
   j=100*i;
   mcMain.attachMovie("blackMovie", "black"+i, i+1 ,{_x:5,_y:j});
   thisClip = mcMain["black"+i];

   // no other way to assign a marker variable to each
   // image, so I'm attaching a "hidden" variable to a
   // text box that refers to the corresponding image
   thisClip.descVideo.text = video[i]; // reference to the video file
   thisClip.descCaption.text = caption[i]; // reference to clip caption

   thisClip.thumb._xscale = 30;
   thisClip.thumb._yscale = 30;
   loadMovie(imagepath+""+thumbnail[i],thisClip.thumb);

   // text
   mcMain.attachMovie("blueMovie", "blue"+i, i+20, {_x:130,_y:j});
   thisClip2 = mcMain["blue"+i];
   thisClip2.descVideo.text = video[i]; // reference to the video file
   thisClip2.descCaption.text = caption[i]; // reference to clip caption
   thisClip2.description.htmlText = "<font color='#7687A9'>"+caption[i]+"</font><br>"+description[i];

   
        thisClip2.onRelease = function():Void{
myWindow = mx.managers.PopUpManager.createPopUp(_root, mx.containers.Window, true, {title: this.descCaption.text, contentPath:"mc_video", closeButton:true});
            myWindow.setSize(400,330);
            myWindow._x = (Stage.width / 2) - 200 ;
            myWindow._y = 150;
            myWindow.setStyle("backgroundColor", 0xFFFFFF);
            _global.passed = this.descVideo.text;

            var oListener:Object = new Object();
            oListener.click = function(oEvent:Object):Void {
            oEvent.target.deletePopUp();
            };
            myWindow.addEventListener("click",oListener);
         };
        
          thisClip.onRelease = function():Void{
            myWindow = mx.managers.PopUpManager.createPopUp(_root, mx.containers.Window, true, {title: this.descCaption.text, contentPath:"mc_video", closeButton:true});
            myWindow.setSize(400,330);
            myWindow._x = (Stage.width / 2) - 200 ;
            myWindow._y = 150;
            myWindow.setStyle("backgroundColor", 0xFFFFFF);
            _global.passed = this.descVideo.text;

            var oListener:Object = new Object();
            oListener.click = function(oEvent:Object):Void {
            oEvent.target.deletePopUp();
            };
            myWindow.addEventListener("click",oListener);
          };
   
   scrollPane.invalidate();  
}
}

XML FORMAT:
--------------------------------
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<stories>
    <story>
       <caption>This is the caption</caption>
        <description>This is the description</description>
        <thumbnail>This is my thumbnail image</thumbnail>
       <video>This is the link to my video</video>
    </story>
</stories>
Movieclips are dynamic classes - meaning, you can attach properties ( variables, as you say) to a movieclip at runtime too.

So if you want to store a variable called "description" with some text value in a movieclip "mc", all you gotta do is
mc.description = "data goes here" ;
and to retrieve, you can just access 'mc.description'

Author

Commented:
I've used your suggestion before -- and it's worked -- but for some reason I can't attach variables to my movie clips in this script.  

Let me show you what I mean.  Here, I'm creating a dynamic movie clip and attaching the name of my video file stored in XML to the variable "descVideo".  Then, I attach an onRelease function to each movie clip to trace the unique file name associated with each mc.   When I do it this way, the only variable that's saved is the last video[i] in my XML structure.   The last video file in my XML document becomes the "descVideo" variable for each of the dynamic mc's I've created -- even though the XML designates a separate video file for each dynamic movie clip that's created.

// looping through XML, creating dynamic MC's and attaching variables to each
for (i=0; i<total; i++) {  
   
   video[i] = ilist.childNodes[i].childNodes[3].firstChild.nodeValue;

   mcMain.attachMovie("blueMovie", "blue"+i, i+20, {_x:130,_y:j});
   thisClip = mcMain["blue"+i];
   thisClip.videoFile = video[i]; // attaching unique file name to each dynamic movie clip

   thisClip.onRelease = function():Void{
        trace(thisClip.videoFile); // tracing variable attached to each dynamic mc instance
}

}

Author

Commented:
oops, in my explanation above the variable is "videoFile" not "descVideo"

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.