Throwprops - Text Issue

[Applauz]

I have a movie clip that contains a multiline text field.  It has about 20 lines of text. Each line numbered.

 

1. kjlkjasldkjlaskjlaskjd

2. klasjlaksjdlaksdj

3. kajshdkajhsdkjahsdkh

 

etc.

 

 

For some reason .. the entire first line of text glitches and disappears and then randomly comes back when you scroll it off screen. 

 

So when you scroll it off screen and then bring it back in to view..  the text starts at 2. kjahskdjhasdkjha

 

if you keep scrolling up and down for a bit line 1. just randomly comes back.

 

I have no idea whats causing this.

 

Any ideas ?

[Carl]

Not really sure.

Feel free to post a very simple fla that only has enough code / assets to replicate the problem.

Just post the zipped fla, no GreenSock members plugins please.

[Applauz]

So the problem happens when the movieclip containing the text exits the stage and then you drag it back in to view.

 

When it comes back in to view a portion of the movie clip is gone.  This isn't an issue with text because as a test I put a button on the same line that the text that goes missing is on... and that button vanishes too.

 

Its almost like its masking it or something.

 

Here is my code....  don't mind the mess. I haven't cleaned up my code yet

 

Let me know if anything looks out of place.

tracklistScrollHeight = 239 - (albumTracklist_mc.height - tracklistMask.height);


TweenPlugin.activate([ThrowPropsPlugin]);


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

albumTracklist_mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);


function mouseDownHandler(event:MouseEvent):void {
	
	
	// FIX for Button events //
	startTouch = mouseY;
	
         dragging = true;  //i am now dragging
         offset = albumTracklist_mc.mouseY;  //setting the offset from the origin
         mouseDX = mouseY;
	
	//
	
	
	
	//
	curY = 0;
	prevY = 0;
	
	//
	
	
	TweenLite.killTweensOf(albumTracklist_mc);
	y1 = y2 = albumTracklist_mc.y;
	t1 = t2 = getTimer();
	
	//albumTracklist_mc.startDrag(false, new Rectangle(0, -99999, 0, 99999999));
	albumTracklist_mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
	albumTracklist_mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
	
	
}

function enterFrameHandler(event:Event):void {
	
	
	
	endTouch = mouseY;
	
	if (startTouch - endTouch < 10 && startTouch - endTouch >-10) {
		
		// BUTTON PRESS
		
	}
	
	else{
		
	dragMe = dragMe +1;
	
	if (dragMe < 3){
	albumTracklist_mc.startDrag(false, new Rectangle(100, -99999, 0, 99999999));
	}
	
	
	
	y2 = y1;
	t2 = t1;
	y1 = albumTracklist_mc.y;
	t1 = getTimer();
	
	}
	
	
}





function mouseUpHandler(event:MouseEvent):void {
	
	// FIX for button events in Throwprops //
	
	dragMe = 1;
         
         mouseUX = mouseDX;
         mouseDX = mouseY;
         vy = mouseDX - mouseUX;
         
         //trace("The RANGE was - " + Math.abs(mouseDX - mouseUX));
         
     
	
	
	//
	
	albumTracklist_mc.stopDrag();
	albumTracklist_mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
	albumTracklist_mc.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
	var time:Number = (getTimer() - t2) / 1000;
	var yVelocity:Number = (albumTracklist_mc.y - y2) / time;
	var yOverlap:Number = Math.max(0, albumTracklist_mc.height - albumTracklist_mc.height);
	
	
	//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(albumTracklist_mc, {throwProps:{
								 y:{velocity:yVelocity, max:239, min:tracklistScrollHeight, resistance:100}
								
							 },  ease:Strong.easeOut
							}, 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]

This is definitely and issue with the text box.  If I throw this text box in a movie clip and apply blitmask to that movie clip the problem goes away.

 

This isn't an option however because when I blitmask the movie clip of text the quality of the text is visibly downgraded on the retina iPad.

 

 

So now the challenge is to figure out why throw props has issue with my text box.

[Carl]

From simply looking at the code, nothing jumps out.

ThrowProps has nothing to do with how objects render, it simply changes the the x or y properties (most commonly) of an object over time. 

 

It appears from one of your posts that you saw the same disappearing behavior happen when you were simply dragging. 

 

In this type of scenario I would suggest removing all extraneous code and trying to see exactly where it breaks.

[Applauz]

How come when I blitmask the text box (bitmapMode true)  the text isn't the same quality on retina. It downgrades the quality of the text.

 

 

This issue ONLY happens when I drag the text box out of view and back in view.. but it only happens when throw props is applied to the dragging.

[Carl]

As for the Blitmask issue:

Are you using other bitmap assets in your project? Does the BlitMask text look worse than those, or the same? Is your project the same size as your retina Display or is the file being scaled up?

I recall there being numerous issues with Air and retina awhile back but don't know what the latest state of things is.

 

Disappearing issue:

Do you get the same disappearing behavior on desktop or only on the iPad?

[GreenSock]

For what it's worth, this definitely smells like an issue with Flash/AIR rendering, not with ThrowPropsPlugin or GSAP. Like Carl said, the only thing the plugin does is set the y property in your example. Have you tried changing the rendering mode in the publish settings to use CPU instead of GPU (or the other way around)? 

 

And as far as BlitMask and text quality, yes, that also sounds like something related to scaling of the graphics on a retina display (nothing BlitMask does). Just like regular images on a web site that are viewed on a retina display - they often look fuzzy because of what Apple is doing to scale them up (or in this case, the Flash player).

[Applauz]

So I found the problem.

 

The issue was I am setting line spacing on the multiline text box.

 

Shouldn't be an issue I know ...  but it is.

 

Also ...

 

If I remove all ThrowProps and just use a simple starDrag function I don't get the issue.

 

The issue only happens when using throwProps + line spacing.

[GreenSock]

Glad you found the issue. I'd be curious how you're doing the "drag" exactly because maybe it's an issue of only having y land on whole pixel values. Have you tried using RoundPropsPlugin to enable that on your throwProps tween? 

[Applauz]

Im dragging like this.

 

albumTracklist_mc.startDrag(false, new Rectangle(100, -99999, 0, 99999999));