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

Home > Articles > Design > Adobe Creative Suite

The Flash 'Slide' Algorithm

  • Print
  • + Share This
Knowing how to move an object around the screen can open up new possibilities of what you can do with your Flash designs. This sample chapter looks at the basic 'slide' algorithm, which can easily be built upon.
This chapter is from the book

Creating Sliding Panels for Navigation and Transition Effects

The sliding panel navigation system has become quite prevalent in Flash-powered sites. Click a button and a panel slides into place to take you to a new area of the site. The goal of this chapter is not to show you techniques that have been done to death, but knowing how this effect works will give you some important principles about programmatic movement. In this chapter you're going to look at the basic principle of creating motion and then look at how you can expand on it to create some more interesting effects, and not just for navigation.

Basic Slide Algorithm

The sliding action works by manipulating the X value (or if you prefer, the Y value) of the targeted movie clip. When a button is pressed or rolled over, a variable is set which specifies the new X position of the panel movie clip. A script is then run, looping around and moving the panel a bit at a time to its new X position. And that's all there is to creating a basic slide action! But how does it seem to ease in and out during the slide, slowing down as it reaches its final X position? Well, that's really simple also, but I'll show you that later in the chapter.

  1. First, you need to have something to slide. I created a 3-panel bitmap in Photoshop that consisted of three 400x250 pixel images laid out in a row 1200 pixels wide (see Figure 3.1). You can make your own or use this same one, which is available from the book's web site (dragslidefade.com).

    Figure 3.1. Save the image as a high-quality Pict or Bitmap. You can compress it later in Flash.

  2. Create a new Flash movie sized at 400x250 pixels.

  3. In the first layer, import your panel image by pressing Ctrl+R (Cmd+R on Mac).

  4. Select the image and then turn it into a movie clip by pressing F8. Name it panel and press OK.

  5. With this clip selected, position it so that the middle picture in your panel strip is in the center and the upper edge is against the top of the main movie (see Figure 3.2).

  6. Figure 3.2. Use the Align panel to easily position the movie clip correctly.

  7. Using the Instance panel, name it panel.

  8. Above this layer, create a new layer and name it script. This is where you will put your script movie clip that will control the movement of the panel.

Setting Up the Script Loop

The script loop is the main engine that will control the movement of the panel. It is a standard movie clip script loop with the main code being on one frame and a gotoAndPlay action on a subsequent frame to make it loop.

  1. Make sure nothing is selected by pressing Ctrl+Alt+A (Cmd+Opt+A on Mac) and then press Ctrl+F8 (Cmd+F8 on Mac) to create a new movie clip. Name it script and press OK (see Figure 3.3).

    Figure 3.3. When you create this new movie clip, you automatically go into the symbol editing mode for it.

  2. Insert a keyframe (F6) at frame 5 and then one also at frame 6. You now have keyframes in your script movie clip at frames 1, 5, and 6.

  3. Name the first layer script. Insert a new layer above the first layer and name it labels.

  4. In this labels layer, add a keyframe at frame 5.

  5. Click frame 1 in the labels layer and use the Frame panel to give it the label of stop. For frame 5, give it a label called move (see Figure 3.4).

  6. Figure 3.4. Adding labels makes it easier to keep track of the script setup.

    These labels enable you to execute the code in the script without having to remember which frame you put your code on!

  7. In the first layer (the script layer), double-click the first frame to display the Frame Actions panel for that frame.

  8. This first frame does two jobs. First, put a stop() command in, so the movie clip doesn't automatically start when it first appears on the stage. Next, set a variable called baseRate. This dictates the speed of the panel slide, as you will see in a moment. So for this frame, add the following code to the Frame Actions window:

    stop();
    baseRate = 1.6;

Coding the Slide Algorithm

The code on frame 5 is the main piece of code that loops around, moving the panel to its target destination, either left or right, when a button is pressed. First, look at how you move the panel left if the target X position is less than the panel's current X position.

  1. Double-click the keyframe at frame 5 in the script layer to display the Frame Actions panel.

  2. Check to see if the panel's X position is greater than the value contained in the targetx variable, which is set when a button is clicked:

  3. if (_root.panel._x > _root.targetx) {

    If this is the case, then you need to move the panel to the left. To work out how much you move the panel with each pass of the loop, use a very simple algorithm.

    First find out the difference in the two X positions and put that into a variable called difference. Say, for example, your current panel's X position is 500, and the target X position is 200. 500 minus 200 is 300. You can't simply move the panel 300 pixels to the left, as there would be no perceived movement—it would just jump to its new X position. So, what you need to do is divide the difference by a number. The number you use is the value of baseRate, which in this case is 1.6.

    Thus, difference divided by baseRate equals rate in the current example:

    300/1.6=187.5

    This gives you the amount that you move your panel to the left. Now you're probably thinking, "Hang on, I can't simply just keep moving it 187.5 pixels to the left. It should slow down as it reaches its destination." Well the thing is, the difference is recalculated every time the script loops around. So in the given example, the next time it loops around the current X position of the panel, it will be 500 minus 187.5, which is 312.5. See how the new calculation works out as follows:

    312.5–200=112.5 (panel_x–targetx=difference)

    112.5/1.6=70.3125 (difference/baseRate=rate)

    You can see that the amount you will move the panel is just over 70 pixels. Obviously the nearer the panel gets to its target X position, the slower the panel moves each time the loop circles around. Eventually it stops moving because the difference is zero! The effect of this is that the panel seems to ease into its final resting place. Of course you can alter the baseRate and try different numbers. The higher numbers move the panel more slowly, lower, and more quickly. Season to taste!

    Following is the complete code for moving the panel left and right. Enter this into the current open Script window, which is frame 5 of the script layer (see Figure 3.5).

    difference = _root.targetx - _root.panel._x;
      rate = difference / baseRate
      _root.panel._x += rate;

    Figure 3.5. After putting this code into the open Script window, you are ready for the final looping command.

  4. Double-click frame 6 in the script layer.

  5. In this Frame Actions panel, add the following code that will keep the script looping:

    gotoAndPlay("move");

That's it for the script! Now you need to add the buttons that will actually execute the code.

Adding the Buttons

The buttons actually execute the code you've just written by simply telling the script movie clip to gotoAndPlay the frame with the label move. You also set a few variables when a button is clicked so that the panel knows where to move.

  1. Back on the main stage, drag the script movie clip into the script layer.

  2. With the clip still selected, use the Instance panel to name it script (see Figure 3.6). This is to help reference the script from your buttons when they're clicked.

  3. Figure 3.6. Always try to use descriptive instance names for movie clips.

  4. Create a new layer called buttons above the script layer.

  5. Draw out a rectangle on the stage, select it, and then turn it into a button (F8). Name it something creative, such as button, and click OK (see Figure 3.7).

  6. Figure 3.7. You can add a great deal of functionality to the buttons you have created here.

    When this button is clicked, you want it to do two things. First, it needs to set the value of the variable targetx. This is the new X position you want the panel to move to as follows:

    targetx = 600;

    Second, you want to actually call the script itself to move the panel as follows:

    script.gotoAndPlay("move");
  7. To add this functionality to the button, select it and press Ctrl+Alt+A (Cmd+Opt+A on Mac) to display the Object Actions panel.

  8. Add an on(release) event handler to the Script window as follows:

  9. on (release) {
      }

    This means that when the button is released (that is, clicked) the code between the curly brackets is executed.

  10. Add the following code between the curly brackets to finish the button script:

  11. targetx = 600;
    script.gotoAndPlay("move");
  12. Back on the main stage, copy the button and paste it twice so that you have three buttons on the stage (see Figure 3.8).

  13. Figure 3.8. The three buttons you have created will set the panels to different X positions.

  14. Select button 2, open the Object Actions panel for that button (Ctrl+Alt+A [Cmd+Opt+A on Mac]), and alter the targetx variable so that it now reads as follows:

  15. targetx = 200;
  16. Do the same for the third button, but alter the targetx variable to –200. You now have three buttons that set the panel to different X positions.

  17. Test your movie to see if it works. You should find that clicking the buttons sends the panels sliding left and right in a very fluid fashion (see Figure 3.9).

  18. Figure 3.9. The key test of successful button making is how smoothly the motions of the panels execute.

  19. Try altering the baseRate variable to a lower or higher number to get different speeds.

  • + Share This
  • 🔖 Save To Your Account

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