XML Image Link in Flash Actionscript
- MJfan02
- Born


- Joined: Aug 22, 2007
- Posts: 1
- Status: Offline
Hey everybody, I'm new here but in a severe bind. I have a flash slideshow/top story for one of my sites, and it works well, except I can't figure out how to add a link to the main image or in the text. I keep looking at it and can't figure out what I'm missing.
Here's the xml:
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<image>
<pic>http://concept.flight9online.com/images/top_story/07camp_275_070813.jpg</pic>
<thumb>http://concept.flight9online.com/images/top_story/07camp_100_070813.jpg</thumb>
<title>The Andre Iguodala Basketball Camp</title>
<desc>The Andre Iguodala Basketball Camp was successful once again this year, as it was held between July 30 - August 4 in Springfield, Illinois. To view photos from the event click the Andre Iguodala Youth Foundation link on the left.</desc>
<link>insert link here</link>
</image>
The actionscript is a little tricky, becuase it's split up on four different frames because of the loading process...but here is frame four where most of the info comes into play.
Actionscript:
import mx.transitions.Tween;
import mx.transitions.easing.*;
var widthReserve:Number = 10; //Two times the border width around the main image
var heightReserve:Number = 10; //Two times the border height around the main image
var imageAreaWidth:Number = 380; //Width of the main image area
var imageAreaHeight:Number = 350; //Height of the main image area
var tweenSpeed:Number = 1; //Tweening speed for the thumbnail holder position tween
var destX:Number = thumbHolder._x; //Destination for the position tweening
var posTween; //Position tween handle
mcNavPrev.swapDepths(thumbHolder); //Bring the buttons in front of the thumbnails
//Set the button texts
mcNavPrev.txtCaption.htmlText = "«";
mcNavNext.txtCaption.htmlText = "»";
//Load the first image
loadImage(0);
stop();
function loadImage(imgIndex:Number):Void {
//Clear theimage title and description
txtImageTitle.htmlText = "";
txtImageDesc.htmlText = "";
txtImageLink.htmlText = "";
//Update the preloader
txtLoadText.htmlText = "loading image...";
//Remove any previously loaded image
image.removeMovieClip();
//Get the main image frame from the library
image = this.attachMovie("mcImage", "mcImage", this.getNextHighestDepth());
//Position it
image._x = 10;
image._y = 10;
//Hide it until everything is loaded
image._visible = false;
//Create a MovieClipLoader and Listener for the image
//in order to monitor the load process
var mcl:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();
listener.idNum = imgIndex;
//Callback: called when the image is fully
//loaded and starts displaying
listener.onLoadInit = function(target_mc:MovieClip) {
//The image is now fully loaded
//Calculate and set the frame size depending on the image size
image.mcImageBack._width = target_mc._width + widthReserve;
image.mcImageBack._height = target_mc._height + heightReserve;
//Put the image in the center of the frame
target_mc._x = image.mcImageBack._x + (image.mcImageBack._width - target_mc._width)/2;
target_mc._y = image.mcImageBack._y + (image.mcImageBack._height - target_mc._height)/2;
//Add the link to the image
target_mc.onRelease = function() {
getURL(xmlNode.childNodes[idNum].childNodes[4].firstChild.nodeValue, "_blank") ;
}
//Position the image within its set area
image._x = (imageAreaWidth - image.mcImageBack._width) / 2;
image._y = (imageAreaHeight - image.mcImageBack._height) / 2;
//Show the image
image._visible = true;
//Update the image title and description
txtImageTitle.htmlText = xmlNode.childNodes[this.idNum].childNodes[2].firstChild.nodeValue;
txtImageDesc.htmlText = xmlNode.childNodes[this.idNum].childNodes[3].firstChild.nodeValue;
};
//Callback: Called when one of the images
//finishes loading
listener.onLoadComplete = function(target_mc:MovieClip) {
};
//Associate the listener with the movieclip loader
mcl.addListener(listener);
//Load the selected image
mcl.loadClip(xmlNode.childNodes[imgIndex].childNodes[0].firstChild.nodeValue, image.mcMainImage);
}
mcNavNext.onRelease = function() {
//"Next" button pressed
if(destX > -((noOfImages - 6) * stepX)){
//Not yet at the last image in the row => sweep the thumbnails to the left
destX -= stepX;
posTween.stop();
posTween = new Tween(thumbHolder, "_x", Strong.easeOut, thumbHolder._x, destX, tweenSpeed, true);
posTween.FPS = 50;
}
}
mcNavPrev.onRelease = function() {
//"Previous" button pressed
if(destX < 0){
//Not yet at the first position => sweep the thumbnails to the right
destX += stepX;
posTween.stop();
posTween = new Tween(thumbHolder, "_x", Strong.easeOut, thumbHolder._x, destX, tweenSpeed, true);
posTween.FPS = 50;
}
}
I'm not sure if this is enough...but everytime I click on the image it just tells me that my link is undefined. I just can't figure out what I'm missing. Any help would be MUCH appreciated. The link node is called in the middle of the actionscript where it says //Add the link to the image.
Thanks
Here's the xml:
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<image>
<pic>http://concept.flight9online.com/images/top_story/07camp_275_070813.jpg</pic>
<thumb>http://concept.flight9online.com/images/top_story/07camp_100_070813.jpg</thumb>
<title>The Andre Iguodala Basketball Camp</title>
<desc>The Andre Iguodala Basketball Camp was successful once again this year, as it was held between July 30 - August 4 in Springfield, Illinois. To view photos from the event click the Andre Iguodala Youth Foundation link on the left.</desc>
<link>insert link here</link>
</image>
The actionscript is a little tricky, becuase it's split up on four different frames because of the loading process...but here is frame four where most of the info comes into play.
Actionscript:
import mx.transitions.Tween;
import mx.transitions.easing.*;
var widthReserve:Number = 10; //Two times the border width around the main image
var heightReserve:Number = 10; //Two times the border height around the main image
var imageAreaWidth:Number = 380; //Width of the main image area
var imageAreaHeight:Number = 350; //Height of the main image area
var tweenSpeed:Number = 1; //Tweening speed for the thumbnail holder position tween
var destX:Number = thumbHolder._x; //Destination for the position tweening
var posTween; //Position tween handle
mcNavPrev.swapDepths(thumbHolder); //Bring the buttons in front of the thumbnails
//Set the button texts
mcNavPrev.txtCaption.htmlText = "«";
mcNavNext.txtCaption.htmlText = "»";
//Load the first image
loadImage(0);
stop();
function loadImage(imgIndex:Number):Void {
//Clear theimage title and description
txtImageTitle.htmlText = "";
txtImageDesc.htmlText = "";
txtImageLink.htmlText = "";
//Update the preloader
txtLoadText.htmlText = "loading image...";
//Remove any previously loaded image
image.removeMovieClip();
//Get the main image frame from the library
image = this.attachMovie("mcImage", "mcImage", this.getNextHighestDepth());
//Position it
image._x = 10;
image._y = 10;
//Hide it until everything is loaded
image._visible = false;
//Create a MovieClipLoader and Listener for the image
//in order to monitor the load process
var mcl:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();
listener.idNum = imgIndex;
//Callback: called when the image is fully
//loaded and starts displaying
listener.onLoadInit = function(target_mc:MovieClip) {
//The image is now fully loaded
//Calculate and set the frame size depending on the image size
image.mcImageBack._width = target_mc._width + widthReserve;
image.mcImageBack._height = target_mc._height + heightReserve;
//Put the image in the center of the frame
target_mc._x = image.mcImageBack._x + (image.mcImageBack._width - target_mc._width)/2;
target_mc._y = image.mcImageBack._y + (image.mcImageBack._height - target_mc._height)/2;
//Add the link to the image
target_mc.onRelease = function() {
getURL(xmlNode.childNodes[idNum].childNodes[4].firstChild.nodeValue, "_blank") ;
}
//Position the image within its set area
image._x = (imageAreaWidth - image.mcImageBack._width) / 2;
image._y = (imageAreaHeight - image.mcImageBack._height) / 2;
//Show the image
image._visible = true;
//Update the image title and description
txtImageTitle.htmlText = xmlNode.childNodes[this.idNum].childNodes[2].firstChild.nodeValue;
txtImageDesc.htmlText = xmlNode.childNodes[this.idNum].childNodes[3].firstChild.nodeValue;
};
//Callback: Called when one of the images
//finishes loading
listener.onLoadComplete = function(target_mc:MovieClip) {
};
//Associate the listener with the movieclip loader
mcl.addListener(listener);
//Load the selected image
mcl.loadClip(xmlNode.childNodes[imgIndex].childNodes[0].firstChild.nodeValue, image.mcMainImage);
}
mcNavNext.onRelease = function() {
//"Next" button pressed
if(destX > -((noOfImages - 6) * stepX)){
//Not yet at the last image in the row => sweep the thumbnails to the left
destX -= stepX;
posTween.stop();
posTween = new Tween(thumbHolder, "_x", Strong.easeOut, thumbHolder._x, destX, tweenSpeed, true);
posTween.FPS = 50;
}
}
mcNavPrev.onRelease = function() {
//"Previous" button pressed
if(destX < 0){
//Not yet at the first position => sweep the thumbnails to the right
destX += stepX;
posTween.stop();
posTween = new Tween(thumbHolder, "_x", Strong.easeOut, thumbHolder._x, destX, tweenSpeed, true);
posTween.FPS = 50;
}
}
I'm not sure if this is enough...but everytime I click on the image it just tells me that my link is undefined. I just can't figure out what I'm missing. Any help would be MUCH appreciated. The link node is called in the middle of the actionscript where it says //Add the link to the image.
Thanks
- Anonymous
- Bot


- Joined: 25 Feb 2008
- Posts: ?
- Loc: Ozzuland
- Status: Online
August 22nd, 2007, 12:22 pm
- dhonsvick
- Beginner


- Joined: May 27, 2007
- Posts: 49
- Status: Offline
I tested you code ... kinda. This worked. I simply had a Clip on the Stage called Holder.
Things to remember, 1 Trace out the XML Data to see if link is present - Also most popup blockers block _blank from flash. Especially the ones from IE7 and FireFox 2.
This code worked for me - Just a simple test. Other than the fact the code is a bit more verbose than I would generally write I dont see anything especially wrong with it.
Things to remember, 1 Trace out the XML Data to see if link is present - Also most popup blockers block _blank from flash. Especially the ones from IE7 and FireFox 2.
This code worked for me - Just a simple test. Other than the fact the code is a bit more verbose than I would generally write I dont see anything especially wrong with it.
Code: [ Select ]
var test_data:String = '<?xml version="1.0" encoding="utf-8" standalone="yes" ?><image><pic>http://www.google.com/intl/en_ALL/images/logo.gif</pic><thumb>http://www.google.com/intl/en_ALL/images/logo.gif</thumb><title>The Andre Iguodala Basketball Camp</title><desc>The Andre Iguodala Basketball Camp was successful once again this year, as it was held between July 30 - August 4 in Springfield, Illinois. To view photos from the event click the Andre Iguodala Youth Foundation link on the left.</desc><link>http://www.google.com</link></image>';
var myXML:XML = new XML(test_data);
myXML.ignoreWhite = true;
var myData = myXML.firstChild.childNodes;
var mcl:MovieClipLoader = new MovieClipLoader();
var mcl:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();
listener.onLoadInit = function(target_mc:MovieClip) {
target_mc.onRelease = function(){
getURL(myData[4].firstChild.nodeValue);
}
}
mcl.addListener(listener);
//Load the selected image
var monkeyDoo = mcl.loadClip(myData[0].firstChild.nodeValue, holder);
var myXML:XML = new XML(test_data);
myXML.ignoreWhite = true;
var myData = myXML.firstChild.childNodes;
var mcl:MovieClipLoader = new MovieClipLoader();
var mcl:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();
listener.onLoadInit = function(target_mc:MovieClip) {
target_mc.onRelease = function(){
getURL(myData[4].firstChild.nodeValue);
}
}
mcl.addListener(listener);
//Load the selected image
var monkeyDoo = mcl.loadClip(myData[0].firstChild.nodeValue, holder);
- var test_data:String = '<?xml version="1.0" encoding="utf-8" standalone="yes" ?><image><pic>http://www.google.com/intl/en_ALL/images/logo.gif</pic><thumb>http://www.google.com/intl/en_ALL/images/logo.gif</thumb><title>The Andre Iguodala Basketball Camp</title><desc>The Andre Iguodala Basketball Camp was successful once again this year, as it was held between July 30 - August 4 in Springfield, Illinois. To view photos from the event click the Andre Iguodala Youth Foundation link on the left.</desc><link>http://www.google.com</link></image>';
- var myXML:XML = new XML(test_data);
- myXML.ignoreWhite = true;
- var myData = myXML.firstChild.childNodes;
- var mcl:MovieClipLoader = new MovieClipLoader();
- var mcl:MovieClipLoader = new MovieClipLoader();
- var listener:Object = new Object();
- listener.onLoadInit = function(target_mc:MovieClip) {
- target_mc.onRelease = function(){
- getURL(myData[4].firstChild.nodeValue);
- }
- }
- mcl.addListener(listener);
- //Load the selected image
- var monkeyDoo = mcl.loadClip(myData[0].firstChild.nodeValue, holder);
Page 1 of 1
To Reply to this topic you need to LOGIN or REGISTER. It is free.
Post Information
- Total Posts in this topic: 2 posts
- Users browsing this forum: No registered users and 38 guests
- You cannot post new topics in this forum
- You cannot reply to topics in this forum
- You cannot edit your posts in this forum
- You cannot delete your posts in this forum
- You cannot post attachments in this forum
