blitMask image is very poor quality [HELP]

[Applauz]

So I have managed to get a large image scrolling horizontally. .. However the image is extremely poor quality at all times.

 

I am able to play with the bitmap mode settings and get the image to look fine when the movieClip first loads... but when scrolling is occurring the quality changes to the very poor quality .. and then when scrolling stops it jumps back to the good quality again. The problem with this is that I have a nice slow ease on the animation and it looks very weird that the quality is very bad then snaps to a good quality version after 2 seconds.

 

 

Can someone have a look at this rendition of my code and tell me if there is a way to have my image appear in good quality the whole time ?

 

 

This exact code works fine for me in another instance where I am using 100% shapes and drawings from within Flash ( no external imported bitmaps ) ... this is only happening on the image I have imported.

 

 

// Blitmasking for Section 1
TweenPlugin.activate([ThrowPropsPlugin]);
var blitMask:BlitMask = new BlitMask(coretechtimeline_mc, 0, coretechtimeline_mc.y, 1024, coretechtimeline_mc.height, true);

blitMask.bitmapMode = false;

var t1:uint, t2:uint, y1:Number, y2:Number, x1:Number, x2:Number;
blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

function mouseDownHandler(event:MouseEvent):void {


// FIX for Button events //


	 dragging = true;  //i am now dragging
	 offset = coretechtimeline_mc.mouseX;  //setting the offset from the origin
	 mouseDX = mouseX;

//



trace("bitmapMode is now FALSE");
blitMask.bitmapMode = false;
TweenLite.killTweensOf(coretechtimeline_mc);
y1 = y2 = coretechtimeline_mc.y;
x1 = x2 = coretechtimeline_mc.x;
t1 = t2 = getTimer();

coretechtimeline_mc.startDrag(false, new Rectangle(-99999,111 ,99999999, 0));
coretechtimeline_mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
coretechtimeline_mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);


}
function enterFrameHandler(event:Event):void {



///

y2 = y1;
x2 = x1;
t2 = t1;
y1 = coretechtimeline_mc.y;
x1 = coretechtimeline_mc.x;
t1 = getTimer();

blitMask.update();


}
function enableBitMapMode():void{

trace("bitmapMode is now TRUE");
blitMask.bitmapMode = false;


}

function mouseUpHandler(event:MouseEvent):void {

// FIX for button events in Throwprops //



	 mouseUX = mouseDX;
	 mouseDX = mouseX;
	 vy = mouseDX - mouseUX;

	 //trace("The RANGE was - " + Math.abs(mouseDX - mouseUX));




//

coretechtimeline_mc.stopDrag();
coretechtimeline_mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
coretechtimeline_mc.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
var time:Number = (getTimer() - t2) / 1000;
var yVelocity:Number = (coretechtimeline_mc.y - y2) / time;
var xVelocity:Number = (coretechtimeline_mc.x - x2) / time;
var yOverlap:Number = Math.max(0, coretechtimeline_mc.height - coretechtimeline_mc.height);
var xOverlap:Number = Math.max(0, coretechtimeline_mc.width - coretechtimeline_mc.width);


if (Math.abs(mouseDX - mouseUX) > tolerance){
	    trace("Mouse up was not within range of mouse down (10px), so is not a button press");
	   ThrowPropsPlugin.to(coretechtimeline_mc, {throwProps:{
	 y:{velocity:yVelocity, max:111, min:111, resistance:100},
	 x:{velocity:xVelocity, max:20, min:-6000, resistance:100}

    }, onUpdate:blitMask.update, ease:Strong.easeOut, onComplete:enableBitMapMode
   }, 10, 0.3, 0.2);
	 }



else if (Math.abs(mouseDX - mouseUX) < tolerance){
	    trace("Mouse up was within range of mouse down (10px), so is a button press ");

	    //and will it work? No!
	    trace("the detected button press was on: " + event.target.name);
	 }



  }

[Applauz]

I've managed to track the problem down to it being related to the size of the image.

 

The image is 7022 x 624

 

I made a smaller image and it works fine.

[Applauz]

Bringing this back to life.

 

I need the image to be 7022 x 624

 

Any ideas why it looks great on desktop .. but once loaded to the iPad is brutal quality ?

[Carl]

have you experimented with CPU vs GPU rendering?

 

your image is nearly 4.4 million pixels. I have to imagine at some point there is a limit to how well AIR is going to be able to store and manipulate that much data using mobile hardware.

[Applauz]

I've tried everything.

 

It seems not to be a problem with the blitMask. If you create a blank stage and import an image this large.. then compile it for iOS. It by default is drastically reduced in quality. I can't find a way around this.

[Applauz]

However... if I chop that image up into say 7 pieces 1000px width each... then just stitch them together by setting their X coord .. then it works... however blitMask glitches while scrolling when the point of the stitch is centred on the screen... it "skips" .. do you know of a better way to stitch the images together that I could try ?

[GreenSock]

Can you post a very simple FLA that demonstrates the "skip" you're experiencing? Please don't post your production files that have lots of extra code - just something that isolates the issue would be best. And do you see the problem on desktops too or just the iOS device? There's very little we can do about iOS-specific glitches in Adobe's or Apple's stuff unfortunately.