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
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

Making Bubble Wrap

  • A Flash drawing and simple scripting project
  • Written for flash MX although adaptable for 2004
  • You will need this file to complete this project


Drawing the Inflated bubble.

1 Open your movie file which you downloaded.

2. Click insert=> new symbol. Name the symbol "bubble" and set it to the behavior of a movie clip.

3. Open your bubble movie clip. Drag a copy of your basecircle onto the stage. Use the align panel set to stage, to align horizontal center and vertical center.


3. Lock layer 1. Click the new layer button on the bottom of the layers palette.


4. Click in frame 1 of Layer 2. Magnify your stage to 500% by typing in the magnification box. Select our Paint brush. Set your paint brush to white, #FFFFFF. Select your largest round brush. Pain an arc around the upper left part of the circle. Try to stay within the circle.

5. Use your arrow tool to highlight the fill you just painted. Click modify => shape => Soften Fill Edges. Set the following:

  • Distance: 5px
  • Steps: 5
  • Inset is selected.

6. Lock layer 2 and insert a new layer, layer 3.
 

7. Select your ellipse tool. Set the stroke to no stroke. Set the fill to radial gradient on the color mixer panel. Set the left color slider to white at 100% alpha. Move the left slider about 1.3 way to the right. Set the right color slider to white with 0% alpha.

9. Draw a circle that is about 2/3 the side of the basecircle.   Use the arrow tool to select and drag the new circle down and to the right of the original circle.

10. Add a new layer on top of layer 3, called layer 4. Drag a copy of the basecircle out on to the stage. Use the alignment tools to center it to stage, horizontally and vertically. Right click on the name layer 4, and select mask.

11. Insert a layer above layer 4 called layer 5, and rename it Buttons. Drag a copy of the basecircle onto the stage and center it horizontally and vertically. Select it on the stage. Click insert=> convert to symbol. Name the symbol bubblebutton and give it the behavior of a button.

12. Double click the button on the stage. Click to highlight the upframe of the button. Click-drag the frame to the hit frame without releasing your cursor.

Back on the bubble timeline, lock all layers. Turn the eye off on The buttons layer.

 

Drawing the deflated Button

13. In the bubble movie clip, click in frame 2 of the bottom layer, layer 1, and hit your F6 key to duplicate frame. Unlock layer 1.

14. Highlight the symbol on layer one and click modify=> break apart.

15. Use the move tool to highlight the line surrounding the circle. Change the color of the stroke to #CCCCCC. gray.

16. Click in the middle of the circle to highlight the fill. Set the fill on the color mixer to radial fill, let the left slider to gray #999999. Set the right slider to Gray #CCCCCC. Fill the circle from the center. Lock this layer

17. Click the button to add a layer. Make sure the magnification is about 500%. Click in frame 2 of the new layer 6. Hit F7 to insert a keyframe. Select the paint brush set to the middle size, round, brush. Set the fill color to white.  Draw radiating lines from center of the circle.

18. Click on frame 2 of the new layer to highlight all the file. Click modify=> shape=> soften fill edges. Set it it inset, 3 pixels, 3 steps. Lock this layer,

19. Click on the to layer in this bubble symbol. Add a layer, layer 7. Rename this layer Actions.

Scripting the bubble.

20. CLick in frame 1 of the Actions layer. Open the Actions panel and select Actions=> Movie control=> Stop. Click in frame 2 of the actions layer and hit F7. Add the actionscript Actions=> Movie control=> Stop.

21. Unlock the buttons layer and turn the eye on on it. Highlight the button so it is active. Open your action script panel. Click Actions=> Movie control=> goto. Set the goto action to gotoAndStop. Set the frame number to 2.

Adding Sound

22. Click on the buttons layer. Add a layer. Call this layer Sounds. Click in frame 2 of the sounds layer and hit F7 to insert a keyframe.

23. While frame 2 is highlighted, open the property inspector. Set the sound to the bubblewrappop sound and synch it as an event.

Constructing your bubble wrap movie.

24. Go back to frame 1. Drag out several copies of the bubble movie clip to the stage and test your movie. If you want to script a reset button for this movie, go to the next tutorial.



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