AS Reference  :  Notes Index  :  Resources  :  About/Contact  :  Downloads

Create a Sample Scene



In this sample, we'll use the drawing tools and import some graphics to create the scene above (and in later pages add some animation to it).

  1. In Flash, choose File, New, Flash Document to open a new movie. Save the movie as sheepscene.fla.
  2. Make sure properties panel is open, click anywhere on stage. Set stage size to 455x280, background to white (default), framerate to 12 fps (default) in the Properties panel.
  3. Open the library if it isn't already, using Window, Library (or mac:cmd-L, pc:ctrl-L) so you can see what gets added when
  4. Make a background layer, double-click the layer name, and change it to "background" (without quotes). Select rectangle tool with blue fill, no stroke and draw a rectangle to fill the stage. Use the properties panel to set the rectangle to 455 by 280, x=0, y=0 (exactly positioned over stage).
  5. Make an ocean layer above the background. Use the pencil tool with smoothing on to draw an ocean that extends off the stage on either side and covers all the bottom part of the stage. Use the paintbucket tool to fill with same color. (If we had put the ocean on the same layer as the background rectangle, we couldn't modify it without erasing bits of the sky behind it because of quirk 3 described here.
  6. To keep track of where the actual stage is, make a layer at the top of all the other layers and name it frame. with the rectangle tool, white stroke, no fill, draw a rectangle and use the properties panel to set it 455x280 at 0,0. This provides an outline of the actual stage as it will be displayed with the default publish settings. Your scene should look something like this now:

  7. Make a foreground hill layer above the ocean layer. With the line tool, draw out a green triangle on the left bottom part of the stage and fill with the same green. With the select tool selected, the triangle unselected, and the option key held down, mouse over an edge of the triangle until the cursor changes to a curve and then click and drag to add a new point along the edge. Repeat to add another new point. Then with the option key no longer held down, mouse over an edge and bend out the edges to form an s-shaped slope on the 'hill'. Use the transform tool to stretch or shrink the hill if needed. Use the subselect tool to move points if needed, as described near the bottom of this page.
  8. Add a layer below the foreground hill layer and call it background hill. Click the foreground hill to select it, click in frame 1 of the background hill layer and hit cmd-shift-v to paste a copy of the hill in exactly the same place. With the new hill selected, do Modify, Transform, Flip Horizontal. Change the new hill to a darker color and drag and/or resize it as desired.
  9. Select the paintbrush tool, with a small brush size and the wide squashed brush (from the options at the bottom of the tool bar). Set the fill color to something lighter than the ocean color and use the paintbrush to add highlights (waves) to the ocean in that layer, or in a layer above it if you want to be able to modify the highlights after drawing them.
  10. Add a sheep1 layer above the foreground hill layer. Do File, Import, Import to Stage and select sheep1.png (available via link at right under Files, or use any png you have with a transparent background).
  11. To create a shadow for the sheep, do the following: add a new layer under sheep1 called sheep1 shadow. In that layer, make a copy of the sheep offstage (cmd-c, cmd-v). Select the copy offstage and choose Modify, Bitmap, Trace Bitmap with options 4, 8, normal, normal to turn it into a vector graphic (see this page to see how each option affects the final graphic). Make the new vector a deep green shade. The stage should now look something like:

  12. Select the shadow and flip it vertically with Modify, Transform, Flip Vertical. To soften the shadow edges, do Modify, Shape, Soften Fill Edges (4pixels out, 4 steps). This creates 4 concentric bands of decreasing transparency around the shadow. With the transform tool, mouse over an edge of the shadow until a double-arrow icon appears. Use this to skew the shadow so it goes in a direction away from the sun. Squish the shadow vertically a bit. Select it and drag it under the sheep's feet so it looks like a shadow. Here's the step where the transform tool is being used to skew the shadow:

  13. Add another sheep layer (sheep2) so we can import a new sheep and animate this one. with the new layer selected, do File, Import, Import to Stage and choose sheep2.png.
  14. Select the newly imported sheep graphic and choose Modify, Bitmap, Trace Bitmap, with options 4, 8, normal, normal.
  15. In a layer under sheep2, add a layer and create a shadow for the second sheep as you did for the other one above.
  16. Add a sun layer and use the oval tool to draw a sun in a position that corresponds to the shadows.
  17. Save the movie (sheepscene.fla)
On the keyframes page, we'll animate the sheep's head and add sound.

Intro
Flash: What & How
Example Sites
Create
Draw, Edit Shapes
Gradients
More Drawing Tips
Import
A Sample
Animate
Frames, Keyframes
Motion Tweens
More Motion Tweens
Shape Tweens
Masks
Control
Stop/Replay
Movieclips Intro
Movieclip Reference
Site Structure 1
Slideshow Movieclip
Contact Form
Scroll Resume
Preloader
Site Structure 2
Publish
Display Options
Player Detection
Optimize
AS 2.0 Basics
Intro to Syntax
Playhead Commands
Playhead Cmds 2
Coded Tween
onEnterFrame
Intro to Classes
Declare/Assign
Comments, Trace
Simple Data Types
Arrays & Objects
Code Blocks
Operators
Beyond Buttons
Code Structure
Toggle Controls
Group of Buttons
Drag and Hit
Distort Magnifier
Scroll Text
Bee Game
Dart Shooter
Sound Control
Easing Slider
Easing Slider 2
Components Intro
Timers & Delays
Dynamic Content
Intro
Drawing API
Create Text
Attach Movieclips
Easing Slider 3
Easing Slider 4
Load jpg/swf
Sliding Viewer
Preload swf
XML
Easing Slider 5
Server Comm
LoadVars (w/ PHP)
AS - PHP Lookup
Text File
Database 1:LoadVars
Database 2:Remoting
Read from directory
AS 2.0 Classes
Intro
Math
Key
Date
Color
EventDispatcher
New Samples
Pie Chart
Event-model Emailer
Tween Sequence
Fuse Sequence
SVG in Flash
Bitmap Topo
SWF as Data Holder
Two-level Menu
Yahoo! Flash Maps
Class-based Game
ASTB Samples
Disclaimer
3D Outlines
Bounce Collide
Address Book
Save Drawings
Home  :  Notes Index  :  Resources  :  About/Contact  :  Downloads