I went to gotoAndLearn.com and found a nice video on scrolling thumbnails. The only problem is that the video is in AS2 and isn’t dynamic. I’m looking to accomplish the same task… but in AS3, and have it get its data from an XML file.
I’ve started writing code for this project but am now stumped over a question on scope. I need my last two functions to use a variable in line 18 of my code. Can anyone please help with this scope problem? I haven’t checked for errors b/c I don’t have flash on my PC but I sure that I’m on the right track.
This is the structure of my XML Document:
1 <rootnode>
2 <parentnode id=“0”>
3 <childnode id=“00”>
4 <childThumb>Images/thumb1.png</childThumb>
5 <childImage>Images/image1.png</childImage>
6 <childTitle />
7 <childText />
8 </childnode>
9 <childnode id="01"/>
10 <childnode id="02"/>
11 </parentnode>
12 <parentnode id="1" />
13 </rootnode>
Here, I’m declaring some global variables:
1 var myXML:XML= new XML();
2 var myURL:URLRequest= new URLRequest(“DreamweaverCS3.xml”);
3 var myLoader:URLLoader= new URLLoader(myURL);
4 myLoader.addEventListener(Event.COMPLETE, loadXML);
This function loads the xml file into “myXML”:
6 function loadXML(externalxml:Event):void {
7 myXML.ignoreComments=true;
8 myXML.ignoreWhitespace=true;
9 myXML=new XML(externalxml.target.data);
10 parseXML(myXML);
11 }
This function parses the xml data:
13 function parseXML(flashxml:XML):void {
14 listXML(flashxml);
15 }
This function uses xml attributes to filter the data; allow “thumbnode” to represent the proper “childnode” tag in the xml document:
17 function listXML(parsedxml:XML):void {
18 var filterThumbs:XMLLIST=parsedxml.parentnode.(@id==”0”);
19 var filterHome:XMLList=parsedxml.parentnode.(@id==“1”);
20 var filterHistory:XMLList=parsedxml.parentnode.(@id==“2”);
21 var filterBrothers:XMLList=parsedxml.parentnode.(@id==“3”);
22 var filterEvents:XMLList=parsedxml.parentnode.(@id==“4”);
23 var filterRecruit:XMLList=parsedxml.parentnode.(@id==“5”);
24 var filterContact:XMLList=parsedxml.parentnode.(@id==“6”);
25
26 callThumbs(filterThumbs, thumbnode);
27 }
Here, “allthumbs” stores the pictures that will be in the thumbnails panel. This function also positions the panel in the center of the stage. “link1MC” is a button–I’m using it to help determine properties for the “allthumbs” panel.
29 function callThumbs(thumbxml:XMLLIST, num:int):void {
30 var centerstage:int=stage.stageWidth/2;
31 var allthumbs:MovieClip=new MovieClip();
32
33 allthumbs.name=”allthumbs”;
34 allthumbs.x=centerstage;
35 allthumbs.y=link1MC.y;
36 addChild(allthumbs);
37
38 for(var i:int=0; i < thumbxml.target.childnode[num].childThumb.length(); i++) {
39 var thumbURL:String=new String(“thumbxml.childnode[num].childThumb*.text()”);
40 var thumbRequest:URLRequest=new URLRequest(“thumbURL”);
41 var thumbLoader:Loader=new Loader();
42 thumbLoader.load(thumbRequest);
43
44 var thisthumb:MovieClip=new MovieClip();
45 thisthumb.name=i;
46 thisthumb.x=centerstage + ithisthumb.width/2;
47 thisthumb.y=allthumbs.y;
48
49 allthumbs.addChild(thisthumb);
50 thisthumb.addChild(thumbLoader);
51
52 allthumbs.height=thisthumb.height;
53 allthumbs.width=thisthumb.width(1 + i);
54 allthumbs.x=(centerstage – allthumbs.width)/2;
55 }
56
57 callMask(allthumbs);
58 allthumbs.addEventListener(MouseEvent.MOUSE_OVER, panelOver);
59 }
This function creates a mask over the “allthumbs” panel:
61 function callMask(panelMC:MovieClip):void {
62 var box:Rectangle= new Rectangle(link1MC.x, link1MC.y,4*link1MC.width, link1MC.height);
63 var maskMC:MovieClip=new MovieClip();
64 maskMC=box;
65
66 panelMC.target.mask=maskMC;
67 maskMC.cacheAsBitmap=true;
68 panelMC.target.cacheAsBitmap=true;
69 }
This function senses when the cursor is over any portion of “allthumbs” shown by the mask:
71 function panelOver(panel:MouseEvent):void {
72 panel.addEventListener(Event.ENTER_FRAME, panelMove);
73 panel.removeEventListenr(MouseEvent.MOUES_OVER, panelOver);
74 }
This function allows the “allthumbs” panel to move in response to the position of the mouse cursor:
76 function panelMove(panel:MouseEvent):void {
77 var box:Rectangle= new Rectangle(link1MC.x, link1MC.y,4link1MC.width, link1MC.height);
78 if(mouseX < box.xMin || mouse X > box.xMax || mouseY < box.yMin || mouseY > box.yMax) {
79 panel.addEventListener(MouseEvent.MOUSE_OVER, panelOver);
80 panel.removeEventListener(Event.ENTER_FRAME, panelMove);
81 }
82
83 if(panel.x >= box.xMin) panel.x = box.xMin;
84 if(panel.x <= box.xMax – panel.width) panel.x = box.xMax – panel.width;
85
86 var xdist:int = mouseX – 0.5stage.stageWidth;
87 var scrollspeed:int = 7;
88 panel.x += -xdist / scrollspeed;
89
90 panel.addEventListener(MouseEvent.MOUSE_OVER, thumbOver);
91 panel.addEventListener(MouseEvent.CLICK, thumbClick);
92 }
I’m stuck here. How can I allow these two functions to reference the xml data in “filterThumbs” that is found in line 18 of this code?
94 function thumbOver(thumb:MouseEvent):void {
95
96 }
97
98 function thumbClick(thumb:MouseEvent):void {
99
100 }