Friday, December 11, 2009

Video: Programmatic Scrolling Animation

Programmatic Scrolling Animation, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show is about animating an Scroller area programmatically. By default, areas with scrollbars will animate when you click and hold on the scrollbar's track or up/down buttons. But if you just want to move to a new scroll position, these animations don't come into play, so you need a little something extra to get that nice animated effect.

Here's the video:

Here is the demo application:

And here is the source code.

Finally, here's where you can find the CodeDependent videos on iTunes.

Enjoy.

4 comments:

Anonymous said...

Hello Chet,

A few weeks ago you helped me with scrolling task; thanks once again - I have implemented your code in a few instances.

In regard to this post - extending/diversifying scrolling options - I have another question.
There is a known limitation/bug in FlashPlayer - mouse wheel scrolling works as it's supposed to on Windows, but does not work on Mac. There are some suggestions on the Internet how to bypass this.
Can you recommend any workaround for FP 10?

And one more.
The AS code that you gave me works just fine. Are there any advantages of using this code in script blocks/files vs implementing animation through mxml?

thanks,
Igor Borodin

Chet Haase said...

@Igor: Don't know about the mousewheel issue - you might post to one of the forums and see if someone else knows about it.

As far as script vs MXML, it's whatever works for you. I happened to write MXML here, and I prefer to do that for GUI stuff when I can (I really like the declarative approach). But sometimes it's more convenient to write script code. Or sometimes it is not possible to do it declaratively; the next episode (hopefully posting later this week) shows how scrolling a TextArea currently doesn't work in the same way because the properties you need to animate are not bindable. So I used script code to create/run the animations instead.

Gerard said...

Hi Chet,

I often used the viewstack in flex 3 as a navigator between several screens. In Spark obviously states are the way to go.

I'm now exploring with a programmatic scrollable animated viewport to move between screens (all in one group) however I need to know:

When scrolling content using a viewport is Flash player drawing all the onscreen and offscreen content, then only displaying the portion visible in the current viewport - which would be a performance issue.

Or does FP only render/draw only the content that is visible via the viewport.

All the best
Ged

Unknown said...

Hey I have a question about scrolling. I want to make my music player move my scroll bar and follow next track when next song is selected. Saying that upon selecting next song player will highlight next track and play song but will not move scroll bar. this is my test site http://menyfaces.com/index_playlist_selector12.html and I was wondering if there was an easy solution. If you need an example of what im talking about go to http://www.jeejuh.com/ and play with his play buttons. His next buttons select tracks and move scroll to correct track.