Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Several under-the-hood enhancements have been made to the Scroller component in Flex 4.6. First and foremost, scrollbars are now created on demand. This means your application does not spend time upfront creating scrollbars for content until the content is scrolled, resulting in a huge performance boost. Two new properties have been added to the Scroller component as well, including PageScrollingEnabled and scrollSnappingMode. When PageScrollingEnabled is set to true, the scroller will advance by the size of the current viewport.
Additional conveniences are built in such that if this scroll velocity is not high enough, or if you do not scroll the content at least 50% of the way, the content will snap back to its original location. The scrollSnappingMode property lets us further tune our scrolling interaction by allowing us to control the ending scroll position. With options like leading edge, trailing edge and center, we can make sure that our scrolling list lands in the appropriate place after a throw. So let's explore how to use this a little bit.
I'm going to go ahead and import a Flash Builder project and I'm going to import my starting 1-8.fxp. And I'm just going to go ahead and click Finish, and you'll see I've a very, very simple little application here. So I'm going to open up Scroller.mxml, and you'll see here that I already have a scrollbar component here set to a width and a height of 200, which of course is my viewport, and then I have a group container and I have an image, and I'm loading in an image of the golden_gate bridge which is located here in my assets folder.
So the first thing I am going to do is I'm going to just set a property on the scrolling called pageScrollingEnabled. This is a new property for 4.6, and I'm going to set that to true. So now I'm going to hit Save, and I'm going to go ahead and run this on the iPad. So I'm going to say Apple iOS in my run configuration, I'm going to say Apple iPad, and I'm going to click on Run. And you'll see here, here's my image of the Golden Gate Bridge, and you can see the image is actually bigger than the viewport. Because I turned on the scrolling, you'll see that my scrollbars appear both horizontally and vertically by default when I scroll through this image.
Okay, so as we see there. And you can see there's my scrollbars. Now, let's say I want this to actually be centered and when the user stops scrolling, to snap back to the center. Let's do that. And what I'm going to do is I'm just going to simply say scrollSnappingmode is equal to center. Let's save that. Let's go ahead and run this, and now notice my image is now centered, and then you could see that I can scroll here, and when I stop scrolling, whether I'm scrolling horizontally or whether I'm scrolling vertically, it snaps back to the center.
So very, very nice feature, and the huge part of this is it greatly increases the performance of our application, because nothing happens with scrollbars unless the content is actually scrolled, unlike previous editions of Adobe Flex.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98529 Viewers
61 Video lessons · 85819 Viewers
71 Video lessons · 69720 Viewers
56 Video lessons · 102030 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.