Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

Flash Scrolling Without Boundaries

Learn how to make your own simple, gesture-driven component that simplifies users' interaction with your website and saves them time.
This chapter is from the book

Any sufficiently advanced technology is indistinguishable from magic.
—Arthur C. Clarke

The use of Flash to create information interfaces has enabled designers to develop many new devices for browsing that information. Although most of these interfaces are designed to improve the user experience, many are littered with gimmicks and controls that actually confuse the user.

Among this plethora of experimental interface elements are some that really do improve usability. One of these is the gesture-driven scrolling list.

As a Flash developer, you've no doubt seen the gesture-driven scrolling list before. Usually it is a list of image thumbnails arrayed horizontally or vertically. As the user moves his mouse over the list, it reacts by scrolling in a direction based on the mouse position or motion.

Author Note: Michelangelo

When we were writing this chapter, it occurred to us that a gesture-driven scrolling list is actually pretty controversial in the world of usability. Many usability gurus recommend against using this type of control, and rightly so; it is an unfamiliar, newer type of navigational widget that many users might not be familiar with.

Many of the rules of usability rely on interfaces and controls being intuitive and familiar to the user. Abiding by these rules guarantees that your users always know how to get around your interface and the site they are looking at. However, all users are different. In the case of the MODA site, the target audience was not visiting the site to get through it in the quickest possible time, but rather, users of the site wanted to spend time and enjoy the experience of looking at the images on the site. In our informal tests, we even found that users who had never used this type of scrolling list before learned to use it almost instantly and found using it to be fun and enjoyable, a key goal for the target audience of the site.

Remember, the rules of usability that you will read in books or on web sites are great guides when designing an interface, but the one real rule to stick to is this: Know your user. In this case, our target user liked the scrolling list, and it added enjoyment to the site that a boring old scrollbar would not have.

Ultimately, using standard widgets may be the safest way to ensure maximum usability of your interface, but if you don't try and develop something new and better, we could be using the same old scrollbars 10 years from now!

In the gesture-driven list, the speed of scrolling is dictated by the distance of the mouse cursor from its target. This dramatically reduces the amount of mouse movement required to control the scrolling. The fact that the list scrolls by merely having the user move his mouse (this is where the "gesture" part comes from) also helps by reducing the number of clicks needed to scroll through the list to...0! Gone are the smaller click areas of the scroll arrows at each end of the list, and the scrolling "thumb" in the middle of the scrollbar.

This can be a powerful interface element, but it can truly help improve web site usability only if the designer spends the time to iron out the details of how users will interact with it.

In this chapter, you learn how to make your own simple, gesture-driven component that takes into consideration all the details necessary to improve Nancy's experience on the MODA site. Keep in mind the issues just discussed when you take a look at how the scrolling list works in the MODA structure.

Solutions—Making the User More Efficient

Using the gesture-driven scrolling list not only makes accessing the items in the list easier for Nancy, but it also enables you to organize the site in one simple level. This helps to make Nancy's time on the MODA site more effective by eliminating any nested areas of the site. Nancy can see all the site sections on one screen.

Cutting the amount of clicking Nancy has to do to scroll to the different exhibits also simplifies her interaction with the site and saves her time.

Figure 5.1. The Höpart exhibit site should focus on the artwork in the collection; the gesture-drive scrolling list helps to make this interface simple and focused.

The gesture-driven scrolling list also helps simplify the site's visual design. Without system scrollbars or similar widgets to incorporate, Nancy can focus on the artwork and the information and have a fun, enjoyable experience on the site.

To see all these benefits in action, take a look at the Höpart sample movie.

Seeing It in Action

Download and open the 05_scrolling_list.fla file. Test the movie (Control>Test Movie) so that you can see how the gesture-driven list feels.

Figure 5.2. Spend some time getting the feel of the gesture-driven scrolling list. Pay attention to how it reacts to the mouse. Notice the help text on either side of the list—subtle yet helpful.

Notice the list has a smooth and immediate response. You also may notice that the list scrolls quite fast when your mouse is at the extreme left or right edge of the screen, but that there's a large "slow" area in the center of the list that offers the user more control over the individual elements in the list. This is extremely important for providing user control. Although it is easier for the designer to create a list with a steady scroll rate, it would be much harder for the user to control it unless the scrolling rate were slowed down considerably.

The list contains a lot of items, so it's possible Nancy might get lost as she scrolls through the artwork. This is something you need to watch out for when using this type of list; too many elements can make it easy for the user to lose track. (The easy solution for this project was to provide a function that identified which piece of artwork Nancy was looking at.) The selected button acts as a reference point for the user as it goes by again and again; it is a simple and recognizable element.

Figure 5.3. When Show Streaming is turned on, notice how the buttons in the list fade in as the larger images finish downloading.

As the file loads, Nancy is kept informed of the download status. If you test the movie and turn on Show Streaming, you'll notice that each of the buttons in the list fades in when its corresponding full-size graphic has downloaded. This offers a visual clue as to the state of the section to which that button corresponds.

NOTE

This is a classic case where not being lazy can really improve the usability of your Flash movie. With a little extra work, you can show Nancy which of the items are still downloading by initially setting each button's opacity to 25 percent and disabling its functionality. After the high-resolution image has downloaded, its corresponding thumbnail in the list returns to full opacity.

Now go ahead and take some time to play around with the gesture-driven list. Get a feel for how the list speeds up and slows down. Because you have seen how the scrolling list component works, how about making your own?

Implementation

As with all components, this one should be flexible enough to provide Nancy with a good, usable interface element, and also accommodate different scenarios for its use in other projects. Without this flexibility, you will end up with a lot of code that might be able to do a very specific task for the MODA site but not be very reusable.

Additionally, you should be able to define the bulk of the settings for the scrolling list in the Component Parameters window. That way, the bulk of the work is already done for you when you use the clip. It's then just a matter of dragging and dropping the clip into your movie and setting a few parameters.

To have a component with the kind of power and flexibility you need, you must include a solid list of features:

  • Adjustable speed. The speed of the list should be easily adjustable. Smaller size movies will probably need a slower moving list so that the user doesn't lose control of it. Movies that take up bigger areas of the screen may need a faster list to help the user move quickly around the list. You'll also be able to provide different scrolling speeds for different target audiences.

  • Variable, user-controlled acceleration. Scrolling should be fastest when the mouse is at the extreme ends of the list to offer Nancy maximum control. At the middle of the list, where most of the clicking actions will take place, scrolling should be slower so that Nancy can move her mouse without making the list speed away.

  • NOTE

    During the development of a very similar scrolling list several years ago, my friend Andy Scott gave me a cubic equation that turned out to be a little gem about acceleration. He pointed out that most scrolling lists use a linear equation—on a graph they look like a straight diagonal line rising from the lower left. A cubic equation looks like a gentle curve sweeping from the lower left and then reversing its curve as it arcs to the upper right. Essentially this means the scrolling timeline is less sensitive toward the center allowing for easier access to the scrolling objects, and more sensitive toward the edges allowing for greater scrolling speed. See Figure 5.4 to view what the equations look like in a graph.

  • Adjustable orientation. The component should enable you to choose to display the list vertically or horizontally.

  • Customizable list items. Abstracting the code from the artwork enables you to use the code with any movie clips without having to rewrite or tweak code.

  • Adjustable activation area. The size of the area of the scrolling list that responds to the mouse should be configurable. This is especially useful for lists with smaller items—you can create an adjustable buffer around the clip so that Nancy can easily have the list scroll when the mouse pointer is within 20 pixels of the list rather than when the mouse pointer is rolled over the list items themselves.

  • Figure 5.4. By using a cubic equation for the acceleration of the scrolling list, the user gains more control over the items in the list.

Most of these requirements point to a component that acts as a controller, sort of like a traffic cop. It's a clip that stands behind the scenes and controls other clips, moving them across the screen, adjusting their relationship to each other and the screen, and keeping aware of the mouse pointer.

Keeping watch over a developer-specified number of movie clips is not easy. The approach used here is to have the developer specify the base name of his collection of clips and the number of clips he will have on the screen. If you were to specify mc_someClip_ as your base name, and 3 as your clip count, the scrolling list component will look for mc_someClip_0, mc_someClip_1, and mc_someClip_2. This will make it easy for the code to handle—and easier for the designer because he won't have to keep track of many different clip names.

As you can see, most of the features are intended to improve the user experience with the scrolling list. At the same time, several of these features make it easier for the developer to customize the component for different applications. If you can meet both these goals, you have a truly great tool.

Okay, now that you understand the requirements, you can get started on the fun part... putting it all together!

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.peachpit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020