BitMapData and Mx Transitions: Flash Performance problems

programming flash
1

Hey guys!

Been going crazy the last two days trying to figure this out. Can’t get my head around it, so I thought I would ask here. I’ve programmed a fairly simple site in AS 2.0, using a couple of old functions like mx.transitions (still learning myself AS 3.0). The site is outlined like this:

  • A main MovieClip on _root called mc_scene containing four different movieclips (doing this because I need to be able to run the Flash fullscreen and center the content).
  • This main MovieClip contains a simple header movieclip, a footer movieclip, a MovieClip holder (for loading images) and a Meny for controlling the different sections and loading.
  • Inside the main MovieClip there’s four frames each containing a holder and buttons according to each section.
  • Each section movieclip contains some manual tweens and 1-7 (differs from each clip) buttons.
  • On the main _root scene I’m using BitMapData to fill a patterened background and centering mc_scene.

Code for _root:


stop();
import flash.display.BitmapData;
//
// Center content
mc_scene._x = Stage.width / 2;
mc_scene._y = Stage.height / 2; 

var tile:BitmapData = BitmapData.loadBitmap("tile");

function patternFill() {
	this.beginBitmapFill(tile);
	this.moveTo(0,0);
	this.lineTo(Stage.width, 0);
	this.lineTo(Stage.width, Stage.height);
	this.lineTo(0,Stage.height);
	this.lineTo(0,0);
	this.endFill();
}

// Call function
patternFill();

var stageL:Object = new Object();
stageL.onResize = function() {
	patternFill();
	
	// Center content
	mc_scene._x = Stage.width / 2;
	mc_scene._y = Stage.height / 2; 
}

// Add stage listener
Stage.addListener(stageL);

Code for mc_scene (maincode):


//
// Stop the darn thing so the ActionScript can do its magic!
stop();
//
// Set some variables
var mc:MovieClip;
var interval;
var footerActive:Boolean;
var clicked;
var count:Number = 0;
var a:Number = 0;
//
// Set initials
mc_footer._alpha = 0;
mc_header._alpha = 0;
mcMeny._alpha = 0;
//
// Setup image array sequence
var imageArray = new Array();
//
imageArray[0] = "floss-front.jpg";
imageArray[1] = "ve.png";
imageArray[2] = "vilje.png";
imageArray[3] = "hod.png";
imageArray[4] = "vidar.png";
imageArray[5] = "emund1.png"; 
imageArray[6] = "emund2.png";
imageArray[7] = "handtuftet-front.jpg";
imageArray[8] = "tendenz-front.jpg";
imageArray[9] = "omstreijfert-front.png";
imageArray[10] = "arn.png";
imageArray[11] = "njord.png";
imageArray[12] = "narve1.png";
imageArray[13] = "narve2.png";
imageArray[14] = "frigg.png";
imageArray[15] = "streijfert-image-front.jpg";
imageArray[16] = "vesuvio.png";
imageArray[17] = "basel1.png";
imageArray[18] = "basel2.png";
imageArray[19] = "creuse.png";
imageArray[20] = "toscana1.png";
imageArray[21] = "toscana2.png";
imageArray[22] = "silk1.png";
imageArray[23] = "silk2.png";
imageArray[24] = "sabro.png";
imageArray[25] = "lambo1.png";
imageArray[26] = "lambo2.png";
//
// Assign on press actions to Main Meny
//
// Floss
mcMeny.btn_floss.onPress = function() {
	if (clicked != this) {
		if (interval) { clearInterval(interval); }
		// Footer functionality
		if (footerActive != true) {
			mc_footer.gotoAndPlay(2);
		}
		gotoAndPlay(2);
		clicked = this;
	}
};
// Håndtuftet
mcMeny.btn_handtuftet.onPress = function() {
	if (clicked != this) {
		if (interval) { clearInterval(interval); }
		// Footer functionality
		if (footerActive != true) {
			mc_footer.gotoAndPlay(2);
		}
		gotoAndPlay(3);
		clicked = this;
	}
};
// Tendenz
mcMeny.btn_tendenz.onPress = function() {
	if (clicked != this) {
		if (interval) { clearInterval(interval); }
		// Footer functionality
		if (footerActive != true) {
			mc_footer.gotoAndPlay(2);
		}
		gotoAndPlay(4);
		clicked = this;
	}
};
// Om streijfert
mcMeny.btn_omstreijfert.onPress = function() {
	if (clicked != this) {
		if (interval) { clearInterval(interval); }
		// Footer functionality
		if (footerActive == true) {
			footerActive = false;
			mc_footer.gotoAndPlay(27);
		}
		gotoAndPlay(5);
		clicked = this;
	}
};
//
// Setup Movie Clip Loader and Listener
var loader:MovieClipLoader = new MovieClipLoader();
loader.addListener(this);
// Start loading process
createClip(a);
//
function onLoadComplete(_mc:MovieClip) {
	if (a<(imageArray.length-1)) {
		a++;
		createClip(a);
	} else if (a>=(imageArray.length-1)) {
		loader.removeListener();
		displayImage(mc_holder.mc_image15);
		// Tween in scene
		//new Tween(mc_header, "_alpha", Strong.easeOut, 0, 100, .5, true);
		
		header = new mx.transitions.Tween(mc_header, "_alpha", mx.transitions.easing.Strong.easeOut, 0, 100, .5, true);
		footer = new mx.transitions.Tween(mc_footer, "_alpha", mx.transitions.easing.Strong.easeOut, 0, 100, .5, true);
		meny = new mx.transitions.Tween(mcMeny, "_alpha", mx.transitions.easing.Strong.easeOut, 0, 100, .5, true);
		// Tween out preloader
		imageLoader = new mx.transitions.Tween(imageLoader, "_alpha", mx.transitions.easing.Strong.easeOut, 100, 0, .5, true);
	}
}
// Create site preloader
function onLoadProgress(_mc:MovieClip, loaded:Number, total:Number) {
	//trace(preloadPercent);
	var preloadPercent:Number = Math.round((loaded / total) * 100);
	imageLoader.tf_loading.text = "Loading image number " + (a+1) + " of " + imageArray.length;
	imageLoader.mc_progress._width = preloadPercent*2.51;
}
//
// Setup sequential loading for image array 
function createClip(a) {
	mc = mc_holder.createEmptyMovieClip("mc_image"+a, mc_holder.getNextHighestDepth());
	loader.loadClip("Images/"+imageArray[a],mc);
	mc._alpha = 0;
}
//
// Create sequencer function for multiple images
function displaySequence(mc1:MovieClip, mc2:MovieClip, delay:Number) {
	if (interval) { clearInterval(interval); }
	displayImage(mc1);
	interval = setInterval(loop, delay); 
	mc = mc1;
	//
	function loop() {
		if (mc == mc1) { mc = mc2; displayImage(mc); } 
		else if (mc == mc2) { mc = mc1; displayImage(mc); }
	}
}
// 
// Setup Display Image function
function displayImage(mc:MovieClip) {
	if (interval) { clearInterval(interval); }
	if (curr_image) {
		offTween = new mx.transitions.Tween(curr_image, "_alpha", mx.transitions.easing.Strong.easeOut, 100, 0, .5, true);
	}
	curr_image = mc;
	onTween = new mx.transitions.Tween(mc, "_alpha", mx.transitions.easing.Strong.easeIn, 0, 100, .5, true);
}

And then code for the first frame of the buttons (this is hardcoded and repeated for each section):


var mc_main:MovieClip = _root.mc_scene;
mc_main.displayImage(mc_main.mc_holder.mc_image8);

And code for last frame (also hardcoded and repeated):


stop();
// Assign all on presses for this MovieClips button
var current:MovieClip;
btn_ve.onPress = function() {
	if (current != mc_ve_desc) {
		current._alpha = 0;
		mc_ve_desc._alpha = 100;
		mc_ve_desc.gotoAndPlay(1);
		current = mc_ve_desc;
		mc_main.displayImage(mc_main.mc_holder.mc_image1);
	}
};

The problem is that I’m getting great performance issues. The movie randomly spikes in performance, and it also randomly slows down the transitions, it even randomly stops loading some of the images into the mc_holder. I tried removing the BitMapData part - but still getting the same problem, tried reducing the Array size but still won’t work.

Hope this is clear enough. Sorry for the huge chunks of code. Would kickass if you could give me some pointers or help me out, because I’m totally stuck. Thanks!