Ana səhifə

Table of content Introduction 1 Flash Editor 1


Yüklə 1.69 Mb.
tarix25.06.2016
ölçüsü1.69 Mb.
Macromedia

Flash 8


Module A

Introduction to Flash

http://www.cs.wisc.edu/arch/www/cartoon.jpg

Compiled by I Aldum

Version 1.0

Date: November 2006


Filename:

Table of content



Introduction 1

Flash Editor 1

Timeline 2

Stage 3

Work area 3



Properties and actions 3

The toolbox 4

General setting to work easier 6

Activity 1: Creating a simple text movie in Flash 7

Activity 2: Creating a simple text movie in Flash 8

Activity 3: Paint Fills 10

Activity 4: Draw and modify shapes 10

Transform tool 11

Connecting objects with snap to object 11

Activity 5: Using the pencil tool 11

Activity 6: Using the sub selection tool and the selection tool to delete lines in a drawing 12

Activity 7: Traffic Light 13



I cannot draw, what can I do? 13

Resources Used 13


Symbols and notation used in this document:

Things you should try to remember


Introduction


Flash provides everything you need to create and deliver rich web content and powerful applications.
Flash is an authoring tool that designers and developers use to create presentations, applications, and other content that enables user interaction. Flash projects can include simple animations, video content, complex presentations, applications, and everything in between. In general, individual pieces of content made with Flash are called applications, even though they might only be a basic animation. You can make media-rich Flash applications by including pictures, sound, video, and special effects.
Flash is extremely well suited to creating content for delivery over the Internet, because its files are very small.
Flash achieves this through its extensive use of vector graphics. Vector graphics require significantly less memory and storage space than bitmap graphics because they are represented by mathematical formulas instead of large data sets. Bitmap graphics are larger because each individual pixel in the image requires a separate piece of data to represent it.
In this module you will:

  • get familiar with basic Flash functionality,

  • understand the toolbox, and

  • create a basic Flash movie.

Flash Editor


When you author content in Flash, you work in a Flash document file. Flash documents have the file extension .fla (FLA). A Flash document has four main parts:

  1. Timeline,

  2. Work Area

  3. Stage

  4. Properties and Actions


Timeline

Work Area

Stage

Properties and Actions

Timeline


The Timeline is like a spreadsheet that progresses from left to right, with the columns representing time. The Timeline organizes and controls a document's content over time in layers and frames. Like films, Flash documents divide lengths of time into frames. The timeline consists of scenes, (which we will not discuss now), layers, and frames.

Time frames

Stage size




Timeline header

Layer




Add a layer



Add a

motion guide



Add a folder


The rows represent layers, and the layers are like multiple film strips stacked on top of one another, each containing a different image that appears on the Stage.
Layers are listed in a column on the left side of the Timeline. To change the name of a layer you double click on the layer name, the name turns “blue” and you type in the new layer name. The more descriptive the names are the easier it is to find a specific layer at a later stage. Frames contained in each layer appear in a row to the right of the layer name. The Timeline header at the top of the Timeline indicates frame numbers.
You always work on one layer at a time; you cannot work on more than one layer at a time. You can draw and edit objects on one layer without affecting objects on another layer. Where there is nothing on a layer, you can see through it to the layers below.
You can also organize and manage layers by creating layer folders and placing layers in them. You can expand or collapse layer folders in the Timeline without affecting what you see on the Stage. It's a good idea to use separate layers or folders for sound files, ActionScript, frame labels, and frame comments. This helps you find these items quickly when you need to edit them.
In addition, you can use special guide layers to make drawing and editing easier, and mask layers to help you create sophisticated effects. This will be covered in later modules.
If you click on the dot next to layer 1, below the “eye”, the specific layer will be invisible. It sometimes makes it easier when you work not to see all the layers. If you click on the dot under the “key lock”, it will lock the layer and ensure that you do not change the layer accidentally. They “coloured box” will just show the outlines if you click on the box.
The layer with the “pencil” next to it is your active layer. It you draw, you will draw or paste graphics, it will be added to the currently active layer. The top layer will be drawn on the second layer etc. In other words, each layer is drawn on top of each other, thus the lowest layer have all the other layers on top of it. Use your lowest layer for your background.

Stage


The stage is the area which will be visible when you play / execute your Flash program. You can zoom in and out to change the view of the Stage as you work, with the stage size.

Work area


The grey area next to the stage is used to draw objects that will look as if they “fly in” from the sides. This area will not be seen when the Flash movie is played but it is useful in the process of creating your Flash movie.

Properties and actions


With the properties and actions you can change colours, fonts and specific functionality of the movie. It will be discussed later, in more detail, with appropriate examples.

The toolbox




General setting to work easier


  1. Start Macromedia Flash 8

  2. Display rulers and gridlines.



Rulers and Gridlines help you to align and ensure icons are the correct size




  • View > Snapping:

It automatically aligns elements with one another


.
Flash provides different ways for you to align objects on the Stage:

  • Object snapping lets you snap objects directly to other objects along their edges.

  • Pixel snapping lets you snap objects directly to individual pixels or lines of pixels on the Stage.

  • Snap alignment lets you snap objects to a specified snap tolerance, a preset boundary between objects and other objects or between objects and the edge of the Stage.

  • You can also snap to the grid or to guides



Activity 1: Creating a simple text movie in Flash


Task: Let your name appear on different places on the screen over time.
Through this activity you will learn how the timeline works; how to add frames at different intervals and how to add text.


  1. Save the movie before you start, as Activity1

  2. Display ruler and grid

  3. Click on the text tool option, in the toolbox

  4. Create a text box and enter your name in the text box, at approximately 50 pixel on your horizontal and vertical ruler.



  1. Modify the attributes of the text box - select the text, and use the properties to change the colour, font, and size.





  1. Click on frame 10 of the timeline



  1. Insert a keyframe: Insert > Timeline > keyframe or

Right click on frame 10 > keyframe

When you insert a keyframe, Flash copies the objects on the Stage from the last keyframe and pastes them into each subsequent frame through the new keyframe.



  1. Click on your text box, and drag your text box to start at approximately 150 px on your horizontal ruler.

  2. Click on frame 20 on your timeline and insert a keyframe. Insert a keyframe (as step 5) but move your text box to frame 250 px.

  3. Save your movie again.

  4. Test by clicking on frame 1 in the timeline and press enter to play the movie in the editor.

  5. Press Control Enter to test the movie. This creates a swf file that loops continuously. This is the way it will look if you publish your Flash presentation. To go back to the editor, click on the cross.

  6. Insert 10 blank frames to the end of the movie

  • Right click on frame 21 of the timeline > blank keyframe;

  • Insert another plank keyframe on frame 30;

  • Save and run the movie again.

  1. Change the colour of the text in the frames of the movie

  • Click on Frame 10 on your timeline;

  • Change the colour, size and font;

  • Click on Frame 20 on your timeline;

  • Change the colour, size and font;

  • Test the movie.

Activity 2: Creating a simple text movie in Flash


Task: Create your first name appear letter by letter.


  1. Open a new file in Flash.

  2. Save the movie before you start, as Activity2.

  3. Add rulers and grids to your stage.

  4. Insert a small text box at about 50px horizontally and vertically.

  5. Insert the first letter of your name.

  6. Click on frame 5 of the timeline and insert a keyframe.

  7. Click back into your text box and add the second letter in your name.

  8. Click on frame 10 of the timeline and insert a keyframe.

  9. Click back into your text box and add the third letter in your name.

  10. Continue this process adding new keyframes to your timeline at 15, 20, 25 etc.

  11. Keeping adding a letter of your name at each new keyframe until your name is complete.

  12. Save your movie.

  13. Control Enter to test your movie.

Activity 3: Paint Fills


When you draw pictures, and there are small areas not closed you can still fill the area with assistance.


  1. Save the movie before you start, as Activity3.

  2. Draw 3 circles one closed and the other 2 not completely closed with your pencil tool. Choose your Paint bucket and try to fill the circles. On the option area you will see there are options to fill no gaps, small, medium and large gaps. With these options it can help you to fill areas.

  3. Draw with your brush different lines. Experiment with the different brush options:

Paint Normal: Will paint over a current image, “deleting” the image under the new lines.

Paint Fills: Will paint over the original image, but the original image will also be visible.

Paint Behind: Will paint behind the original image.

Paint Selection You will only see the changes inside

P
Paint inside is very useful to paint inside an object, but you do not need to be concerned about going over the edges. Paint behind is in the same way useful if you want to paint something behind the figure and don’t want to worry about being to careful.
aint inside
will only fill the inside the original image.

Activity 4: Draw and modify shapes


  1. Save the movie before you start, as Activity4.

  2. D
    Stroke colour
    raw a circle and a square with the help of your oval and rectangle tools. On the properties bar, next to the stroke colour is a number (usually 1) the bigger you make this number the bidder the “line” around your object will be. This is noticeable if your fill and stroke (line) colour differ.




  1. To create your own shape from the original square and circle, select the section tool, AND ensure the time frame is not selected. Now if you move your mouse close to the edge of the shape it will change to have a “smile” at the bottom of the arrow. You can now change the shape as you wish. What shapes can you create?

  2. Finally you can write click on your symbol, and break it apart.

  3. Select a part of the shape, with your selection tool, and change only that part of your object’s colours.

Eg:


Transform tool


With the Transform tool you can rotate, scale or distort the shape. Explore the different possibilities by rolling your cursor over a square.

Connecting objects with snap to object


V
Snap align helps you to align objects with helping dashed lines, when you have selected View, Snapping, Align
iew, Snapping, Snap to object
or the magnet button on the main toolbar, you can draw perfect circles or squares. A dark ring appears close to your mouse pointer when your shape is a perfect square or circle. It also allows you to connect two shapes – just remember after they are snapped together, they are forever connected.

Activity 5: Using the pencil tool


  1. Create a new movie.

  2. Save the movie before you start, as Activity5.

  3. Display the grid and ruler but do not have the snap to grid option on.

  4. Select the pencil tool from the Toolbox.

  5. Set the stroke colour to blue and the stroke thickness to 3pt.

  6. Click on the Pencil mode modifier button in the option section and choose smooth.




  1. Draw a horizontal line about 400 pixels long – use your ruler to help you measure.

  2. Use the selection tool and click and hold the centre of the horizontal line and “pull” or drag the line downwards – your line should now look like this:





  1. Draw another line below the one you have just created and add the vertically lines as shown here:




  1. Use the arrow tool to drag some segments up and some down to create the following effect:


Activity 6: Using the sub selection tool and the selection tool to delete lines in a drawing


  1. Create a new movie.

  2. Display grids and rulers.

  3. Save the movie before you start, as Activity6

  4. Click on the oval tool.

  5. Set the stroke colour to black, and the fill colour to skin colour and the stroke size to 2pt.

  6. Drag a circle shape onto your stage – start at about 200 horizontal and 100 vertical and drag down and across 300 horizontal and 200 vertical.

  7. Click on the sub selection tool and then click onto your circle on the stage – the series of blue dots will appear around your circle – this allows you to drag out parts of the circle to form a new shape.

  8. Drag out the middle right point of the circle as shown below:

  9. Now click on the oval tool again and invert an eye onto what will be a smiling face.

  10. Add a smiling mouth (change the pencil to smooth), you could also use the paintbrush.

  11. Add hair to your man.


Funny face animation (continue)

Using your funny face created in activity 4 to give your animation some characteristics.



  1. Right click on frame 10 in the timeline and Insert Keyframe

  2. Change some of the characteristics of the funny face.

  3. Right click on the first time frame, Copy frame, right click on frame 20 and Insert keyframe.

  4. Test your movie (stand on frame 1 and press enter, or press control enter)

Activity 7: Traffic Light


Create a traffic light: Make sure the lights are the same size.

To create a 100% round circle keep Alt Shift in when drawing a circle.


  1. Save the movie before you start, as Activity7

When you run (press control enter) your traffic light must have the following functionality:



  • red light “on” – this can be achieve by changing the colour red or make the other lights lighter or grey, then

  • green light “on”, then

  • yellow light “on”

  • The red and green lights must be “on” for the same duration of time, and the yellow light for half of the duration of the red and green lights.

  1. Save your project.

I cannot draw, what can I do?


Some of us are not blessed with good drawing skills. How can we create great animations and products? Helpful options are scanners and the internet. You can scan any picture you want to use as a guide or assistance for future projects. A friend may draw a rough sketch you want to use, or a picture out of a colouring book, the options are endless.
As soon as you have the drawing on your computer you can import it as a layer in Flash. File, Import to stage or library. If you import it to library it will be an image in your library which you can use where you need it or you can import it to stage, then it will import it to the layer and frame you are on. I will advice that you always import it to a separate layer, that you can delete after you have used it. After it is on your stage, change the size of the image to the size you want it at the end. On a new layer above this “assisting” layer use your tools in your toolbox to draw the image. When you are finished you can delete the original image. Remember plagiarism, and copy write. You need to change the image to make it your own unique image IF the image has copy right to it.

Resources Used


  1. CD from Dr. M Cooper

  2. www.echoecho.com/Flash/default.asp

  3. Macro Media Flash 8 in 24 hours Philip Kerman

  4. Macro Media Help files


Verilənlər bazası müəlliflik hüququ ilə müdafiə olunur ©atelim.com 2016
rəhbərliyinə müraciət