• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
1

iOS and Android Native Scroll in Adobe AIR

Engaged ,
Sep 01, 2011 Sep 01, 2011

Copy link to clipboard

Copied

I think it would be a great idea to implement the smooth scroll present in native iOS and Android applications for use in Adobe AIR projects.


Currently, the only way to obtain smooth scrolling lists with images is using StageWebView to show the image list in HTML format, and then awkwardly implement some JavaScript / AS3 communication functionality so the list in the StageWebView is interactive and can communicate with the main program. This is excessively complicated and very error prone (I've found some inexplicable JavaScript errors that only happen in the iPad, not in Android, and not in the PC!).

It would be way better to be able to skip all the StageWebView process altogether and being able to use a simple AS3 API to put any sprite/movieclip into a scrollable canvas which can be moved using the iOS native scroll.

Using Flash animation to simulate the scroll in a list with images is too slow in the iPad and gives a bad user experience. iPad users expect the native iPad scroll, not some poor jerky simulation. A native scroll is the only way to go.

And even though I talk about the iPad, this should be applicable to the native Android scroll, too.

Scrolling is a VERY BASIC action in a tablet, so this should be implemented as soon as possible.

Actually, I'm amazed we're already at AIR 3.0 beta, and still after all this time nobody thought of this. All sorts of fancy stuff is being added to AIR (hardware accelerated video, webcam and microphone access, etc...) but still something as basic and important as a smooth scroll, which every tablet user expects, is still not possible in Adobe AIR. We either have to implement some slow Flash animated scroll, or use the extremely complicated StageWebView with JavaScript/AS3 communication approach (I'm using a third party library called StageWebViewBridge for the JS/AS3 interoperations, which is great, but still, it's a far from ideal solution, since it's pretty fiddly and the JavaScript code doesn't always work properly in iOS).

TOPICS
Performance issues

Views

32.4K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Dec 08, 2011 Dec 08, 2011

Copy link to clipboard

Copied

Chris, I couldn't be happier to hear this. Kindly tell them it's priority.

Thanks for listening.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Dec 09, 2011 Dec 09, 2011

Copy link to clipboard

Copied

Thanks a lot, Chris. Please, keep us updated!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Jan 03, 2012 Jan 03, 2012

Copy link to clipboard

Copied

Hello, Chris. Any word yet. Jerky scrolling on the iPhone always reminds me of this thread. It's not tasteful.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jan 03, 2012 Jan 03, 2012

Copy link to clipboard

Copied

A couple of weeks ago a developer from Adobe contacted me about this issue, because I was the one who initiated this feature request at bugbase. I replied his/her mail with a long explanation on my views about how and why (in my opinion) this should be tackled. I posted a copy of that mail in the Notes section in Bugbase ("Dec 21, 2011" posts):

https://bugbase.adobe.com/index.cfm?event=bug&id=2958123

Yesterday (Jan 2nd 2012) I received this reply (I hope it's ok to post it here, since it doesn't contain any sensitive info):

___

Thanks for sharing the detailed comments.

Yes, what you have mentioned certainly makes sense, and should help in improving the scrolling performance tremendously. However, as you have mentioned, this would be a huge feature request instead of a small bug fix because this would require significant changes in AIR’s rendering workflow and we also would need to see how to map it to rest of the platforms.

I would get in touch with product management and try to get this prioritized in the backlog.

Thanks again! We always appreciate such feedback.


___

Well, I guess there's still a long way to go before this gets implemented, but at least

it seems they're  considering it.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Jan 03, 2012 Jan 03, 2012

Copy link to clipboard

Copied

Thanks for sharing, OMA2k. At least I know I have to look at my other options for now. I totally understand their point. Let's just hope they do it quickly, get it right and give us an intuitive API to call.

Thanks once again.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 03, 2012 Jan 03, 2012

Copy link to clipboard

Copied

Can a native extension work?  I tried the API at the below link and it was really smooth.  It is a bit limited but might be something that can be built on or used for small jobs.  Not sure how much you can customize this native list although I have seen it used and customized in native apps.  It auto rotates and fits nicely so at least a good replacement for any list selection.  Thought I would share.

http://milkmidi.blogspot.com/2011/09/air30-native-extensions-example-part1.html?m=1

To add, this is more Android though, not sure if IOS has a similar mechanism.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jan 03, 2012 Jan 03, 2012

Copy link to clipboard

Copied

Thanks. It sounds interesting, mola2alex, but it seems those extensions are only for Android, aren't they? Plus it's still only a text list (no images).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Jan 16, 2012 Jan 16, 2012

Copy link to clipboard

Copied

Hey OMA2k, Did you look into it? If you did, how did it perform?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jan 18, 2012 Jan 18, 2012

Copy link to clipboard

Copied

Thanks for your new classes, jackson@mja.

Well, for scrolling text with no interactivity it's fine. I haven't tried for fullscreen iPad lists with images, but I suppose it can't be nearly as smooth as a native scroll with images, since it uses the regular .x and .y properties to scroll the whole movieclip/sprite container, which I already tested in the past and it's slow for long lists with images.

But the main problem is that it only works for static content (with no interactivity). If you want a list with clickable rows, such as the ones found in your typical touch application, all spots in the list are clickable! So the first time you scroll, when you lift your finger from the screen, an unintended click event will fire, selecting the item under the finger at that moment.

So to make your class complete, some algorhythm would have to be implemented in order to detect when the user wants to scroll (in that case click events should not be fired) and when the user wants to touch an item (click event should be fired). It might sound easy, but imitating this behaviour and nailing it is not trivial. As I said in my recent rant at bugbase, why do we have to waste time reimplementing the scroll algorhythm instead of just using what's already there?! Apple already created an excellent scroll algorhythm. We shouldn't have to reinvent the wheel!

I hope Adobe finds this important enough not to delay this too much (for now the enhancement request is marked as "deferred", which doesn't sound too good).

https://bugbase.adobe.com/index.cfm?event=bug&id=2958123

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jan 18, 2012 Jan 18, 2012

Copy link to clipboard

Copied

Hi again jackson@mja.

I've given your scroll component a try just for some static texts, and I've found quite a few important bugs:

1. If the referenced sprite/movieclip is shorter than the scrolling area, it starts bouncing infinitely in a quite funny way,

    which renders the component unusable. Sometimes it even happens when the content is not shorter.

2. If your component is used inside another sprite/movieclip which is added dynamically from code ("addChild(mySprite);"),

    it doesn't work and stops with an error, because the EventListener for mouseDownHandler is being added to this.stage

    in the constructor, but a dynamic movieclip doesn't have access to the stage while in the constructor step (unless it is

    already in the stage added in the Flash IDE, such as in your FLA example). To fix this, I've added the following code

    to the ScrollArea() constructor:

this.addEventListener(Event.ADDED_TO_STAGE, init);
this.addEventListener(Event.REMOVED_FROM_STAGE, close);

    And then I've added the following listener functions:

private function init(event:Event):void {
this.removeEventListener(Event.ADDED_TO_STAGE, init);
this.stage.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseDownHandler);
}

private function close(event:Event):void {
this.stage.removeEventListener(MouseEvent.MOUSE_DOWN, this.mouseDownHandler);
}

3. Also, the scrollbar is only correctly rendered if the scroll area is located at the up and left corner of the stage. To put text somewhere else, the component must be put inside a movieclip.

4. This is not really important, but I've found the following variables are never user and so I've removed these lines:

var xy:Point = this.localToGlobal(new Point(this.x, this.y));
var wh:Point = this.localToGlobal(new Point(this.width, this.height));

var sign:int = sign(obj);

I hope this can help you improve your classes.

Best regards,

OMA2k

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Dec 13, 2011 Dec 13, 2011

Copy link to clipboard

Copied

i added my vote to the bugbase - more people should do the same. please help us adobe. bad scrolling in a flash app = nobody wanting the flash app...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 16, 2012 Jan 16, 2012

Copy link to clipboard

Copied

I feel your pain and I 100% agree. In the mean time, I created a couple of classes to mimic IOS scrolling in AIR. It's not perfect, but this should hold you off until native scrolling is leveraged in AIR.

http://jacksonkr.com/content/ios-scrolling-flash

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 30, 2012 Mar 30, 2012

Copy link to clipboard

Copied

I am weighing up using Flash CS5.5 and Air 3.2 for an iPad only project. The app is essentially like a newspaper and will involve scrolling content comprised of text and images.

From reading this thread, it sounds like the scrolling behaviour could be pretty lousy? Can anyone reassure me that Flash and Air combination will perform this functionality to a reasonable standard. Apart from this issue, it would appear the Flash/Air implementation would be perfect for this app.

Any advice appreciated.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 06, 2012 Apr 06, 2012

Copy link to clipboard

Copied

@OMA2k

honestly I don't believe Adobe will manage to implement it soon (and "soon" in this context is rather for years than monthes). I wish I'm wrong.

Even though your API prototype / usage example in bugbase looks pretty suitable. It's defenitely better then nothing, but still all this "Stage" things being rendered in a separate layers (apart from our DisplayList) could be a bit pinfull... And what about desktops or any other custom solutions that run with any kind of touch surfaces? Those developers also would love to have touch scrolling, but again I can hardly believe those OSs would provide this kind of functionality.

Meanwhile you could try my solution=) It's 99% equal to native iOS scrolling (I've tested side-by-side, same "flick" leads to same time, position and dynamics of the motion). And it's also much more advanced in customization and reusable, unlike one mentioned above for example.

source: https://github.com/fljot/TouchScrolling

compiled demos: https://github.com/fljot/TouchScrolling/downloads

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 15, 2012 Jun 15, 2012

Copy link to clipboard

Copied

That works nice!

but where   came this Events from?

                    import org.gestouch.events.TapGestureEvent;

                              import org.gestouch.gestures.TapGesture;

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 15, 2012 Jun 15, 2012

Copy link to clipboard

Copied

@mechla

check out the swf in libs folder. That's my gesture recognition library. TapGesture is used only in that example (for UI), but PanGesture is used inside scrolling itself (similar to how UIPanGestureRecognizer is used inside UIScrollView in Apple's UIKit).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 15, 2013 Jun 15, 2013

Copy link to clipboard

Copied

LATEST

Thanks, It's very good example.

I have been found the scroll solution for may times. and for many month.

But I couldn't find it. ㅜ.ㅜ;;;;

I'v always been wait good method that Adobe develop.

and I'm waiting now, too.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
May 23, 2013 May 23, 2013

Copy link to clipboard

Copied

Please have a look at it, I have made a smooth scroll list for Android and iOS.

https://vipulkhandelwalblog.wordpress.com/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
May 23, 2013 May 23, 2013

Copy link to clipboard

Copied

Thanks for the link, I'll try your library later. So this is using the regular DisplayList? Have you tried Feathers' List or Scroller components, to compare performance?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
May 23, 2013 May 23, 2013

Copy link to clipboard

Copied

Yes, I have used display list, but for performance, i've used object pooling.

There is no feathers list or scroller component used.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines