California Career and Technical Education Standards

• AME.A.A2.2 Know the component steps and skills required to design, edit, and produce a prod...
• AME.A.A2.3 Use technology to create a variety of audio, visual, written, and electronic pro...
• AME.A.A2.4 Know the features and uses of current and emerging technology related to computi...

California Academic Content Standards (Reinforced)

• ELA.9-10.R.CAGT.2.6 Demonstrate use of sophisticated learning tools by following technical direction...2

• Flash is fun! - Hooks / Set

  Before launching into Pyramid, REVIEW what students should already know how to do in Flash:
  -- Create a new document and new layers
  -- Take an image from the internet and add it to Library
  -- Familiarity with basic drawing tools
  -- Create new keyframes
  -- Access the actions scripting window
  Ask students to identify/describe each of the above processes, or demo them on the SmartBoard, or however you wish to do the review.
• What we will do - Demo / Modeling

  Show students a sample finished Pyramid, and note what they will learn and what they will know and be able to do at the end of the project:
  -- they will know how to create buttons and script them in order to create an interactive animation
  -- they will know how to create “paths” to “cut scenes” which will be helpful for future projects
  -- assessment will be on the finished project, on the overall design and buttons that work

  • Finished Pyramid SWF [ View Flash ] [ Download ] For demo purposes
  • Pyramid Project PDF [ Download ] For handing out
  • Pyramid Project Word doc [ Download ] For you to modify if needed
• Project Steps 1-3 - Demo / Modeling

  (See the attached PDF of this project, which can be duplicated as a handout for your students. A Word doc is also attached that you can modify to suit your version of Flash or other animation application.)

  The Problem
  Your local museum has asked you to make an interactive animation of the Great Pyramid of Egypt for their web site.  The animation should have a cross section of the pyramid revealing passages and rooms, it should provide close up views of all the chambers, and be interactive and self-explanatory. This animation should be simple enough for anyone to use. Perhaps Flash CS4 can help!

  Creating a Flash Document
  1.            Open Flash CS4  
  You should see a window called untitled-1.  This is where you build the project.

  2.            Go to FILE --> SAVE AS
  You will see a save dialog box.  In the text field, type in "yourname_pyramid.fla”. 
  Then, select your project folder and click SAVE.

  3.             Work in Essentials layout. If your layout looks different from the one shown, go to the options in the top right of your Flash window and toggle to “Reset Essentials”.  This provides you will all of the tools you will need to make your project. On the right side of the screen, there is a bar called Tools. To the left is the Properties Window, with a tab for the Library—you will need to see both of these.

  • Essentials Workspace [ View Image ] [ Download Original ] This is what your workspace should look like
• Project Steps - Drawing Tools - Demo / Modeling

  Experiment with the different tools
  Learn about the different drawing tools in flash.

  The Free Transform Tool
  This tool can rotate and skew a shape. You can also grab the edge of a shape and warp it, or a line and curve it.

  The Text Tool
  The text tool is used to write words or dialogue in your flash project. Just click on where you want to write to create a box, and type your text in. You can change font, centering, etc. from the properties toolbar.

  The Line Tool
  The Line tool is used to draw a straight line. You can adjust the width of the line and the color on the properties toolbar. The line you make can then be bent using the black arrow tool.

  The Rectangle/Oval Tool
  Click and hold to select either rectangle or oval shape. Then click and drag on your frame to create the shape you want. Change color in the properties  toolbar; stroke can be turned on or off, depending if you want an outline to your shape or not.

  The Pencil Tool
  The pencil tool draws in the stroke color you have selected. The stroke color is the item in the properties section with a pencil next to it.  Experiment with the different pencil tool options. Notice that the line thickness and color can be changed using the properties toolbar.

  The Brush Tool
  The brush tool works much like the pencil tool, but there are several differences. The Paintbrush tool draws with the fill color (which can be changed either on the toolbar or on the Properties bar. The size of the brush can be adjusted on the toolbar in the options section.

  The Eraser Tool
  This tool is used to erase things, as the name would suggest. It will only erase on the layer that you are on, and it won't work if the layer is locked. You can also access the eraser tool by pressing  e. If you want to UNDO the last thing you did, you can also do CommandàZ.

  That’s just a few of them!  Experiment!  Flash is fun to play with!

  • Toolbar [ View Image ] [ Download Original ] Flash CS4 tools
• Project Steps - Drawing Frame 1 - Guided Practice

  1.            Name the first layer

  Double click on the layer named "Layer 1" on the timeline to rename it. Type in the name "Content" .

  2.            Create the background layer

  Click on the "New Layer" button on the bottom left corner of the timeline and rename the new layer to “Background".

  3.            Copy and paste pyramid picture to background layer

  Search the net for images of "pyramid", select one, and drag the original to your desktop (not the thumbprint). OR- use pyramid_1.jpg in the project documents. In Flash, go to File à Import à Library, and select the pyramid image. Now go back in your flash movie and paste the image onto your background layer, in Frame 1.

  4.            Set picture location in frame

  Select the pyramid picture in the background layer. Now, set the X and Y properties both to 0 in the Properties toolbar. The section you need to change is highlighted with a red arrow. This puts the image in the center of the frame.

  5.            Draw the title on the content layer

  Now, select the content layer. Use the text tool to write the title "The Great Pyramid", and underneath that "An Interactive Tour".

  6.            Making the start button

  Using the circle tool, make an oval of any color on the content layer of your project, somewhere in the lower part of the screen. Inside the oval, use the text tool to write “Start”. This will be the button that the user will click to start the tour. Now, select the button with the black arrow tool; hold the Shift key and select the text box; click ControlàG to Group the oval and text.
  Then Control-Click on the oval and select Convert to Symbol from the dropdown menu. A dialogue box will appear prompting you to select the type of symbol and to enter the symbol name. Choose Button for the type of symbol and enter the name “Start” in the text field, then press ok.

  7.            Linking the start button

  Now you will script the button to link it to the next frame. Control + Click on the button and select Actions in the menu. This opens the Actionscript window. This is where you will tell Flash what to do when the user presses the button.

  (NOTE: depending on the version of Flash you’re using, you may get the message “Current selection cannot have actions applied to it.” If that happens, WHILE YOU HAVE THAT MESSAGE SHOWING, go to File à Publish Settings. Click on Flash in the trio of options, and then in that window toggle to Action Script 2.0. This will allow for your action scripting.)

  Type the following script in the Actions window for your button.

  1.         on (release) {
  2.                  gotoAndStop (2)
  3.         }

  This tells Flash to go to and stop on the 2nd frame of your Flash movie as soon as the user clicks on and releases the button.

  8.            Scripting the first frame

  There is only one more step before you can start on the second frame. Select the first Content layer frame in the timeline and open Actions by clicking on the small arrow in a circle in the top of the Properties window. Type this script in the Actions window.

  1.         stop();

  You can close the Actions window for now. Congratulations, you have finished the first frame of your project!  Be sure to SAVE your work so far!

  • Bitmap X and Y properties [ View Image ] [ Download Original ]
  • pyramid image [ View Image ] [ Download Original ]
  • Convert to Symbol [ View Image ] [ Download Original ]
• Project Steps - Drawing Frames 2-6 - Guided Practice

  1.            Making new background and content frames

  The first step is to make the new keyframes for both layers. Select Frame 2 on each layer by clicking and dragging so that they’re both highlighted. Go to Insert à Timeline à Keyframe. You will see that there is now another frame in your timeline, in both layers.

  2.            Inserting a new background image

  Open the file named "pyramid_2.jpg" and copy the image. Add it to your Library and paste it in Frame 2 of your Background layer. This image is the same as the first image, only slightly zoomed in. As before, put the image in the center of your project by setting the x and y properties of the picture both to 0. If it’s too small for the stage, set the Width to 550 and Height to 400.

  3.            Draw the chambers of the pyramid

  In Frame 2 of the Content Layer, select and delete the text elements and button. Using the drawing tools explained earlier, draw these chambers on the Content layer of the pyramid.

  4.            Write the names of the different chambers

  Now, using the text tool and the rectangle tool, write the names of the chambers as in this example. HINT: create the text first, then create the rectangles to match.

  5.            Make the names into button symbols

  Select each of the rectangles & names and group them, then convert each to button symbols. Converting them to symbols will allow you to add actions to the buttons later.

  6.            Link each of the buttons to a frame

  Using the same script that you used for the start button earlier set the buttons to go to the following frames. Frame 3 for the King's Chamber, frame 4 for the Grand Gallery, frame 5 for the Queen's Chamber, and frame 6 for the Subterranean Chamber.

  7.            Make a new frame

  Now, make a new blank frame by clicking and selecting Frame 2 on both layers in the timeline and pressing F7 on your keyboard OR go to Insert-- Timeline-- Blank Keyframe. This is where you will make a zoomed in version of each room. In this new frame, draw a larger version of the king's chamber in the content layer, and make a large, colored rectangle on the background layer. The third frame should look like this. Then, draw a back arrow on the background layer and convert it into a button symbol. Script the Back button to return to the 2nd frame.

  8.            Making the Other Rooms

  Now, click on the last frame of the content layer and press F7 (or Insert-- Timeline-- Blank Keyframe) 3 times to create new keyframes for each of the remaining rooms. This should also extend your Background layer automatically with the colored rectangle you used for Frame 3. (If it didn’t, go to Frame 3 of the Background layer and press F5 three times)  Notice that it does not actually make 3 new keyframes, instead, it expands the existing keyframe. Now, just make enlarged versions of each of the rooms in this order: Grand Gallery, Queen's Chamber, and Subterranean Chamber. Don’t forget to add Back buttons in each new frame, to return to Frame 2. You can do this easily by going to Frame 2, selecting your Back button and make a copy (EditàCopy). Then go to the new frame and do Edit--Paste in Place.

  9.            Congratulations, You Are Done!

  Congratulations, you have completed this tutorial. You now have a basic understanding of Actionscripting buttons and navigating from one frame to another. Press Control-- Test Movie to view your flash movie. Be sure to SAVE your finished Pyramid Tour!

  • Make a new frame [ View Image ] [ Download Original ]
  • pyramid zoomed in image [ View Image ] [ Download Original ]
  • Chambers drawing [ View Image ] [ Download Original ]
  • Kings Chamber [ View Image ] [ Download Original ]
  • Finished Pyramid FLA [ Download ] You can use this to observe how the project is constructed & for demo
  • Finished Pyramid SWF [ View Flash ] [ Download ] Use this to demo the buttons and how they should work