Including content that is scrollable with buttons

In our example website, the resume section includes both stationary and scrollable text. The stationary part is just a static textfield. For the scrolling text, the text itself is also a static textfield, but that textfield has then been put inside (converted to) a movieclip. The movieclip is given an instance name and two buttons inside movieclips are used to control it. These are the steps to recreate that section:

Make the background and the static text

Open sitesample3.fla (made on the previous page or available via link under Files at right) and save it as sitesample4.fla. Add a layer just above the green area and call it resume bg. Put a keyframe in frame 63 and use the rectangle tool to draw a dark rectangle over the green area. Put a blank keyframe in frame 73.

Add 3 layers above the slideshow button layer, calling them resume static, resume scrollable, and resume mask, and put a keyframe in frame 63 of each. Cut and paste the logo from offstage into the resume static layer and use the text tool to add the static resume header. Drag a copy of the Next button from the library into this layer also and use the transform tool to rotate it to point upwards. Drag another copy below that and rotate it to point downwards. Put a blank keyframe in frame 73.

Make the scrollable text

In the resume scrollable layer, make a static multiline textfield and paste this text into it:

EXPERIENCE 1990–1994 Arbor Shoes, South Ridge, WA National Sales Manager • Increased sales from $50 million to $100 million. • Suggested new products that increased earnings by 23%. 1985–1990 Ferguson and Bardwell, Jackson, WA District Sales Manager • Increased regional sales from $25 million to $350 million. • Managed 250 sales representatives in 10 Western states. • Implemented training course for new recruits — speeding profitability. EDUCATION 1971–1975 South Ridge State University, South Ridge, WA • B.A., Business Administration and Computer Science. • Graduated summa cum laude. INTERESTS South Ridge Board of Directors, running, gardening, carpentry, computers.

and use the properties panel to apply bolding to the section headers.

You'll see that the textfield extends way below the bottom of the stage, so we need to mask it so that only the portion shows that we want to show. In the mask layer, draw a rectangle mask:

and right-click the layer and turn Mask on. Put a blank keyframe in 73. We need to do one final step to the mask in order to be able to access its properties with actionscript -- turn it into a movieclip and name it. Click the mask rectangle, hit F8 (Modify, Convert to Symbol), choose movieclip and symbol name mask. Then in the Properties panel, enter mask_mc as the mask's instance name.

Now we need to convert the textfield to a movieclip so it can be controlled. Unlock the scrollable and mask layers and hide the mask layer. Select the resume textfield and choose Modify, Convert to Symbol, movieclip, naming the symbol resumetext. You should now see a movieclip with symbol name resumetext in the library. We need to give the instance on stage an instance name in order to address it with actionscript: type resume_mc into the Instance name box in the Properties panel.

Put code on the buttons

Put this code onto both the up and down buttons:

on (press) {
   pressed = true;
}
on (release) {
   pressed = false;
}

to set a variable that will indicate whether the button is being pressed or not at any given time. This variable will be checked in each frame and used to trigger scrolling if necessary. To enable checking in each frame, we'll turn the button into a movieclip (ie, put it inside a movieclip) and then put code on that movieclip to enable scrolling.

Select the up button and convert it to a movieclip. With the new movieclip selected, open the actions panel (which should show Actions - MovieClip in the upper left) and paste in this code:

onClipEvent(load) {
   starttop = _parent.resume_mc._y;
}
onClipEvent(enterFrame) {
   if (pressed) {
      if (_parent.resume_mc._y < starttop ) {
         _parent.resume_mc._y += 5;
      }
   }
}

Repeat that step for the down button, converting it to a movieclip and putting this code on that movieclip:

onClipEvent(load) {
   endtop = _parent.resume_mc._y - _parent.resume_mc._height + _parent.mask_mc._height;
}
onClipEvent(enterFrame) {
   if (pressed) {
      if (_parent.resume_mc._y > endtop ) {
         _parent.resume_mc._y -= 5;
      }
   }
}

Control, Test Movie to make sure the buttons work as expected. To change the rate of scrolling, change the 5 to a higher number for faster scrolling, smaller for slower scrolling.