Jump to content
Search Community

throwProps settings for good iPad scrolling?

mspanish test
Moderator Tag

Recommended Posts

I used Jack's example of a panel scroller using throwProps - which was delightfully easy to customize into what I wanted to achieve. For a regular SWF viewed on my desktop, the scrolling motion is great. But on my iPad this does not look so smooth - it's way slower.

 

Does anybody have any advice on the best velocity settings for mobile devices like iPad?

 

Here is my code so far:

 


/** 
* Very simple demo of panel flick-scrolling. It loads in an XML file
* containing the file names for 5 panel jpg files and then arranges them 
* side-by-side in a Sprite (_container) and makes it scrollable horizontally.
* Feel free to add more panels in the XML, change the _panelBounds position/size, 
* add a preloader, error handling, etc. the goal was to keep this simple. 
* 
* Get more code at http://www.greensock.com
**/
package {
import com.greensock.events.LoaderEvent;
import com.greensock.loading.*;
import flash.display.Sprite;
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;
import flash.text.*;  
import flash.text.TextField;
import flash.text.TextFormat;  
import flash.text.AntiAliasType;  
import flash.filters.*;   
   import flash.media.Sound;  
import flash.media.SoundMixer;  
import flash.utils.*;  	
import com.inruntime.utils.*; 
   import flash.display.MovieClip;

public class QuickReview extends Sprite {

	private var _panelBounds:Rectangle = new Rectangle(0, 0, 640, 480);
	private var _container:Sprite;
	private var _currentPanelIndex:int = 0;
	private var _panelCount:int;
	private var _x1:Number;
	private var _x2:Number;
	private var _t1:uint;
	private var _t2:uint;
	private var stringsArray:Array = [];
	private var stringTxtArray:Array = [];
    private var stringTxt2Array:Array = [];
	private var format2:TextFormat = new TextFormat();  
	private var format3:TextFormat = new TextFormat();  
	private var filter2:GlowFilter=new GlowFilter(0x000000,1.0,2.0,2.0,10); 
	private var sounds_url:String // = "sound/";
	private var images_url:String // = "sound/";
	var $:Global = Global.getInstance();
	private var xmlPath:String = $.xmlQuickReview;
	private var background:MovieClip;
	private var Alpha:Number;


      public function init():void {
   	if ($.activity == "cucaracha") {
	Alpha = .4 }
	if ($.activity == "body") {
	Alpha = .4 }
	if ($.activity == "telling_time") {
	Alpha = .7 }
	if ($.activity == "weather") {
	Alpha = .6 }
	if ($.activity == "colors") {
	Alpha = .1 }
	if ($.activity == "family") {
	Alpha = .4 }
	if ($.activity == "animals") {
	Alpha = .4 }
   }
	public function QuickReview() {

     init();
     trace ('here it the activity :' + $.activity);
	 trace ('here is the Alpha :' + Alpha);

	  // 	xmlPath = "xml/quickreview.xml
	var xmlLoader:XMLLoader = new XMLLoader(xmlPath, {name:"slides", onComplete:_xmlCompleteHandler});
	    background = new MovieClip(); 

	   addChild(background)  

		background.graphics.beginFill(0xFFFFFF); 
		background.graphics.drawRect(-20, -20, 680, 540);  
		background.graphics.endFill();  

		//this is perfectly acceptable:
		var loader:SWFLoader = new SWFLoader("assets/" + $.activity + "/images/bg.swf", {width:700, height:600, x:-25, y:-25, alpha:Alpha});
		background.addChild(loader.content); //add the ContentDisplay to the display list even before raw content is loaded.
		loader.load();

		xmlLoader.load();
	}

	private function _xmlCompleteHandler(event:LoaderEvent):void {

	 // background.addChild( LoaderMax.getContent('bgImage'));	

          	_container = new Sprite();
		_container.x = _panelBounds.x;
		_container.y = _panelBounds.y;

		background.addChild(_container);

		//background.addChildAt(_container, 0);

		_container.addEventListener(MouseEvent.MOUSE_DOWN, _mouseDownHandler, false, 0, true);		


	format2.font="Arial Rounded MT Bold";    
	format2.size=85;    
	format2.color = 0xffffff;  
	format2.align = TextFormatAlign.CENTER;  
	format2.letterSpacing=1;  

	format3.font="Arial Rounded MT Bold";    
	format3.size=95;    
	format3.color = 0xffff00;  
	format3.align = TextFormatAlign.CENTER;  
	format3.letterSpacing=1;  

    filter2.quality=BitmapFilterQuality.MEDIUM; 



		var panels:XMLList = event.target.content.panel;
		_panelCount = panels.length();
		var queue:LoaderMax = new LoaderMax();

		var panelConfig:XML = LoaderMax.getLoader("slides").content as XML;
		sounds_url = panelConfig.@soundsurl;
		images_url = panelConfig.@imagesurl;



		for (var i:int = 0; i < _panelCount; i++) {
			queue.append( new SWFLoader(images_url + panels[i].@file, {x:i * _panelBounds.width, y:35, width:_panelBounds.width, height:_panelBounds.height - 300, container:_container, scaleMode:"proportionalInside"}) );


var string_txt = new TextField();
string_txt.x = i * _panelBounds.width + 5;
string_txt.y=50 + _panelBounds.height-300;
string_txt.width=620; 
string_txt.wordWrap = false;    
string_txt.defaultTextFormat = format3;   
string_txt.filters = [filter2]; 
string_txt.text = panels[i].@spanish;
string_txt.embedFonts = true;  
string_txt.autoSize="center"; 
string_txt.selectable = false ;	

var string_txt2 = new TextField();
string_txt2.x = i * _panelBounds.width + 5;
string_txt2.y=50 +_panelBounds.height-180;
string_txt2.width=620; 
string_txt2.wordWrap = true;    
string_txt2.defaultTextFormat = format2;   
string_txt2.filters = [filter2]; 
string_txt2.text = panels[i].@english;
string_txt2.embedFonts = true;  
string_txt2.autoSize="center"; 
string_txt2.selectable = false ;	

stringsArray.push(panels[i].@spanish);
stringTxtArray.push(string_txt);
stringTxt2Array.push(string_txt2);

_container.addChild(stringTxtArray[i]);  
_container.addChild(stringTxt2Array[i]); 

stringTxtArray[i].visible = true;
stringTxt2Array[i].visible = true;				

		}
//stringTxtArray[0].visible = true;			
		//feel free to add a PROGRESS event listener to the LoaderMax instance to show a loading progress bar. 
		queue.load();
	TweenLite.delayedCall(.5, playSpanish);

	}

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

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

private function playSpanish():void {


		var e:int = _currentPanelIndex;


trace('here is my current string: ' + stringsArray[e]);

var spanishsound:String = stringsArray[e];

spanishsound = spanishsound.replace(/ /g, "-");  
spanishsound = spanishsound.replace(/á/g, "a"); 
spanishsound = spanishsound.replace(/é/g, "e"); 
spanishsound = spanishsound.replace(/í/g, "i"); 
spanishsound = spanishsound.replace(/ó/g, "o"); 
spanishsound = spanishsound.replace(/ú/g, "u"); 
spanishsound = spanishsound.replace(/ú/g, "u"); 
spanishsound = spanishsound.replace(/ñ/g, "n"); 
spanishsound = spanishsound.replace(/¡/g, ""); 
spanishsound = spanishsound.replace(/!/g, ""); 

spanishsound = spanishsound.toLowerCase(); 
SoundMixer.stopAll();	
var sound:MP3Loader = new MP3Loader(sounds_url + spanishsound + ".mp3", {name:"audio", autoPlay:true, skipFailed:true});
sound.load(); 
}


	private 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});
		SoundMixer.stopAll();
		TweenLite.delayedCall(.3, playSpanish);


	}

}

}

 

thanks in advance :)

Stacey in Alaska

Link to comment
Share on other sites

Hi Stacey,

 

Just to be clear, you aren't using ThrowProps. The example that you modified just uses simple tweens when a "good enough" flick is detected.

ThrowProps is the plugin that allows you to throw objects based on the true velocity of your mouse movement and it has features that will force your object to slow down within a min - max range or bounce back naturally.

 

You may be simply hitting a wall with what the iPad can handle with full screen imagery. If you are scrolling large vectors it can be a big processor drain.

 

I know you have been busy doing all manner of code optimizations and greensock integration. There's one more trick to add to your arsenal...

 

I would suggest you read up on BlitMask which will convert your flickable asset to a bitmap and only process the pixels within a visible area. sort of like a mask but much smarter:

 

http://www.greensock.com/blitMask

 

A BlitMask is used on the ThrowProps page (the scrolling text example)

Link to comment
Share on other sites

Hey Carl thanks very much - that is a great idea, and one I hadn't thought of.

 

Yes I've been trying hard to whip these modules into shape for IOS, which is a challenge, as I'm using all vector graphics - which is awesome for web delivery as my file sizes are tiny, but not so great for IOS.

 

I'll post some more stuff soon as I've done some different variations.

 

Hey that tweening a variable tut is sweet - I am going to use that for my bonus PESOS tween in my app. Gracias!

Link to comment
Share on other sites

  • 1 year later...

I had the same problem. 

 

Firstly, a changed Stage Quality to LOW. 

stage.quality = StageQuality.LOW;

 

Secondly, I swap Vector Graphics with Bitmaps. 

 

Third,  i cached all MovieClip in my Animation as Bitmap.

MovieClip.cacheAsBitmap = true;

 

Forth, i turn on GPU in Publishing Settings. 

 

This 5 tips, gain performance by 500% i guess. 

You can check this here https://play.google.com/store/apps/details?id=air.kuponymc

 

Regards, Eliasz. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...