Dynamic Building Scrolling Gallery - XML - Help

Hey guys,

I'm going crazy here, using up too much time and getting no results.

What I'm trying to do is build a Dynamic XML scrolling gallery, but it's not going to be a gallery, more like scrolling images with links, that when you click on an image, it will take you to the url designated for each image in the XML.

I have no experience working with AS3, so far what I've got are things I'm learning trying to build this.

The issue:
The issue is that when I run the script, the url designated to all the created movie clips have the same url. For example it will use first "link" on the XML on all 4 movie clips (so all the movie clips would be linked to "google.com"), or it will use the last "link" in the XML for all movie clips (so all the movie clips would be linked to "facebook.com").

How may I fix the issue above?

Any help would be greatly appreciated, I've been working on this for 4 days now, and I need to get it done. Thank you!

XML

PHP Code:

---

<?xml version='1.0' encoding='ISO-8859-1'?>

<chapter_list>
    <chapter> 
         <name> 
             Google
         </name> 
         <image> 
            http://www.google.com/images/google.jpg
          </image> 

         <link> 
             google.com
         </link> 
     </chapter> 


    <chapter> 
         <name> 
             MSN
         </name> 
         <image> 
            http://www.msn.com/images/msnlogo.jpg
          </image> 

         <link> 
             msn.com
         </link> 
     </chapter> 


    <chapter> 
         <name> 
             Yahoo
         </name> 
         <image> 
            http://www.yahoo.com/images/yahoologo.jpg
          </image> 

         <link> 
             yahoo.com
         </link> 
     </chapter> 



    <chapter> 
         <name> 
             facebook
         </name> 
         <image> 
            http://www.facbook.com/images/facebooklogo.jpg
          </image> 

         <link> 
             facebook.com
         </link> 
     </chapter> 

</chapter_list>

---

Action Script 3

PHP Code:

---

// [AS3] The code below is to read an XML file //

var myXML:XML;
var myLoader:URLLoader = new URLLoader();

myLoader.load(new URLRequest("data/chapter_list.xml"));
myLoader.addEventListener(Event.COMPLETE, processXML);

    function processXML(e:Event):void{
        
        myXML = new XML(e.target.data);
                
                var chapterImage = myXML.chapter.image;
                var chapterLink = myXML.chapter.link[i];
            
            for(var i:int = 0; i<myXML.*.length(); i++ ){
                // AS3 Create Movie Clip for each XML Entry 
                var imageArea:MovieClip = new MovieClip();
                imageArea.graphics.drawRect(0, 0, 126, 76);
                imageArea.graphics.endFill();
                imageArea.x = 17 + (i*126);
                imageArea.y = 0;
                addChild(imageArea);
                
                // AS3 Load External Image Into Movie Clip
                var image =new Loader();
                image.load(new URLRequest(chapterImage[i]));
                imageArea.addChild(image);
                
                // AS3 Movie as Button
                imageArea.addEventListener(MouseEvent.CLICK, gotoPage);
                } 
                
                function gotoPage(e:MouseEvent):void{
                navigateToURL(new URLRequest("http://www." + chapterLink), "_blank");
                trace(chapterLink);
                }
                
            } 


---

I'm not at the scrolling part yet.

PHP Code:

---

// [AS3] The code below is to read an XML file // 

var myXML:XML; 
var myLoader:URLLoader = new URLLoader(); 

myLoader.load(new URLRequest("data/chapter_list.xml")); 
myLoader.addEventListener(Event.COMPLETE, processXML); 

    function processXML(e:Event):void{ 
         
        myXML = new XML(e.target.data); 
                 
                var chapterImage = myXML.chapter.image; 
                var chapterLink = myXML.chapter.link; 
             
            for(var i:int = 0; i<myXML.*.length(); i++ ){ 
                // AS3 Create Movie Clip for each XML Entry 
                var imageArea:MovieClip = new MovieClip(); 
                imageArea.chapterLink = chapterLink[i];
                imageArea.graphics.drawRect(0, 0, 126, 76); 
                imageArea.graphics.endFill(); 
                imageArea.x = 17 + (i*126); 
                imageArea.y = 0; 
                addChild(imageArea); 
                 
                // AS3 Load External Image Into Movie Clip 
                var image =new Loader(); 
                image.load(new URLRequest(chapterImage[i])); 
                imageArea.addChild(image); 
                 
                // AS3 Movie as Button 
                imageArea.addEventListener(MouseEvent.CLICK, gotoPage); 
                } 
                 
                function gotoPage(e:MouseEvent):void{ 
                var chapterLink = e.currentTarget.chapterLink;
                navigateToURL(new URLRequest("http://www." + chapterLink), "_blank"); 
                trace(chapterLink); 
                } 
                 
            } 


---

Dear moagrius,

I love you, and God Bless you, many times!

It works perfect! How did you get it to work, I noticed you inserted the following code.

PHP Code:

---

imageArea.chapterLink = chapterLink[i]; 


---

PHP Code:

---

var chapterLink = e.currentTarget.chapterLink; 


---

Could you explain it to me if you have some extra time, Thank you once again!

you had two main problems. the first was var chapterLink = myXML.chapter.link[i]; outside the for loop, so "i" wasn't even defined yet. it needed to be var chapterLink = myXML.chapter.link; (notice the lack of "[i]").

once that was done, you were assigning a variable to "chapterLink" - but not associating it with any objects, so each event handler was calling the same variable (the last one declared in the loop). each iteration of the loop was overwriting that variable. you needed to save it's current value during each iteration. then in the event handler, we found that saved value with var chapterLink = e.currentTarget.chapterLink;

hth :)

Yes that did help, I don't understand too much programing but I'm starting to get the hang of it. Just need to do more reading about AS3 and programing.

At this point what should I be looking for? I need it to scroll horizontally with the mouse directions.

I need 2 buttons, one to make it go faster to the right and other to make it go back towards the left.

I'm thinking I need for my AS3 to create a mask movie clip on top of the individual movieclips created.

So do i need to go back and have a movie clip created then insert the movie clips that the function makes in that movie clip, and then on that movie clip ad the scrolling feature, and then on top of that movie clip make the mask?

For Example;

Mask <- Movie Clip (insert the x_mouse y_mouse code here) <- XML Movie Clips (insert these movie clips into this container)

Would that be correct, and could you point me to the right dirrection.

Thank you mogarius, and any other person with some help!

I need to do something like this,http://www.flashcomponents.net/compo...e_gallery.html but with out the larger image, just the scrolling.



I put my XML in a movie container and then masked it, so that works. But now how can I get it to scroll using the mouse axis?

the basic formula is something like this:

get the relative position (a decimal value) comparing the mouse position to the width of the mask

PHP Code:

---

var perc:Number = mask.mouseX / mouse.width; 


---

then position the container to a negative value equal to it's width, times that relative number.

PHP Code:

---

container.x = -(perc * container.width); 


---

however, this'll give you a gap at one end, the size of the mask. to get rid of that gap, subtract it from the container's width in the above formula:

PHP Code:

---

container.x = -(perc * (container.width - mask.width)); 


---

and obviously this would happen instantly. if you wanted to tween it, you'd just supply the above number to your favorite tweening engine:

PHP Code:

---

var dest:Number = -(perc * (container.width - mask.width));
SomeTween(container,time,ease,{x:dest}); 


---

here's a very basic example, without tween. just open a new FLA, paste into frame 1's actions panel, and hit "test movie".

PHP Code:

---

var main:Sprite = new Sprite();
main.x = main.y = 100;

var shell:Sprite = new Sprite();
for(var i:uint;i<10;i++){
    var color:uint = Math.random() * 0xFFFFFF;
    var box:TextField = new TextField();
    box.text = "Box Number: " + i;
    box.width = 100;
    box.height = 50;
    box.background = true;
    box.backgroundColor = color;
    box.textColor = 0xFFFFFF - color;
    box.x = 100 * i;
    shell.addChild(box);
};
main.addChild(shell);

var masker:Shape = new Shape();
masker.graphics.beginFill(0);
masker.graphics.drawRect(0,0,300,50);
shell.mask = masker;
main.addChild(masker);

var border:Sprite = new Sprite();
border.graphics.beginFill(0,0);
border.graphics.lineStyle(0,0xcccccc,1,true,"none","square","miter",1);
border.graphics.drawRect(0,0,300,50);
main.addChild(border);

this.addChild(main);

function onover(event:Event):void{
    var perc:Number = border.mouseX / border.width;
    shell.x = -(perc * (shell.width - masker.width));
};

border.addEventListener("mouseMove",onover); 


---

Hey moagrius,

Thanks a million, once again. I tried it out and it's what I was looking for. I'll just have to adapt your code into the one I have written before.

Also I wanted to know, how can I gain knowledge on action script 3. Is there a book or books you would recommend for me?

Moagrius,

So far so good, now the only thing is that the individual movies inside of the shell are not click able, so they do not go to any website.

PHP Code:

---

// [AS3] The code below is to read an XML file + Scroll //

var myXML:XML;
var myLoader:URLLoader = new URLLoader();

myLoader.load(new URLRequest("data/chapter_list.xml"));
myLoader.addEventListener(Event.COMPLETE, processXML);

    function processXML(e:Event):void{
        
        myXML = new XML(e.target.data);
                
            var chapterImage = myXML.chapter.image;
            var chapterLink = myXML.chapter.link;
            
            var main:Sprite = new Sprite();
            main.x = 0; 
            main.y = 0;
            var shell:Sprite = new Sprite();
            
            for(var i:int = 0; i<myXML.*.length(); i++ ){
                
                // AS3 Create Movie Clip for each XML Entry 
                var imageArea:MovieClip = new MovieClip();
                imageArea.chapterLink = chapterLink[i];
                imageArea.graphics.drawRect(0, 0, 126, 76);
                imageArea.graphics.endFill();
                imageArea.x = 17 + (i*126);
                imageArea.y = 0;
                shell.addChild(imageArea);

                // AS3 Load External Image Into Movie Clip
                var image =new Loader();
                image.load(new URLRequest(chapterImage[i]));
                imageArea.addChild(image);
                
                // AS3 Movie as Button
                imageArea.addEventListener(MouseEvent.CLICK, gotoPage);
                
                // if you want a hand cursor
                imageArea.buttonMode = true;
                imageArea.useHandCursor = true;

                function gotoPage(e:MouseEvent):void{
                    var chapterLink = e.currentTarget.chapterLink;
                    navigateToURL(new URLRequest("http://www." + chapterLink), "_blank");
                    trace(chapterLink);
                }

            }
                
                main.addChild(shell);
    
                var masker:Shape = new Shape();
                masker.graphics.beginFill(0xfffffff, 0);
                masker.graphics.drawRect(0,0,300,76);
                shell.mask = masker;
                main.addChild(masker);
                
                var border:Sprite = new Sprite();
                border.graphics.beginFill(0,0);
                border.graphics.lineStyle(0,0x000000,0,true,"none","square","miter",1);
                border.graphics.drawRect(0,0,300,76);
                main.addChild(border);
                
                this.addChild(main);
                
                function onover(event:Event):void{
                    var perc:Number = border.mouseX / border.width;
                    shell.x = -(perc * (shell.width - masker.width));
                };
                
                border.addEventListener("mouseMove",onover); 
    } 


---

as far as the first question - i learned by trial and error, and lots of experimentation. keep the experiments small in scope - don't necessarily try to achieve a nice application you'd want to show a customer, just do really small-scale "functions" (scrolling, masking, drawing, etc), repeat until you understand exactly what's going on, then tweak it - try variants or shortcuts or whatever without trying to make it work, but just learn from what happens.

anyways, as regards the second thing: the border layer is covering the clips. take it out entirely and use the masker for the metrics and the shell as the element handling the event, like so:

PHP Code:

---

// [AS3] The code below is to read an XML file + Scroll //

var myXML:XML;
var myLoader:URLLoader = new URLLoader();

myLoader.load(new URLRequest("data/chapter_list.xml"));
myLoader.addEventListener(Event.COMPLETE, processXML);

    function processXML(e:Event):void{
        
        myXML = new XML(e.target.data);
                
            var chapterImage = myXML.chapter.image;
            var chapterLink = myXML.chapter.link;
            
            var main:Sprite = new Sprite();
            main.x = 0; 
            main.y = 0;
            var shell:Sprite = new Sprite();
            
            for(var i:int = 0; i<myXML.*.length(); i++ ){
                
                // AS3 Create Movie Clip for each XML Entry 
                var imageArea:MovieClip = new MovieClip();
                imageArea.chapterLink = chapterLink[i];
                imageArea.graphics.drawRect(0, 0, 126, 76);
                imageArea.graphics.endFill();
                imageArea.x = 17 + (i*126);
                imageArea.y = 0;
                shell.addChild(imageArea);

                // AS3 Load External Image Into Movie Clip
                var image =new Loader();
                image.load(new URLRequest(chapterImage[i]));
                imageArea.addChild(image);
                
                // AS3 Movie as Button
                imageArea.addEventListener(MouseEvent.CLICK, gotoPage);
                
                // if you want a hand cursor
                imageArea.buttonMode = true;
                imageArea.useHandCursor = true;

                function gotoPage(e:MouseEvent):void{
                    var chapterLink = e.currentTarget.chapterLink;
                    navigateToURL(new URLRequest("http://www." + chapterLink), "_blank");
                    trace(chapterLink);
                }

            }
                
                main.addChild(shell);
    
                var masker:Shape = new Shape();
                masker.graphics.beginFill(0xfffffff, 0);
                masker.graphics.drawRect(0,0,300,76);
                shell.mask = masker;
                main.addChild(masker);
                
                this.addChild(main);
                
                function onover(event:Event):void{ 
                                var perc:Number = masker.mouseX / masker.width; 
                                shell.x = -(perc * (shell.width - masker.width)); 
                }; 

                shell.addEventListener("mouseMove",onover); 
    } 


---

(untested - i dont have flash on this machine)

Thank you!

That last code you fixed, that you didn't even test worked out perfect.
Is there anything you might need, maybe I can find for you.

Lastly I was wondering if you could help me out with one last thing.

With the scrolling if I wanted it to auto scroll at a certain speed is that something that could be done through action script, or would I have to setup movie clips and tweens. Because ultimately I wanted to have 2 buttons one that goes back wards faster and one the goes forward faster, but when you are not on it it auto scrolls.

in this function:

PHP Code:

---

function onover(event:Event):void{ 
                                var perc:Number = masker.mouseX / masker.width; 
                                shell.x = -(perc * (shell.width - masker.width)); 
                }; 


---

instead of assigning the x property directly, you could tween it. make sure you use an overwriting tween engine though (most of them are... i don't think Adobe's is)... e.g.,

PHP Code:

---

function onover(event:Event):void{ 
                                var perc:Number = masker.mouseX / masker.width; 
                                var dest:Number = -(perc * (shell.width - masker.width)); 
                                //  i'll use my custom tween engine on the line below, but TweenLite or Tweensy or Tweener or GTween or whatever should work too... 
new Anim(shell,10,2,{x:dest});
                }; 


---

then just change the duration and the easing for the fast versus the slow buttons...

Hey Moagrius,

I know it's been a few months since your last post. I got TweenLite and made it tween, but x:dest does not work... Not sure what to do. I'll keep researching.-