Throwprops help: optimization

[jameslavis]

hey guys,

I'm not an expert coder by any means and this is for a proof of concept. I have a large movieclip called "main" that contains sub movieclips of pictures. Now the code I have put in below allows me to drag and throw the main moviecilp like a regular parallax web page. Due to the size of the photos and child movieclips it's a little choppy, only when I flick the movieclip. So can you guys see any way to clean this code up? I've looked at reducing the size of the child mcs but I still get a stutter if someone flicks it quick. Or do you wizards know any other code snippets that will do what I need in a more concise and effective manner? Listen, any help is greatly appreciately. BTW i'm using the throwprops plug in by greensock.

 

main.CFbandEIGHTEEN.CFbandEIGHTEENbutton.addEventListener(MouseEvent.CLICK, CFbandEIGHTEENbutton);

 

var bounds: Rectangle = new Rectangle(0, 0, 1280.15, 720);

var blitMask: BlitMask = new BlitMask(main, bounds.x, bounds.y, bounds.width, bounds.height, false);

blitMask.bitmapMode = false; // allows me to click on the child movieclips

var t1: uint, t2: uint, y1: Number, y2: Number, yOverlap: Number, yOffset: Number;

 

blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

 

function mouseDownHandler(event: MouseEvent): void {

  TweenLite.killTweensOf(main);

  y1 = y2 = main.y;

  yOffset = this.mouseY - main.y;

  yOverlap = Math.max(0, main.height - bounds.height);

  t1 = t2 = getTimer();

  main.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

  main.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

}

 

 

function mouseMoveHandler(event: MouseEvent): void {

  var y: Number = this.mouseY - yOffset;

  //if main's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior)

  if (y > bounds.top) {

  main.y = (y + bounds.top) * 0.5;

  } else if (y < bounds.top - yOverlap) {

  main.y = (y + bounds.top - yOverlap) * 0.5;

  } else {

  main.y = y;

  }

  blitMask.update();

  var t: uint = getTimer();

  //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second

  if (t - t2 > 50) {

  y2 = y1;

  t2 = t1;

  y1 = main.y;

  t1 = t;

  }

  event.updateAfterEvent();

}

 

 

function mouseUpHandler(event: MouseEvent): void {

  main.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

  main.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

  var time: Number = (getTimer() - t2) / 1000;

  var yVelocity: Number = (main.y - y2) / time;

  ThrowPropsPlugin.to(main, {

  throwProps: {

  y: {

  velocity: yVelocity,

  max: bounds.top,

  min: bounds.top - yOverlap,

  resistance: 50

  }

  },

  onUpdate: blitMask.update,

  ease: Strong.easeOut

  }, 2, 0.3, 0.5);

 

 

}

[Carl]

Since you are already using our sample code (totally fine) and BlitMask, pretty much all optimizations have been accounted for. 

Really can't think of a way to speed things up. 

 

I see your BlitMask is 1280 x 720. Curious, how wide is the MovieClip that you are trying to throw?

[jameslavis]

it's a big fella. So I'm doing this as a mockup for a long parallax style web page. So I drag and scroll an entire long panel of movieclips that are 1280x720. About 14 of those in a row. I've read with your work that you can engage and disengage the blitmask.  I haven't been able to do this successfully. I'm wondering if this will help the smoothness? ideas?

[Carl]

your bitmap has nearly 13 million pixels

 

1280 x 720 x 14 = 12,902,400

 

I think flash player is just being overworked.

 

My guess is that the solution may require dynamically adding and removing these panels (from the row mc) as they enter and leave the viewable 1280 x 720 area. From what I understand you only need 2 panels animating at a time... the one leaving and the one entering. Could take a bit of experimenting and tinkering to get it right. Just an idea.

 

This post here has a file which shows how to turn bitmapMode off after the throw animation is done and turn it on during the throw (to optimize performance). However if you are getting bad performance with it on during the throw, turning it off after the throw isn't going to help really. 

 

Just for kicks it might be worthwhile to test with no BlitMask whatsoever. 

[jameslavis]

You are dead right my friend in the pressure being put on flash. Now I have a base understanding of flash, so if I have one large movie clip and each content band is a sub movie clip, you are right that I could dynamically load the content above or below the screen (as it's the eyes of the user). So you'll have to help me understand the best way to do this. Would I make all submovieclips not visible by command until they reach a specific y coordinate? That would likely entail a function call in the mouse drag function. Or could you recommend another way?

 

also keeping in mind if they "flick" the main moviecilp, the child movieclips would have to be added damn fast!

[Carl]

Toggling the visible property is a good start. You may also consider removing the offscreen clips from the display list entirely.

I think it is going to take some trial and error to get it right. 

 

There are some more abstract approaches too.

Instead of flicking a big movie clip with all your child clips in it, you throw an empty object that you simply use to throw the value of some numeric property. As that property changes a function is called that handles toggling the position and visibility of every slide, or maybe that value controlled the progress() of a TimelineLite() that includes of tweens of each child clip.

 

Check out this article on tweening a null object: http://greensock.com/cube-dial-tutorial  Experiment with the demo and see how spinning the cube makes the dial spin and vice versa. Yes, that is an article based on the HTML5 / JS API but the exact same concepts would apply to ActionScript.

[jameslavis]

Thanks Carl. That is some crazy stuff. With my level of understanding, that's likely out of my league. This is also just a prototype that will be in existence with users for a few weeks. So I'm looking to optmize the existing demo for the remainder of their user. So to remove the clunkiness, what we chatted about makes sense. With my base knowledge, this is what I'm going to try. If you can see a much simpler way, let me know,

 

I've bolded the way I'm thinking to go about it.

 

function mouseDownHandler(event: MouseEvent): void {

  TweenLite.killTweensOf(main);

  y1 = y2 = main.y;

  yOffset = this.mouseY - main.y;

  yOverlap = Math.max(0, main.height - bounds.height);

  t1 = t2 = getTimer();

  main.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

  main.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

}

 

 

function mouseMoveHandler(event: MouseEvent): void {

  var y: Number = this.mouseY - yOffset;

  //if main's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior)

  if (y > bounds.top) {

  main.y = (y + bounds.top) * 0.5;

  } else if (y < bounds.top - yOverlap) {

  main.y = (y + bounds.top - yOverlap) * 0.5;

  } else {

  main.y = y;

  }

  blitMask.update();

  var t: uint = getTimer();

  //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second

  if (t - t2 > 50) {

  y2 = y1;

  t2 = t1;

  y1 = main.y;

  t1 = t;

  }

  event.updateAfterEvent();

  if (main.y < 30) {

  main.OFbandTWO.visible = true;

  } else if (main.y < 20) {

  main.OFbandTWO.visible = true;

  main.OFbandTHREE.visible = true;

  } else if (main.y < 0) {

  main.OFbandTWO.visible = true;

  main.OFbandTHREE.visible = true;

  main.OFbandFOUR.visible = true;

  } else {

  main.OFbandTWO.visible = false;

  main.OFbandTHREE.visible = false;

  main.OFbandFOUR.visible = false;

  }

}

 

 

function mouseUpHandler(event: MouseEvent): void {

  blitMask.bitmapMode = true;

  main.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

  main.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

  var time: Number = (getTimer() - t2) / 1000;

  var yVelocity: Number = (main.y - y2) / time;

  ThrowPropsPlugin.to(main, {

  throwProps: {

  y: {

  velocity: yVelocity,

  max: bounds.top,

  min: bounds.top - yOverlap,

  resistance: 50

  }

  },

  onUpdate: blitMask.update,

  ease: Strong.easeOut

  }, 2, 0.3, 0.5);

  blitMask.bitmapMode = false;

}