P4- Unit 31

How to use Flash

Contents

What Is Flash?. 1

What is good work practice?. 1

Graphics. 2

Layers. 2

Symbols. 3

Frame by frame animation. 3

Tweening. 3

Nested Animations. 4

Inverse Kinematics for Articulated Motion. 5

Masking. 6

Interactivity through use of ActionScript 3.0. 7

What Is Flash?

Adobe Flash is a multimedia and software program that is used to create, graphics, animation and games. These can be viewed and executed in Adobe Flash Player. Flash is also the system that supports streaming video on sites like YouTube. Flash is most commonly used within browsers to play games and watch medium such as YouTube videos. It can also be used on mobile devices.

What is good work practice?

Good work practice relates to the organisation of Layers in Flash. When using layers in Flash, it is always good to name them appropriately, for example, if you are creating a man in Flash and you want a new layer for an Arm, then you can rename the layer as Arm 1. It is good to also put layers into a folder. By having folders on your work, it will allow any other user to understand what layers are where and it will also help you to understand.

Graphics

This is the coffee cup. I have created this to represent a 3D looking image. I have done this by creating several aspects to this cup. The first is the front of the cup. This was done by creating a shape with the rectangle tool. I then selected the free transform tool. This allows you to change the size of the shape. I made it thinner on both sides to give it the look of a cup. The next thing to do is add a circle on top of the shape you have just created. This will be for the coffee inside of the cup. Once you have drawn it, use the free transform tool to get rid of all the overhanging edges. It should then look like there is something inside of the cup.

Layers

A layer is a different level when creating digital media. They are in theory different steps piled on top of each other to create a finished product. It is good to have layers for every part of the work you do. All layers can be re arranged so that the end product is different to what you first thought it might be. You can use layers to give freedom when editing. If you created a whole piece of work on one layer and you done something wrong, it would make it hard to delete the errors.

This is the layer area for Flash. It is good to select new layers for each individual objects that you add to the stage. To add a new layer, press the new layer button at the bottom left.

Once you have pressed the button, it will create a new layer. You can rename them by double clicking on them.

Layers can be hidden if you want to work on certain layers at a time. On the two dots after each layer name, the first one is to hide the layer and the second is to lock. Locking the layers while working on others is good so that nothing is mistakenly moved while working.

Symbols

A symbol is any object stored in your flash library. To create a symbol in Flash, go to ‘Insert> New Symbol. There are three different types of symbols, Graphic, Button and Movie clip symbol. Make sure you pick the right symbol that you want to use from the drop down list. Once you have given it a name, press Ok and a new symbol will be created. Once you have a symbol you can then edit so it is ready to insert into your animation. Symbols can be used as many times as you want during your animation and they are also very low in memory.

Frame by frame animation

Frame by frame animation changes the contents of the stage in each frame of the layer. When an image changes slightly in every frame, it will look like it is an animation when you preview the animation. To do this start a new blank animation and import all the media you want to use. Make the first frame a keyframe by pressing F6

Tweening

Tweening is an easier method of frame by frame animation. It allows an object to be brought in from anywhere around the page in one single motion. To use motion tween, you will have to make the object you want to use into a symbol. This will be done when you right click the object and select ‘Create Motion Tween’. Once you have created a motion tween, drag the object to your desired starting location. Once you have done this, create a key frame on the next frame along. Then drag the object down to your desired finishing location. This should then create your motion tween. If you drag the pinhead across the frames, you should see where the object moves.

 

Nested Animations

1.    In the Library panel, double-click the alien movie clip symbol icon.

2.    Choose the Selection tool then right-click on the alien’s right arm and choose Create Motion Tween.

3.    Choose the Free Transform tool then drag the corner rotation control points to rotate the arm upward to the alien’s shoulder height.

4.    Move the red playhead back to frame 1 and create a motion tween for the alien’s other arm. Right-click on the left arm and choose Create Motion Tween.

5.    Choose the Free Transform tool and drag the corner rotation control points to rotate the arm upward to the alien’s shoulder height.

6.    Select the last frame in all the other layers and insert frames (F5) so that the head, body, and feet remain on the stage for the same amount of time as the moving arms.

7.    Exit symbol-editing mode by clicking the Scene 1 button at the top-left of the Stage and if you preview what you have just created the arms should move up and down.

Use of Motion Editor

The motion editor panel is used for in depth editing capabilities for all properties of a motion tween. To get to the motion editor, go to Window> Motion Editor.

Change property values

1.       Next to the colour effect property, click on the plus icon and the press alpha.

2.       Once you have done this, select the alpha amount.

3.       Click on the first keyframe and drag it down to 0%.

4.       The alien then becomes transparent from frame 1

Inverse Kinematics for Articulated Motion

Inverse kinematics are good to incorporate into an animation as it gives an added effect to what is happening in the scene. Inverse Kinematics can be used in either author time or runtime. To incorporate inverse kinematics into your animation you will have to use the bone tool. This can be selected from the toolbar on the left hand side. The object has to be a symbol in order for the bone tool to work. You can make it a symbol by clicking the Modify Tab> Convert to symbol. You will have to choose a graphic symbol. Once you have done this, you can use the bone tool to in theory create limbs on an object. Just click the start point and drag to where you want it to end and you will have created a limb which you will be able to move if your animation is in runtime.

Masking

Masking is a great thing to do in Flash. Masking involves using a shape to hide or reveal parts of a piece of media in flash.

Create a new layer called mask. Double click on the icon for the layer and choose masked, as shown above. This will allow your flash image to be masked.

Create a shape on either the left or right hand side of the media. This should cover the whole of the stage. Right click on this shape and press create a motion tween. Once you have created the motion tween. Click on the free transform tool, and hold ALT while you drag the side of the shape over the flash.

Once you have dragged the shape over the stage, create a new layer and call it action. Go to frame 24 on the new layer and press F6. This will create a key frame. Once you have created the key frame, press F9 and it will bring up the ActionScript 3.0 window. This will allow the mask to stop when it has moved across the page. Type in ‘stop();’ to make the mask stop. Once you have done this, press Ctrl+Enter to preview the flash, and the mask should move across the page.

Interactivity through use of ActionScript 3.0

Flash can be used to create an interactive interface. To start creating buttons for the interface, go to Insert> New Symbol (alternatively press Ctrl+F8). Once the window comes up insert a name for your button.

Make sure you select Button from the drop down list. This is so it will create a button for interface.

Once you have been launched into the edit window, go to layer 1 and press hit then F5. This will create a blank frame. Drag your thumbnail onto the edit screen to create the Up state. Once you have dragged your thumbnail into position, create a new layer and press the Down state then F6.

Once you have done this, you can drag the preview on top of the thumbnail.

Once you have done the preview, create a new layer for the Down State. Press F6 for the Down State. This will allow you to put the click sound onto the button.

Once you have done this exit the editor and the button will be created.