Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions Tools to help you create your site Free and shareware fonts to download Photographs to use in your projects Shop for your site needs Free Online classes REcommend this site to others Log in or edit your information when logged in Developingwebs Log Out Change My Account details and preferences
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

Creating a Scrolling Background

AKA a fred flintstone background

1. Create a new Movie that is

  • 550 pixel wide
  • 400 pixel high
  • skyblue
  • 12 frames per second


2. You will want to create your background to fit to your movie stage and so it will tile left to right. For this tutorial we will use a webding font for our background. Type on your stage the letter C on capital. Using the following settings on the properties inspector:

  • Static Text
  • Webdings
  • 450 pt
  • Black


3. Use your transform tool to stretch the building out so it spans the stage in height and width. You will need to stretch it wider and shrink it in height.

4. Highlight the symbol and click Modify=> breakapart(control B)


5. Highlight the fill on the stage and click modify=> convert to symbol or F8 key to make it a symbol. Give it the properties of a movie clip.
6. Click in Frame 60 of your layer 1 and hit F6 to insert a keyframe.

7. Highlight the symbol on Frame 60 and move to the left until it is just to the left and at the edge of the stage. Lock layer 1.

8. Insert a new layer called layer 2

9. Click on Layer 1 frame one. Right click and select copy frames.

10. Click on frame 1 of layer 2 and select paste frames.

11. Click on frame 60 of layer 2 and hit F6 to insert key frame.

12. Click back on frame 1 of layer 2 and use your move tool to move the contents of the unlocked frame to the right until it is just right and touching the edge of the stage.

13. Click in frame one of layer 2 and insert motion tween.

14. Unlock layer 1 and click in frame 1 of layer 1. Right click and insert motion tween.

15. Click Control=> preview movie. It should play well. But there is still one thing left to do. When the movie plays it will loop. When it loops, the last frame will be followed by the first frame which is identical, causing a "pause" in the scrolling. Click on the next to last frame(59) of layer 1. Hit F6 to insert keyframe. Click on frame 60 of layer 1 and right click and select remove frame.

Click on the next to last frame(59) of layer 2. Hit F6 to insert keyframe. Click on frame 60 of layer 2 and right click and select remove frame. Now your movie will play smooth.



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2010 All Rights Reserved
Privacy and Legal