A better solution ? ThrowProps ? Please Help

[Applauz]

I have a movie clip that is set up to load a bunch of other movie clips to the stage. My solution works.. but I'm adding them all .. and I'm finding that this is eating up too much memory.

 

This is how I am doing it.

 

var chapter5Summary_mc:Chapter5Summary_mc = new Chapter5Summary_mc();
var chapter5sec1_mc:Chapter5sec1_mc = new Chapter5sec1_mc();
var chapter5sec2_mc:Chapter5sec2_mc = new Chapter5sec2_mc();
var chapter5sec3_mc:Chapter5sec3_mc = new Chapter5sec3_mc();

// HANDLE LOADING OF 24 SCENES

addChild(introductionSummary_mc);
introductionSummary_mc.x = 0;
introductionSummary_mc.y = 0;
addChild(introduction1_mc);
introduction1_mc.x = 1024;
introduction1_mc.y = 0;
addChild(introduction2_mc);
introduction2_mc.x = 2048;
introduction2_mc.y = 0;

addChild(introduction3_mc);
introduction3_mc.x = 3072;
introduction3_mc.y = 0;

addChild(chapter1Divider_mc);
chapter1Divider_mc.x = 4096;
chapter1Divider_mc.y = 0;

addChild(chapter1Summary_mc);
chapter1Summary_mc.x = 5120;
chapter1Summary_mc.y = 0;
addChild(chapter1sec1_mc);
chapter1sec1_mc.x = 6144;
chapter1sec1_mc.y = 0;
addChild(chapter1sec2_mc);
chapter1sec2_mc.x = 7168;
chapter1sec2_mc.y = 0;
addChild(chapter1sec3_mc);
chapter1sec3_mc.x = 8192;
chapter1sec3_mc.y = 0;
addChild(chapter2Divider_mc);
chapter2Divider_mc.x = 9216;
chapter2Divider_mc.y = 0;
addChild(chapter2Summary_mc);
chapter2Summary_mc.x = 10240;
chapter2Summary_mc.y = 0;
addChild(chapter2sec1_mc);
chapter2sec1_mc.x = 11264;
chapter2sec1_mc.y = 0;
addChild(chapter2sec2_mc);
chapter2sec2_mc.x = 12288;
chapter2sec2_mc.y = 0;
addChild(chapter2sec3_mc);
chapter2sec3_mc.x = 13312;
chapter2sec3_mc.y = 0;
addChild(chapter3Divider_mc);
chapter3Divider_mc.x = 14336;
chapter3Divider_mc.y = 0;
addChild(chapter3Summary_mc);
chapter3Summary_mc.x = 15360;
chapter3Summary_mc.y = 0;
addChild(chapter3sec1_mc);
chapter3sec1_mc.x = 16384;
chapter3sec1_mc.y = 0;
addChild(chapter3sec2_mc);
chapter3sec2_mc.x = 17408;
chapter3sec2_mc.y = 0;
addChild(chapter3sec3_mc);
chapter3sec3_mc.x = 18432;
chapter3sec3_mc.y = 0;

addChild(chapter4Divider_mc);
chapter4Divider_mc.x = 19456;
chapter4Divider_mc.y = 0;
addChild(chapter4Summary_mc);
chapter4Summary_mc.x = 20480;
chapter4Summary_mc.y = 0;
addChild(chapter4sec1_mc);
chapter4sec1_mc.x = 21504;
chapter4sec1_mc.y = 0;
addChild(chapter4sec2_mc);
chapter4sec2_mc.x = 22528;
chapter4sec2_mc.y = 0;
addChild(chapter4sec3_mc);
chapter4sec3_mc.x = 23552;
chapter4sec3_mc.y = 0;

addChild(chapter5Divider_mc);
chapter5Divider_mc.x = 24576;
chapter5Divider_mc.y = 0;
addChild(chapter5Summary_mc);
chapter5Summary_mc.x = 25600;
chapter5Summary_mc.y = 0;
addChild(chapter5sec1_mc);
chapter5sec1_mc.x = 26624;
chapter5sec1_mc.y = 0;
addChild(chapter5sec2_mc);
chapter5sec2_mc.x = 27648;
chapter5sec2_mc.y = 0;
addChild(chapter5sec3_mc);
chapter5sec3_mc.x = 28672;
chapter5sec3_mc.y = 0;

 

 

 

Basically this is making a massive strip of images.

 

I then have a button on the left and right that is using TweenMAX to tween the big strip by increments of 1024.

 

ie/

 

TweenMax.to(MovieClip(parent.parent).allChapters_mc, 1, {x:MovieClip(parent.parent).allChapters_mc.x + 1024,ease:Expo.easeOut, onStart:MovieClip(parent).disableEverything, onComplete:MovieClip(parent).enableEverything});

 

 

As I said .. everything with my solution works. Its just not an optimized solution.

 

I like the ThrowProps example given that is using XML loaded jpgs... Could that be easily modified to fix the way I am doing this ?

 

Any help is truly appreciated.

 

Thanks!

[GreenSock]

I think your biggest problem is that you're making Flash move a TON of pixels which is very CPU-intensive. Even if most of the pixels are off-screen, that doesn't really matter - Flash still has to render them. So if you're seeing performance problems, I'd bet that's why - you're asking too much of Flash's graphics rendering engine.

 

As long as those child MovieClips don't contain timeline animations (that you built in Flash, like with keyframes), this is the perfect scenario for leveraging a tool like BlitMask. http://www.greensock.com/blitmask/. It basically captures all the pixels of your object and allows you to define a mask area (rectangle) and then it'll handle making sure Flash only has to worry about rendering the pixels inside that area, ignoring all the offscreen ones.

 

There are some examples on the site and in the ASDocs for BlitMask. I hope that helps.

[Applauz]

I've used blitmask. I can make it so that it scrolls horizontally.

 

How can I make it so when you drag left or right and let go that it tweens 1024 pixels only. So each swipe would move the blitmask 1024 pixels.

[GreenSock]

How can I make it so when you drag left or right and let go that it tweens 1024 pixels only. So each swipe would move the blitmask 1024 pixels.

Well, to answer your question specifically, you can simply use the "max" and "min" special properties to make it tween to an EXACT value (make max and min the same value so that it lands precisely on that). It is demonstrated in the video at the top of the ThrowProps page at http://www.greensock.com/throwprops/

 

However, it almost sounds like maybe you're trying to create an effect similar to the panel-based flick scrolling that is demonstrated in the FAQ section of that same page (scroll down and you'll see an interactive example towards the bottom of the post). The source code is provided there (click the link to download the source).

 

I hope that helps.

[Applauz]

I need exactly that that panel based flick scrolling is doing. Identical. Only problem is that I need it to work with MovieClips in my library instead of dynamically loaded JPG's.

 

Can you help me sort that out ?

[Carl]

here are some files based on the panel flick-scroll example that uses library symbols (not externally loaded)

 

*note please use your own com/greensock files

PanelScroll_noLoad_CS4_source.zip

[Applauz]

You may have almost saved my life here

 

I had to make slight modifications because the project file for my project doesn't have external .as files. The AS is on frame 1 of the Timeline.

 

This is what I changed it to

 

import flash.display.*;
import flash.events.MouseEvent;
import flash.utils.getTimer;
import flash.events.Event;
import flash.geom.Rectangle;
import com.greensock.TweenLite;
import com.greensock.easing.Strong;


 var _panelBounds:Rectangle = new Rectangle(0, 0, 400, 225);
 var _container:MovieClip;
 var _currentPanelIndex:int = 0;
 var _panelCount:int;
 var _x1:Number;
 var _x2:Number;
 var _t1:uint;
 var _t2:uint;
 function PanelScrollExampleNoLoad() {
  _panelCount = 4;
  _container.x = _panelBounds.x;
  _container.y = _panelBounds.y;
  addChildAt(_container, 0);
  _container.addEventListener(MouseEvent.MOUSE_DOWN, _mouseDownHandler, false, 0, true);

 }



 function _mouseDownHandler(event:MouseEvent):void {


  TweenLite.killTweensOf(_container);
  _x1 = _x2 = this.mouseX;
  _t1 = _t2 = getTimer();
  _container.startDrag(false, new Rectangle(_panelBounds.x - 99999, _panelBounds.y, 9999999, 0));
  this.stage.addEventListener(MouseEvent.MOUSE_UP, _mouseUpHandler, false, 0, true);
  this.addEventListener(Event.ENTER_FRAME, _enterFrameHandler, false, 0, true);
 }

 function _enterFrameHandler(event:Event):void {
  _x2 = _x1;
  _t2 = _t1;
  _x1 = this.mouseX;
  _t1 = getTimer();
 }

 function _mouseUpHandler(event:MouseEvent):void {
  _container.stopDrag();
  this.removeEventListener(Event.ENTER_FRAME, _enterFrameHandler);
  this.stage.removeEventListener(MouseEvent.MOUSE_UP, _mouseUpHandler);
  var elapsedTime:Number = (getTimer() - _t2) / 1000;
  var xVelocity:Number = (this.mouseX - _x2) / elapsedTime;
  //we make sure that the velocity is at least 20 pixels per second in either direction in order to advance. Otherwise, look at the position of the _container and if it's more than halfway into the next/previous panel, tween there.
  if (_currentPanelIndex > 0 && (xVelocity > 20 || _container.x > (_currentPanelIndex - 0.5) * -_panelBounds.width + _panelBounds.x)) {
   _currentPanelIndex--;
  } else if (_currentPanelIndex < _panelCount - 1 && (xVelocity < -20 || _container.x < (_currentPanelIndex + 0.5) * -_panelBounds.width + _panelBounds.x)) {
   _currentPanelIndex++;
  }
  TweenLite.to(_container, 0.7, {x:_currentPanelIndex * -_panelBounds.width + _panelBounds.x, ease:Strong.easeOut});
 }

 

It compiles without any errors.. and I see panel 1. .. but its not clickable. Even a trace statement put on MouseDown isn't registering.

 

Any idea why ?

[Applauz]

nevermind... needed to initiate that first function - PanelScrollExampleNoLoad();

 

going to try to work this method in to my project now.

 

Thanks SO much!

[Applauz]

Do you think I need to implement a blitMask on this when working with such large clips ?

[Applauz]

Ok .. I think Im still having one issue though. I have 29 panels. Each are 1024 x 706. Performance isn't great. It's choppy... sometimes it skips / jumps.

[GreenSock]

Do you think I need to implement a blitMask on this when working with such large clips ?

Yes.

[Applauz]

Ok .. Ive added the blitMask ..

 

var blitMask:BlitMask = new BlitMask(allChapters_mc, 0, 0, 1024, 706, true);
 blitMask.bitmapMode = false;

 

The strange thing is .. when I set the bitmapMode to False .. it performs better than when set to true. Shouldn't it be the other way around ?

 

 

This is what my tween looks like .. am I doing something wrong here that I am not getting good performance ?

 

TweenMax.to(allChapters_mc, 0.7, {x:_currentPanelIndex * -_panelBounds.width + _panelBounds.x, ease:Strong.easeOut, onUpdate:blitMask.update});

 

Also .. on iPad .. after about 8 swipes .. it crashes the iPad

[GreenSock]

Yeah, there must be something else going on in your FLA which is extremely tough to diagnose blind like this. If you need more help, please post an FLA with only the essential code that reproduces the issue (don't post your production files with lots of unrelated code please). I'm sure we can get it figured out.

[Applauz]

I can ... but when I strip everything out of my project.. this section is still almost 70MB because of the retina sized graphics.

 

Also .. can I post my FLA without it being public for anyone on the board to download ?

[GreenSock]

Yeah, you can send me a Private Message here in the forums with a link to download your stuff.

 

You made sure you weren't making the BlitMask the size of your entire target and you're not calling update(null, true) on every frame or anything like that, right? Just making sure.

[Applauz]

Thanks.. sent you the file

[GreenSock]

I took a look at the file and while I didn't have time to dig through all those assets with the chunks of code dispersed throughout (there was a LOT there), I did notice several things:

 

1) You're creating a BlitMask on the parent and then another BlitMask in the child which is very wasteful - all you need is the one in the child.

 

2) You're setting the BlitMask's bitmapMode to false which completely eliminates the optimization benefits that the BlitMask can provide.

 

3) You were adding the MouseEvent listeners to the target of the BlitMask which won't work because the BlitMask hides it when bitmapMode is true (it sets the target's visible property to false). As the interactive example online shows (on the BlitMask page), you should add your MouseEvent listeners to the BlitMask itself.

 

4) Since your target is so huge, you probably need to adjust the bounds of the startDrag() call (making it bigger).

 

5) There were some errors being thrown related to code you had in some child MovieClips that were trying to tween null objects. I didn't spend much time trying to isolate those, but I just wanted to give you a heads-up. I think one was in chapter3sec3_mc where you referenced MovieClip(parent.parent).mainHomeBTN (I guess there is no such thing at the time you tried tweening it).

 

6) It looks like you've got some child clips that have delayed startup routines that are delaying the clip from being ready when you're creating the BlitMask, so the BlitMask looks blank initially. I resolved that by adding a delayedCall() that calls the BlitMask's update(null, true) method 0.01 seconds later.

 

I'll shoot you a new fla that has my edits in place. Hopefully that'll get you headed in the right direction.

[Applauz]

Thanks for the quick response.

 

The reason I was creating a bitMask on the parent as well is because the parent movie clip is going to tween into place when that section of the app is accessed. So I figured putting a blitMask on it would improve the tween ?

 

As I said before.. I have other sections of my app that use the blitMask and when I set it to false it performs much better... and also still allows me to click on all my buttons. I know its not supposed to perform that way .. but for some reason it is.. and when I switch bitmapMode to true... it becomes laggy.

 

The errors you were probably seeing are more related to me stripping down the code quickly to have you look at the core area of the problem.

 

 

I'll give you implementation a shot and let you know what the results are.

 

Cheers! and thanks!

[Applauz]

One thing I notice... when I click on a button and that button triggers a function to addChild a movie clip that has a blitmask in it. It takes about 3 seconds for that movie clip to show up on the stage.

 

Is there a way to preload these movie clips in the background or something so they are good to go when I need them ?

[GreenSock]

I'm not aware of anything that would cause it to take 3 seconds except for if you're having to do a recapture of all the pixels in the BlitMask (like update(null, true)) and you've got a HUGE target (and/or a very slow processor). Again, it's tough to diagnose blind but that's my best guess.

[Applauz]

I found the culprit of the 3 second delay.

 

You added this piece of code to my file TweenLite.delayedCall(0.01, blitMask.update, [null, true]);

 

Can you explain this code and what it is doing ? Is it needed ? I'm not seeing a performance increase when it is there. It's only causing a 3 second delay for some reason.

[Applauz]

So ... when bitMapMode gets enabled.. i notice that there is a slight quality loss on the iPad3. and while bitmapMode = true .. the performance is similar to any Android device. it works.. but is slightly sluggish / lazy.

 

When bitmapMode is false.. quality is perfect. performance is amazing. Only problem is that since its tweening 29 panels that were added via addChild... There is some glitching going on when the seams where the panels join hit the display. Once they have hit the display once .. its like they cache and its all good again. if I swipe too fast though it will cause the app to crash.

 

I don't know what I can do to get good performance with bitmapMode set to true. It seems to take about 3 seconds for the blitMask to show the bitmap to the screen as well.

[GreenSock]

I think my response to your other question here might help:

http://forums.greensock.com/topic/5973-blitmask-disappears-when-bitmapmode-true-help/page__view__findpost__p__21068

 

As for performance, there must be something else going on in your app that's causing this behavior. The tests I've seen demonstrate that BlitMask tends to deliver huge performance gains for scrolling large targets like what you're talking about. Literally 2-10x faster. You're not setting your target's "visible" property to true when bitmapMode is true, are you? And you didn't set cacheAsBitmap true on your target, right? (that probably wouldn't make a massive difference anyway - just curious). And you're not scaling or rotating your target during the tween(s), right? It's pretty tough to know exactly what's causing your issue without doing a deep-dive in your actual files and wrapping my head around everything that you're doing. Hopefully some of this is helpful though. It really sounds like you're circumventing the BlitMask somewhere.

[Applauz]

I've removed all visible statements, not using cache as bitmap anywhere... You should be able to see the problem in the file I sent you.

 

I almost want to make a video showing you what's going on and the massive performance difference when bitmapMode is set to false.

 

The weird thing on iPad3 too .. I even set bitmapMode to be true while scrolling .. and then turn off when the scrolling stops. .. and what happens is its sluggish while scrolling and you can clearly see a quality downgrade happening... when it eases and stops.. you can see the quality snap back in to retina quality.

 

I'm getting flawless quality when bitmapmode is set to false. Smooth as butter. .. the catch with that is that its not 1 single bitmapcapture .. so there's a chance for it to crash.

 

I know this makes no sense. its driving me nuts. I'm literally seeing about a 50% performance boost by setting bitmapmode to false.

[GreenSock]

Yeah, there must be something else at play here. BlitMask captures the pixels exactly as they are - there's no downgrade in quality or anything like that. Are you scaling the parent up maybe? So, for example, is the child being displayed at double size or something? I suppose that could explain a quality downgrade - BlitMask captures the pixels at a scale of 1, but if you're blowing up the parent that would essentially scale the pixels bigger too. And are you using GPU mode or something?