- Home
- Tutorials
- Flash
- Intermediate
- Relative Scrolling Content and Navigation
Relative Scrolling Content and Navigation

Page 3 of 5
Next we will add a Mask to stop undesired content showing through. Masking is like putting windows in a wall: the areas where you put a window, you will see what's beyond the wall, but where you lay brick, you will see nothing but brick. Select your Frame layer, at frame 1. Your rectangular frame will automatically become selected. Copy your frame (Ctrl C, or Edit > Copy). Now select your Mask layer at keyframe 1 and use the Paste In Place function (Ctrl Shift V or Edit > Paste In Place). You should end up with a copy of your frame in the Mask layer, in the exact same position. Now use the flood fill (paint bucket) tool and fill the frame on the Mask layer with a colour of your choice. I always use pink because it stands out as a colour I would never use for anything except a mask! Now, because the Mask layer is above the Bar layer, the mask shape you just filled will obscure your content. Right-click the Mask layer and select 'Mask' from the menu. You should notice a few changes. First, you Mask layer's icon will change. Second, the Bar layer should be indented and its icon will also change. Also notice that, if you've done it right, you will ONLY be able to see the content on the Bar layer which falls within the bounds of the mask you just created. Just like our window example.
Your Bar layer will have more frames than your other layers currently. We want to make all the layers have an equal number of frames now, before we test our layout. If, for example, your Bar layer goes all the way to frame 25 (5 frames for 5 scenes), select frame 25 in the Mask layer, right click and select 'Insert Frame' (or press F5). Do this for the Frame layer also. Note that if the Mask layer has a little lock symbol on it, you will need to click this to unlock the layer before you can edit it, (masked layers are generally locked). You should now have 3 layers which have the same number of frames, ignore the Script layer for the moment. You will also notice that if you click a random frame in your Mask layer, say frame 10, the content visible in the Bar layer will be different. Now test your clip again by pressing Enter. You should see your content scrolling right to left across the screen as it did before, but this time you should ONLY be able to see that content which falls within the bounds of the Mask. If this isn't what you see, you've made a mistake. Retrace your steps and find where you went wrong.
Next, select all frames in the Bar layer by clicking the layer once, (unlock the layer if it's locked). Now right click on any of the selected frames and select 'Copy Frames'. Click the very next frame after the current last frame in the Bar layer, then right click and select Paste Frames. You should see the frames you copied duplicated where you right clicked. Now select all the frames you just pasted (click the first frame, then hold shift and click the last), right click and select Reverse Frames. Select frame 1 in the Bar layer again and press enter. You should see your content scroll left to right as it did before, then scroll back, from right to left. We're getting close now!
You may have noticed that the scroll halts at the end before it scrolls back: this is because we have two frames displaying the same content. We need to fix this before we continue. Once more select the frame where you just pasted and reversed your frames, (it should show your last content item in the centre of the stage). Right-click this frame and select 'Clear Keyframe' (or Shift F6). You will see there is now a break in your motion tween. To patch this up, right click where the break begins (where the blue frames end and the grey begin), and select 'Create Motion Tween'. You should once more have all blue frames in the Bar layer. Now press Enter once more and you should see a seamless transition from scene 1 to 5 (or your last) and back again. Don't forget to extend the other layers so they have as many frames as your Bar layer! (Remember? Select the equivalent last frame and press F5).
You should have a timeline that looks something like this now (ignore the Script layer for the moment):

OK! We've finished all the fiddly bits now, it's time to move on to the scripting!


