Step 2: the scrolling window
In this section, you'll make the scroll window that
follows the mouse up and down the page and shows the images underneath.
Open a new document and make its width 500 and
height 500 (Modify / Movie).
Change the background color so it's not white. In the
Library, add a new movie clip symbol and name it scroller.
In the scroll symbol edit mode, use the rectangle shapes tool make a rectangle of any size. Open the Info Panel and make the width 295 and
the height 1000. It's this large because as it moves up and down,
it has to always cover the object underneath-except what shows through the
window. Select the rectangle and make the Fill white and remove the
Stroke. Zoom out if you have to.
Away from the rectangle, make another
rectangle with a black Fill and no Stroke. Make its width 290 and
height 100. Use the Sub-select Tool to reshape the figure into
something that looks like the little cut-out window.
Do this by moving the
small black handles on the perimeter of the image. When done, select both figures, and use the
Align Panel to
center them horizontally and vertically. Select the smaller and delete.
This should leave a small window where the background can be seen.
If you
like, place some text around the window like on the original site. Select
everything on the stage, group it, then center it. That's
our scroller.
The background image:
Go to the main movie. Name your one and only layer
background. Use file / Import to place the image
backgound.jpg ( commononkerr / webmastering) on to the stage.
You can use your own image if you
chose also. Convert
it to a symbol (Insert / Convert to
Symbol) and name it background.
Right Click on and select Edit.
The background image will be on Layer 1. On a
new layer (Layer 2) make a rectangle (width 290 and height
430) and
place it to the right of the background image. Use another smaller
rectangle, with a different color, to cut out various portions of the
larger rectangle. All you do is place the smaller over the bigger,
deselect and then move the smaller away. Do this in a few places. Don't
cut in too deep though; just around the edges.
Select the background image on Layer 1 and
Modify / Break Apart. This will allow us to cut it with the rectangle
image we just made on Layer 2. Copy the rectangle from Layer 2 and
Paste In Place onto Layer 1 (where the background image is).
Deselect the rectangle and then delete it. It should leave a large hole in
the background image. (hide Layer 2 to see)
The faded cutout: On top
of the background, there is a semi-transparent shape around the hole.
Still in the background symbol edit mode, make a
new layer (Layer 3). Select a
gray fill and use the
Pen Tool to make a polygon-like shape around the hole. Hold Shift
while you do this to constrain the angle
between the lines.
When done, copy the rectangle on Layer 2 again and
Past in Place in Layer 3. On Layer 3, deselect
the rectangle, then select it again and delete it. It will leave, like
before on Layer 1, a hole in the polygon shape.
Select what's left of the polygon shape and convert it into a symbol (coverimage) and use the
Effect Panel to reduce its Alpha properties to around 40%.
You can add a title and some text and any other detail to finish it off.
Go back on the main
timeline, and lock the background layer. |
