•
Two-DimensionalDesign
 
      Part Two Part One •
  •
Exercise—Value Analysis/Gradient/Flash Animation  
    •   Objectives:    
   

This exercise will promote the understanding of the principle of visual variety for sustaining interest in a 2-dimensional design through the examination of the complex light and dark relationships in a well balanced black and white photograph.
      The two parts of the project will introduce various aspects of digital design software. Photoshop techniques will be practiced in the first part. The second part will introduce Flash animation software.
      Final output for both parts will be presented using Dreamweaver Web design software. Each student will publish the project on her/his Two-Dimensional Design Portfolio Website.
             
    •
Procedure: part TWO    
        Flash animation software may seem a bit complex and magical at first. But after you work with it a while it will become mystical and confounding. So have fun...    
        1. Start with resizing your black and white selfportrait in photoshop. Go to the image menu at the top and >image size. Try to make it even inches, like 5 x 7 or 5 x 6. Then save it as a jpeg.  
        2. Open the Flash program. Close the red box window or click the never open this window again box on the bottom left and then close it. Open a new document, >file, >new and then make sure the GENERAL tab is selected at the top and choose new document. Okay.    
        3. Now go to >file, >import to library. Locate the photo and import it. If the library window is not open on the right side, go to >window, >library to make it appear. The picture name should show up in the library list.    
        4. Next, adjust the stage size to be twice that of the photo. Go to >modify, >document. Set the increments to inches then type in the size, width and height. If the photo is 5 X 7 inches make the width 10.5 and the heighth 7 inches.    
        5. Put a guide grid on the stage. Go to >view, >grid, >edit grid. Make a half inch or one inch grid visible. If you select -snap to grid- it may help with lining things up some times (but maybe not always!?!)    
        6. Place your photo in the stage, on the left side. Go to the library, select the name of your photo, it shows up at the top of the window. Click and drag your library photo to the stage and place it where you want it. Notice in the timeline at the top that you are in layer one and there is a black dot (keyframe) in the first frame. Double click on the name of layer one and retype a new name. Call it "base." On the base layer click in frame 60 to select it. Then hold down the mouse in frame 60 and a pop up menu appears. Drag down to >insert keyframe. That places a black dot in frame 60 of the base layer. Now go to the left side of base layer and click where the lock is to lock base layer.    
        7. Add layer two by clicking on the small plus sign at the bottom of the Layers/animation window. If you hold the mouse over it it will say >insert layer. Notice that the layer is selected or highlighted and that it is 60 frames long. That is the layer you are working in now. Whenever a layer is selected whatever you add to the stage will be on that layer. Be careful of that. If you put something on a layer that you didn't want on that layer, or for that matter, if you do anything that was a mistake, it is best to undo >apple/z, rather than trying to fix it. Flash remembers everything and mistakes, unless they are undid, will come back to haunt you.    
        8. Place a copy of your photo on top of the base layer image but in layer two. Go to the library and select your photo, then drag it to the stage and line it up over the base layer photo so that they are exactly lined up, lined up style, in a line sort of on top, exactly.    
        9. Now convert your photo into an image that can be divided into the grid squares. With the photo on layer two selected (use the black arrow from the top of the tool box), go to the top menu >modify, >break apart. This puts a dot pattern on the photo indicating that it is a pixilated image in Flash and is selected.    
        10. Draw the dividing grid on top of the layer two photo. Go to the rectangle tool >fourth tool down on the right of the tool box. Select it and then set the color in the bottom of the tool box. There is a selection for the stroke or outline and one for the fill color. Choose a bright color for the stroke by clicking on the stroke area. Then click on the fill and make it none by selecting the red strike-through box at the top right side of the color swatch popup window. Now draw rectangle so that the parallel lines line up with the grid. Drag the rectangles well off of the picture so that the ends do not line up with the edge of the photo. Then do the opposite lines of the grid until all the grid lines are in place. This is all on layer two. Test the selection of individual squares by clicking, with the black arrow, on one square. Just that one square should have dots in it indicating that it is selected.    
        11. If you haven't yet, save this flash document. Name it flashphoto.fla and save it into your 2d work folder.    
        12. Now we are ready to create more layers and to animate the squares to make the gradient. Take a deep breath. Perhaps get a bite to eat.    
        13. Make several layers, perhaps ten. You will eventually need a layer for each animated square. We will do one square at a time. Click on the add layer button at the bottom left of the layer window. Each new layer should automatically be 60 frames wide with a white circle in the first frame.    
        14. Click back into layer two in the first frame to select the photo grid. Deselect by clicking somewhere off of the image. Then select one square to place on the gradient or right side of the stage. Cut the square out by going to >edit at the top menu, then >cut. I think it is best to make the base layer invisible so you can tell that the square has been cut out. Click on base layer and then click the eye button on the selected base layer. The place where the square was should then be white.    
        15. Now click on the first frame of layer three so that you can paste the square onto that frame in that layer. Then go to top menu >edit, >paste in place. This puts the square back but does so on the selected layer three. Now click on frame one of layer three so that only it is selected. Hold down the mouse so that the drop down menu appears and choose >create motion tween. A dotted line should appear across the frames of layer three.    
        16. Select frame 20 of layer three and hold down the mouse for the drop down menu and select >insert keyframe. The dotted line should become a solid line making the layer ready for animation. Also notice that the square in layer three is selected with an outline and a cirle anchor in the center.
   
        17. With the keyframe in frame 20 of layer three selected, move the square from the left side to its new location in the right side/gradient grid. Once it is placed you can test the animation by dragging the "scubber" ( the red box and line at the top of the animation window) back and forth to watch the square move on its path.    
        17a. To add the reverse animation and a little space/time around the animation do the following: click on frame 30 of the animated square layer you are working in, hold down and insert a keyframe. Then select frame one of that layer, then hold down the shift key while selecting frame 20. This selects frames one through 20. Click down and hold on any of the selected frames so that the drop down menu appears. Select copy frames. Then select frame 31 and hold down to select paste frames from the drop down menu. Select those new frames (31 to 51 approximately) by holding down the shift key. Then click and hold down to select Reverse frames from the drop down menu. You may have to move the end key frame back to 51 by clicking in and dragging to place. Then add a keyframe in frame 60 to provide some space/time where the photo is held without any animation. Test the animation by holding down the apple key and the return key to create a temporary animated movie of the scene.    
             
        18. To animate another square, go back to layer two and select the first keyframe. Deselect the photo/grid, then select one new square. Go to edit menu at the top and choose >cut. Then select the first frame of layer four, go back to edit menu at the top and choose >paste in place. Then click down on that keyframe so that the drop down menu appears and choose >create motion tween. Go to the frame 20 of layer four and click down for the drop down menu and choose >insert keyframe. Move the new square to its location on the gradient grid side. Test the animation with the scrubber. Then repeat the reverse animation describe in step 17a.    
        19. Continue with this process until all your squares are animated. Remember to save often just in case Flash decides to crash on you.    
        20. If you want to see what the actual flash movie looks like, any where in this process, you can publish the temporary file simply by holding down the apple key and hitting the return key. The movie will appear and repeat until you close the window.