hi everybody,
i followed a tutorial on line that showed me how to create a scrollbar gallery with the use of only action script and xml, i also looked at another tutorial that allowed me to be able to use thumb nails to change the images been displayed. now i’m trying to modify the former tutorial gallery i made to include this function by using my already set images as the thumbnail and when this images are clicked i go to the next page or frame and display the corresponding image. i have been able to get the images clickable but i can’t seem to get the image to be displayed. here is my code and my xml file here. i hope i can find some help here, even if its an idea i wouldn’t mind. been at it for 2weeks now and i can’t seem to find a solution.
stop();import mx.transitions.Tween;import mx.transitions.easing.*;
//maincodevar myGalleryXML = new XML();myGalleryXML.ignoreWhite = true;myGalleryXML.load("test/gallery.xml");
myGalleryXML.onLoad = function(){
_root.gallery_width = myGalleryXML.firstChild.attributes.width; _root.gallery_height = myGalleryXML.firstChild.attributes.height; _root.gallery_y = myGalleryXML.firstChild.attributes.y;
_root.spacing = myGalleryXML.firstChild.attributes.vertical_spacing; _root.bar_y = Number(_root.gallery_height) + Number(_root.spacing); _root.bar_thickness = myGalleryXML.firstChild.attributes.bar_thickness; _root.scroller_width = _root.bar_thickness * 2;
_root.image_width = myGalleryXML.firstChild.attributes.image_width; _root.myImages = myGalleryXML.firstChild.childNodes; _root.myImagesTotal = _root.myImages.length;
_root.popup_x = myGalleryXML.firstChild.attributes.popup_x; _root.popup_y = myGalleryXML.firstChild.attributes.popup_y;
createContainer(); callImages(); masking(); scrollbar(); scroller(); hideScrollbar(); genericButton(); moveButton();};
function createContainer(){ _root.myGallery_mc = _root.createEmptyMovieClip("myGallery_mc", _root.getNextHighestDepth()); _root.myGallery_mc._y = _root.gallery_y; _root.myGallery_mc._x = (Stage.width - _root.gallery_width - 555) / 2;}
//uploads all imagesfunction callImages(){ _root.myImages_mc = _root.myGallery_mc.createEmptyMovieClip("myImages_mc", _root.myGallery_mc.getNextHighestDepth());
var myMCL:MovieClipLoader = new MovieClipLoader(); var myPreloader:Object = new Object(); myMCL.addListener(myPreloader);
for (i = 0; i < _root.myImagesTotal; i++){ imageURL = _root.myImages*.attributes.url; image_mc = _root.myImages_mc.createEmptyMovieClip(i, _root.myImages_mc.getNextHighestDepth()); image_mc._x = _root.image_width * i;
myMCL.loadClip("test/" + imageURL,image_mc); myPreloader.onLoadComplete = function(target) { target.onRelease = function() { callpopup(this._name); trace(this._name); //_root.myGallery_mc._visible = false; }; };}}
function callpopup(myNumber) { popupImageURL = myImages[myNumber].attributes.popup_url; _root.createEmptyMovieClip("popupImage_mc",_root.getNextHighestDepth()); popupImage_mc._x = _root.popup_x; popupImage_mc._y = _root.popup_y; var PopupLoader:MovieClipLoader = new MovieClipLoader(); PopupLoader.loadClip = ("test/"+popupImageURL, popupImage_mc); trace(PopupLoader.loadClip);}
//masking functionfunction masking(){ _root.myMask_mc = _root.myGallery_mc.createEmptyMovieClip("myMask_mc", _root.myGallery_mc.getNextHighestDepth());
_root.myMask_mc.beginFill(0x000000,100); _root.myMask_mc.lineTo(_root.gallery_width,0); _root.myMask_mc.lineTo(_root.gallery_width,_root.gallery_height); _root.myMask_mc.lineTo(0,_root.gallery_height); _root.myMask_mc.lineTo(0,0); _root.myMask_mc.endFill();
_root.myImages_mc.setMask(_root.myMask_mc);}
function hideScrollbar(){ if (5 < _root.myImagesTotal) { //trace("condition is true"); } else { if (3 >= _root.myImagesTotal) { scrollbar_mc.clear(); scroller_mc.clear(); } }
}
//draws scrollbar using draw apifunction scrollbar(){ _root.scrollbar_mc = _root.myGallery_mc.createEmptyMovieClip("scrollbar_mc", _root.myGallery_mc.getNextHighestDepth()); _root.scrollbar_mc._y = _root.bar_y;
_root.scrollbar_mc.beginFill(0x000000,100); _root.scrollbar_mc.lineTo(gallery_width,0); _root.scrollbar_mc.lineTo(gallery_width,_root.bar_thickness); _root.scrollbar_mc.lineTo(0,_root.bar_thickness); _root.scrollbar_mc.lineTo(0,0); _root.scrollbar_mc.endFill();
_root.scrollbar_mc.onPress = function() { _root.scroller_mc._x = this._xmouse; //_root.Button_mc._x = this._xmouse;
//scroller boundary when clicked at the far right corner if (_root.scroller_mc._x > (this._width - _root.scroller_mc._width)) { _root.scroller_mc._x = this._width - _root.scroller_mc._width; } mover(); };}//draws scroller using the draw apifunction scroller(){ _root.scroller_mc = _root.myGallery_mc.createEmptyMovieClip("scroller_mc", _root.myGallery_mc.getNextHighestDepth()); _root.scroller_mc._y = _root.bar_y;
_root.scroller_mc.beginFill(0xff0000,100); _root.scroller_mc.lineTo(_root.scroller_width,0); _root.scroller_mc.lineTo(_root.scroller_width,_root.bar_thickness); _root.scroller_mc.lineTo(0,_root.bar_thickness); _root.scroller_mc.lineTo(0,0); _root.scroller_mc.endFill();
//creates drag on scroller when clicked _root.scroller_mc.onPress = function() { startDrag(this, false, 0, this._y, _root.scrollbar_mc._width - this._width, this._y); moverInterval = setInterval(mover, 250); //Button_mc._visible = false; }; //releases drag on scroller _root.scroller_mc.onRelease = _root.scroller_mc.onReleaseOutside = function () { stopDrag(); clearInterval(moverInterval); //Button_mc._visible = true; mover(); };
}
//mover functionfunction mover(){ var scrollerLocation = _root.scroller_mc._x / (_root.scrollbar_mc._width - _root.scroller_mc._width); var galleryLocation = scrollerLocation * (_root.myMask_mc._width - _root.myImages_mc._width);
new Tween(_root.myImages_mc, "_x", Strong.easeOut, _root.myImages_mc._x, galleryLocation, 1.5, true);}
xml code below:
<?xml version="1.0" encoding="utf-8"?><gallery width="824" height="378" popup_x= "500" popup_y="50" y="40" popup_width = 250 popup_height = "378"image_width="250" vertical_spacing="10" bar_thickness="10"><image popup_url= "popup/image1.jpg" url="images/image1.jpg" /><image popup_url= "popup/image2.jpg" url="images/image2.jpg" /><image popup_url= "popup/image3.jpg" url="images/image3.jpg" /><image popup_url= "popup/image4.jpg" url="images/image4.jpg" /><image popup_url= "popup/image5.jpg" url="images/image5.jpg" /><image popup_url= "popup/image6.jpg" url="images/image6.jpg" /><image popup_url= "popup/image7.jpg" url="images/image7.jpg" /><image popup_url= "popup/image8.jpg" url="images/image8.jpg" /><image popup_url= "popup/image9.jpg" url="images/image9.jpg" /><image popup_url= "popup/image10.jpg" url="images/image10.jpg" /><image popup_url= "popup/image11.jpg" url="images/image11.jpg" /><image popup_url= "popup/image12.jpg" url="images/image12.jpg" />
</gallery>
