Actionscript 2.0 Image Fade (Flash Slideshow) from XML
Posted by matthew | Posted in Tutorial | Posted on 29-01-2010
Tags: ActionScript, Flash, XML
1
This article describes how to use flash to cycle through images as read from an XML file using only Acriptscript, with no timeline objects what-so-ever, what we are going to make can be previewed here.
// image fading scripts
import mx.transitions.Tween;
import mx.transitions.easing.*;
var myShowXML = new XML();
myShowXML.ignoreWhite = true;
myShowXML.load(http://mydomain/screensaver/slideshow.xml);
myShowXML.onLoad = function() {
_root.myWidth = myShowXML.firstChild.attributes.width;
_root.myHeight = myShowXML.firstChild.attributes.height;
_root.mySpeed = myShowXML.firstChild.attributes.speed;
_root.myImages = myShowXML.firstChild.childNodes;
_root.myImagesNo = myImages.length;
createContainer();
callImages();
};
function createContainer() {
_root.createEmptyMovieClip("myContainer_mc",1);
// up to you if you want a border
//myContainer_mc.lineStyle(5,0x000000,100);
myContainer_mc.lineTo(_root.myWidth,0);
myContainer_mc.lineTo(_root.myWidth,_root.myHeight);
myContainer_mc.lineTo(0,_root.myHeight);
myContainer_mc.lineTo(0,0);
myContainer_mc._x = 0;
myContainer_mc._y = 0;
}
function callImages() {
_root.myMCL = new MovieClipLoader();
_root.myPreloader = new Object();
_root.myMCL.addListener(_root.myPreloader);
_root.myClips_array = [];
_root.myPreloader.onLoadStart = function(target) {
_root.createTextField("myText_txt",_root.getNextHighestDepth(),0,0,100,20);
_root.myText_txt._x = (Stage.width-_root.myText_txt._width)/2;
_root.myText_txt._y = (Stage.height-_root.myText_txt._height)/2;
_root.myText_txt.autoSize = "center";
// use this to add in manual text
//_root.myText_txt.text = "test";
};
_root.myPreloader.onLoadProgress = function(target) {
// this will added loading text over the image while its loading the next//_root.myText_txt.text = "Loading.. "+_root.myClips_array.length+"/"+_root.myImagesNo+" Completed";
};
_root.myPreloader.onLoadComplete = function(target) {
_root.myClips_array.push(target);
target._alpha = 0;
if (_root.myClips_array.length == _root.myImagesNo) {
_root.myText_txt._y = myContainer_mc._y + myContainer_mc._height;
_root.target_mc = -1;
moveSlide();
myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);
}
};
for (i=0; i<_root.myImagesNo; i++) {
temp_url = _root.myImages[i].attributes.url;
temp_mc = myContainer_mc.createEmptyMovieClip(i, myContainer_mc.getNextHighestDepth());
_root.myMCL.loadClip(temp_url,temp_mc);
} }
function moveSlide() {
current_mc = _root.myClips_array[_root.target_mc];
new Tween(current_mc, "_alpha", Strong.easeOut, 100, 0, 1, true); _root.target_mc++;
if (_root.target_mc>=_root.myImagesNo) {
_root.target_mc = 0;
_root.myClips_array = undefined;
nextScene();
}
// this will add the title of the image over the image
//_root.myText_txt.text = _root.myImages[target_mc].attributes.title;
next_mc = _root.myClips_array[_root.target_mc];
new Tween(next_mc, "_alpha", Strong.easeOut, 0, 100, 1, true);
}
First of all you need to include the transitions for tween and easing as follows:
import mx.transitions.Tween; import mx.transitions.easing.*;
var myShowXML = new XML();
myShowXML.ignoreWhite = true;
myShowXML.load(http://mydomain/screensaver/slideshow.xml);
myShowXML.onLoad = function() {
Next we setup the script to read the XML file, by setting a location and creating a load function.
_root.myWidth = myShowXML.firstChild.attributes.width; _root.myHeight = myShowXML.firstChild.attributes.height; _root.mySpeed = myShowXML.firstChild.attributes.speed; _root.myImages = myShowXML.firstChild.childNodes; _root.myImagesNo = myImages.length;
This sets up a few global variables such as the height and width of our container, our transition speed and counts all the child nodes to see how many images we are dealing with.
function createContainer() {
_root.createEmptyMovieClip("myContainer_mc",1);
// up to you if you want a border
//myContainer_mc.lineStyle(5,0x000000,100);
myContainer_mc.lineTo(_root.myWidth,0);
myContainer_mc.lineTo(_root.myWidth,_root.myHeight);
myContainer_mc.lineTo(0,_root.myHeight);
myContainer_mc.lineTo(0,0);
myContainer_mc._x = 0;
myContainer_mc._y = 0;
}
Next we create a container to hold the image, which is called from as a function from the previous lines of Actionscript.
function callImages() {
_root.myMCL = new MovieClipLoader();
_root.myPreloader = new Object();
_root.myMCL.addListener(_root.myPreloader);
_root.myClips_array = [];
_root.myPreloader.onLoadStart = function(target) {
_root.createTextField("myText_txt",_root.getNextHighestDepth(),0,0,100,20);
_root.myText_txt._x = (Stage.width-_root.myText_txt._width)/2;
_root.myText_txt._y = (Stage.height-_root.myText_txt._height)/2;
_root.myText_txt.autoSize = "center";
// use this to add in manual text
//_root.myText_txt.text = "test";
};
Next we add the image to the container and center them, just in case they are not quite the right size.
_root.myPreloader.onLoadProgress = function(target) {
// this will added loading text over the image while its loading the next
//_root.myText_txt.text = "Loading.. "+_root.myClips_array.length+"/"+_root.myImagesNo+" Completed";
};
This piece of code preloads the images and can optionally display loading text if you remove the comment add to the start of the line.
if (_root.myClips_array.length == _root.myImagesNo) {
_root.myText_txt._y = myContainer_mc._y + myContainer_mc._height;
_root.target_mc = -1;
moveSlide();
myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);
}
};
Next we iduce the slide function and set the interval in accordance with the XML file.
The last piece of the Actionscript performs all of the tweening and plays the next scene once all the images have been display, the XML file that controls all of this, looks like this:
<slideshow width="1440" height="1080" speed="20"> <image url="\\myserver\slide1.jpg" title="Welcome to SNC" /> <image url="\\myserver\slide2.jpg" title="Webpage Zooming" /> <image url="\\myserver\slide3.jpg" title="ID Cards" /> <image url="\\myserver\slide4.jpg" title="Learner View Survey" /> <image url="\\myserver\slide5.jpg" title="Blackboard Promo" /> <image url="\\myserver\slide6.jpg" title="The Granary" /> </slideshow>




[...] is the original: Cardboard Coder » Blog Archive » Actionscript 2.0 Image Fade … Posted in Object. Tags: article, cardboard-coder, code-snippets, delicious, facebook, image, [...]