Applauz

Moral of the story. Apple has screwed everyone with this screen that the world wasn't ready for. Websites are screwed up on it Video is screwed on it AIR can't support it properly. I've also noticed on the iPad3 that memory management is horrible. The exact same IPA with retina graphics is impossible to crash on the iPad2 .. but crashes a lot on the iPad3. I think the amount of RAM given to the developer on the iPad3 is a lot less than what you get on the iPad2. I love Apple .. but this is very annoying.

This happens because the image in the the application is scaled down by 50% ... but when loaded on the iPad3 it scales back up. All the pixels are there. Its live data. ... When you scale an image down by 50% and then take a picture of it.. you are not going to capture all the pixels and its no longer live data. Its a photo. Its like ... if I go on the internet and search for an image thats 5000 x 5000 and in my browser I'm looking at it scaled to 100 x 100 .. if I take a screenshot of that image I can not blow it back up to 5000 x 5000 This is what is happening. Its not noticeable on the iPad2 ... another problem I am seeing is that when blitMask captures the image .. the image is so large that it crashes the iPad. Remember that 3 second delay I was telling you about. Well about 80% of the time .. it crashes the iPad when the capture takes place. The log in Xcode is that the iPad crashed due to low memory. So the blitmask capture is killing the memory of the iPad.

no no .. Let me explain the test I just tried. make a project at 1024 x 768 place a retina sized image on the stage 2048 x 1536 .... scale that image 50% to 1024 x 768 This is what is done to accomplish retina graphics on the iPad3 Now when the blitMask captures the image.. its capturing 1024 x 768 as is. Its not actually capturing all the pixels of 2048 x 1536 So when its displayed on an iPad3 .. the iPad3 is taking that 1024 x 768 capture and scaling it up to 2048 x 1536

Not sure how that would make a difference though. 2879 is actually higher than the width of a fullscreen iPad3 .. so it should work. It's something with AIR. Even when using a stageWebView in AIR and taking a snapshot of it .. the image is 1/2 size. I think its just a bug.

So it's been a hectic few weeks trying to solve this.. I have confirmed that AIR cannot do a bitmap capture on iPad3 because the resolution is way too high. It will not capture the screen at 2048 x 1536. It will only capture 1024 x 768 and then scales it up. So when trying to use blitMasking on the iPad3 you notice that when bitmapMode = true the image quality is drastically reduced. I guess we have to wait for Adobe to release a fix in a future AIR release

Yes I am using GPU mode. But I'm not doing any scaling.

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.

ok. So I did what you suggested. and it works. However .. it is taking 3 seconds for it to capture the bitmap and display it. I'm starting to think that blitMasking just can't handle the large image sizes needed for the iPad Retina Display. I'm trying to use blitMask on an image that is over 25,000 pixels in width scaled at 50% ... so when its on the iPad3 .. its actually 50,000 pixels. This has to be why its taking so long to capture. If I put 1 single image 1024 x 768 or event 2048 x 768 and use the exact same code.. it captures instantly.

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.

For some reason .. as soon as I set bitmapMode = true my image vanishes. I tried setting to false by default and then creating a temp timer to trigger setting bitmapMode to true after 5 seconds. Sure enough when the timer sets bitmapMode to true .. the image disappears. Am I missing something here ?

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.

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 ?

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!

Thanks.. sent you the file

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 ?

I removed the visible:true from the tween .. those were there for some other testing. Removing them hasn't made a difference. I have smoothing set to true. Is there a reason I see better performance when I set bitmapmode = false ?

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

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.

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

nevermind... needed to initiate that first function - PanelScrollExampleNoLoad(); going to try to work this method in to my project now. Thanks SO much!

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 ?

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 ?

But if I remove the update of blitmask during the tween .. won't that void using blitmask at all ?

I'm trying to tween a very large movieclip (allChapters_mc) which has a height of 706 and a width of about 26,000 pixels. The allChapters_mc is set up by adding a bunch of smaller movieclips that are 1024 x 706 along a horizontal line. The reason I had to do it this way is that putting them directly on the stage isn't possible as there is a limitation for how high the X property will go when directly in the Flash IDE. Here is the code I am trying to use to tween the clip. function setAllChapters():void{ houseBTN.alpha = 1; houseBTN.mouseEnabled = true; // This is where I add the movie clip that holds all the smaller movie clips allChapters_mc = new AllChapters_mc(); this.addChild(allChapters_mc); //I'm adding it off stage at 1024 pixels and going to animate it in place allChapters_mc.x = 1024; allChapters_mc.y = 42; // Place & Set Home Button since it may have been removed loadedSection = "AllChapters"; mainHomeBTN.visible = true; // Make sure this movie clip is at the top depth setChildIndex(allChapters_mc, allChapters_mc.parent.numChildren - 1); // Create Blitmask blitMask = new BlitMask(allChapters_mc, 0, 42, 1024, 706, true); // Tween the chapters, update blitmask TweenMax.to(allChapters_mc, 1, {x:0, y:42,onUpdate:blitMask.update, visible:true, ease:Expo.easeOut,startAt:{x:1024, y:42, visible:true}, onComplete:setChaptersToolbar}); topNavBar.topTitle.htmlText = "Introduction"; setChapterTopNavArrow(); } This is what I use initially ... it works .. but its sluggish and slow. Inside of the allChapters_mc I have those smaller movie clips .. Inside of those there is a Next and Back button that either move the allChapters movieclip x property by 1024 or -1024. This is what that code looks like TweenMax.to(MovieClip(parent.parent).allChapters_mc, 0.7, {x:MovieClip(parent.parent).allChapters_mc.x - 1024,ease:Expo.easeOut,onUpdate:MovieClip(parent.parent).blitMask.update, onStart:MovieClip(parent).disableEverything, onComplete:MovieClip(parent).enableEverything}); Am I doing this right ? Why is it so choppy ? Is there a better way I can use blitmasking on such a large movie clip ?

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.