Share/Bookmark

Featured Posts

Video Game Website Gives all it's profit to Charity Sometimes you read an article that just makes you smile, this is such one: http://www.ps3attitude.com/new/2010/02/no-fuss-reviews-4000-charity/ A video game review website that has given all of it's...

Read more

SQL AD Group membership Hi all, I have been working on a way to return Active directory group membership from a linked AD server in SQL. Its quite hard as you can`t return it from the group - you have to return it from...

Read more

Face Detection with PHP A very useful piece of PHP code that will highlight any pictures where a face has been detected. Heres the first piece of PHP code you will need, it would be best to make this an include: [sourcecode...

Read more

Basic Guide to Database Normalisation: First Normal... Before I start talking about the normal forms, I thought it would be best to explain what I am planning to write about, and what normalisation is. I am going to cover what normalisation is for beginners...

Read more

Sony: Synonymous with Innovation Sony have always been on the leading edge of innovation. From creating the WalkMan back in the 80's to popularising the CD, DVD and Blu-Ray with their PlayStation products. In this article we're discussing...

Read more

Actionscript 2.0 Image Fade (Flash Slideshow) from XML

Posted by matthew | Posted in Tutorial | Posted on 29-01-2010

Tags: , ,

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>

Comments (1)

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

Write a comment