hi guys, i’m trying to convert an image gallery to have the individual images clickable and return a specific value to that image. so far i have not had any luck. the images are loaded as an array and i was wondering if there is anyway of splitting up the images, so that i can refer to them individually and make them buttons.
here is a code sample, all the image movieclips where created through action script:
import mx.transitions.Tween;
import mx.transitions.easing.*;
//maincode
var 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;
var nimageIndex:Number = 0;
createContainer();
callImages();
masking();
scrollbar();
scroller();
hideScrollbar();
genericButton();
test();
};
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 a
function 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);
/*//test button
_root.imagebtn = _root.myGallery_mc.createEmptyMovieClip("imagebtn", _root.myGallery_mc.getNextHighestDepth());
trace(_root.imagebtn._root.myImages*.attributes.url);
myMCL.loadClip(imageURL,_root.imagebtn);
_root.imagebtn.onRelease = function():Void{
trace("image1");
};
*/
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(imageURL,image_mc);
}
}
function genericButton(){
_root.myImages_mc.onRelease = function():Void{
var i:Number = 0;
if(_root.myImages<=i){
trace(imageURL);
trace(_root.image_mc);
}
};
}
myPreloader.onLoadStart = function(target){
target.beginFill(0x000000,100);
target.lineTo(_root.image_width,0);
target.lineTo(_root.image_width,_root.gallery_height);
target.lineTo(0,_root.gallery_height);
target.lineTo(0,0);
target.endFill();
target.createTextField("myText_txt",1,0,0,100,20);
target.myText_txt.textColor = 0xFF0000;
target.myText_txt.selectable = false;
}
myPreloader.onLoadProgress = function(target, lb, tb){
target.myText_txt=Math.floor((lb/tb)*100)+"%";
}
myPreloader.onLoadComplete = function(target){
target.clear();
target.myText_txt.removeTextField();
new Tween (target, "alpha", Strong.easeOut, 0, 100,1, true);
}
//masking function
function 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 api
function 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;
//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 api
function 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);
};
//releases drag on scroller
_root.scroller_mc.onRelease = _root.scroller_mc.onReleaseOutside=function() {
stopDrag();
clearInterval(moverInterval);
mover();
};
}
//mover function
function 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);
}
and here is the xml
<?xml version="1.0" encoding="utf-8"?>
<gallery width="824" height="378" y="40" image_width="250" vertical_spacing="10" bar_thickness="10">
<image url="test/images/image1.jpg" />
<image url="test/images/image2.jpg" />
<image url="test/images/image3.jpg" />
<image url="test/images/image4.jpg" />
<image url="test/images/image5.jpg" />
<image url="test/images/image6.jpg" />
<image url="test/images/image7.jpg" />
<image url="test/images/image8.jpg" />
<image url="test/images/image9.jpg" />
<image url="test/images/image10.jpg" />
<image url="test/images/image11.jpg" />
<image url="test/images/image12.jpg" />
</gallery>
