Instant Slideshow JSFL

Got a bunch of images? Want a slide show really fast?
2008-06-19

You don't see a lot of blog entries on how to script the Flash user interface. This can be pretty useful at times, and I've accumulated a series of commands to allow you to do common tasks. One of the more useful things is being able to transition in a number of items onto the stage, or create a simple slideshow. This jsfl script does just that:

Download the JSFL here

Usage:

1. Install the command and create a fla.
2. Import some images. Importing them to the library is good. If you import to stage you'll just have to delete the redundant stage instances.
3. Select the bitmaps in your library and run the command.
4. You'll now have a timeline with a crossfade of all pictures.

/**
 * Instant Slide Show
 * 
 * Takes whatever is selected in your library and puts it on the stage,
 * one item per layer, and cross-fades them together.
 * 
 */
 
 //You can change the number of frames for the fade-in/out here:
var slideDuration = 42; //how long to display the clip in frames
var fadeDuration = 10; // how long to fade in, in frames.


//===========================================//

//Get local references to useful variables.
var document = fl.getDocumentDOM();
var library = document.library;
var selItems = library.getSelectedItems();
var trace = fl.trace;
var slides = new Array();
//loop through our items and put them into clips which we can then animate.
//if the item is already a graphic/movieclip this step is ignored.
for(var i=0;i<selItems.length;i++){
	var item = selItems[i];
	if(item.itemType == "bitmap"){
		//create a name that we will use based off the bitmap.
		var clipName = "Clip_"+ item.name;
		item.allowSmoothing = true; //turn on smoothing, we probably want this.
		var clip = library.addNewItem("movie clip", clipName); //create the library item.
		slides.push(clipName); //add it to our array that we'll fix up later.
		library.editItem(clipName); // open the item for editing on the stage.
		var timeline = document.getTimeline(); // get the new timeline
		
		library.addItemToDocument({x:0, y:0}, item.name); //put an instance of our bitmap into the new movie clip.
		//get the image and move it to the top left corner.
		var image = document.selection[0];
		var matrix = image.matrix;
		matrix.tx = 0;
		matrix.ty = 0;
		image.matrix = matrix;
		
	}else if(item.itemType == "movie clip" || item.itemType == "graphic"){
		slides.push(item.name);
	}else{
		//ignore the selection, since we probably don't want to animate it.
	}
}
//ok we've now made all of our clips. lets go ahead and place them on the timeline.
document.editScene(0); //this edits the 'root'
var timeline = document.getTimeline();  //get a local ref

var frame = timeline.currentFrame+1; //start the slideshow at whereever the timeline's currently at.
//Go over each item and animate it in.
for(var i=0;i<slides.length;i++)
{
	//create layer
	var nLayer = timeline.addNewLayer(slides[i].substring(0, slides[i].length -4));
	//create keyframe
	timeline.currentLayer = nLayer;
	timeline.insertKeyframe(frame);
	
	//create item
	library.addItemToDocument({x:0,y:0}, slides[i]);
	var slide = document.selection[0];
	//move item
	var matrix = slide.matrix;
	matrix.tx = 0;
	matrix.ty = 0;
	slide.matrix = matrix;
	
	//create next keyframe.
	timeline.insertKeyframe(frame + fadeDuration);
	
	//then blank it. (alternatively you could  use insertFrames
	timeline.insertBlankKeyframe(frame + fadeDuration + slideDuration + 1);
	
	var slideStart = timeline.layers[nLayer].frames[frame].elements[0];
	slideStart.colorMode = "alpha"
	slideStart.colorAlphaPercent = 0;
	timeline.createMotionTween(frame);
	
	//increment our frame
	frame += slideDuration;
	
}
//Let the user know we're done.
trace("Created slideshow!");