MU120 Digital Media Design and Development

Lab Practical 4 Design principles & beginning animation

Apply the C.R.A.P. Design principles to screen design

Open a new Flash document with a stage size of 800 x 500 pixels (approx Golden Ratio).(Hint: Look in the Properties panel)

Turn the Rulers on and create Guides so that there is a margin of 50 pixels all round and a grid of 2 rows and 4 columns in this landscape arrangement. You should end up with 8 main cells into which you can put design elements.

Take your version 1 Dragons map and experiment with imposing a Golden Ratio designers’ grid (revise from week 3). To copy all the visible elements of a Flash movie, you will need to Edit – Select All; Edit – Copy; move to the new movie and Edit – Paste in Place

Original map 4:3 aspect ratio ie: 800 x 600

Revised map 8:5 aspect ratio ie: 800 x 500

Nina Reeves, Module Tutor

Green guides

MU120 Digital Media Design and Development

Think about the placing of all the text elements on the map. What have you lined then up with to use the Alignment Principle? Think about the spacing for the Proximity principle. Do they stand out sufficiently using the Contrast Principle? Have you used colour to illustrate the Repetition Principle?

Screen grab your map and annotate in Word to show how you have used the Principles.

Introduction to animation

Create a new movie.Draw a ball with a fill colour but no stroke.

Move to Frame 24Right Mouse Button (RMB) Choose Insert Keyframe.

Ensure the ball is selected.Use Arrow keys to move the ball to the bottom of the screen.

Use the transform tool to squash the ball slightly.

Nina Reeves, Module Tutor

MU120 Digital Media Design and Development

Move to Frame 1Change the Tween box to sayShape.Drag the Play head along the time line to see the effect.

Move to Frame 24

Work out how you can make the ball go back up to the top and unsquash itself on the way! Use CTRL Enter to test

Move to Frame 1Change the Ease property to Ease In – 60

Move to Frame 24Change the Ease property to Ease Out + 60

To see this more clearly, turn on Onion skinning which enables you to see all the intermediate stages so the left hand animation shown here starts closer together and gets further apart and vice versa on the right hand side.

This should have the effect of making the animation more realistic.

Try changing the Movie Frame rate to 24 FPS.

Better?

Nina Reeves, Module Tutor

MU120 Digital Media Design and Development

Motion TweenThese can only be done on a Movie clip. Draw the object that you want to animate, choose Modify – Convert to Symbol and choose movieclip. Delete the Layer containing the object.

Create a new layerMove to Frame 1Drag an instance of the object from the Library to the stage.

Move to Frame 24RMB Insert KeyframeChange the position of the instance.

Move to Frame 1Change the Tween box to say Motion.The onion skinning here shows the animation of the motion.

Dots mean that you have not made a Movieclip!

Animation on the timeline is often a matter of tweaking the number of frames over which the animation appears. In MU210 you will find that there are smarter ways using Actionscript to do this kind of thing but for the moment we will stick with timeline animation.

Self study time (5 hrs) Check out the Flash background materials at http://mmedia.glos.ac.uk/mu120/F1/F1_menu.htm You should have covered all this by now.

What is the difference between Insert a Keyframe and Insert a Blank Keyframe?

The material on animation is very detailed and will take us several weeks to work through so take a look at http://mmedia.glos.ac.uk/mu120/F3/menu.htm

One of the Portfolio items is to produce an animated character and you may like to think how the mood of your character could change depending on whether the user has done something. Take a look at the animations on this

Nina Reeves, Module Tutor

MU120 Digital Media Design and Development

page to give you some ideas. http://mmedia.glos.ac.uk/mu120/F3/Lec3_10.htm

Nina Reeves, Module Tutor