Skip to main content
S
Spanky2k
Participant
November 4, 2013
Question

Any ideas for smooth scrolling of full-screen panels for iPad?

  • November 4, 2013
  • 1 reply
  • 778 views

I'm working on an app that is basically just a grid of full screen panels that the user can go through by swiping left, right, up, down. I want it to lock to a singled direction once a user starts swiping so I've got it set to only start scrolling in a direction when the swipe direction has been moved by a few percent - i.e. if delta (x or y) > 5% and delta x > delta y then scroll in the x direction. I'm using a method that detects 'fast swipes' to switch between panels but can also use 'slow swipes' where if the panel is moved more than 50% of the screen then it switches.

To do all this, I'm using MouseEvents - up, down, enter frame etc and TweenLite. It just isn't working right at the moment - seems to work fine when testing on a computer but on my iPad it's just not working right. The locking doesn't seem to work quite right and it's jumpy. It is an iPad 3 so it's a retina display iPad with the weakest CPU/GPU but I want to make it work fine across all iPads so catering for the weakest setup would be best. I'm running my app at 60 fps and the stage is set to 1024x768 with images that are quite high resolution (more than retina). Would 30 fps make a better choice? Should I resize my imagery so that it fits 2048x1536 exactly or is the Flash Builder clever enough to do that on the fly? (I had assumed that it would be best to let it do its thing so that when I try porting this app to iPhones and other tablets, it would be easier).

Is there anything 'out there' already that does what I'm trying to do already? I'd like to get my solution to work but if I'm just reinventing the wheel and there are existing code solutions that do exactly this then I'd appreciate being pointed in the right direction!

This topic has been closed for replies.

1 reply

Leafcutter
Leafcutter
Inspiring
November 6, 2013

If you are using a stage size of 1024x768 then you should use images of that size - that will make things faster as AIR won't have to scale the bitmap itself and images will take up less memory.

If you are targeting retina screens then you could consider setting the stage to 2048x1536 - upscaling from 1024x768 works ok but depending on what you are displaying users on retina might notice a slight blur. 

If you are just using sprites then performance will be poor - AIR has to do a lot of visible area calculation on sprites which really slows it down on iPad.  If you haven't already then I would suggest looking at either starling/feathers or doing your own blitting via bitmapData.draw.  Probably Starling will be best - it is quite easy to get up and running and the difference in performance can be significant (things suddenly start working like you want them to!).  There might even be something in Feathers (which is a UI component library built on Starling) that does what you want already (I don't use it so can't comment).  I am using Starling for an iPad app at the moment that involves shifting whole screens around and performance is fine with very little coding effort from iPad1 up.

S
Spanky2kAuthor
Participant
November 14, 2013

Thanks for the reply!

I managed to fix the issues with my scrolling. It's still not entirely smooth on my iPad 3 although now that I have it set to 30fps it seems to work better. I've reduced the image sizes to fit 2048x1536 too. Scrolling is still a bit jerky in the first few seconds after I've launched the app but then seems to be fine. I'm guessing I need to introduce some kind of loading screen although I didn't think that worked with single swf based air apps on iOS devices.

I'll look into Starling but I'm not quite sure if it's applicable to my needs. My app is basically a number of slides with stuff on them - e.g. single full screen image or a few smaller images + text and in future maybe small images, text and playable movies. I've got it coded up right now so that each 1024x768 slide is stored as a movieclip which my code then arranges in a pre-determined grid fashion and then scrolls through it. A bit like the National Geographic 50 Greatest Photos app. I should probably save each 'slide' as a seperate swf and load/unload them based on which slides are neighboring the active one. All new territory for me though, learning as I go along!

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices