1-flash 8 Ess
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View 1-flash 8 Ess as PDF for free.
More details
- Words: 22,270
- Pages: 150
Happy Computers Guide to
Macromedia Flash 8 Essentials This course guide is produced for the Happy Computers Macromedia Flash 8 Essentials course. For all your computer training needs contact: Happy Computers Cityside House 40 Adler Street London E1 1EE Helpline: 020 7375 7373 [email protected] Bookings: 020 7375 7300 Copies of this guide can be obtained from Happy Computers, fully bound, at a cost of £15 each, or £10 for extra copies for organisations who have booked courses. Happy Computers allows this guide to be copied, provided that permission is sought and the name and phone number of Happy Computers remains on the copies.
1
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials About This Manual
Contents Contents ........................................................................................ 2 Happy Computers: For All Your IT Training Needs ................................. 4 The Happy Computers’ Web Site ........................................................ 5
About This Manual .................................6 Who It Is For And How To Use It ........................................................ 7 What do the Icons Mean? .................................................................. 8 Getting Help ................................................................................... 9
What is Flash 8? ...................................11 Flash Overview ...............................................................................12 About Images ................................................................................15
The Flash Environment .............................16 Starting & Exiting Flash....................................................................17 The Flash Environment ....................................................................18
Panels & the Property Inspector ..................20 Panels...........................................................................................21 Property Inspector ..........................................................................24
New Document......................................26 New Document...............................................................................27
Simple Objects .....................................29 Simple Objects ...............................................................................30 Changing the Fill Colours..................................................................48 Aligning Shapes..............................................................................51 Adding Type...................................................................................53
Converting Existing Shapes into Graphic Symbols .............................................56 Converting Existing Shapes into Graphic Symbols ................................57
Frames, Layers & Scenes..........................59 What are Frames & Layers? ..............................................................60 Scenes ..........................................................................................66
Mask Layers ........................................68 Mask Layers...................................................................................69
Symbols .............................................72 Symbols ........................................................................................73 Organising Symbols ........................................................................78
Animation: Frame-by-Frame ......................79 Happy Computers 020 7375 7300
2
Simple FramebyFrame Animation ................................................... 80 Frame Rate ................................................................................... 83
Animation: Motion Tweening .......................84 Motion Tweening ............................................................................ 85
Animation: Shape Tweening ........................91 Shape Tweening............................................................................. 92
Animated Masks ....................................96 Animated Masks............................................................................. 97
Buttons..............................................99 Basic Rollover Buttons................................................................... 100 Buttons with Text ......................................................................... 104 Buttons that Change Shape ........................................................... 106 Invisible Buttons .......................................................................... 108 Buttons with Multiple Hotspots ....................................................... 111
Actions ..............................................113 Actions ....................................................................................... 114
Animation: Movie-Clips .............................118 MovieClip Symbols ...................................................................... 119
Movie Explorer......................................123 Movie Explorer............................................................................. 124
Interactive Movies .................................126 Interactive Movies ........................................................................ 127
Testing & Publishing ................................136 Testing & Optimising Movies .......................................................... 137
Publishing............................................139 Publishing your Movie ................................................................... 140
Appendices ..........................................143 System Requirements ................................................................... 144 Optimising Movies ........................................................................ 145 On MouseEvent Options ................................................................ 146
Index................................................148 Index ......................................................................................... 149
3
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials About This Manual
Happy Computers: For All Your IT Training Needs Manuals for You to Use We hope you enjoy this manual and find it useful. If it is for personal use, or for use in state funded schools, please feel free to copy it. Our full range of manuals, in MS Office and more, are available from: www.happymanuals.com For other organisations (including companies, charities, universities, colleges and training providers) there is a licence fee. Full details of the costs are on the site.
Award Winning Classroom Training in the UK These manuals are produced by Happy Computers, recognised as one of the leading providers of quality training in the UK. Our awards include: IT Training Company of the Year (Institute of IT Training Awards) 2000: Finalist 2001: Gold 2002: Bronze 2003: Bronze 2004: Bronze 2005: Finalist 2006: Silver 2007: Silver IT Trainer of the Year (Institute of IT Training Awards) 1999: Gold 2000: Silver 2004: Gold 2005: Silver 2007: Bronze Best Customer Service in the UK (Management Today/Unisys Service Excellence Awards) 2002 Section Winner (Business to Business) 2003 Overall UK Winner
All our training is designed to fully involve you, based on the ageold principle: Tell Me & I Will Forget Show Me & I May Remember Involve Me & I Will Understand Find out how we can make learning IT fun and effective: 020 7375 7300, [email protected], www.happy.co.uk
E-Learning: Anywhere in the World See the section below on Happy eLearning or simply try our free trial: http://www.happyelearning.co.uk/freestuff/
Happy Computers 020 7375 7300
4
The Happy Computers‛ Web Site Where is it? http://www.happy.co.uk
Why should I visit it? The Happy Computers web site is dedicated to providing you with information about both the software you use, and the courses we run. You’ll find copies of manuals to download and tips on the programs you use, designed to make your work quicker and easier. You’ll find uptodate news about Happy Computers and the team, and you can of course find information on all our courses and book your place on one.
Who runs it? If you have any comments, ideas or just fulsome praise, you can email our web editor at: [email protected]. Alternatively, write your comments when you do your evaluations online at the end of a course at Happy Computers.
What is all that stuff above about? If the above means nothing to you, and you are interested in learning more about the World Wide Web and the Internet, Happy Computers run a wide range of courses in Internet software.
5
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials About This Manual
About This Manual
Happy Computers 020 7375 7300
6
Who It Is For And How To Use It Who is it for? This manual is designed for use with the Flash 8 course with Happy Computers. It is also meant as a back up for when you get back to work in combination with the two year telephone helpline you get free with every Happy Computers course. It is not meant as a replacement to the full reference manuals that come with Flash.
How should I use it? This manual is a stepbystep guide to the functions taught in the Macromedia Flash 8 Essentials course. You should be able to find the part you’re after by looking in the index, and contents and noting that the general course will follow the pattern of the manual. The stepbystep parts are in italics. Simply do the things on the left, and read the things on the right for further information This is what you do happening
7
This is a description of what is
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials About This Manual
What do the Icons Mean? Tips Handy tips that make your work easier
Essential Essential points to understand how to do the work in hand
Technical Technical (nonessential) points for the technically minded
Traps Hints to help you with certain features that may just trip you up if you are not aware of them!
Right Mouse Button This means that pressing the right mouse button (instead of the left mouse button) will bring up a short cut menu that can achieve the same things as listed in the text
Happy Computers 020 7375 7300
You can also use the right mouse button here
8
Getting Help Flash keeps the screen fairly simple. But don’t expect to have to remember the functions. There are several levels of help:
Using this Guide This guide contains all the basic functions of Flash 8. Use the Table of Contents and the Index to find the functions that you need explained.
Help Function 1. Press F1 2. Within the Contents tab choose one of the 3 options
Opens the Help screen
3. Within the Index tab choose the letter
4. Within the Search tab type a keyword(s)
9
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials About This Manual
Closing Help Alt + F4 Or 1. Click on the File menu 2. Choose Exit
The official Flash 8 Manual Software manuals have improved. Use them as a reference on specific functions, rather than for a general read on how to use the software.
Ring Happy Computers If you received this manual at a Happy Computers course, we will provide phone support on any functions covered on the course for two years from the date of the course. This is a guarantee of the quality of our training: Ring: 020 7375 7373 and we will help you with your difficulty. You can do this as many times as you like.
Happy Computers 020 7375 7300
10
What is Flash 8?
11
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials What is Flash 8?
Flash Overview Flash Overview § Flash 8 movies contain graphics (which you can create from scratch or import from other software), text and animation. § Flash movies are likely to be interactive and permit input from users. § Many Web designers use Flash to create navigation controls, animated logos and animations with sound. § Flash movies use vector graphics, so they download rapidly and can be scaled to the user’s screen size. Do I have The Flash Player on my PC at home/work? Yes, probably. 97% of all web users have the Flash Player on their PC (source: Macromedia). You've probably watched and interacted with Flash movies on many Web sites. The player is installed automatically when Flash is installed or you can download it from the Macromedia Web site. (www.macromedia.com). What is a Flash Player and Why do I need it? The Flash Player lives on the local computer. It plays back Flash movies in browsers or on standalone applications. Viewing a Flash movie on the Flash Player is similar to viewing a DVD on a DVD player—the Flash Player is the device used to display the movies you create in the Flash authoring application.
Animation in Flash In Flash, you can animate objects to make them appear to move across the stage and/or change their shape, size, colour, opacity, rotation, and other properties. You can create framebyframe animation, in which you create a separate image for each frame. You can also create ‘tweened’ animation, in which you create the first and last frames of an animation and direct Flash to create the frames in between. You can also use ActionScript, which is an objectoriented programming language, to create interactive animation in Flash.
The Two Parts of Flash · ·
Builtin vectorbased graphics and type tools such as Macromedia Freehand and Adobe Illustrator Programming and animation tools to animate and build interactivity into your website using buttons and action scripts.
Happy Computers 020 7375 7300
12
Other Uses of Flash Animation is not limited to web pages it can be used to: · License Flash Player and distribute Flash movies on CDROM · Create movies for standalone projectors · Export Flash to other formats such as QuickTime or Windows .AVI movies.
What are the Flash formats? Flash files are referred to as movies, during creation and in their final form. · ·
Flash files have the extension .fla. To view these files, you must convert the files to Flash Player format; these files have the extension .swf (pronounced swif). This stands for Shockwave Flash. Shockwave was the system to deliver movies before Flash.
What is the Flash Player? To view a Flash movie on the Web, the Flash Player must be installed on the user's computer. This is a plugin application that allows the user to see the Flash movie playing.
What Flash does well J J J J J J J J J
Presents text and images in sequence on screen Allows you to move text and images on screen Looks slick and smooth With proper layout presents a lot of information in a single window Lets you create Flash files that can be viewed by anyone with the free viewer Flash files will use the entire browser window whatever the browser window size and screen resolution Offers interactivity using buttons and actions Flash files are streamed, which means they can start to play while they are downloading Using all vectorbased images the Flash file size remains small, which means faster downloading time
Flash‛s Limitations L
You need the Flash/Shockwave plugin installed. This can be downloaded for free from the macromedia site (www.macromedia.com) . Newer versions of Netscape and Internet Explorer come with the plugin already installed or as an option in the installation process L Flash files do not play at a consistent speed on all machines, on older and slower machines files are played slower than newer ones L You may need to learn about programming (Action Scripts) if you want to go beyond the builtin barriers in Flash
13
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials What is Flash 8?
L
Learning the language and terminology Flash uses
Happy Computers 020 7375 7300
14
About Images Images on the Web Images on the web have traditionally been bitmaps, i.e. images made up of pixels. The more pixels in an image, the higher the quality of the image. However, pixels also increase the size of the file. Also you may have noticed when a bitmap is increased, the quality deteriorates, because each pixel has to cover a larger area on the screen. This results in the image looking jagged. There are 3 main types of bitmap images used on the web · · ·
GIF (Graphical Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Group)
One of the main features of Flash is to create graphics; it achieves its high quality images by using a vectorbased system. A vectorbased system is where objects are created using mathematical equations.
Advantages of Vector-Based Images · ·
Images do not consist of pixels, so they are usually smaller in file size. Vectorbased images lose very little image quality when they resized.
This combination of small file size and consistent high quality make vector based graphics an excellent choice for Web pages. Drawing programs such as Macromedia Freehand and Adobe Illustrator use vectorbased systems for graphics creation.
Streaming Often you have to wait for a site to download, especially one that is rich in images or sounds. Flash is able to stream the content of the web site. Streaming means that as soon as some of the vector graphic has downloaded, Flash can quickly display it while the rest of the data continues to download. Flash downloads each frame at the specified frame rate, so the viewer sees a continuous flow of images.
15
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials The Flash Environment
The Flash Environment
Happy Computers 020 7375 7300
16
Starting & Exiting Flash Starting Flash 1. Click on the button 2. Click on Programs 3. Select Macromedia Flash 8 4. Choose Flash 8
The Start menu appears
Flash opens
Exiting Flash 1. Click on File menu 2. Choose Exit Or Alt+F4 on the keyboard Or Click on the cross in the top right corner of the screen
17
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials The Flash Environment
The Flash Environment The Screen Toolbox Timeline
Stage
Work area
Properties Inspector A movie consists of –
Panels
·
The Timeline – This is like the "table of contents" of your Flash movie. o Layers – Where different layers are added to a movie.
·
The Stage – The content for each movie is placed here.
·
The Work Area – Animation can start here.
About the Timeline The easiest way to describe the Timeline is to imagine your Flash movie as a book. The timeline would be the table of contents, each chapter is like a scene, and each page is like frame. However, each frame may actually contain several transparent sheets sitting on top of each other. These "sheets" are layers.
Happy Computers 020 7375 7300
18
In this window, you arrange the timing of your animation on separate layers.
About the Stage This is the area containing all the graphics that will make up the movie. It is possible for you to control the size, colour and many other parameters of your stage.
The Work Area This is the grey area around the stage. When you have finished your animation and export your files (usually swf files or html) then only what is on the stage will be exported. This means that you can store graphics off on the Work area while they are not required and bring them on when they are.
19
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Panels & the Property Inspector
Panels & the Property Inspector
Happy Computers 020 7375 7300
20
Panels Panels in Flash give you more information about the object you are using and help you view, organize, and change elements in a document. The choices available on panels control the features of symbols, instances, colours, type, frames, and other elements. Flash allows you to customise its interface by displaying the panels you need for a specific task and hiding other panels. About Panels Panels let you work with objects, colours, text, instances, frames, scenes, and entire documents. For example, you use the Colour Mixer to create colours, and the Align panel to align objects to each other or the Stage. Where are the Panels? To view all panels available in Flash, see the Window menu.
Panels Most panels include a popup menu with extra options. Click and drag to move the Panel.
Click on the Collapse arrow to close a
Click here to see the Options menu control for the Panel.
21
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Panels & the Property Inspector
Info Panel This shows the size of the shape in pixels.
1. Click on the Window menu 2. Choose Info
This shows the position of the shape on the stage. This shows the position of the cursor.
This shows the colour of the shape.
Colour Mixer 1. Click on the Window menu 2. Select Colour Mixer
Used to choose over 500 colours from a colour palette
Stroke Fill Colour
Fill Style
Happy Computers 020 7375 7300
22
Scene Panel 1. Click on the Window menu 2. Choose Scene Current open scene
Duplicating a scene Adding a new scene Deleting a scene
Transform Panel 1. Click on the Window menu 2. Choose Transform
23
Change the size of the shape.
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Panels & the Property Inspector
Property Inspector You can use the Property inspector to easily access and change the most commonly used attributes of a document. Changes can be made to document attributes using the Property inspector without accessing the menus or panels that contain these features. The Property inspector is content sensitive, which means it reflects the tool or asset you are working with, giving you quick access to frequently used features.
The Property Inspector Viewing the Property inspector 1. Click on the Window menu 2. Choose Properties
This is the Property inspector with nothing on the stage.
Changing Document Properties Using the Property Inspector 1. Click on the blank area on the stage. Click on the Size button
Dialog box opens
2. Click on the Background icon
Choose a background colour for the stage
3. Change the frame rate (see later)
Happy Computers 020 7375 7300
24
Changing the Properties of a Shape Using the Property Inspector
This is the Property inspector showing the properties of a shape.
25
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials New Document
New Document
Happy Computers 020 7375 7300
26
New Document Here you will create the Flash .fla document with objects and animation.
When you first open Flash 1. You’ll see a window offering you lots of options
2. Either Choose to create a new Flash Document Or Choose to open an existing document
Creating a new Document in Flash 1. Click on File menu 2. Choose New
3. Click on the Size button
You can change the properties of the document using the Property inspector Dialog box opens
4. The default movie size is
27
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials New Document
550 x 400 pixels. 5. Change the Background colour for the stage 6. Enter the number of animation frames to be displayed every second 7. To set the Ruler Units, click on the downward arrow by Pixels 8. Click OK
Colour palette appears
To view gridlines on the movie, click Ctrl+#.
Movie Sizes The default movie size is 550 pixels by 400 pixels. The minimum size is 1pixel by 1 pixel. The maximum size is 2880 pixels by 2880 pixels.
Frame Rate For most computerdisplayed animations, especially those playing from a Web site, 8 fps (frames per second) to 12 fps is sufficient. (12 fps is the default frame rate.). If the frame rate is too high, the movie becomes blurred, but if it is too slow, the viewer will see each frame as a separate image. Setting the properties § To make the new settings the default properties for your new document only, click OK § To make these settings the default properties for all new documents, click Make Default.
Happy Computers 020 7375 7300
28
Simple Objects
29
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Simple Objects This is a very powerful feature in Flash. They are not only lines and shapes, but can be transformed into eyecatching graphical images. Flash also allows you to import images from other graphic packages such as Illustrator, Freehand and Fireworks
Images in Flash Computers display graphics in either vector or bitmap format. In Flash, you can create and animate vector graphics. You can also import and manipulate vector and bitmap graphics that have been created in other applications. Vector Graphics v Bitmap Images Vector graphics form images using lines and curves. These are called vectors. Bitmap images are made from coloured dots called pixels.
What is Special about Vector Graphics? When you modify the properties of a vector graphic you do so without changing the quality of its appearance. Vector graphics can be displayed on output devices of varying resolutions without losing quality. About Bitmap Graphics When you edit a bitmap graphic, you modify pixels. Editing a bitmap graphic can change the quality of its appearance because the image is fixed to a grid of a particular size. Resizing a bitmap graphic can make the edges of the image ragged as pixels are redistributed within the grid. A bitmap graphic on an output device that has a lower resolution than the image itself degrades the quality of its appearance. Flash Terminology Basic shapes are made from strokes (outline) and solid colours known as fills.
What you can do with a Shape § Change the stroke colour § Change the fill colour
Happy Computers 020 7375 7300
30
Viewing the Toolbox 1. Click on the Window menu 2. Choose Tools Selection Tool (V) Free Transform (Q) Line (N) Pen (P)
Subselection Gradient Transform Lasso (L) Text (T)
Oval (O) Pencil (Y) Ink Bottle (S) Eyedropper (I) Hand (H)
Rectangle (R) Brush (B) Paint Bucket (K) Eraser (E) Zoom (M,Z) Stroke colour
Tool modifiers
Fill colour
To find out what a tool does, just rest the cursor on the icon and a tool tip appears. For example, if you rest your cursor on the text tool, you will see a tool tip with Text tool (T). By pressing T on the keyboard you can activate the Text tool.
Moving the Toolbox 1. Click on the grey dotted lines at the top of the toolbox window 2. Hold down the left mouse button 3. Drag the toolbox to another part of the screen
Using the Oval Tool The Oval tool can be used to draw ovals or perfect circles.
31
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Flash terminology Basic shapes are made from strokes (outline) and solid colours known as fills. Each can be edited independently.
1. Click on the Oval tool
Keyboard shortcut is O
2. Choose the Fill and stroke colours for the shape
3. Click and drag to draw the shape To create a perfect circle Hold down the shift key while you are dragging the Oval tool. Or Whilst dragging to create the circle, a small black circle appears in the bottom right side of the cursor. This indicates it is a perfect circle. Ovals can be created with just a fill or just an outline To create a shape without a stroke 1. Click on the No colour icon 2. Draw the shape
Changing the Look of a Shape Using the Transform and Skew Tools Ensure you can see the Transform Panel. If not 1. Click on the Window menu 2. Choose Transform 1. Create a shape
Happy Computers 020 7375 7300
32
2. Click on the Arrow tool 3. Doubleclick the shape 4. Click on the Transform tool Keyboard shortcut : Q
5. To rotate or skew
the
shape or to distort it choose those tools from the options section on the toolbar
Doubleclick ensures you select both the stroke and the fill Down on the properties inspector click on the padlock if you want to lock the
proportions You can also change these settings numerically using the transform panel
6. Press Enter
Changing the Fill Colour Using the Property Inspector 1. Click on the Arrow tool 2. Singleclick inside the shape to select it 3. Click on the drop down for Fill colour
4. Use the palette to choose a different colour
If you want to match a colour on your stage exactly Just move the eyedropper that appears over the stage and click on the colour that you want to choose.
33
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Changing the Stroke Using the Property Inspector 1. Click on the Arrow tool 2. Doubleclick on the outside border of the shape to select it 3. Click on the drop down for Stroke style 4. Click on the drop down for Stroke height 5. Use the slider to choose a different thickness for the stroke To customise the style of the stroke click on the Custom button,
on the Property inspector and make your changes.
You can also use the Colour Mixer panel to change the fill and stroke colour of a shape To view the Colour Mixer panel 1. Click on the Window menu 2. Choose Colour Mixer 3. Select either the fill or the stroke of the shape 4. Change the colour using the palette of the RGB values
Moving a Shape (Stroke And Fill) 1. Create a shape 2. Click on the Arrow tool 3. Double click the shape to select it 4. Click and drag the shape to a new destination
Stroke and fill appear selected
Make sure you’ve got both the stroke and the fill A single click will select just the fill and when you move it, you’ll leave the stroke behind
Moving a Shape Using the Keyboard 1. Doubleclick to select the shape 2. Press the arrow keys on the keyboard This moves the shape one pixel at a time Or Hold down the Shift key whilst pressing the arrow keys on the keyboard This moves the shape eight pixels at a time
Happy Computers 020 7375 7300
34
Moving the Fill 1. Create a shape 2. Click on the Arrow tool 3. Click once in the centre of the shape
4. Click and drag the fill to another destination
5. Click elsewhere on the stage
Moving the Stroke 1. Create a shape 2. Click on the Arrow tool 3. Click on the edge of the shape
The stroke will appear speckled. Note that if your shape has more than one edge, e.g. a square, you might need to double click on the stroke
4. Click and drag the stroke to another destination
5. Click elsewhere on the stage
To move part of the shape 1. Click on the Arrow tool 2. Position the cursor outside the shape before clicking and dragging part of it to select it 3. Click and drag to move the selected part of the shape
35
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Resizing a Shape 1. Click on the Arrow tool 2. Doubleclick the shape to select it 3. Click on the Free Transform tool on the Toolbox
4. Click on the Scale icon 5. Click and drag on any black handle on the shape
Black handles appear around the shape and Options appear at the bottom of the Toolbox
The shape changes (proportionally if you drag on any of the corner handles)
Rotating a Shape 1. Click on the Arrow tool 2. Doubleclick the shape to select it 3. Click on the Free Transform tool on the Toolbox 4. Position your cursor on any corner black handle on the shape 5. Click and drag to rotate the shape
Black handles appear around the shape Cursor looks like the following
If you need to be very accurate when changing the size of a shape you can use the Transform Panel See Changing the look of a shape using the Transform panel on page 32
Skewing a Shape 1. Click on the Arrow tool 2. Doubleclick the shape to select it 3. Click on the Free Transform tool on the Toolbox
Black handles appear around the shape and Options appear at the bottom of the Toolbox
4. Click on the Rotate & Skew icon
Happy Computers 020 7375 7300
36
5. Position your cursor on any centre black handle on the shape 6. Click and drag to skew the shape
Cursor looks like the following
Distorting a Shape 1. Click on the Arrow tool 2. Doubleclick the shape to select it 3. Click on the Free Transform tool on the Toolbox
4. Click on the Distort icon 5. Position your cursor on any black handle on the shape
Black handles appear around the shape and Options appear at the bottom of the Toolbox
Cursor looks like the following
6. Click and drag to distort the shape
Using the Envelope Tool The Envelope tool helps you to change the shape of a selected shape(s) by using Bézier curves. 1. Create 3 rectangles
2. Select all 3 shapes 3. Click on the Free Transform tool on the Toolbox 4. Click on the Envelope tool
5. Position the cursor on any of the handles
37
More handles appear around the selection
Cursor looks like the following
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
6. Click and drag to distort all the selected shapes
Changing the Shape of Existing Shapes 1. Create a shape 2. Click on the Arrow tool 3. Position cursor on the edge of the shape
Mouse shape changes to
4. Click and drag to change the shape
Changing the Shape of Existing Shapes Using the Subselection Tool You can use the Subselection Tool shape
to reshape any
1. Create a shape 2. Click on the Subselection Tool 3. Click on the border of the shape
Bézier handles appear around the shape
4. Position your cursor over one of the Bézier handles
A small white square appears next to the arrow
Happy Computers 020 7375 7300
38
5. Click and drag to change the shape
6. Position your cursor on a part of a border without a Bézier handle 7. Click and drag to move the shape
A small black square appears next to the arrow
Reshaping a Curve 1. Create a shape 2. Click on the Subselection Tool 3. Click and drag one of the Bézier handles to change the definition of the curve
Click here
Using the Line Tool This option only allows you to draw straight lines. 1. Click on the Line tool 2. Select a stroke colour from the Property inspector 3. Select a thickness and line style on the Property inspector 4. Move the cursor to the stage 5. Click and drag to create a line 6. Release the mouse
The cursor is a cross
Drawing a straight line Holding down the shift key as you draw the line forces the line to a vertical, horizontal or at a 45 0 angle.
39
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Editing Lines 1. On the toolbar click on the Arrow icon 2. Move the cursor over a portion of the line Corner
Curve Curve point
Clicking and dragging allows you to adjust the curvature of the line
Corner point
Clicking and dragging adjusts the end point of the line
Moving a Line 1. On the toolbar click on the Arrow icon 2. Click on the line
Deselected line
Selected line
3. Move the line by clicking and dragging 4. Click away from line Selecting more than 1 line Hold down Shift and click on the lines. Selecting lines which are touching each other – Double click a line
Selecting Part of a Line 1. On the toolbar click on the Arrow icon 2. Click and drag cursor over part of the line around line
Box appears
3. Click and drag to move this part of the line
Using the Pen Tool You can use the pen tool to draw straight lines or smooth curved lines. You start off by drawing a straight line and adjusting the angle of the line. Using Happy Computers 020 7375 7300
40
the Pen tool allows you to create points on the line, which you can click and drag to make curved. Click on the Pen tool
When you are creating curves switch the grid on 1. Click on the View menu 2. Choose Grid 3. Choose Show Grid To change the stroke colour of an existing shape 1. Click on the Arrow tool 2. Doubleclick the outside border of the shape 3. Click on the Stroke Colour Tool on the Property inspector 4. Choose a colour from the palette
Drawing an Upward Curve 1. Click on the Pen tool 2. Move cursor to the stage 3. Click and drag upwards in a straight vertical line
Cursor shape changes to a X Bézier handles
Ancho r
4. Click about a centimetre away from the anchor and drag downwards
Uneven curve appears
Uneven curve changes to a perfect curve
5. Press the Escape button when you have finished Or Click on the Arrow tool
41
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Making Changes to an Existing Line 1. Click on the Pen tool 2. Click on the line
Bézier handles appear
Drawing an S Curve 1. Click on the Pen tool 2. Move cursor to the stage
Cursor shape changes to a pen
3. Click and drag upwards in a straight vertical line
Bézier handles
Ancho r
4. Click about a centimetre away from the anchor and drag upwards
Uneven curve appears
Uneven curve changes to an S shaped curve
5. Press the Escape button when you have finished Or Click on the Arrow tool
Drawing Shapes Using the Pen Tool 1. Click on the Pen tool 2. Click on the stage 3. Click somewhere else on the stage
Happy Computers 020 7375 7300
Anchor appears Straight line appears
42
4. Continue clicking to create your shape
43
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
To change the fill colour of an existing shape 1. Click on the Arrow tool 2. Singleclick inside the shape 3. Click on the Fill Colour Tool on the Property inspector 4. Choose a colour from the palette To change the stroke colour of an existing shape 5. Click on the Arrow tool 6. Doubleclick the outside border of the shape 7. Click on the Stroke Colour Tool on the Property Inspector 8. Choose a colour from the palette
Using the Rectangle Tool 1. Click on the Rectangle tool icon 2. Choose the stroke, fill, stroke style and stroke colour from the Property inspector 3. Move the cursor to the stage 4. Click and drag to create a rectangle To create a perfect square Hold down the shift key while you are dragging the rectangle tool.
To change the look of the shape use the Free Transform Tool on the Toolbox
.
Rectangles can be created with just a fill or just an outline. To create a shape without a stroke 1. Click on the Rectangle Tool 2. Click on the Stroke colour on the Property inspector 3. Choose the No colour icon option 4. Draw the shape
Happy Computers 020 7375 7300
44
To move rectangles See page 34 (Moving shapes)
Creating a Lozenge Shape This is simply a rectangle shape, but the corners are rounded. The corner radius settings are from 0999 points. A larger the value creates a more rounded corner. 1. Click on the Rectangle tool 2. Click on the Round Rectangle icon
This icon appears in the Options part of the Toolbox Dialog box opens
3. Change the corner radius to 10 points 4. Click OK 5. Change the stroke and fill colours 6. Click and drag to create the shape
Using the Pencil Tool This is a freehand drawing tool. It can be used to create patterns and curved lines. 1. Click on the Pencil tool On the Property inspector 2. Click on the Stroke style drop down 3. Choose a style 4. Change the height on the line using the Stroke height drop down slider 5. Draw the line
45
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Using the Brush Tool This tool gives the effect of lines created by paintbrushes.
Click on the Brush Object drawing (creates a shape rather than just a line and Lock Fill Brush Brush size Brush Brush Mode Paint Normal Paint Fills Paint Behind Paint Selection Paint Inside
Paints over everything Paints over fills but not lines Paints behind the shape Paints inside a selected shape Paints the fill of a shape but not the line
Creating Shapes Using the Brush Tool 1. Click on the Brush tool icon 2. Click and drag to create a line 3. Draw another line Ensure the two lines are touching and are the same colour The 2 lines are now part of the same shape To move the shape 1. Click on the Arrow tool 2. Click and drag around the shape to select it 3. Position the cursor anywhere within the shape 4. Click and drag the shape To move part of the shape 1. Click on the Arrow tool 2. Select part of the shape by clicking and dragging over it 3. Click and drag to move the selected part of the shape
Happy Computers 020 7375 7300
46
Grouping Shapes More than one object can be grouped to form a new single object. It is useful to group objects if you need to edit the objects simultaneously. 1. Click on the Arrow tool 2. Select all the shapes by clicking and dragging all of them Or Shiftclick each object 3. Click on the Modify menu 4. Choose Group or press Ctrl + G 5. A thin border appears around the grouped shapes If you overlap objects that are the same colour and have no stroke colour, they too become grouped.
To ungroup shapes 1. Select the group 2. Click on the Modify menu 3. Choose Ungroup or click Ctrl+Shift+G 4. Click away from the shapes
47
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Changing the Fill Colours Flash can change the colour of an existing shape. It is possible to have a solid colour or a colour with gradients. Gradients can make a 2dimensional shape appear 3dimensional.
Changing the Colour of an Existing Shape 1. Select the fill of the shape 2. Click on the Paint bucket tool on the Property inspector
Changing the Gradient 1. Select the fill of the shape 2. Click on the Fill colour icon 3. Click on the Paint bucket tool on the Property inspector 4. Select the fill gradient from the selection at the bottom
Colour is applied to the shape
You can change the centre point of a gradient colour 1. Choose the subselection tool from the toolbar 2. Click on the shape 3. Click and drag the white circle in the centre of your shape to move the gradient
Happy Computers 020 7375 7300
48
Creating a New Gradient How do I open the Colour Mixer panel ? 1. Click on the Window menu 2. Choose Colour Mixer panel 1. Select the fill of the shape
Colour Mixer panel
Fill Style
Gradient Pointer
2. Click on the one of the pointers On the Mixer box 3. Choose a colour
Either choose a colour from the Mixer or Swatches
4. Click on the other pointer 5. Choose another colour 6. Continue for all of the pointers Place the pointers closer together to make the transition from one colour to another more abrupt.
Adding more Pointers All gradients must have at least 2 pointers, but you can make your gradient more complex by adding more pointers. Click just below the gradient bar
Click here
49
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
How many gradient pointers can I have? 8 is the maximum number
Removing Pointers Click on the pointer (underneath the gradient bar) and then drag it away, downwards
Click on the pointer and drag downwards To move a gradient pointer, simply click and drag it to where you want it.
Saving a new Gradient Colour 1. Click on the Options menu on the Colour Mixer panel 2. Choose Add Swatch
in the top right corner
Using the new Gradient Colour 1. Click on the Fill colour icon the Property inspector 2. Choose the new gradient
Removing a New Gradient Colour 1. Click on the Colour Swatches panel 2. Choose the gradient colour to remove 3. Click on the Options menu 4. Choose Delete Swatch
Happy Computers 020 7375 7300
50
Aligning Shapes It is possible to align shapes (particularly useful with rectangles) to any position on the page based on a pixel measurement.
Aligning Shapes To view the entire stage 1. Click on the View menu 2. Choose Magnification 3. Select Show Frame 1. Select your shape 2. Click on the Info icon W and H are the width and height of the
Colour of the document 3. Change X and Y to the settings you want 4. Create or click on another shape 5. Change the X value of the shape 6. Change the Y value of the shape
51
Info box appears X and Y are the number of pixels your shape is from the left and top of the stage Cursor position Zero and zero would move it to the centre of your stage
If you want to align the left of the two shapes then make the x value the same for each If you want to align the top of the shapes then make the y value the same for each
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Aligning Shapes Using the Menu 1. Select the object(s) to align 2. Click on the Window menu 3. Select Align Align horizontally Distribute evenly Match width, height or both
Dialog box appears Align vertically Align relative to the stage Distribute evenly Equal spaces in between objects
Happy Computers 020 7375 7300
52
Adding Type The text tool allows you to control text and paragraph attributes.
Using the Text Tool 1. Click on the Text tool on the Toolbar 2. 1Click on the stage 3. Start typing
A text box appears Text will expand automatically along one line
To create a text box with set width and word wrap 1. Click on the text tool 2. Click and drag the text box so it is the width you want
3. Start typing. The text will expand to the next line once the width that you have set has been reached.
Character Attributes Using the Property Inspector Text Type
Font Type
Bold & Italics
Font Colour
Text Direction
Font Size
Paragrap h Alignment Text box width, height and x and y positions
53
Letter Spacing Superscript and Subscript
Link text to URL
Kerning
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Changing the Size of a Text Box 1. Select the textbox
Blue handles will appear around the shape
2. Click and drag on one of the handles to the size you want
Formatting your Text 1. Click on the Arrow tool 2. Click on the stage and type 3. Click on the Arrow tool 4. Make whatever changes you want for example…. 5. Click on downward arrow for Font size and use the slider to change the font size
6. Click on the downward arrow for Character Spacing and use the slider to change the spacing between the characters
0= 3= letters are closer together 10=
Kerning This is the space in between the letters. Some letters, like T, will have more space around it due to the horizontal line, whereas some letters may seem closer together, like o and a. Flash takes care of this if you keep kerning on . Changing your text into a hyperlink! 1. Select your text, using the arrow tool 2. Click on the Expand button on the Property inspector (in the bottom right corner) 3. In the URL box type the URL of the page to link to 4. Press Enter (your text will have a dotted underline in Flash)
Happy Computers 020 7375 7300
54
Rotating & Enlarging Text It is possible to manipulate the text as though it is a shape. 1. Create a text box 2. Click on the Arrow Tool 3. Click on the Text box
A thin line appears around the text
4. Click on the Free Transform Tool on the Toolbox 5. Click on the Rotate & Skew icon 6. Position the cursor just outside any of the corners of the text box 7. Click and drag to rotate the text box
Black square handles appear around the text box A circular (rotate) arrow will appear
8. Click on the Scale icon 9. Position the cursor on any handle 10.Click and drag to change the size of the text box You can be more accurate when you are rotating and enlarging by using the Show info box. 1. Select the text box 2. Click on the Transform Panel 3. Change the dimensions
55
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Converting Existing Shapes into Graphic Symbols
Converting Existing Shapes into Graphic Symbols
Happy Computers 020 7375 7300
56
Converting Existing Shapes into Graphic Symbols It is straightforward to create and edit static objects, but Flash can do so much more! Once it is decided that an object is going to be animated, it needs to be converted to a Symbol. Symbols are the basic building blocks of Flash. You may want to use the same symbol more than once in the same or different Flash movie. Flash stores these symbols in a Library. When you create animation you use a copy of the symbol. This ‘copy’ is called an Instance. Why do I need to create Symbols? Symbols are reusable elements (which are stored in a Library). The advantage of using symbols is that they keep the size of your Flash file down to minimum and it means that wherever you choose to use an instance of that symbol, it starts out looking the same as all the others.
Converting an Existing Object into a Symbol Viewing the Library F11 Or 1. Click on the Window Menu 2. Choose Library 1. Create an object
2. Select it 3. Click on the Insert menu 4. Choose Convert to Symbol or Press F8 5. Type a name for the symbol 6. Choose the type of symbol you want 7. Click on OK 8. Have a look in your library window
57
Graphic symbol is the most commonly used one You should see your symbol there – to view the library
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Converting Existing Shapes into Graphic Symbols
window use the window menu 9. From your library, drag your symbol onto the stage 10.The object on stage becomes an instance White dot in the centre
Bounding box for symbol
Double clicking on an instance of a symbol You might do this on purpose or even by mistake. If you double click on an instance of a symbol you will move into editing the symbol itself. If you’re not sure check the top of the timeline. If it just tells you what scene you’re in you aren’t editing the symbol. If you see the name of your symbol then you’re editing the symbol. Click on the name of the scene to move back.
Happy Computers 020 7375 7300
58
Frames, Layers & Scenes
59
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Frames, Layers & Scenes
What are Frames & Layers? Layers are like transparent sheets of acetate stacked on top of each other. If there is nothing on a layer, you can see through it to the layers below. A new Flash document contains one layer. It is good practice to organise your graphics on more than one layer. Layers contain frames. A document can have one frame or several hundred. Number of layers The number of layers used does not affect the file size of your document but it does help you organise your objects (or instances) on the stage
Which frame? If the shape is going to move (or be animated), the shape must be on the Keyframe. See page 72 Animation.
Frames & layers jargon · · ·
· ·
Frames and layers come from when all animation was drawn by hand. Keyframes are special frames where a specific event in the animation occurs, such as a circle changing shape or moving position. Frames (also known as inbetween frames) contain static information. This is where Flash takes the name "Tweening" from, which means adding frames in between keyframes. Mask layers are used to help you create sophisticated effects. Guide layers Are used to guide your shape along a path
Flash allows you to combine different shapes together to create complex objects. To work best with these complex images, it is vital to understand layers and how Flash interacts with objects on the same of different layer. Keyframe Tip 1 Keyframes need to be added to create animation
Keyframe Tip 2 All movies must have at least one keyframe
Happy Computers 020 7375 7300
60
Keyframe Tip 3 When creating a background for a movie, place it on a layer on its own and position the layer at the bottom of the list of layers. Call the layer background.
Different Representations of Your Timeline Motion Tweening
(pale blue)
§ Keyframes have a black dot § In between frames have a black arrow. § Background is pale blue Shape Tweening § Keyframes have a black dot § In between frames have a black arrow. § Background is light green A dashed line shows means the final keyframe is missing Here there is only one keyframe, the light grey frames after show that there is no change in the content. § There is an empty rectangle in the final frame. § No tweening has been specified in keyframe 1. § If you change the tweening to shape or motion, it will change to the example above. A small “a” indicates there is a frame action associated with this frame A red flag indicates the frame contains a label or a comment
61
(pale green)
(pale green) (light grey)
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Frames, Layers & Scenes
The Timeline
Playhead
Frame numbers
Frame
Layer name
List of symbols Add layer
Current
Keyframe Frame rate
List of scenes
An Example of the Use of Layers All the different elements of the movie live on separate layers
Happy Computers 020 7375 7300
62
Creating a Layer Why create layers? It is good practice to insert a layer for every type of object on your scene. 1. Click on the New layer icon 2. New layer appears above existing layer
Moving a Layer 1. Select the layer name in the Timeline 2. Click and drag it to a different position (up or down)
A grey line appear showing the position of the new layer
Renaming a Layer 1. Doubleclick the layer name 2. Type the new name
Give it a descriptive name
Locking a layer 1. Select the layer to lock 2. Click on the bullet in the column under the Lock icon
Bullet replaced with a padlock
Deleting a Layer 1. Select the layer in the Timeline 2. Click on the Trash button on the Timeline
Hiding a Layer 1. Select the layer to hide 2. Click on the Hide icon on the Timeline
63
Flash replaces the bullet with a red cross
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Frames, Layers & Scenes
Layer Properties 1. Doubleclick on one of the small boxes in the Show all layers as outlines column
Layer properties dialog box appears
Double click here Change the name of the layer Specify the type of layer this is Change the colour of the outline. This is the colour you will see when you are using onion skins (see later
2. Click OK
Showing a Layer as an Outline 1. Click on a small box in the Show all Layers as Outlines column Click on one of these
2. The object(s) in this layer appears only as an outline
Adding a Shape onto a Layer 1. Select the layer the shape will be on 2. Insert a keyframe 3. Create a shape Keyframe is not empty now As soon as you add an object to a frame, a black circle appears in the Keyframe.
Happy Computers 020 7375 7300
64
Drawing on layers You can draw and edit objects on one layer without affecting objects on another layer
Changing the Stacking Order of Your Layers As you add more and more layers, you may need to arrange them so some shapes appear in the background or the foreground. By changing the order of the layer in the timeline it is possible to have shapes overlapping one another. 1. Select the layer 2. Click and drag the layer 3. Release the mouse
Flash shows you the new location with a thick line Flash moves the layer and selects it
Does the stacking order matter? If a layer is at the bottom of all the layers, objects on it will appear in the background of the movie
65
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Frames, Layers & Scenes
Scenes Scenes are similar to scenes in a play. They are created separately, but run sequentially in the movie. Scenes can be used to break up a long movie into smaller more manageable chunks. What's the difference between a Scene and a Document? You can have a number of scenes in a Flash document. Once a scene has been "played" it will play the next scene and so on. For example, there may be a shape moving on the stage in one scene and when that is over it will play the next scene. Important points about Scenes § When creating a new scene, there is no evidence of other scenes. § Scenes play sequentially in the order they are created, but can be reordered.
Adding a New Scene 1. Click on the Insert menu 2. Choose Scene
Duplicating a Scene If you have created a scene with all the correct buttons, colours and animations on, and you need to replicate this, it is easier to duplicate the scene. 1. Click on the Window menu 2. Select Other Panels 3. Select Scene
4. Select the Scene you want to duplicate 5. Click on the Duplicate Scene button 6. Doubleclick the name of the new scene 7. Type a new name 8. Close dialog box
Happy Computers 020 7375 7300
Scene names can have spaces
66
Renaming a Scene 1. Click on the Window menu 2. Choose Panels 3. Select Scene 4. Select the Scene you want to rename 5. Doubleclick the scene name 6. Type a new name 7. Close dialog box
67
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Mask Layers
Mask Layers
Happy Computers 020 7375 7300
68
Mask Layers Mask layers are layers that allow you to hide and show parts of the layer below. It is like a window envelope where you can only see certain parts of the letter in the envelope. Once you have created the mask layer, it is easy to animate the mask layer to create special effects.
Creating a Mask Layer There are three stages to creating your mask layer 1. Draw the picture that you want to be underneath the mask and name that layer 2. Add a new layer and draw the shape that you want to form the mask. 3. Turn on the masking You can switch the gridlines on so you can align your shapes. 1. Click on the View menu 2. Choose Grid 3. Select Show Grid 1. Create a new scene 2. Rename the layer
Make the name relevant to your content
3. Create the shape (or picture) you want underneath your mask layer
4. Keep on adding layers with content until you have the image you want for underneath your mask 5. Click on the Insert Layer icon 6. Rename the layer “Mask layer” 7. Ensure the Mask layer is selected
69
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Mask Layers
8. Create the shape (or shapes) that you want to form the mask layer
9. Lock all three layers 10.Ensure the Mask layer is selected 11.Right click on the mask layer 12.Choose Properties 13.Click in Mask
There is a Mask icon next to the Mask layer
14.Right Click on your first layer 15.Choose Properties 16.Click Masked
The background layers are seen through the Mask layer
Masks use a lot of processing power, so keep masks to a minimum.
Happy Computers 020 7375 7300
70
Mask layers can only contain one shape – if you put two shapes in it will just use the first one you drew to create the mask
What Shapes can I use in the Mask and Linking layers? This is completely up to you! Masking is a very powerful tool in Flash, go ahead and experiment.
Unlinking a Layer from a Mask Layer Often when you create a new layer below a Mask layer it is associated with it. 1. Rightclick on the Mask layer 2. Choose Mask
Animated Masks This type of animation is like a spotlight effect. See page 97 for an example.
71
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Symbols
Symbols
Happy Computers 020 7375 7300
72
Symbols Types of Symbols A symbol is an object that is going to be used more than once it can be a static element, a button or an animated movie clip. There are 3 types of symbols: Graphic Button Movie Clip
These are objects created in Flash. i.e. a shape or some text These are interactive objects that will perform an action e.g. a Home button activated when the user clicks on it These are independent animations within a movie i.e. a moving image that runs continuously Why should I use symbols?
§ If you need to use an element again and again, use a symbol since it will help to reduce your file size. § If you change the symbol (for example change the colour) every copy of the symbol will be changed throughout the Flash document. Where are symbols stored? Each Flash document has its own library. To view the library press F11.
Useful jargon § When an object is in the library it is know as a symbol § When a symbol is on the stage it is known as an instance of the symbol
Creating a Symbol There are 2 methods: · ·
73
Converting an existing object into a Graphic symbol (See p 57) Creating a symbol from scratch
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Symbols
Creating a Symbol from Scratch 1. Click on the Insert menu 2. Choose New Symbol 3. Type a name for the symbol 4. Ensure the behaviour is Graphic 5. Click OK
You are now in Symbol editing mode
How do I know I am in Symbolediting mode? § A crosshair is placed in the centre of the stage and in the Library. § Just below the Timeline you will see the name of the new symbol § The entire stage appears white 6. Create the symbol
The crosshair indicates the centre of your stage, you can position your symbol in relation to it
How do I centre the symbol on the stage? 1. Select the symbol 2. Use the arrow keys on the keyboard to move the symbol a pixel at a time 7. Click on the scene name
You will be returned to the stage You now need to add an instance of the symbol to the stage 8. Press F11 The Library for this document opens
9. Click and drag on the Symbol or Symbol name in the Library
Happy Computers 020 7375 7300
An instance of the symbol is placed on the stage
74
Editing a Symbol (and all of its instances) This changes the symbol permanently and all instances of the symbol on the stage.
1. Rightclick the symbol name in the library or Rightclick an instance of the symbol on the stage 2. Choose Edit
You are in symbolediting mode
3. Make your changes 4. Return to the movieediting mode by clicking on the scene name
Changing the Colour of a single Instance You may decide you only want to change the instance on the stage and not the symbol in the library, particularly when you’re animating.
1. Add an instance to the stage 2. Select the instance On the Property inspector 3. Click on the down arrow next to Colour
Brightness Tint Alpha Advanced
100 makes the object black, 0 remains the same and 100 makes it white Changes the colour of the object (also measured in the amount of red, green and blue in the mix) Changes the transparency of the instance. 0 makes it invisible and 100 remains the same Changes the instance’s tint and transparency in one go
4. Choose Tint
5. Ensure the Tint is at 100% 6. Click on the Colour icon 7. Choose a colour from the
75
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Symbols
palette
Duplicating a Symbol If you have made changes to an instance then find you will need to reuse the instance then convert it to a symbol. 1. Rightclick the altered instance of the symbol on the stage 2. Choose Convert to Symbol 3. Type a new name for this symbol 4. Ensure the behaviour is graphic 5. Click OK
Deleting a Symbol from the Library 1. Rightclick on the symbol name in the library 2. Choose Delete 3. Click Delete
Confirmation message appears
Adding a Library from another Movie 1. Click on the File menu 2. Choose Import 3. Choose Open External Library
4. Choose the flash file that contains the library that you want to open 5. Click Open
Using a Symbol from Another Library Click and drag the symbol from the second library onto the stage
The symbol becomes part of the library of this document
Changing a symbol/instance from another library This is just as before, the symbol is now part of the current library. You can either change the symbol or an instance.
Happy Computers 020 7375 7300
76
Swapping one Instance of a Symbol for Another 1. Select the instance on the stage you want to replace On the property inspector 2. Click on the Swap button 3. Choose the symbol you want to replace the existing symbol 4. Click OK
77
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Symbols
Organising Symbols It is good practice to organise your files in general, and this includes your symbols. Instead of just storing your symbols in the Library, it is better to arrange them within folders, particularly if your movie is going to have a large number of symbols.
Creating Folders in the Library 1. F11 2. Click on the New Folder icon at the bottom of the Library 3. Type a name 4. Press Enter
Opens the library for this movie A new folder appears in the library
Moving Symbols into the Folder 1. Select the symbol name in the library 2. Drag it to the folder name until there is a thin black line around it 3. Release the mouse Moving adjacent symbols into a folder 1. Click on the first symbol 2. Hold down the Shift key 3. Click the last symbol All the symbols are selected 4. Drag to the folder 5. Release the mouse Moving more than one symbol not adjacent into a folder 1. Click on a symbol 2. Hold down the Ctrl key 3. Select the other symbols 4. Drag to the folder 5. Release the mouse
Happy Computers 020 7375 7300
78
Animation: Frameby-Frame
79
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: FramebyFrame
Simple Frame-by-Frame Animation This is a very simple animation using a series of images, each of which are slightly different from one another. Each of these images needs to be placed on a separate keyframe. The entire animation can be made up of a series of keyframes. The keyframe will duplicate the symbol from the previous frame, then you can change it. This means you don’t have to keep recreating the symbol in each keyframe. How do I add Keyframes? 1. Click in the frame in the Timeline 2. Press F6
Example of "Bouncing ball" Animation Change the view so you can see the entire frame. 1. Click on the View menu 2. Choose Magnification 3. Select Show Frame You will see the entire stage 1. Open a new document 2. Rename the layer Bouncing ball 3. Select frame 1 4. Select the Oval tool on the Toolbar 5. Set the Line colour to None 6. Create a perfect circle about 1 inch in diameter in the top left of the stage 7. Click into the second frame 8. Press F6 9. Click on the Arrow tool 10.Move the circle to the bottom of the stage 11.Click into the third frame 12.Press F6 13.Move the circle to the centre of the stage 14.Repeat steps 12 and 13 until the circle is in the bottom right corner of the stage
Happy Computers 020 7375 7300
Hold down the Shift key to make a perfect circle
A Keyframe is added
80
Previewing the Scene It is only necessary to play a scene at a time; if you play the movie it will play each scene concurrently. 1. Click on the Window menu 2. Choose Toolbars 3. Choose Controller or
Use Play, Stop, Forward, Rewind buttons
Playing the Frames in the Flash Player Click Ctrl+Alt+Enter Or 1. Click on the Control menu 2. Choose Test Scene Flash exports the scene to a Shockwave Flash Format file and opens it in Flash Player. This .swf file takes the same name as the Flash movie 3. Press Escape to stop the scene 4. Closing the window returns you to the flash scene
Adding More Frames to Make the Animation Smoother This first movie is not very smooth and a bit crude. By adding more keyframes and moving the circle in each one, the bouncing ball can appear smoother. Before you add more keyframes, switch on onion skinning. This allows you to see the circle in context with the other circles in the keyframes.
Switching on Onion Skinning 1. Click on the Onion skin icon on the Timeline
Onion skin
2. Click on the right Onion skin marker 3. Drag it so it extends over all the frames you are using This is what you will see on the stage
81
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: FramebyFrame
Onionsking Icons Onion skinning shows dimmed or outlines of the content of your other frames in the animation. This helps if you need to align shapes and in refining your animation.
Turns on Onion skinning
Onion skin outlines
Happy Computers 020 7375 7300
Edit multiple frames
Modify Onion markers
82
Frame Rate The Frame Rate controls the speed at which Flash will show the images. If the frame rate is too high, the movie will appear as a blur, if it is too slow, the viewer will actually see each frame as separate images. A good frame rate setting for animation over the web is 12fps.
Setting the Frame Rate In the frame rate box on the Timeline, Doubleclick the frame rate Document Properties dialogue box opens up
Enter a value for the frame rate Press OK
Slowing Down the Animation Another way of slowing the animation is to add blank frames between the keyframes 1. Select keyframe 1 2. Click on F5 3. Select the second keyframe 4. Click F5 5. Repeat the steps so there is a blank frame between each keyframe
This inserts a Frame
6. Press Ctrl +Alt + Enter to test the scene Blurred animation If the animation appears blurred in the movie, try reducing the frames per second (fps).
83
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: Motion Tweening
Animation: Motion Tweening
Happy Computers 020 7375 7300
84
Motion Tweening Framebyframe animation produces large files and is a lot of work. So, Flash gives you an alternative, which is Tweening. Tweening is when you instruct Flash to fill in the frames in between (this is where "tweening" come from) the keyframes. What can Flash Motion Tween? · · ·
Symbols Grouped objects Text
Examples of Motion Tweening · · · ·
Animating objects that change colour Animating objects that fade out Animating objects that change size Animating objects that move
Animating Objects that Change Colour Here the colour changes, but all you do is choose the starting and ending colours and Flash will motion tween the in between frames. I.e. the colour will change gradually between the two keyframes. 1. Create a new Flash document 2. Rename the layer
(Or open one containing symbols, ensure that you are on a new layer, and then go to step 6) Make the name something that’s appropriate for the content
3. Ensure Keyframe 1 is selected 4. Drag an instance of a symbol onto the stage 5. From the properties inspector choose the motion tween 6. Select the frame that you want to end the animation to end on 7. Press F6
A keyframe is inserted
8. With your frame still
85
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: Motion Tweening
selected, use the pointer to select the object on the page Using the Property inspector 9. Click on the down arrow next to Colour
10.Choose Tint 11.Change the colour 12.Ctrl + Alt + Enter to view the scene
Flash recolours the shape in the inbetween frames
Animating Objects that Fade Out It is possible to "tween" an object so the colour fades. This example will show the object’s colour fade in and out. 1. Create a new Flash document, scene or layer 2. Rename the layer 3. Select frame 1 4. Drag an instance of a symbol from the library 5. Choose Create Motion Tween from the properties inspector 6. Select your next keyframe 7. Press F6 8. Select the shape 9. Click on the drop down next to Colour on the Property inspector
A keyframe is inserted
10.Choose Alpha 11.Change the % to 0
12.Keep inserting keyframes and changing the Alpha in each until you have the effect you want. 13.Press Ctrl + Alt + Enter to view the scene
Happy Computers 020 7375 7300
86
Animating Objects that Change Size It is possible to "tween" an object so it enlarges then gets smaller. This example will show a shape growing in size, and then shrinking. 1. Create a new Flash document, scene or layer 2. Rename the layer 3. Select frame 1 4. Drag an instance of a symbol from the library 5. Choose Create Motion Tween from the properties inspector 6. Select your next keyframe 7. Press F6 8. Click on the free transform
A keyframe appears
Tool on the Tool box 9. Change the size of the shape by clicking and dragging the corner handle 10.Repeat with as many keyframes as you want to include in your animation 11.Press Ctrl + Alt + Enter to view the Scene Time delay between objects animating If there is a time delay between one object ending and restarting, it may be that there are more frames being used for one object, so all the frames have to run before they can start again. I.e.
There is a 15 frame delay before "square" can start again
87
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: Motion Tweening
Animating Objects to Move Across the Stage It is possible to "tween" an object so it moves across the stage. This example will show a shape moving and rotating across the stage. 1. Create a new Flash document, scene or layer 2. Rename the layer 3. Select frame 1 4. Drag an instance of a symbol from the library 5. Choose Create Motion Tween from the properties inspector 6. Select your next keyframe 7. Press F6 8. Move the shape by clicking and dragging it to somewhere else on the stage 9. Repeat as many times as you like 10.Press Ctrl + Alt + Enter to view the Scene
A keyframe is inserted Cursor shape is a large black arrow with a smaller four headed arrow attached to it
Combine as many kinds of change as you want in your motion tween – you can do all of them to the same object with the same tween.
Animating Objects to Move Across the Stage Using Guide Layers Guides layers allow you to draw a path for your shape to follow. A normal layer is linked to this guide layer. 1. Add a new Scene or layer 2. Rename the layer 3. Select frame 1 4. Drag an instance of a symbol from the library Or Copy & paste an image from the web 5. Select frame 1 6. Choose Create Motion Tween from your properties inspector
Happy Computers 020 7375 7300
Create a shape which that will look different when rotated
88
7. In your properties inspector for the first frame of the tween – choose Snap This will ensure that the shape snaps to your guide path when you draw it 8. Click in the last frame for this animation 9. Press F6
A keyframe appears
10.Click on the Arrow tool if it is not already pressed in 11.Move the object to the end position 12.Click on the Add Guide Layer icon
The Guide layer appears above the original layer
13.Switch on onionskinning 14.Extend the skinning over all the frames
15.Click on the Pencil tool 16.Draw the pathway from the centre of the first shape to the centre of last shape
Start from the centre of the shape in frame 1 and end in the centre of the shape in the last frame
Last position of the shape
17.Press Ctrl + Alt + Enter to view the scene
89
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: Motion Tweening
Animating Objects to Move Across the Stage Matching the Shape‛s Orientation to the Path To make the movement of your shape look even more realistic, it is wise to change the object’s position according to where it is moving to. For example, if you had motion tweened a beetle to crawl across the stage, it would look better if the beetle was facing the direction it was moving in
The beetle is always facing the left even though the guide layer changes direction.
The beetle is always facing the direction it is moving in.
1. Create your motion tween as normal 2. In the properties inspector for your first frame on the motion tween choose Orient to Path 3. Create your guide layer as normal
Happy Computers 020 7375 7300
90
Animation: Shape Tweening
91
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: Shape Tweening
Shape Tweening Difference between Motion & Shape tweening? Motion tweening works on groups and symbols, whereas Shape tweening uses editable shapes and either morphs them or changes their colour. You will see it is possible to arrive at the same animation effect using either motion or shape tweening, i.e. the bouncing ball example Examples of Shape Tweening · · · ·
Morphing a simple shape into another Morphing letters/numbers Morphing one object into many objects Changing the colour of an object
Morphing a Simple Shape into Another 1. Insert a new scene or layer 2. Rename the layer 3. Select frame 1 Why not use one of your existing symbols…however you must “Break Apart” the instance otherwise you won’t be able to shape tween it 1. Drag an instance of the symbol onto the left side of the stage In this case it is a circle 2. Click on the Modify menu 3. Choose Break Apart 4. either use an existing symbol broken apart or draw a shape on the stage On the Property inspector 5. Click on the Tween downward arrow 6. Choose Shape 7. Click on the next frame you want as a keyframe 8. Press F7
Blank keyframe is inserted and frames 19 change to pale green with a dashed line
9. Create a different shape on
Happy Computers 020 7375 7300
92
the right side of the stage 10.Press Ctrl+ Alt + Enter to view the scene
This is what the animation looks like
Aligning the Two Shapes When you run through the animation, you may notice the location of the two shapes are different, as well as morphing into another shape, the shapes actually seem to move. To prevent this from happening, you can use onion skinning, so you can position your shapes. In the example below we are shape tweening a circle into a square in the same location. 1. Click on the Onion skin icon below the Timeline 2. Click and drag the markers so you can see all the frames 3. Doubleclick the square to select it 4. Click and drag it so it is on top of the circle
5. Click on the Outline icon for this layer so you can only see the outline for both shapes
6. Now you can reposition the shapes so they are exactly on top of each other
Use the arrow keys on the keyboard to move the shapes one pixel at a time
7. Press Ctrl + Alt +Enter to view the scene
93
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: Shape Tweening
Morphing Letters/Numbers 1. Create a new scene 2. Rename the layer "charactermorph" 3. Select frame 1 4. Click on the Text tool In the Property inspector 5. Format the text as you want 6. Click onto the stage 7. Type a letter or word 8. Singleclick on keyframe 1 9. Choose Shape tween from the properties inspector 10.Click into the last frame of your animation 11.Press F7 12.Click onto the stage where you want the new text to appear 13.Type a letter or word 14.Click on the first keyframe 15.Click on the Modify menu 16.Choose Break apart 17.Click on the second keyframe and break those letters apart too 18.Switch on Onion skinning to reposition “the letters 19.Press Ctrl + Alt + Enter to view the scene
A new blank keyframe appears
If you have a whole word or sentence you might have to break apart twice
If this does not work, check in “Break apart” has been chosen in both keyframes.
Viewing Morphing using Onion Skins 1. Click on the Onion skin outlines icon 2. Click and drag the onion skin markers so you can see all the frames
Morphing one Object into Many Objects 1. Create a new scene or layer
Happy Computers 020 7375 7300
94
2. Rename the layer 3. Select frame 1 4. Create a shape or use a broken apart symbol
You decide on the fill colour but for the stroke colour choose none
5. Singleclick frame 1 6. Choose shape tweening from the property inspector 7. Click on your last frame 8. Click on F7 9. Create other shapes around where the original shape was 10.Press Ctrl + Alt + Enter to view the scene
Again you decide on the fill colour but choose none for the stroke
Changing the Colour of an Object 1. Create a new scene or layer 2. Rename the layer" 3. Select frame 1 4. Create a shape
You decide on the fill colour but choose none for the stroke
5. Singleclick on keyframe 1 6. Choose Shape tweening from the properties inspector 7. Click in your final frame 8. Press F6
Duplicates the symbol from the previous keyframe
9. Click on the Arrow tool 10.Select the shape in the second keyframe if it is not selected 11.Change the fill colour of the shape to a colour of your choice 12.Press Ctrl + Alt + Enter to view the scene
95
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animated Masks
Animated Masks
Happy Computers 020 7375 7300
96
Animated Masks This type of animation is like a spotlight effect. The mask layer contains a single shape and it is this shape that is the "spotlight", moving over a background layer that shows through.
Creating an Animated Mask When you create an Animated Mask the ‘background’ can be any image you want.
Using an image from the Internet (be aware of copyright) 1. Find the image 2. Rightclick it 3. Choose Copy 4. Paste it onto the stage 5. Rightclick the image 6. Choose Convert to Symbol 7. Type a name for the symbol and choose a behaviour (in this case it is a graphic) The image is now an object in your library so can be used again View the entire stage before you start 1. Click on the View menu 2. Choose Magnification 3. Choose Show Frame 1. Open a new scene 2. Rename the layer 3. Click in frame 1 for the ‘background’ layer 4. Drag a graphic symbol from the library onto the centre of the stage 5. Click in the timeline at the last frame that you want in your animation 6. Press F6 7. Click on the Insert new layer icon 8. Rename this new layer
97
This will be our background layer
Background layer will be visible for the length of your movie A keyframe appears New layer appears above the background Calling it “Mask” is a good idea
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animated Masks
9. Click on frame 1 on the mask layer 10.Draw a shape that you want to be the mask 11.Click on frame 1 on the “Mask” layer 12.Click on Modify menu 13.Choose Group
The stroke & fill colours are unimportant
Shape appears with a line around it
Why do you need to group the object? This is an animation using motion tweening, so you must use a symbol or a grouped object.
14.Create a motion tween on the first frame of the Mask Layer 15.Create a multistage tween for the mask 16.Right click on the “Mask Circle" layer name 17.Choose Mask
Flash converts the layer to a mask which links and locks the two layers. The stage might look blank if you have used a large image as backround.
Both layers are now 18.Press Ctrl + Alt + Enter to view the scene What to do if it does not work Check that the Mask layer is the top layer.
Happy Computers 020 7375 7300
98
Buttons
99
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Buttons
Basic Rollover Buttons Using buttons on your website can allow the user to interact with the Flash movie. Buttons can be very basic and show static graphics – but can also be made more interesting by animating when they are clicked or rolled over. What is a button? A button is simply a symbol with four frames. Three of the frames denote the "state" of the button and the fourth one defines the active area of the button.
Frames in a Basic Rollover Button There are 4 frames in the timeline: Up
This is what the button looks like before it has been clicked on.
Over
This is what the button looks like when the cursor is positioned over it. This is what the button looks like when someone is pressing the button. This defines the area of the button.
Down Hit
Creating a Basic Rollover Button that Changes Colour 1. Click on the Insert menu 2. Choose New Symbol
3. Name the button 4. Click Button behaviour 5. Click OK
Dialog box appears
Flash creates a new symbol in the library and takes you to the symbolediting mode
Basic button By default the Up frame contains the keyframe, you must add keyframes
Happy Computers 020 7375 7300
100
Creating the Up State (Continued from creating a Basic Rollover button: ) This object will be the button that is just sitting on the stage waiting for the user to click it. 1. Select the Up frame in the Timeline
The crosshair, , in the middle of the stage serves as a central point for placing new or existing graphics on the stage
2. Create a shape Or Drag an instance of a symbol from the library
Align the symbol with the crosshair in the centre of the stage
if you’re using an instance of a symbol, remember to break the instance apart so that you can edit it in the same way as a norma object 1. Click on the Modify menu 2. Choose Break Apart or Ctrl + B
Creating the Over State Here we are going to make minor changes to the Over graphic, so the user knows when their mouse is on the button. 1. Select the Over frame in the Timeline 2. Click on F6
3. Click on the Paint Bucket tool on the Toolbox 4. Click on the Fill colour icon 5. Choose a different colour
This keyframe duplicates the contents from the previous keyframe
Shape in the over state has changed colour
Creating the Down State Now we are going to make minor changes to the Down graphic, so the user sees a slightly different colour when they click the button (i.e. when the button is being pressed down). 1. Select the Down frame in the Timeline
101
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Buttons
2. Click on F6
3. Click on the Paint Bucket tool on the Toolbox 4. Click on the Fill colour icon 5. Choose a different colour
This keyframe duplicates the contents from the previous keyframe
Shape in the over state has changed colour
Creating the Hit State This is the area around the button that is active. 1. 2.
Select the Hit frame in the Timeline Click on F6
This keyframe duplicates the contents from the previous keyframe
Changing the look of the button in the Hit state is unnecessary. To the user it is an invisible part of the button that will have an effect when they click on it. In editing mode you may see it as a semitransparent light blue shape.
Previewing the Button in the Movie-Editing Mode 1. Click on the Scene name. In the top left corner of the Timeline
2. Click F11 3. Drag an instance of the button onto the stage
4. Click on the Control menu 5. Choose Enable Simple Buttons 6. Test out your button by clicking on it
Happy Computers 020 7375 7300
This will move you back to your current scene.
This shows the Library Ensure the button is deselected, you may need to click on the Arrow tool then click on the stage
You will be able to see all 3 "states"
102
Previewing the button by testing the scene Press Ctrl + Alt + Enter to view the current scene
Don't forget to switch off Enable Buttons! 1. Click on the control menu 2. Click on Enable Simple Buttons (so there is no tick)
To edit the instance and edit the symbol see page 75
103
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Buttons
Buttons with Text It is easy to create buttons with text within them. Changing the look of the text in each state indicates when the user has moved the mouse over the button.
Summary of Steps · · ·
Create the button Add the text Testing the scene
Creating the Button This is the example we are going to create. Up State
Over State
Down State
Text in black
Text in Orange
Text in grey
1. Create a new scene if needed 2. Click on the Insert menu 3. Choose New Symbol 4. Name the button 5. Click on the Button behaviour 6. Click OK 7. Draw out the shape of your button or use an instance of a symbol (don’t forget to break it apart)
Adding the Text 1. Click on the Text tool icon on the Toolbox
You could create a new layer within the button to put the text in
1. On the Property inspector make any changes you want to the text style 2. Click in the centre of your button 3. Type the text that you’d like to have on your button 4. Click on the Arrow tool
Happy Computers 020 7375 7300
104
5. Position the text so it is in the centre of the shape Moving objects on the stage Use the arrow keys on the keyboard to move the text – you can be more accurate this way 6. Click in the Over frame 7. Press F6 8. Click away from the button onto an empty part of the stage 9. Make any changes you want to your button or the text 10. Click in the Down frame 11. Press F6 12. Click away from the button onto an empty part of the stage 13. Change the font colour to grey 14. Click in the Hit frame 15. Press F6
Inserts a Keyframe This will deselect everything
Inserts a Keyframe
Inserts a Keyframe
Testing the Scene 1. Click on the Scene name to return to the stage 2. Drag an instance of the button onto the stage 3. Click on the Control menu 4. Click on Enable Simple Buttons 5. Test out your button by clicking on it
105
F11 if the Library is not visible
You will be able to see all 3 "states"
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Buttons
Buttons that Change Shape It is possible to use Flash to create buttons that have different and imaginative shapes.
Creating the 4 States in a Button 1. Create a new scene if needed 2. Click on the Insert menu 3. Choose New Symbol 4. Name the button 5. Choose Button behaviour 6. Click OK
Flash creates a new symbol in the library and takes you to the symbolediting mode
7. Click on Onion skin icon in the Timeline
8. Select the Up keyframe 9. Choose a colour for the fill and stroke 10.Create a shape for your button
11.Move the shape so it is in the centre of the stage by using the align panel. Have To Stage selected Choose Align Vertical Centre and Align Horizontal Centre 12.In each of the states for the button press F6 13.In the Over state use the Transform Panel to make the shape a different percentage size 14.In the Down state use the Transform Panel to make the shape a different percentage size 15. In each state use the Align panel to ensure the shape
Happy Computers 020 7375 7300
You will get a duplicate of your shape in each one
This ensures that your button stays in the same place at
106
is central to the stage 16.Return to the scene by clicking on the scene name 17.Drag an instance of the button onto the stage 18.Click on the Control menu 19.Choose Enable Simple buttons 20.Test the button
each state
3 States of the Button Up state
Over state
Down state
If the shapes in the Up, Over and Down states are all different then in the hit state it is advisable to create another shape that covers all three shapes. Otherwise the viewer may not be able to interact with some parts of the button.
107
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Buttons
Invisible Buttons When you create a button you don’t have to put an object onto every state. In fact, the only frame that must have some content is the Hit frame. Buttons with no content in the Up, Down and Over frames are invisible in the final movie. In this example, there is some text on the stage and the user can click anywhere on the stage to move to the next frame in the movie. Because there is content only in the hit frame the button is invisible, The user can click anywhere on the stage. In this example you will add two frame actions and one object action. 1. Click on the File menu 2. Choose New 3. Name the layer 4. Click in the first frame 5. Click on the Text tool 6. Click in the centre of the stage 7. Type some text 8. Use the Arrow tool to position the text in the centre of the stage 9. Ensure frame 1 is still selected 10.Click on the Insert menu 11.Choose New Symbol 12.Name the symbol 13.Choose the behaviour Button 14.Click OK 15.Select the Hit frame 16.Press F7 17.Click on the Rectangle tool 18.Create a rectangle as large as the stage
19.Click on the scene name to return to the movieediting mode 20.Click on the Insert layer icon 21.Name the new layer
Happy Computers 020 7375 7300
This layer will contain the text
This is going to be your invisible button
Inserts a blank keyframe
This rectangle turns the entire stage into a button and since there are no objects in the other button frames, the button is invisible
This layer will contain your actions so it would be good to 108
name it ‘Actions’ 22.In the timeline, drag this layer to the bottom of the stacking order 23.Click on the first frame on the “Actions” layer 24.Click on the Window menu 25.Choose Actions 26.Click on Global Actions 27.Choose Timeline Control
28.Click on Stop
29.Close the Actions panel 30.Open the Library if it isn’t open already 31.Click on the first frame on the layer that contains the text 32.Drag an instance of your invisible button onto the stage 33.Reposition the button so it covers the stage
The stop action will appear in the right hand side of the panel
F11
To increase the size of a shape 1. Click on the shape on the stage 2. Click on the Free Transform tool icon on the toolbox 3. Click and drag any corner handle to increase the size of the shape This time you’ll be applying the 34.Click on the rectangle on action to the button rather the stage to select it than the frame itself 35.Click on the Windowmenu 36.Choose Actions > Global Functions > Timeline control 37.Make sure that Script Assist is turned on by clicking the button 38.Doubleclick the Go to 109
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Buttons
action 39.In the Action Script Assist panel fill in the number of the scene and frame you want to go to in this case the current scene and frame 2
40.Close the Actions panel 41.Click into the second frame on the content layer 42.Press F7 43.Click on the Text tool 44.Click on the stage 45. Put in some different content
Inserts a blank keyframe
You can add some animation here so after the user has clicked on the stage some animation is played.
46.Press Ctrl + Enter The movie loops, so you need to add another STOP action in the final frame 47.Click on the final frame on the “Actions” layer 48.Press F7 49.Click on the Window menu 50.Choose Actions > Global Functions > Timeline Control 51.Doubleclick the STOP action 52.Press Ctrl+Enter to view the movie
Happy Computers 020 7375 7300
Inserts a blank keyframe
Timeline should look like this
110
Buttons with Multiple Hotspots Buttons don’t always have to behave as a button or switch, but can be used as a fun element of your movie. In this example the Hit frame has nothing to do with the graphics of the button, but as a separate graphic. This example is a game for the user, where they try to find a bean under the cup. If the user chooses the wrong cup a message will appear and when they find the correct cup another message appears. 1. Click on the File menu 2. Choose New 3. Click on the View menu 4. Choose Grid 5. Select Show Grid 6. Create 5 cups in frame 1
To create a cup use the Oval tool then delete the bottom part of the oval and use the pencil with the smooth option
The easiest way to select an object is to click and drag around it (with the arrow tool switched on)
7. Select 4 of the cups 8. Click on the Edit menu 9. Choose Copy 10. Click on the Insert menu 11. Choose New Symbol 12. Choose Button as the behaviour 13. Type a name for the button 14. Click OK
111
15. 16. 17. 18.
Click on the Hit frame Click F7 Click on the Edit menu Choose Paste
19. 20. 21.
Click on the Down frame Click F7 Click on the Type tool
Use Shift key and click each cup
You are in symbolediting mode Inserts blank keyframe Flash pastes the 4 cups in the centre of the stage
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Buttons
22. Type a message the user will see when they click on the wrong cup 23. Position the text below the cups 24. Click on the scene name
Returns you to movieediting mode
Flash shows the cups as a transparent preview 25. Position the hotspot cups so they are on top of the cups 26. Do the same for the remaining cup See steps 725 27. Click on Ctrl + Alt + Enter to test the scene
Happy Computers 020 7375 7300
112
Actions
113
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Actions
Actions In animation, Flash plays the scenes your movie in sequence. However, in an interactive movie, your audience plays a part in the movie. This might be by using the keyboard, the mouse to jump to different parts of the movie, move shapes, enter information and do lots more. You can make your movie interactive by using actions, which are instructions written in ActionScript. An action is like a statement or a command. 2 types of Actions § Frame actions Requires nothing from the user, when the playhead reaches the frame with the action, it just goes ahead and runs the action § Object actions These actions are played when the user does something ie clicks on a button Actions can also be assigned to a movieclip that responds to the user doing something or runs when the movie is first played.
In the actions panel there is a button called Script Assist – turn this on to get help creating your action script
To turn on Script Assist This manual only refers to and creates actions using Script Assist mode. Check you you have Script Assist turned on for ActionScripting before you add an action 1. Click on the Window menu 2. Choose Actions 3. Click the Script Assist button More than one action can be added to the same frame/button. They will occur in the order they appear in the Actions dialog box.
Object Actions Dialog Box 1. Click on the Window menu
Happy Computers 020 7375 7300
114
2. Choose Actions
You can open and close the Action Script window as you need 3. Click on the arrow at the top of the panel The actions we will be using are in the Global Functions and then Timeline Control
Organising Actions 1. Add a new layer 2. Rename the layer Actions 3. Drag this layer to the bottom or the top
This will make it easier for you to find it – you can put your frame actions here
It is good practice to lock the “actions” layer This will prevent you from accidentally adding any graphics to this layer.
Adding a stop and go to Action to a Button Instance Why do I need a stop action? This is to prevent the movie from looping continuously.
1. Open a new Flash document 2. Rename the layer “text” 3. Click in frame 1 4. Click on the text tool 5. Click anywhere on the stage 6. Type “Scene 1 frame 1” 7. Click in frame 2 8. Press F6 9. Change the text so it reads “Scene 1 frame 2” 10. Insert a new layer 11. Click and drag it to the bottom of the layers list
115
Duplicates from frame 1
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Actions
12. Rename this layer “actions” 13. Click in frame 1 of the “actions” layer 14. Click on the Window menu 15. Choose Actions 16. Choose the Actions category 17. Click on Global Functions > Timeline Controls 18. Doubleclick stop action
Stop action is added to the Actions list
19. Select frame 1in the text layer 20. Drag an instance of a button onto the stage Instead of recreating a symbol use an existing one from another Flash document 1. Click on the File menu 2. Click on Open as Library Find the Flash document 21. Select the button 22. Ensure the Actions panel is open Make sure Script Assist is turned on 23. Choose Global Functions > Timeline Controls 24. Doubleclick go to action 25. For the Scene and Type, do not change anything 26. For the Frame number, change to 2 27. Choose the Go to and Stop option
Actions appear in the right side of the screen
If you don’t choose this your movie will play then continue to loop
28. Click on the Control menu 29. Choose Enable Simple Buttons 30. Test the button
Deleting an Action 1. Open the Actions panel 2. Select the action to delete
Happy Computers 020 7375 7300
116
3. Click on the
icon
Some actions are straightforward is Stop, Play & Go To, others such as FS Command & Set Property require a certain amount of programming knowledge.
Adding Frame Labels and Comments In some actions you need to specify a particular frame, instead of referring to the frame number it is safer if you refer to them by a name, so you know you have the right one. For example, if you add or remove frames you will not need to change the frame number for the action as Flash will still find the frame by the label name. For frames that are not used in actions, you can add comments to them describing what it going on. You cannot add a label and a comment to the same frame.
Labelling a Frame 1. Select the frame in the timeline On the Property inspector 2. Type a name for the frame
3. Deselect the frame in the timeline 4. You can also choose a label type from the dropdown list
117
A small red flag appears in the frame
You can choose Name, Comment or Anchor
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: MovieClips
Animation: MovieClips
Happy Computers 020 7375 7300
118
Movie-Clip Symbols Movie-clip symbols There are 2 types of animated symbols · Graphic symbols · Movie clips An animated graphic symbol uses the timeline of the movie it has been placed into, whereas a movieclip symbol has its own timeline. Movieclips are able to retain their interactivity, because they do have their own timeline to which you can add actions. Graphic symbols lose some of their interactivity when they are converted into a graphic symbol. This example is of a button, with a movie clip inside the Over frame. When the user moves their mouse over the button and clicks on the button, an animation will play, which will be the border of the button getting larger and fading out.
Summary of Steps · · · · ·
Create a basic rollover button Creating the graphic symbol Creating the movieclip Editing the button Testing the button
Create a Basic Rollover Button 1. Create a new Flash document 2. Click on the Insert menu 3. Choose New Symbol 4. Name the button "Circle button" 5. Select the Button behaviour 6. Click OK 7. Select the Up frame 8. Click on the Oval tool on the Toolbox 9. Change the line thickness to 4 and the line colour to black 10.Change the fill colour to a colour of your choice 11.Create a perfect circle 12.Click on the Over frame 13.Press F6
119
Use the crosshair to postion it in the centre of the stage Inserts a keyframe
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: MovieClips
14.Click on the Over frame 15.Press F6 Inserts a keyframe 16.Click on the stage to deselect the circle 17.Click once to select the stroke 18.Press Delete on the keyboard 19.Right click on the Over keyframe 20.Choose Copy frames 21.Right click in the Hit frame 22.Choose Paste frames 23.Click on the Scene name Returns to movieediting mode Open the Library if it isn't open already F11
Creating the Graphic Symbol This graphic symbol will be used to create the movieclip. A button is used so the shape of the button remains constant. 1. Drag an instance of the button onto the stage 2. Click on the Modify menu 3. Select Break Apart 4. Click on the stage to deselect the shape 5. Click on the fill of the shape
Appears selected
6. Press Delete on the keyboard
Shape appears with only the outline
7. Click once to select the stroke 8. Click on the Insert menu 9. Choose Convert to Symbol 10.Name the symbol “outline” 11.Choose Graphic as the behaviour 12.Click OK 13.Press Delete
Happy Computers 020 7375 7300
This will delete the instance from the stage 120
Creating the Movie Clip 1. Click on the Insert menu 2. Choose New Symbol 3. Name the new symbol “circle animation” 4. Choose Movie clip as the behaviour 5. Click OK 6. Drag an instance of "outline" onto This will form the basis of "circle the stage animation" 7. Line "outline" up with the crosshair on stage 8. Click on Frame One of the Movie Clip 9. Choose Create a Motion Tween from the Properties Inspector 10. Click on frame 20 11. Press F6
On the Property inspector 12. Click on the drop down arrow for Colour 13. Choose Alpha 14. Change the Alpha setting to 0% 15. Press Enter
16. Click on the Transform panel 17. Change the Scale option to 400% 18. Insert a new layer
19. Rename this layer “actions” 20. Drag it to the bottom of the list of layers 21. Click on frame 20 on the “actions” layer 22. Press F7 23. Click on the Window menu 24. Choose Actions 25.
121
This is transparency
Symbol will disapper except for selection box around it
Icon is in the bottom left of the Timeline
Inserts a blank keyframe
Select Global Functions >
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: MovieClips
Timeline Controls 26. Doubleclick the Stop action 27. Close the Actions panel
28.
Click on the Scene name
This is what the Timeline should look like for the MovieClip
Returns to movieediting mode
Editing the Button 1. Right click on the button in the library 2. Choose Edit 3. Insert a new layer 4. Click in the Over frame in the new layer 5. Press F7 6. Drag an instance of the movie clip onto the button 7. Line up the movie clip “circle animation” with the crosshair on the stage 8. Select the Down and Hit frames 9. Press F7 10.Click on the Scene name
Inserts blank frames Returns to movieediting mode
Testing the Button 1. Drag an instance of the button onto the stage 2. Test the scene Ctrl + Alt + Enter 3. Move the cursor over the button and click
Happy Computers 020 7375 7300
122
Movie Explorer
123
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Movie Explorer
Movie Explorer As you add text, graphic symbols, buttons and actions to your movie, it can be quite difficult to keep track of what is in each scene and layer. The Movie Explorer is a way for you to find and track different elements in your movie.
Using the Movie Explorer 1. Click on the Window menu 2. Choose Movie Explorer This is the name of the scene This is the only object on the stage at the moment. FrameLayer name Symbols in this document.
CusList of symbols tom set Text Buttons, Movie clips and
Video Click here
Frames and
ActionScrip
Movie Explorer can slow down your machine! Because it constantly updates, Flash can slow down considerably, even if it is only sitting open on your screen. So only open it when you are ready to use it.
Finding a Symbol from Movie Explorer 1. Rightclick on a symbol name in Movie Explorer 2. Choose Find in Library Symbol appears in the Library If the Library is not open, it will open showing the symbol
Happy Computers 020 7375 7300
124
Editing a symbol Just doubleclick the symbol name in Movie Explorer and it will take you to the symbolediting mode.
Renaming a scene Just doubleclick the scene name in Movie Explorer and rename the scene.
Changing the contents of a text box Just doubleclick the text in Movie Explorer and change the text.
Finding an Element 1. Click in the Find field
2. Type the text 3. You do not have to press enter as Flash will start the search as soon as there is text in the box
Printing the Levels 1. Change the display so it is how you want it 2. Click on the Options menu 3. Choose Print
125
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Interactive Movies
Interactive Movies
Happy Computers 020 7375 7300
126
Interactive Movies An interactive movie involves your audience, by using the keyboard, mouse or both. Your audience will be able to jump to different parts of your movie and perform many other functions. An interactive movie is a collection of scenes, buttons and actions. Pictorially, this is what a simple interactive movie could look like.
Main Clicking on the Contact Us button will go to the
Contact Products
Clicking on the Products button will go to the
Scene name Main
Main
Products Contact
Contact Products
Scene name – Contact
Scene name Products
Creating interactive movies Summary of steps · · · · · · · · ·
127
Creating a new movie & modifying the properties Creating a layer for your buttons Inserting instances of buttons onto a scene Adding more buttons Duplicating and renaming each scene Adding some text to each scene Add the relevant Actions to each button Adding the Get URL action to "Contact Us" button Adding the Get URL action to a URL
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Interactive Movies
· ·
Add a Stop action to each scene Testing the Movie
Creating a New Movie & Modifying the Properties Change the colour of the stage here, so you don't have to keep doing it. 1. Click on the View menu 2. Choose Magnification 3. Choose Show Frame 4. Click on the File menu 5. Choose New 6. Change the background colour to one of your choice)
Creating a Layer for Your Buttons This will be a different colour background only at the top of the stage for your buttons to sit on. 1. Rename the layer Headings 2. Click on fame 1 of this layer Create the following using Aligning Shapes on page 51 The colour of the rectangles is pale grey (#ffffff)
Inserting Instances of Buttons onto a Scene Here you will create 3 lozenge shaped buttons with the text Main, Contact and Products and place them on the largest rectangle on the background layer. For the buttons, the text in the Up state will be black, the Over state will be orange and the Down state will be grey.
1. Create a new layer 2. Rename it "Buttons"
Happy Computers 020 7375 7300
128
3. Select frame 1 of this layer Already created the button elsewhere and you don't want to recreate it? 1. Click on the File menu 2. Choose Open as Library 3. Open the Flash document 4. Find the button 5. Drag an instance to the stage The symbol is now in the Library of this movie too 4. Drag an instance of "button with text" onto the stage Before you start using this instance of the button, you may want to make changes to it. 1. Rightclick the instance on the stage 2. Choose Edit 3. Make your changes In this example I have reduced the size of the button so it fits on the rectangle and removed the stroke so the button blends in to the grey background 5. Click on the Arrow tool 6. Move the shape to the top left side of the stage largest rectangle
You now need to duplicate this button 7. Rightclick the name "button with text" in the Library 8. Choose Rename 9. Type “main menu” 10. Rightclick the “main menu” button in the library 11. Choose Duplicate 12. Type "Products" 13. Click OK 14. Rightclick "Products" 15. Choose Edit
You are now in symbolediting mode
16. Click on the Up keyframe
129
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Interactive Movies
17. Doubleclick the text in the shape 18. Type "Products" Repeat the above for the remaining 3 states of the button 19. Click on the Scene name
Returns you to movieediting mode
20. Rightclick on "main menu" in the Library 21. Choose Duplicate 22. Type "Contact Us" 23. Click OK 24. Repeat the steps from above for this button so it has the correct text 25. Click on the Scene name 26. Add an instance of each button on to the stage 27. Click on the arrow tool and position the buttons equally on the rectangle You can also use the Align panel to realign the three buttons 1. Click on the Window menu 2. Click on Panels 3. Choose Align 4. Click on Align Vertically Center 5. Click on the Distribute Horizontal Center Creating Buttons with Type See page 104
Adding more Buttons Duplicate the "main menu" button. Call one "Email" and the other "URL". Edit both, so they have the correct text in the label.
Duplicating & Renaming Each Scene Referring to the diagram on page 127, we have just created the first scene with 3 buttons. We need to create two more scenes. The easiest way to do this is to duplicate the scene and rename each one. 1. Click on the Window menu 2. Choose Panels 3. Select Scene
Happy Computers 020 7375 7300
130
4. Double click the current scene name 5. Type “Main” 6. Press Enter 7. Click on the Duplicate Scene icon 8. Doubleclick "Main copy" 9. Type "Contact" 10. Click on the Duplicate Scene icon 11. Doubleclick the new scene name 12. Type “Products” 13. Close the Scene panel To move to another scene Click on the Edit Scene icon in the bottom right corner of the Timeline See the scene name in the bottom left corner of the Timeline
Adding Some Text to Each Scene 1. Click on the Edit Scene icon in the top right corner of the Timeline 2. Choose Main 3. Click on the Text tool 4. Type “this is the main screen” 5. Click on the Edit Scene icon 6. Choose Products 7. Type “This is the products screen” 8. Click on the Edit Scene icon 9. Choose Contact 10.Drag an instance of the button Email onto the stage 11.Drag an instance of the button URL onto the stage
Now each scene has something different on it
Adding the Relevant Actions to Each Button Now that everything is set up, all you need to do is add the actions to the buttons!
131
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Interactive Movies
1. Ensure you are in the Main scene 2. Click on the Arrow tool 3. Click the "Products" button on the stage 4. Click on the Window menu 5. Choose Actions 6. Make sure Script Assist is turned on 7. Click on Global Functions > Timeline Control 8. Doubleclick the Goto action 9. Click on the down arrow for Scene 10. Choose "Products" 11. Leave the type as Frame number 12. Leave the frame number at 1 13. Click on the Go to and Stop button
This is what the action should look like
Remember you don’t need to add any action to the Main Menu button – since you are already on the scene.
14. Click the "Contact Us" button and follow the steps above, but choose "Contact Us" scene in step 7 15. Go to the "Contact Us" scene and do the same for the Main Menu and Products buttons 16. Go to the "Products" scene and do the same for the Main Menu and Contact Us buttons Button actions should be added to the instance on the stage rather than the symbol in the library.
Happy Computers 020 7375 7300
132
Removing an action If you accidentally add the wrong action, just click on the minus, –, sign on the Actions panel.
133
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Interactive Movies
Adding the Get URL Action to the "Contact Us" Button As well as giving your audience buttons to navigate your movie, you may also want them to view other relevant websites and email you. Both of these are done using the Get URL action. 1. Go to the Contact scene 2. Click the "Email" button 3. Click on the Window menu 4. Open the Actions panel 5. Choose Global Functions > Timeline Conrol 6. Click on the Browser/Network category 7. Doubleclick the Get URL action 8. In the URL box, type mailto:[email protected] ever 9. Click on the down arrow by Window 10.Choose _self 11.In the Variable box, change it to Send using POST
Adding the Get URL action to a URL 1. Click the "URL" button on the "Contact Us" scene 2. Doubleclick the Get URL action 3. In the URL box, type http://www.happy.co.uk 4. Click on the down arrow by Window 5. Choose _blank 6. In the Variable box, ensure it says “Don’t Send” Which window do I choose? You probably don't want your audience to lose your website if they click on the URL button, so targeting it to a blank browser means they can always come back to your website. ._self
Opens in the same browser window
._blank ._parent
Opens in a new browser Opens in main frameset
Happy Computers 020 7375 7300
134
._top
Opens in other frameset
If you test the movie now (Ctrl + Enter), it may loop through all the frames continuously. So you now need to add some Stop actions to each scene (see below).
Adding a Stop Action to Each Scene 1. Click in the "Main" scene 2. Add a new layer 3. Rename it "Actions" 4. Click on the Window menu 5. Click on the Actions 6. Choose Global Functions > Timeline Conrol 7. Doubleclick the Stop action
Ensure it is the top layer
It appears in the Action list on the right side of the dialog box
8. Add a new layer and the Stop action to the other two scenes
Testing the Movie 1. Press Ctrl+Enter browser 2. Click on the Close to close the browser
135
Shows movie in the
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Testing & Publishing
Testing & Publishing
Happy Computers 020 7375 7300
136
Testing & Optimising Movies Optimising your Movie See Optimising Movies p 145
Testing using the Controller This is a quick and easy way of testing animation without leaving the authoring environment. 1. Click on the Window menu 2. Choose Toolbars 3. Choose Controller 4. Use the controls to play the movie
Enabling Buttons & Frames 1. Click on the Control menu 2. Choose Enable Frame Actions or Choose Enable Simple Buttons
Testing Scenes/Movies Instead of testing individual parts of the movie, why not test a scene at a time or even the complete movie.
Testing Download Performance 1. Open the scene you want to test 2. Click on the Control menu 3. Choose Test Scene/Movie 4. To return to the authoring environment, click on the second cross in the top corner
137
Ctrl+Alt+Enter
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Testing & Publishing
Testing Download Speeds 1. Click on the Flash Player’s Debug menu 2. Choose a downloading speed 14.4 Kbps 28.8 Kbps 56 Kbps
View the Bandwidth Profiler 1. Click on the Flash Player’s View menu 2. Choose Bandwidth Profiler
A graph is displayed
Shows information
Each bar represents a frame. The size corresponds to the frame’s size in bytes
The red line is what indicates how the frame will Anything above the red line means the
3. Close the window
Light and dark grey blocks show each frame, its size is relative to byte size
Returns you to movieediting mode
View the frames which will cause pauses 1. Click on the Flash Player’s View menu 2. Choose Streaming Graph
What is Streaming? This is a technique which allows the movie to start playing when only part of it has been downloaded. If this works fine, then the movie should play smoothly.
Happy Computers 020 7375 7300
138
Publishing
139
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Publishing
Publishing your Movie The aim of creating a Flash movie can be to have it published onto a CD ROM as a standalone application. However, the most common aim is to publish them for use on the Web (or an intranet). Before Flash movies can be viewed on the web, they need to be inserted into an HTML file. Don't worry at this point about having to know any HTML!! Flash will do it all for you all you have to do is amend a few settings.
Publish Movie for the Web 1. Ensure nothing on the stage is selected On the Property inspector 2. Click on the Publish: Settings button
3. Ensure you are on the Formats tab
4. Ensure Flash & HTML as the type are selected 5. Click on the HTML tab 6. Leave the Template setting on “Flash only” 7. Change the dimensions to Percent 8. Remove the tick from Loop
This creates a Shockwave Flash file (.swf) and HTML file (.htm)
Prevents the movie from continuously playing
9. Click on the Flash tab Generating a report listing the data in the final Flash Player file 1. On the Flash tab, click on Generate Size Report 10.
Click on Publish
Happy Computers 020 7375 7300
140
11. 12.
Click OK Click F12
Viewing the Flash Movie in Internet Explorer 1. Open Internet Explorer 2. Click on the File menu 3. Choose Open 4. Choose Browse 5. Find the HTML document
This has just been created. The file ha the icon
6. Doubleclick the file 7. Click OK Viewing the report 1. Open Word The report is generated as a .txt file 2. Click on the Open dialog box 3. Navigate to the folder containing your .swf files 4. Choose All Files in Files of type 5. Doubleclick the file The name of the report is the name of the Flash movie with “Report” at the end
Different Files Created Having published your movie, another file has been created, with an .html extension. When uploading to a webserver you will need to upload both the .swf file and the .html file (it will not be necessary to upload the .fla file, as that is the authoring file, rather than the finished product).
141
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Publishing
Naming Files You are not prompted to name any of the files.
Does the size of your Flash document matter? Your Flash file should not be larger than 700KB
Happy Computers 020 7375 7300
142
Appendices
143
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Appendices
System Requirements System Requirements The following hardware and software are required to author Flash movies: § For Microsoft® Windows: An Intel Pentium 200 MHz or equivalent processor running Windows 98 SE, Windows ME, Windows NT 4.0, Windows 2000, or Windows XP; 64 MB of RAM (128 MB recommended); 85 MB of available disk space; a 16bit colour monitor capable of 1024 x 768 resolution; and a CDROM drive. § For the Macintosh: A Power Macintosh running Mac OS 9.1 (or later) or Mac OS X version 10.1 (or later); 64 MB RAM free application memory (128 MB recommended), plus 85 MB of available disk space; a colour monitor capable of displaying 16bit (thousands of colours) at 1024 x 768 resolution; and a CD ROM drive. The following hardware and software are required to play Flash movies in a browser: § Microsoft Windows 95, Windows 98, Windows ME, Windows NT 4.0, Windows 2000, or Windows XP or later; or a Macintosh PowerPC with System 8.6 or later (including OS X 10.1 or later). § Netscape plugin that works with Netscape 4 (or later) in Windows, or works with Netscape 4.5 (or later) or Internet Explorer 5.0 (or later) on the Mac OS. § To run ActiveX controls, Microsoft® Internet Explorer 4 or later (Windows 95, Windows 98, Windows Me, Windows NT4, Windows 2000, Windows XP, or later). § AOL 7 on Windows, AOL 5 on the Mac OS § Opera 6 on Windows, Opera 5 on the Mac OS
Happy Computers 020 7375 7300
144
Optimising Movies
145
·
Use tweened animation, rather than keyframes.
·
Use symbols for every element that appears more than once.
·
Solid lines use less memory.
·
Using the pencil tool requires less memory than brush strokes.
·
Use layers for separate objects that are animated over time.
·
Limit the fonts and font styles.
· ·
Limit your use of gradients; it takes more memory than filling with a solid colour. Use alpha transparency sparingly, it slows down playback.
·
Use Movie clips rather than graphic symbols.
·
For sound use MP3, which is the smallest sound format.
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Appendices
On MouseEvent Options Options Press
What it does Occurs when the mouse button is pressed while the cursor is with the hit area of the button
Release
Occurs when the mouse button is release within the hit area of the button
Release Outside
Occurs when the mouse button is released while the cursor has been dragged outside the Hit area
Roll Over
Occurs when the mouse cursor moves into the hit area
Roll Out
Occurs when the mouse cursor is moved out of the hit area
Drag Over
Occurs when the mouse button is held down and dragged out of the hit area and then back onto it
Drag Out
Occurs when the mouse button is clicked with the hit area then dragged outside it
Key Press
Can be used to specify a key on the keyboard to trigger the action
Actions within Global Functions Action name
What the action does
Go to
Instructs the movie to jump to a specific frame
Play
Instructs a movie to play
Stop
Stops the movie playing at a specific point
Toggle High Quality
Displays graphics at a higher quality
Stop All Sounds
Turns off any sounds playing
Get URL
Instructs the movie to open a specific web page
FS Command
Lets your movie communicate with the Web browser
Load/Unload
Loads/unloads movie
Happy Computers 020 7375 7300
146
Movie
147
Tell Target
Use to interact with other Flash movies by using actions within the current one
If Frame is Loaded
Instructs movie to perform an action if a certain frame has been downloaded
On MouseEvent
Depending on the event chosen an action will be performed (see all the options above)
If
Checks to see if a particular statement is true or false. Depending on the action a specific action is performed
Loop
Keeps performing the action while a certain condition is met, loop stops as soon as the condition changes
Call
Performs a set of actions
Set Property
Allows you to edit items in a movie as it is playing
Set Variable
Used to process data that has a variable value, such as text entered into a text box
Duplicate/Remo ve Movie Clip
Duplicates or removes movie clip as the movie is playing, depending on the action by the user
Drag Movie Clip
Allows movie clips to be dragged whilst playing
Trace
Generates a message when an action is performed. Only appears when testing the movie
Comment
Individual comments are placed in an action script to explain what something does. Only appears when testing the movie.
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Index
Index
Happy Computers 020 7375 7300
148
Index Actions ................................115 Adding ..............................116 Comments .........................118 Deleting.............................117 Frame ...............................115 Frame labels.......................118 Go to action .......................116 Object ...............................115 Organising .........................116 Stop action ........................116 ActionScript ..........................115 Alpha.................................... 76 Animated Masks ..................... 98 Animation Blurred ............................... 84 Framebyframe................... 81 Motion Tweening .................. 86 Shape Tweening................... 93 Slowing down ...................... 84 Smoother............................ 82 Bandwidth Profiler..................139 Basic Actions.........................147 Bezier handles........................ 40 Brush tool ............................. 47 Brush modes ....................... 47 Creating shapes ................... 47 Button Multiple hotspots.................112 Button frames.....................101 Buttons ................................101 Change shape.....................107 Changing colour ..................101 Enabling ............................138 Text ..................................105 Type .................................105 Controller .............................. 82 Crosshair............................ 75 Down..................................101 Download Performance ...........138 Download Speeds ..................139 Drag Out option.....................147 Drag Over option ...................147 Fill Colours ............................ 49 Flash environment .................. 20 Flash formats ......................... 15 Flash Movies .......................... 29 Flash Overview....................... 14
149
Flash Player ........................... 15 Frame Rate....................... 30, 84 Setting ............................... 84 Frames ................................. 61 Get URL action Adding...............................135 GIFs .................................... 17 Gradient colours ..................... 50 Adding more Pointers............ 50 Creating ............................. 50 Removing ........................... 51 Saving................................ 51 Graphic symbols ..................... 58 Gridlines ............................... 42 Guide layers .......................... 89 Orientate to path.................. 91 Help ..................................... 11 Hit ......................................101 Images ................................. 17 Instance................................ 58 Interactive Movies .................128 Creating ............................128 Invisible Button .....................109 JPEGs .................................. 17 Key Press option....................147 Keyframes ........................... 61 Layers .................................. 61 Adding a shape to ................ 65 Creating ............................. 64 Deleting.............................. 64 Drawing.............................. 66 Locking............................... 64 Moving ............................... 64 Outlines .............................. 65 Properties ........................... 65 Renaming ........................... 64 Stacking order ..................... 66 Library .................................. 58 Folders ............................... 79 Line Tool ............................... 41 Lines Moving ............................... 42 Selecting ............................ 42 Lozenge shape Creating ............................. 46 Macromedia site ..................... 15 Mask layer
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Index
Unlinking .............................72 Mask layers .................... 61, 70 Creating ..............................71 Motion Tweening .....................86 Objects fading out.................86 Objects that change size ........88 Objects that move .......... 89, 91 Movie Testing.............................. 136 Movie Explorer ...................... 125 MovieClip symbol Creating ............................ 120 MovieClip symbols................ 120 Movies Creating ..............................29 sizes ...................................30 On MouseEvent options .......... 147 Onion Skinning ..................... 107 Aligning...............................94 Optimising Movies .......... 138, 146 OPtimising Movies Bandwidth Profiler............... 138 Download Performance ........ 138 Download Speed................. 138 Oval Tool ...............................33 Over................................... 101 Pen tool .................................42 S curve ...............................44 Upward curve.......................43 Pencil tool ..............................46 PNGS....................................17 Pointers .................................50 Removing ............................51 Press option ......................... 147 Publishing Movies .................. 141 Release option ...................... 147 Release Outside option........... 147 Roll Out option...................... 147 Roll Over option .................... 147 Rollover Buttons.................... 101 Scene Previewing...........................82 Scenes ..................................67 Adding ................................67 Duplicating ..........................67 Renaming ............................68 Shape Changing colour ...................49 Shape Tweening......................93
Happy Computers 020 7375 7300
Shapes Aligning...............................52 Changing the shape ..............40 Grouping .............................48 Moving ................................36 Ungrouping..........................48 Shared libraries.......................77 Simple Objects........................32 Stacking Order........................66 Stage ...................................20 Stop action Adding .............................. 136 Streaming ..............................17 Stroke Moving ................................37 Subselect tool .........................40 Symbol MovieClips ........................74 Symbols .......................... 58, 74 Buttons..............................74 Converting an existing object..58 Converting into graphic symbols .......................................58 Creating a symbol from scratch .......................................75 Deleting ..............................77 Duplicating ..........................77 Editing ................................76 Instance ..............................58 Organising ...........................79 Shared libraries ....................77 Swapping ............................78 Types..................................74 System Requirements ............ 145 Text Formatting...........................55 Hyperlink.............................55 Kerning ...............................55 Rotating ..............................56 Text tool ................................54 Timeline ......................... 20, 63 Toolbox .................................33 Moving ................................33 Tweening .............................61 Type .....................................54 Up ...................................... 101 Vectorbased images ...............17 Work Area..............................20
150
Macromedia Flash 8 Essentials This course guide is produced for the Happy Computers Macromedia Flash 8 Essentials course. For all your computer training needs contact: Happy Computers Cityside House 40 Adler Street London E1 1EE Helpline: 020 7375 7373 [email protected] Bookings: 020 7375 7300 Copies of this guide can be obtained from Happy Computers, fully bound, at a cost of £15 each, or £10 for extra copies for organisations who have booked courses. Happy Computers allows this guide to be copied, provided that permission is sought and the name and phone number of Happy Computers remains on the copies.
1
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials About This Manual
Contents Contents ........................................................................................ 2 Happy Computers: For All Your IT Training Needs ................................. 4 The Happy Computers’ Web Site ........................................................ 5
About This Manual .................................6 Who It Is For And How To Use It ........................................................ 7 What do the Icons Mean? .................................................................. 8 Getting Help ................................................................................... 9
What is Flash 8? ...................................11 Flash Overview ...............................................................................12 About Images ................................................................................15
The Flash Environment .............................16 Starting & Exiting Flash....................................................................17 The Flash Environment ....................................................................18
Panels & the Property Inspector ..................20 Panels...........................................................................................21 Property Inspector ..........................................................................24
New Document......................................26 New Document...............................................................................27
Simple Objects .....................................29 Simple Objects ...............................................................................30 Changing the Fill Colours..................................................................48 Aligning Shapes..............................................................................51 Adding Type...................................................................................53
Converting Existing Shapes into Graphic Symbols .............................................56 Converting Existing Shapes into Graphic Symbols ................................57
Frames, Layers & Scenes..........................59 What are Frames & Layers? ..............................................................60 Scenes ..........................................................................................66
Mask Layers ........................................68 Mask Layers...................................................................................69
Symbols .............................................72 Symbols ........................................................................................73 Organising Symbols ........................................................................78
Animation: Frame-by-Frame ......................79 Happy Computers 020 7375 7300
2
Simple FramebyFrame Animation ................................................... 80 Frame Rate ................................................................................... 83
Animation: Motion Tweening .......................84 Motion Tweening ............................................................................ 85
Animation: Shape Tweening ........................91 Shape Tweening............................................................................. 92
Animated Masks ....................................96 Animated Masks............................................................................. 97
Buttons..............................................99 Basic Rollover Buttons................................................................... 100 Buttons with Text ......................................................................... 104 Buttons that Change Shape ........................................................... 106 Invisible Buttons .......................................................................... 108 Buttons with Multiple Hotspots ....................................................... 111
Actions ..............................................113 Actions ....................................................................................... 114
Animation: Movie-Clips .............................118 MovieClip Symbols ...................................................................... 119
Movie Explorer......................................123 Movie Explorer............................................................................. 124
Interactive Movies .................................126 Interactive Movies ........................................................................ 127
Testing & Publishing ................................136 Testing & Optimising Movies .......................................................... 137
Publishing............................................139 Publishing your Movie ................................................................... 140
Appendices ..........................................143 System Requirements ................................................................... 144 Optimising Movies ........................................................................ 145 On MouseEvent Options ................................................................ 146
Index................................................148 Index ......................................................................................... 149
3
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials About This Manual
Happy Computers: For All Your IT Training Needs Manuals for You to Use We hope you enjoy this manual and find it useful. If it is for personal use, or for use in state funded schools, please feel free to copy it. Our full range of manuals, in MS Office and more, are available from: www.happymanuals.com For other organisations (including companies, charities, universities, colleges and training providers) there is a licence fee. Full details of the costs are on the site.
Award Winning Classroom Training in the UK These manuals are produced by Happy Computers, recognised as one of the leading providers of quality training in the UK. Our awards include: IT Training Company of the Year (Institute of IT Training Awards) 2000: Finalist 2001: Gold 2002: Bronze 2003: Bronze 2004: Bronze 2005: Finalist 2006: Silver 2007: Silver IT Trainer of the Year (Institute of IT Training Awards) 1999: Gold 2000: Silver 2004: Gold 2005: Silver 2007: Bronze Best Customer Service in the UK (Management Today/Unisys Service Excellence Awards) 2002 Section Winner (Business to Business) 2003 Overall UK Winner
All our training is designed to fully involve you, based on the ageold principle: Tell Me & I Will Forget Show Me & I May Remember Involve Me & I Will Understand Find out how we can make learning IT fun and effective: 020 7375 7300, [email protected], www.happy.co.uk
E-Learning: Anywhere in the World See the section below on Happy eLearning or simply try our free trial: http://www.happyelearning.co.uk/freestuff/
Happy Computers 020 7375 7300
4
The Happy Computers‛ Web Site Where is it? http://www.happy.co.uk
Why should I visit it? The Happy Computers web site is dedicated to providing you with information about both the software you use, and the courses we run. You’ll find copies of manuals to download and tips on the programs you use, designed to make your work quicker and easier. You’ll find uptodate news about Happy Computers and the team, and you can of course find information on all our courses and book your place on one.
Who runs it? If you have any comments, ideas or just fulsome praise, you can email our web editor at: [email protected]. Alternatively, write your comments when you do your evaluations online at the end of a course at Happy Computers.
What is all that stuff above about? If the above means nothing to you, and you are interested in learning more about the World Wide Web and the Internet, Happy Computers run a wide range of courses in Internet software.
5
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials About This Manual
About This Manual
Happy Computers 020 7375 7300
6
Who It Is For And How To Use It Who is it for? This manual is designed for use with the Flash 8 course with Happy Computers. It is also meant as a back up for when you get back to work in combination with the two year telephone helpline you get free with every Happy Computers course. It is not meant as a replacement to the full reference manuals that come with Flash.
How should I use it? This manual is a stepbystep guide to the functions taught in the Macromedia Flash 8 Essentials course. You should be able to find the part you’re after by looking in the index, and contents and noting that the general course will follow the pattern of the manual. The stepbystep parts are in italics. Simply do the things on the left, and read the things on the right for further information This is what you do happening
7
This is a description of what is
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials About This Manual
What do the Icons Mean? Tips Handy tips that make your work easier
Essential Essential points to understand how to do the work in hand
Technical Technical (nonessential) points for the technically minded
Traps Hints to help you with certain features that may just trip you up if you are not aware of them!
Right Mouse Button This means that pressing the right mouse button (instead of the left mouse button) will bring up a short cut menu that can achieve the same things as listed in the text
Happy Computers 020 7375 7300
You can also use the right mouse button here
8
Getting Help Flash keeps the screen fairly simple. But don’t expect to have to remember the functions. There are several levels of help:
Using this Guide This guide contains all the basic functions of Flash 8. Use the Table of Contents and the Index to find the functions that you need explained.
Help Function 1. Press F1 2. Within the Contents tab choose one of the 3 options
Opens the Help screen
3. Within the Index tab choose the letter
4. Within the Search tab type a keyword(s)
9
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials About This Manual
Closing Help Alt + F4 Or 1. Click on the File menu 2. Choose Exit
The official Flash 8 Manual Software manuals have improved. Use them as a reference on specific functions, rather than for a general read on how to use the software.
Ring Happy Computers If you received this manual at a Happy Computers course, we will provide phone support on any functions covered on the course for two years from the date of the course. This is a guarantee of the quality of our training: Ring: 020 7375 7373 and we will help you with your difficulty. You can do this as many times as you like.
Happy Computers 020 7375 7300
10
What is Flash 8?
11
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials What is Flash 8?
Flash Overview Flash Overview § Flash 8 movies contain graphics (which you can create from scratch or import from other software), text and animation. § Flash movies are likely to be interactive and permit input from users. § Many Web designers use Flash to create navigation controls, animated logos and animations with sound. § Flash movies use vector graphics, so they download rapidly and can be scaled to the user’s screen size. Do I have The Flash Player on my PC at home/work? Yes, probably. 97% of all web users have the Flash Player on their PC (source: Macromedia). You've probably watched and interacted with Flash movies on many Web sites. The player is installed automatically when Flash is installed or you can download it from the Macromedia Web site. (www.macromedia.com). What is a Flash Player and Why do I need it? The Flash Player lives on the local computer. It plays back Flash movies in browsers or on standalone applications. Viewing a Flash movie on the Flash Player is similar to viewing a DVD on a DVD player—the Flash Player is the device used to display the movies you create in the Flash authoring application.
Animation in Flash In Flash, you can animate objects to make them appear to move across the stage and/or change their shape, size, colour, opacity, rotation, and other properties. You can create framebyframe animation, in which you create a separate image for each frame. You can also create ‘tweened’ animation, in which you create the first and last frames of an animation and direct Flash to create the frames in between. You can also use ActionScript, which is an objectoriented programming language, to create interactive animation in Flash.
The Two Parts of Flash · ·
Builtin vectorbased graphics and type tools such as Macromedia Freehand and Adobe Illustrator Programming and animation tools to animate and build interactivity into your website using buttons and action scripts.
Happy Computers 020 7375 7300
12
Other Uses of Flash Animation is not limited to web pages it can be used to: · License Flash Player and distribute Flash movies on CDROM · Create movies for standalone projectors · Export Flash to other formats such as QuickTime or Windows .AVI movies.
What are the Flash formats? Flash files are referred to as movies, during creation and in their final form. · ·
Flash files have the extension .fla. To view these files, you must convert the files to Flash Player format; these files have the extension .swf (pronounced swif). This stands for Shockwave Flash. Shockwave was the system to deliver movies before Flash.
What is the Flash Player? To view a Flash movie on the Web, the Flash Player must be installed on the user's computer. This is a plugin application that allows the user to see the Flash movie playing.
What Flash does well J J J J J J J J J
Presents text and images in sequence on screen Allows you to move text and images on screen Looks slick and smooth With proper layout presents a lot of information in a single window Lets you create Flash files that can be viewed by anyone with the free viewer Flash files will use the entire browser window whatever the browser window size and screen resolution Offers interactivity using buttons and actions Flash files are streamed, which means they can start to play while they are downloading Using all vectorbased images the Flash file size remains small, which means faster downloading time
Flash‛s Limitations L
You need the Flash/Shockwave plugin installed. This can be downloaded for free from the macromedia site (www.macromedia.com) . Newer versions of Netscape and Internet Explorer come with the plugin already installed or as an option in the installation process L Flash files do not play at a consistent speed on all machines, on older and slower machines files are played slower than newer ones L You may need to learn about programming (Action Scripts) if you want to go beyond the builtin barriers in Flash
13
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials What is Flash 8?
L
Learning the language and terminology Flash uses
Happy Computers 020 7375 7300
14
About Images Images on the Web Images on the web have traditionally been bitmaps, i.e. images made up of pixels. The more pixels in an image, the higher the quality of the image. However, pixels also increase the size of the file. Also you may have noticed when a bitmap is increased, the quality deteriorates, because each pixel has to cover a larger area on the screen. This results in the image looking jagged. There are 3 main types of bitmap images used on the web · · ·
GIF (Graphical Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Group)
One of the main features of Flash is to create graphics; it achieves its high quality images by using a vectorbased system. A vectorbased system is where objects are created using mathematical equations.
Advantages of Vector-Based Images · ·
Images do not consist of pixels, so they are usually smaller in file size. Vectorbased images lose very little image quality when they resized.
This combination of small file size and consistent high quality make vector based graphics an excellent choice for Web pages. Drawing programs such as Macromedia Freehand and Adobe Illustrator use vectorbased systems for graphics creation.
Streaming Often you have to wait for a site to download, especially one that is rich in images or sounds. Flash is able to stream the content of the web site. Streaming means that as soon as some of the vector graphic has downloaded, Flash can quickly display it while the rest of the data continues to download. Flash downloads each frame at the specified frame rate, so the viewer sees a continuous flow of images.
15
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials The Flash Environment
The Flash Environment
Happy Computers 020 7375 7300
16
Starting & Exiting Flash Starting Flash 1. Click on the button 2. Click on Programs 3. Select Macromedia Flash 8 4. Choose Flash 8
The Start menu appears
Flash opens
Exiting Flash 1. Click on File menu 2. Choose Exit Or Alt+F4 on the keyboard Or Click on the cross in the top right corner of the screen
17
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials The Flash Environment
The Flash Environment The Screen Toolbox Timeline
Stage
Work area
Properties Inspector A movie consists of –
Panels
·
The Timeline – This is like the "table of contents" of your Flash movie. o Layers – Where different layers are added to a movie.
·
The Stage – The content for each movie is placed here.
·
The Work Area – Animation can start here.
About the Timeline The easiest way to describe the Timeline is to imagine your Flash movie as a book. The timeline would be the table of contents, each chapter is like a scene, and each page is like frame. However, each frame may actually contain several transparent sheets sitting on top of each other. These "sheets" are layers.
Happy Computers 020 7375 7300
18
In this window, you arrange the timing of your animation on separate layers.
About the Stage This is the area containing all the graphics that will make up the movie. It is possible for you to control the size, colour and many other parameters of your stage.
The Work Area This is the grey area around the stage. When you have finished your animation and export your files (usually swf files or html) then only what is on the stage will be exported. This means that you can store graphics off on the Work area while they are not required and bring them on when they are.
19
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Panels & the Property Inspector
Panels & the Property Inspector
Happy Computers 020 7375 7300
20
Panels Panels in Flash give you more information about the object you are using and help you view, organize, and change elements in a document. The choices available on panels control the features of symbols, instances, colours, type, frames, and other elements. Flash allows you to customise its interface by displaying the panels you need for a specific task and hiding other panels. About Panels Panels let you work with objects, colours, text, instances, frames, scenes, and entire documents. For example, you use the Colour Mixer to create colours, and the Align panel to align objects to each other or the Stage. Where are the Panels? To view all panels available in Flash, see the Window menu.
Panels Most panels include a popup menu with extra options. Click and drag to move the Panel.
Click on the Collapse arrow to close a
Click here to see the Options menu control for the Panel.
21
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Panels & the Property Inspector
Info Panel This shows the size of the shape in pixels.
1. Click on the Window menu 2. Choose Info
This shows the position of the shape on the stage. This shows the position of the cursor.
This shows the colour of the shape.
Colour Mixer 1. Click on the Window menu 2. Select Colour Mixer
Used to choose over 500 colours from a colour palette
Stroke Fill Colour
Fill Style
Happy Computers 020 7375 7300
22
Scene Panel 1. Click on the Window menu 2. Choose Scene Current open scene
Duplicating a scene Adding a new scene Deleting a scene
Transform Panel 1. Click on the Window menu 2. Choose Transform
23
Change the size of the shape.
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Panels & the Property Inspector
Property Inspector You can use the Property inspector to easily access and change the most commonly used attributes of a document. Changes can be made to document attributes using the Property inspector without accessing the menus or panels that contain these features. The Property inspector is content sensitive, which means it reflects the tool or asset you are working with, giving you quick access to frequently used features.
The Property Inspector Viewing the Property inspector 1. Click on the Window menu 2. Choose Properties
This is the Property inspector with nothing on the stage.
Changing Document Properties Using the Property Inspector 1. Click on the blank area on the stage. Click on the Size button
Dialog box opens
2. Click on the Background icon
Choose a background colour for the stage
3. Change the frame rate (see later)
Happy Computers 020 7375 7300
24
Changing the Properties of a Shape Using the Property Inspector
This is the Property inspector showing the properties of a shape.
25
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials New Document
New Document
Happy Computers 020 7375 7300
26
New Document Here you will create the Flash .fla document with objects and animation.
When you first open Flash 1. You’ll see a window offering you lots of options
2. Either Choose to create a new Flash Document Or Choose to open an existing document
Creating a new Document in Flash 1. Click on File menu 2. Choose New
3. Click on the Size button
You can change the properties of the document using the Property inspector Dialog box opens
4. The default movie size is
27
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials New Document
550 x 400 pixels. 5. Change the Background colour for the stage 6. Enter the number of animation frames to be displayed every second 7. To set the Ruler Units, click on the downward arrow by Pixels 8. Click OK
Colour palette appears
To view gridlines on the movie, click Ctrl+#.
Movie Sizes The default movie size is 550 pixels by 400 pixels. The minimum size is 1pixel by 1 pixel. The maximum size is 2880 pixels by 2880 pixels.
Frame Rate For most computerdisplayed animations, especially those playing from a Web site, 8 fps (frames per second) to 12 fps is sufficient. (12 fps is the default frame rate.). If the frame rate is too high, the movie becomes blurred, but if it is too slow, the viewer will see each frame as a separate image. Setting the properties § To make the new settings the default properties for your new document only, click OK § To make these settings the default properties for all new documents, click Make Default.
Happy Computers 020 7375 7300
28
Simple Objects
29
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Simple Objects This is a very powerful feature in Flash. They are not only lines and shapes, but can be transformed into eyecatching graphical images. Flash also allows you to import images from other graphic packages such as Illustrator, Freehand and Fireworks
Images in Flash Computers display graphics in either vector or bitmap format. In Flash, you can create and animate vector graphics. You can also import and manipulate vector and bitmap graphics that have been created in other applications. Vector Graphics v Bitmap Images Vector graphics form images using lines and curves. These are called vectors. Bitmap images are made from coloured dots called pixels.
What is Special about Vector Graphics? When you modify the properties of a vector graphic you do so without changing the quality of its appearance. Vector graphics can be displayed on output devices of varying resolutions without losing quality. About Bitmap Graphics When you edit a bitmap graphic, you modify pixels. Editing a bitmap graphic can change the quality of its appearance because the image is fixed to a grid of a particular size. Resizing a bitmap graphic can make the edges of the image ragged as pixels are redistributed within the grid. A bitmap graphic on an output device that has a lower resolution than the image itself degrades the quality of its appearance. Flash Terminology Basic shapes are made from strokes (outline) and solid colours known as fills.
What you can do with a Shape § Change the stroke colour § Change the fill colour
Happy Computers 020 7375 7300
30
Viewing the Toolbox 1. Click on the Window menu 2. Choose Tools Selection Tool (V) Free Transform (Q) Line (N) Pen (P)
Subselection Gradient Transform Lasso (L) Text (T)
Oval (O) Pencil (Y) Ink Bottle (S) Eyedropper (I) Hand (H)
Rectangle (R) Brush (B) Paint Bucket (K) Eraser (E) Zoom (M,Z) Stroke colour
Tool modifiers
Fill colour
To find out what a tool does, just rest the cursor on the icon and a tool tip appears. For example, if you rest your cursor on the text tool, you will see a tool tip with Text tool (T). By pressing T on the keyboard you can activate the Text tool.
Moving the Toolbox 1. Click on the grey dotted lines at the top of the toolbox window 2. Hold down the left mouse button 3. Drag the toolbox to another part of the screen
Using the Oval Tool The Oval tool can be used to draw ovals or perfect circles.
31
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Flash terminology Basic shapes are made from strokes (outline) and solid colours known as fills. Each can be edited independently.
1. Click on the Oval tool
Keyboard shortcut is O
2. Choose the Fill and stroke colours for the shape
3. Click and drag to draw the shape To create a perfect circle Hold down the shift key while you are dragging the Oval tool. Or Whilst dragging to create the circle, a small black circle appears in the bottom right side of the cursor. This indicates it is a perfect circle. Ovals can be created with just a fill or just an outline To create a shape without a stroke 1. Click on the No colour icon 2. Draw the shape
Changing the Look of a Shape Using the Transform and Skew Tools Ensure you can see the Transform Panel. If not 1. Click on the Window menu 2. Choose Transform 1. Create a shape
Happy Computers 020 7375 7300
32
2. Click on the Arrow tool 3. Doubleclick the shape 4. Click on the Transform tool Keyboard shortcut : Q
5. To rotate or skew
the
shape or to distort it choose those tools from the options section on the toolbar
Doubleclick ensures you select both the stroke and the fill Down on the properties inspector click on the padlock if you want to lock the
proportions You can also change these settings numerically using the transform panel
6. Press Enter
Changing the Fill Colour Using the Property Inspector 1. Click on the Arrow tool 2. Singleclick inside the shape to select it 3. Click on the drop down for Fill colour
4. Use the palette to choose a different colour
If you want to match a colour on your stage exactly Just move the eyedropper that appears over the stage and click on the colour that you want to choose.
33
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Changing the Stroke Using the Property Inspector 1. Click on the Arrow tool 2. Doubleclick on the outside border of the shape to select it 3. Click on the drop down for Stroke style 4. Click on the drop down for Stroke height 5. Use the slider to choose a different thickness for the stroke To customise the style of the stroke click on the Custom button,
on the Property inspector and make your changes.
You can also use the Colour Mixer panel to change the fill and stroke colour of a shape To view the Colour Mixer panel 1. Click on the Window menu 2. Choose Colour Mixer 3. Select either the fill or the stroke of the shape 4. Change the colour using the palette of the RGB values
Moving a Shape (Stroke And Fill) 1. Create a shape 2. Click on the Arrow tool 3. Double click the shape to select it 4. Click and drag the shape to a new destination
Stroke and fill appear selected
Make sure you’ve got both the stroke and the fill A single click will select just the fill and when you move it, you’ll leave the stroke behind
Moving a Shape Using the Keyboard 1. Doubleclick to select the shape 2. Press the arrow keys on the keyboard This moves the shape one pixel at a time Or Hold down the Shift key whilst pressing the arrow keys on the keyboard This moves the shape eight pixels at a time
Happy Computers 020 7375 7300
34
Moving the Fill 1. Create a shape 2. Click on the Arrow tool 3. Click once in the centre of the shape
4. Click and drag the fill to another destination
5. Click elsewhere on the stage
Moving the Stroke 1. Create a shape 2. Click on the Arrow tool 3. Click on the edge of the shape
The stroke will appear speckled. Note that if your shape has more than one edge, e.g. a square, you might need to double click on the stroke
4. Click and drag the stroke to another destination
5. Click elsewhere on the stage
To move part of the shape 1. Click on the Arrow tool 2. Position the cursor outside the shape before clicking and dragging part of it to select it 3. Click and drag to move the selected part of the shape
35
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Resizing a Shape 1. Click on the Arrow tool 2. Doubleclick the shape to select it 3. Click on the Free Transform tool on the Toolbox
4. Click on the Scale icon 5. Click and drag on any black handle on the shape
Black handles appear around the shape and Options appear at the bottom of the Toolbox
The shape changes (proportionally if you drag on any of the corner handles)
Rotating a Shape 1. Click on the Arrow tool 2. Doubleclick the shape to select it 3. Click on the Free Transform tool on the Toolbox 4. Position your cursor on any corner black handle on the shape 5. Click and drag to rotate the shape
Black handles appear around the shape Cursor looks like the following
If you need to be very accurate when changing the size of a shape you can use the Transform Panel See Changing the look of a shape using the Transform panel on page 32
Skewing a Shape 1. Click on the Arrow tool 2. Doubleclick the shape to select it 3. Click on the Free Transform tool on the Toolbox
Black handles appear around the shape and Options appear at the bottom of the Toolbox
4. Click on the Rotate & Skew icon
Happy Computers 020 7375 7300
36
5. Position your cursor on any centre black handle on the shape 6. Click and drag to skew the shape
Cursor looks like the following
Distorting a Shape 1. Click on the Arrow tool 2. Doubleclick the shape to select it 3. Click on the Free Transform tool on the Toolbox
4. Click on the Distort icon 5. Position your cursor on any black handle on the shape
Black handles appear around the shape and Options appear at the bottom of the Toolbox
Cursor looks like the following
6. Click and drag to distort the shape
Using the Envelope Tool The Envelope tool helps you to change the shape of a selected shape(s) by using Bézier curves. 1. Create 3 rectangles
2. Select all 3 shapes 3. Click on the Free Transform tool on the Toolbox 4. Click on the Envelope tool
5. Position the cursor on any of the handles
37
More handles appear around the selection
Cursor looks like the following
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
6. Click and drag to distort all the selected shapes
Changing the Shape of Existing Shapes 1. Create a shape 2. Click on the Arrow tool 3. Position cursor on the edge of the shape
Mouse shape changes to
4. Click and drag to change the shape
Changing the Shape of Existing Shapes Using the Subselection Tool You can use the Subselection Tool shape
to reshape any
1. Create a shape 2. Click on the Subselection Tool 3. Click on the border of the shape
Bézier handles appear around the shape
4. Position your cursor over one of the Bézier handles
A small white square appears next to the arrow
Happy Computers 020 7375 7300
38
5. Click and drag to change the shape
6. Position your cursor on a part of a border without a Bézier handle 7. Click and drag to move the shape
A small black square appears next to the arrow
Reshaping a Curve 1. Create a shape 2. Click on the Subselection Tool 3. Click and drag one of the Bézier handles to change the definition of the curve
Click here
Using the Line Tool This option only allows you to draw straight lines. 1. Click on the Line tool 2. Select a stroke colour from the Property inspector 3. Select a thickness and line style on the Property inspector 4. Move the cursor to the stage 5. Click and drag to create a line 6. Release the mouse
The cursor is a cross
Drawing a straight line Holding down the shift key as you draw the line forces the line to a vertical, horizontal or at a 45 0 angle.
39
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Editing Lines 1. On the toolbar click on the Arrow icon 2. Move the cursor over a portion of the line Corner
Curve Curve point
Clicking and dragging allows you to adjust the curvature of the line
Corner point
Clicking and dragging adjusts the end point of the line
Moving a Line 1. On the toolbar click on the Arrow icon 2. Click on the line
Deselected line
Selected line
3. Move the line by clicking and dragging 4. Click away from line Selecting more than 1 line Hold down Shift and click on the lines. Selecting lines which are touching each other – Double click a line
Selecting Part of a Line 1. On the toolbar click on the Arrow icon 2. Click and drag cursor over part of the line around line
Box appears
3. Click and drag to move this part of the line
Using the Pen Tool You can use the pen tool to draw straight lines or smooth curved lines. You start off by drawing a straight line and adjusting the angle of the line. Using Happy Computers 020 7375 7300
40
the Pen tool allows you to create points on the line, which you can click and drag to make curved. Click on the Pen tool
When you are creating curves switch the grid on 1. Click on the View menu 2. Choose Grid 3. Choose Show Grid To change the stroke colour of an existing shape 1. Click on the Arrow tool 2. Doubleclick the outside border of the shape 3. Click on the Stroke Colour Tool on the Property inspector 4. Choose a colour from the palette
Drawing an Upward Curve 1. Click on the Pen tool 2. Move cursor to the stage 3. Click and drag upwards in a straight vertical line
Cursor shape changes to a X Bézier handles
Ancho r
4. Click about a centimetre away from the anchor and drag downwards
Uneven curve appears
Uneven curve changes to a perfect curve
5. Press the Escape button when you have finished Or Click on the Arrow tool
41
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Making Changes to an Existing Line 1. Click on the Pen tool 2. Click on the line
Bézier handles appear
Drawing an S Curve 1. Click on the Pen tool 2. Move cursor to the stage
Cursor shape changes to a pen
3. Click and drag upwards in a straight vertical line
Bézier handles
Ancho r
4. Click about a centimetre away from the anchor and drag upwards
Uneven curve appears
Uneven curve changes to an S shaped curve
5. Press the Escape button when you have finished Or Click on the Arrow tool
Drawing Shapes Using the Pen Tool 1. Click on the Pen tool 2. Click on the stage 3. Click somewhere else on the stage
Happy Computers 020 7375 7300
Anchor appears Straight line appears
42
4. Continue clicking to create your shape
43
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
To change the fill colour of an existing shape 1. Click on the Arrow tool 2. Singleclick inside the shape 3. Click on the Fill Colour Tool on the Property inspector 4. Choose a colour from the palette To change the stroke colour of an existing shape 5. Click on the Arrow tool 6. Doubleclick the outside border of the shape 7. Click on the Stroke Colour Tool on the Property Inspector 8. Choose a colour from the palette
Using the Rectangle Tool 1. Click on the Rectangle tool icon 2. Choose the stroke, fill, stroke style and stroke colour from the Property inspector 3. Move the cursor to the stage 4. Click and drag to create a rectangle To create a perfect square Hold down the shift key while you are dragging the rectangle tool.
To change the look of the shape use the Free Transform Tool on the Toolbox
.
Rectangles can be created with just a fill or just an outline. To create a shape without a stroke 1. Click on the Rectangle Tool 2. Click on the Stroke colour on the Property inspector 3. Choose the No colour icon option 4. Draw the shape
Happy Computers 020 7375 7300
44
To move rectangles See page 34 (Moving shapes)
Creating a Lozenge Shape This is simply a rectangle shape, but the corners are rounded. The corner radius settings are from 0999 points. A larger the value creates a more rounded corner. 1. Click on the Rectangle tool 2. Click on the Round Rectangle icon
This icon appears in the Options part of the Toolbox Dialog box opens
3. Change the corner radius to 10 points 4. Click OK 5. Change the stroke and fill colours 6. Click and drag to create the shape
Using the Pencil Tool This is a freehand drawing tool. It can be used to create patterns and curved lines. 1. Click on the Pencil tool On the Property inspector 2. Click on the Stroke style drop down 3. Choose a style 4. Change the height on the line using the Stroke height drop down slider 5. Draw the line
45
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Using the Brush Tool This tool gives the effect of lines created by paintbrushes.
Click on the Brush Object drawing (creates a shape rather than just a line and Lock Fill Brush Brush size Brush Brush Mode Paint Normal Paint Fills Paint Behind Paint Selection Paint Inside
Paints over everything Paints over fills but not lines Paints behind the shape Paints inside a selected shape Paints the fill of a shape but not the line
Creating Shapes Using the Brush Tool 1. Click on the Brush tool icon 2. Click and drag to create a line 3. Draw another line Ensure the two lines are touching and are the same colour The 2 lines are now part of the same shape To move the shape 1. Click on the Arrow tool 2. Click and drag around the shape to select it 3. Position the cursor anywhere within the shape 4. Click and drag the shape To move part of the shape 1. Click on the Arrow tool 2. Select part of the shape by clicking and dragging over it 3. Click and drag to move the selected part of the shape
Happy Computers 020 7375 7300
46
Grouping Shapes More than one object can be grouped to form a new single object. It is useful to group objects if you need to edit the objects simultaneously. 1. Click on the Arrow tool 2. Select all the shapes by clicking and dragging all of them Or Shiftclick each object 3. Click on the Modify menu 4. Choose Group or press Ctrl + G 5. A thin border appears around the grouped shapes If you overlap objects that are the same colour and have no stroke colour, they too become grouped.
To ungroup shapes 1. Select the group 2. Click on the Modify menu 3. Choose Ungroup or click Ctrl+Shift+G 4. Click away from the shapes
47
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Changing the Fill Colours Flash can change the colour of an existing shape. It is possible to have a solid colour or a colour with gradients. Gradients can make a 2dimensional shape appear 3dimensional.
Changing the Colour of an Existing Shape 1. Select the fill of the shape 2. Click on the Paint bucket tool on the Property inspector
Changing the Gradient 1. Select the fill of the shape 2. Click on the Fill colour icon 3. Click on the Paint bucket tool on the Property inspector 4. Select the fill gradient from the selection at the bottom
Colour is applied to the shape
You can change the centre point of a gradient colour 1. Choose the subselection tool from the toolbar 2. Click on the shape 3. Click and drag the white circle in the centre of your shape to move the gradient
Happy Computers 020 7375 7300
48
Creating a New Gradient How do I open the Colour Mixer panel ? 1. Click on the Window menu 2. Choose Colour Mixer panel 1. Select the fill of the shape
Colour Mixer panel
Fill Style
Gradient Pointer
2. Click on the one of the pointers On the Mixer box 3. Choose a colour
Either choose a colour from the Mixer or Swatches
4. Click on the other pointer 5. Choose another colour 6. Continue for all of the pointers Place the pointers closer together to make the transition from one colour to another more abrupt.
Adding more Pointers All gradients must have at least 2 pointers, but you can make your gradient more complex by adding more pointers. Click just below the gradient bar
Click here
49
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
How many gradient pointers can I have? 8 is the maximum number
Removing Pointers Click on the pointer (underneath the gradient bar) and then drag it away, downwards
Click on the pointer and drag downwards To move a gradient pointer, simply click and drag it to where you want it.
Saving a new Gradient Colour 1. Click on the Options menu on the Colour Mixer panel 2. Choose Add Swatch
in the top right corner
Using the new Gradient Colour 1. Click on the Fill colour icon the Property inspector 2. Choose the new gradient
Removing a New Gradient Colour 1. Click on the Colour Swatches panel 2. Choose the gradient colour to remove 3. Click on the Options menu 4. Choose Delete Swatch
Happy Computers 020 7375 7300
50
Aligning Shapes It is possible to align shapes (particularly useful with rectangles) to any position on the page based on a pixel measurement.
Aligning Shapes To view the entire stage 1. Click on the View menu 2. Choose Magnification 3. Select Show Frame 1. Select your shape 2. Click on the Info icon W and H are the width and height of the
Colour of the document 3. Change X and Y to the settings you want 4. Create or click on another shape 5. Change the X value of the shape 6. Change the Y value of the shape
51
Info box appears X and Y are the number of pixels your shape is from the left and top of the stage Cursor position Zero and zero would move it to the centre of your stage
If you want to align the left of the two shapes then make the x value the same for each If you want to align the top of the shapes then make the y value the same for each
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Aligning Shapes Using the Menu 1. Select the object(s) to align 2. Click on the Window menu 3. Select Align Align horizontally Distribute evenly Match width, height or both
Dialog box appears Align vertically Align relative to the stage Distribute evenly Equal spaces in between objects
Happy Computers 020 7375 7300
52
Adding Type The text tool allows you to control text and paragraph attributes.
Using the Text Tool 1. Click on the Text tool on the Toolbar 2. 1Click on the stage 3. Start typing
A text box appears Text will expand automatically along one line
To create a text box with set width and word wrap 1. Click on the text tool 2. Click and drag the text box so it is the width you want
3. Start typing. The text will expand to the next line once the width that you have set has been reached.
Character Attributes Using the Property Inspector Text Type
Font Type
Bold & Italics
Font Colour
Text Direction
Font Size
Paragrap h Alignment Text box width, height and x and y positions
53
Letter Spacing Superscript and Subscript
Link text to URL
Kerning
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Simple Objects
Changing the Size of a Text Box 1. Select the textbox
Blue handles will appear around the shape
2. Click and drag on one of the handles to the size you want
Formatting your Text 1. Click on the Arrow tool 2. Click on the stage and type 3. Click on the Arrow tool 4. Make whatever changes you want for example…. 5. Click on downward arrow for Font size and use the slider to change the font size
6. Click on the downward arrow for Character Spacing and use the slider to change the spacing between the characters
0= 3= letters are closer together 10=
Kerning This is the space in between the letters. Some letters, like T, will have more space around it due to the horizontal line, whereas some letters may seem closer together, like o and a. Flash takes care of this if you keep kerning on . Changing your text into a hyperlink! 1. Select your text, using the arrow tool 2. Click on the Expand button on the Property inspector (in the bottom right corner) 3. In the URL box type the URL of the page to link to 4. Press Enter (your text will have a dotted underline in Flash)
Happy Computers 020 7375 7300
54
Rotating & Enlarging Text It is possible to manipulate the text as though it is a shape. 1. Create a text box 2. Click on the Arrow Tool 3. Click on the Text box
A thin line appears around the text
4. Click on the Free Transform Tool on the Toolbox 5. Click on the Rotate & Skew icon 6. Position the cursor just outside any of the corners of the text box 7. Click and drag to rotate the text box
Black square handles appear around the text box A circular (rotate) arrow will appear
8. Click on the Scale icon 9. Position the cursor on any handle 10.Click and drag to change the size of the text box You can be more accurate when you are rotating and enlarging by using the Show info box. 1. Select the text box 2. Click on the Transform Panel 3. Change the dimensions
55
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Converting Existing Shapes into Graphic Symbols
Converting Existing Shapes into Graphic Symbols
Happy Computers 020 7375 7300
56
Converting Existing Shapes into Graphic Symbols It is straightforward to create and edit static objects, but Flash can do so much more! Once it is decided that an object is going to be animated, it needs to be converted to a Symbol. Symbols are the basic building blocks of Flash. You may want to use the same symbol more than once in the same or different Flash movie. Flash stores these symbols in a Library. When you create animation you use a copy of the symbol. This ‘copy’ is called an Instance. Why do I need to create Symbols? Symbols are reusable elements (which are stored in a Library). The advantage of using symbols is that they keep the size of your Flash file down to minimum and it means that wherever you choose to use an instance of that symbol, it starts out looking the same as all the others.
Converting an Existing Object into a Symbol Viewing the Library F11 Or 1. Click on the Window Menu 2. Choose Library 1. Create an object
2. Select it 3. Click on the Insert menu 4. Choose Convert to Symbol or Press F8 5. Type a name for the symbol 6. Choose the type of symbol you want 7. Click on OK 8. Have a look in your library window
57
Graphic symbol is the most commonly used one You should see your symbol there – to view the library
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Converting Existing Shapes into Graphic Symbols
window use the window menu 9. From your library, drag your symbol onto the stage 10.The object on stage becomes an instance White dot in the centre
Bounding box for symbol
Double clicking on an instance of a symbol You might do this on purpose or even by mistake. If you double click on an instance of a symbol you will move into editing the symbol itself. If you’re not sure check the top of the timeline. If it just tells you what scene you’re in you aren’t editing the symbol. If you see the name of your symbol then you’re editing the symbol. Click on the name of the scene to move back.
Happy Computers 020 7375 7300
58
Frames, Layers & Scenes
59
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Frames, Layers & Scenes
What are Frames & Layers? Layers are like transparent sheets of acetate stacked on top of each other. If there is nothing on a layer, you can see through it to the layers below. A new Flash document contains one layer. It is good practice to organise your graphics on more than one layer. Layers contain frames. A document can have one frame or several hundred. Number of layers The number of layers used does not affect the file size of your document but it does help you organise your objects (or instances) on the stage
Which frame? If the shape is going to move (or be animated), the shape must be on the Keyframe. See page 72 Animation.
Frames & layers jargon · · ·
· ·
Frames and layers come from when all animation was drawn by hand. Keyframes are special frames where a specific event in the animation occurs, such as a circle changing shape or moving position. Frames (also known as inbetween frames) contain static information. This is where Flash takes the name "Tweening" from, which means adding frames in between keyframes. Mask layers are used to help you create sophisticated effects. Guide layers Are used to guide your shape along a path
Flash allows you to combine different shapes together to create complex objects. To work best with these complex images, it is vital to understand layers and how Flash interacts with objects on the same of different layer. Keyframe Tip 1 Keyframes need to be added to create animation
Keyframe Tip 2 All movies must have at least one keyframe
Happy Computers 020 7375 7300
60
Keyframe Tip 3 When creating a background for a movie, place it on a layer on its own and position the layer at the bottom of the list of layers. Call the layer background.
Different Representations of Your Timeline Motion Tweening
(pale blue)
§ Keyframes have a black dot § In between frames have a black arrow. § Background is pale blue Shape Tweening § Keyframes have a black dot § In between frames have a black arrow. § Background is light green A dashed line shows means the final keyframe is missing Here there is only one keyframe, the light grey frames after show that there is no change in the content. § There is an empty rectangle in the final frame. § No tweening has been specified in keyframe 1. § If you change the tweening to shape or motion, it will change to the example above. A small “a” indicates there is a frame action associated with this frame A red flag indicates the frame contains a label or a comment
61
(pale green)
(pale green) (light grey)
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Frames, Layers & Scenes
The Timeline
Playhead
Frame numbers
Frame
Layer name
List of symbols Add layer
Current
Keyframe Frame rate
List of scenes
An Example of the Use of Layers All the different elements of the movie live on separate layers
Happy Computers 020 7375 7300
62
Creating a Layer Why create layers? It is good practice to insert a layer for every type of object on your scene. 1. Click on the New layer icon 2. New layer appears above existing layer
Moving a Layer 1. Select the layer name in the Timeline 2. Click and drag it to a different position (up or down)
A grey line appear showing the position of the new layer
Renaming a Layer 1. Doubleclick the layer name 2. Type the new name
Give it a descriptive name
Locking a layer 1. Select the layer to lock 2. Click on the bullet in the column under the Lock icon
Bullet replaced with a padlock
Deleting a Layer 1. Select the layer in the Timeline 2. Click on the Trash button on the Timeline
Hiding a Layer 1. Select the layer to hide 2. Click on the Hide icon on the Timeline
63
Flash replaces the bullet with a red cross
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Frames, Layers & Scenes
Layer Properties 1. Doubleclick on one of the small boxes in the Show all layers as outlines column
Layer properties dialog box appears
Double click here Change the name of the layer Specify the type of layer this is Change the colour of the outline. This is the colour you will see when you are using onion skins (see later
2. Click OK
Showing a Layer as an Outline 1. Click on a small box in the Show all Layers as Outlines column Click on one of these
2. The object(s) in this layer appears only as an outline
Adding a Shape onto a Layer 1. Select the layer the shape will be on 2. Insert a keyframe 3. Create a shape Keyframe is not empty now As soon as you add an object to a frame, a black circle appears in the Keyframe.
Happy Computers 020 7375 7300
64
Drawing on layers You can draw and edit objects on one layer without affecting objects on another layer
Changing the Stacking Order of Your Layers As you add more and more layers, you may need to arrange them so some shapes appear in the background or the foreground. By changing the order of the layer in the timeline it is possible to have shapes overlapping one another. 1. Select the layer 2. Click and drag the layer 3. Release the mouse
Flash shows you the new location with a thick line Flash moves the layer and selects it
Does the stacking order matter? If a layer is at the bottom of all the layers, objects on it will appear in the background of the movie
65
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Frames, Layers & Scenes
Scenes Scenes are similar to scenes in a play. They are created separately, but run sequentially in the movie. Scenes can be used to break up a long movie into smaller more manageable chunks. What's the difference between a Scene and a Document? You can have a number of scenes in a Flash document. Once a scene has been "played" it will play the next scene and so on. For example, there may be a shape moving on the stage in one scene and when that is over it will play the next scene. Important points about Scenes § When creating a new scene, there is no evidence of other scenes. § Scenes play sequentially in the order they are created, but can be reordered.
Adding a New Scene 1. Click on the Insert menu 2. Choose Scene
Duplicating a Scene If you have created a scene with all the correct buttons, colours and animations on, and you need to replicate this, it is easier to duplicate the scene. 1. Click on the Window menu 2. Select Other Panels 3. Select Scene
4. Select the Scene you want to duplicate 5. Click on the Duplicate Scene button 6. Doubleclick the name of the new scene 7. Type a new name 8. Close dialog box
Happy Computers 020 7375 7300
Scene names can have spaces
66
Renaming a Scene 1. Click on the Window menu 2. Choose Panels 3. Select Scene 4. Select the Scene you want to rename 5. Doubleclick the scene name 6. Type a new name 7. Close dialog box
67
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Mask Layers
Mask Layers
Happy Computers 020 7375 7300
68
Mask Layers Mask layers are layers that allow you to hide and show parts of the layer below. It is like a window envelope where you can only see certain parts of the letter in the envelope. Once you have created the mask layer, it is easy to animate the mask layer to create special effects.
Creating a Mask Layer There are three stages to creating your mask layer 1. Draw the picture that you want to be underneath the mask and name that layer 2. Add a new layer and draw the shape that you want to form the mask. 3. Turn on the masking You can switch the gridlines on so you can align your shapes. 1. Click on the View menu 2. Choose Grid 3. Select Show Grid 1. Create a new scene 2. Rename the layer
Make the name relevant to your content
3. Create the shape (or picture) you want underneath your mask layer
4. Keep on adding layers with content until you have the image you want for underneath your mask 5. Click on the Insert Layer icon 6. Rename the layer “Mask layer” 7. Ensure the Mask layer is selected
69
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Mask Layers
8. Create the shape (or shapes) that you want to form the mask layer
9. Lock all three layers 10.Ensure the Mask layer is selected 11.Right click on the mask layer 12.Choose Properties 13.Click in Mask
There is a Mask icon next to the Mask layer
14.Right Click on your first layer 15.Choose Properties 16.Click Masked
The background layers are seen through the Mask layer
Masks use a lot of processing power, so keep masks to a minimum.
Happy Computers 020 7375 7300
70
Mask layers can only contain one shape – if you put two shapes in it will just use the first one you drew to create the mask
What Shapes can I use in the Mask and Linking layers? This is completely up to you! Masking is a very powerful tool in Flash, go ahead and experiment.
Unlinking a Layer from a Mask Layer Often when you create a new layer below a Mask layer it is associated with it. 1. Rightclick on the Mask layer 2. Choose Mask
Animated Masks This type of animation is like a spotlight effect. See page 97 for an example.
71
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Symbols
Symbols
Happy Computers 020 7375 7300
72
Symbols Types of Symbols A symbol is an object that is going to be used more than once it can be a static element, a button or an animated movie clip. There are 3 types of symbols: Graphic Button Movie Clip
These are objects created in Flash. i.e. a shape or some text These are interactive objects that will perform an action e.g. a Home button activated when the user clicks on it These are independent animations within a movie i.e. a moving image that runs continuously Why should I use symbols?
§ If you need to use an element again and again, use a symbol since it will help to reduce your file size. § If you change the symbol (for example change the colour) every copy of the symbol will be changed throughout the Flash document. Where are symbols stored? Each Flash document has its own library. To view the library press F11.
Useful jargon § When an object is in the library it is know as a symbol § When a symbol is on the stage it is known as an instance of the symbol
Creating a Symbol There are 2 methods: · ·
73
Converting an existing object into a Graphic symbol (See p 57) Creating a symbol from scratch
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Symbols
Creating a Symbol from Scratch 1. Click on the Insert menu 2. Choose New Symbol 3. Type a name for the symbol 4. Ensure the behaviour is Graphic 5. Click OK
You are now in Symbol editing mode
How do I know I am in Symbolediting mode? § A crosshair is placed in the centre of the stage and in the Library. § Just below the Timeline you will see the name of the new symbol § The entire stage appears white 6. Create the symbol
The crosshair indicates the centre of your stage, you can position your symbol in relation to it
How do I centre the symbol on the stage? 1. Select the symbol 2. Use the arrow keys on the keyboard to move the symbol a pixel at a time 7. Click on the scene name
You will be returned to the stage You now need to add an instance of the symbol to the stage 8. Press F11 The Library for this document opens
9. Click and drag on the Symbol or Symbol name in the Library
Happy Computers 020 7375 7300
An instance of the symbol is placed on the stage
74
Editing a Symbol (and all of its instances) This changes the symbol permanently and all instances of the symbol on the stage.
1. Rightclick the symbol name in the library or Rightclick an instance of the symbol on the stage 2. Choose Edit
You are in symbolediting mode
3. Make your changes 4. Return to the movieediting mode by clicking on the scene name
Changing the Colour of a single Instance You may decide you only want to change the instance on the stage and not the symbol in the library, particularly when you’re animating.
1. Add an instance to the stage 2. Select the instance On the Property inspector 3. Click on the down arrow next to Colour
Brightness Tint Alpha Advanced
100 makes the object black, 0 remains the same and 100 makes it white Changes the colour of the object (also measured in the amount of red, green and blue in the mix) Changes the transparency of the instance. 0 makes it invisible and 100 remains the same Changes the instance’s tint and transparency in one go
4. Choose Tint
5. Ensure the Tint is at 100% 6. Click on the Colour icon 7. Choose a colour from the
75
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Symbols
palette
Duplicating a Symbol If you have made changes to an instance then find you will need to reuse the instance then convert it to a symbol. 1. Rightclick the altered instance of the symbol on the stage 2. Choose Convert to Symbol 3. Type a new name for this symbol 4. Ensure the behaviour is graphic 5. Click OK
Deleting a Symbol from the Library 1. Rightclick on the symbol name in the library 2. Choose Delete 3. Click Delete
Confirmation message appears
Adding a Library from another Movie 1. Click on the File menu 2. Choose Import 3. Choose Open External Library
4. Choose the flash file that contains the library that you want to open 5. Click Open
Using a Symbol from Another Library Click and drag the symbol from the second library onto the stage
The symbol becomes part of the library of this document
Changing a symbol/instance from another library This is just as before, the symbol is now part of the current library. You can either change the symbol or an instance.
Happy Computers 020 7375 7300
76
Swapping one Instance of a Symbol for Another 1. Select the instance on the stage you want to replace On the property inspector 2. Click on the Swap button 3. Choose the symbol you want to replace the existing symbol 4. Click OK
77
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Symbols
Organising Symbols It is good practice to organise your files in general, and this includes your symbols. Instead of just storing your symbols in the Library, it is better to arrange them within folders, particularly if your movie is going to have a large number of symbols.
Creating Folders in the Library 1. F11 2. Click on the New Folder icon at the bottom of the Library 3. Type a name 4. Press Enter
Opens the library for this movie A new folder appears in the library
Moving Symbols into the Folder 1. Select the symbol name in the library 2. Drag it to the folder name until there is a thin black line around it 3. Release the mouse Moving adjacent symbols into a folder 1. Click on the first symbol 2. Hold down the Shift key 3. Click the last symbol All the symbols are selected 4. Drag to the folder 5. Release the mouse Moving more than one symbol not adjacent into a folder 1. Click on a symbol 2. Hold down the Ctrl key 3. Select the other symbols 4. Drag to the folder 5. Release the mouse
Happy Computers 020 7375 7300
78
Animation: Frameby-Frame
79
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: FramebyFrame
Simple Frame-by-Frame Animation This is a very simple animation using a series of images, each of which are slightly different from one another. Each of these images needs to be placed on a separate keyframe. The entire animation can be made up of a series of keyframes. The keyframe will duplicate the symbol from the previous frame, then you can change it. This means you don’t have to keep recreating the symbol in each keyframe. How do I add Keyframes? 1. Click in the frame in the Timeline 2. Press F6
Example of "Bouncing ball" Animation Change the view so you can see the entire frame. 1. Click on the View menu 2. Choose Magnification 3. Select Show Frame You will see the entire stage 1. Open a new document 2. Rename the layer Bouncing ball 3. Select frame 1 4. Select the Oval tool on the Toolbar 5. Set the Line colour to None 6. Create a perfect circle about 1 inch in diameter in the top left of the stage 7. Click into the second frame 8. Press F6 9. Click on the Arrow tool 10.Move the circle to the bottom of the stage 11.Click into the third frame 12.Press F6 13.Move the circle to the centre of the stage 14.Repeat steps 12 and 13 until the circle is in the bottom right corner of the stage
Happy Computers 020 7375 7300
Hold down the Shift key to make a perfect circle
A Keyframe is added
80
Previewing the Scene It is only necessary to play a scene at a time; if you play the movie it will play each scene concurrently. 1. Click on the Window menu 2. Choose Toolbars 3. Choose Controller or
Use Play, Stop, Forward, Rewind buttons
Playing the Frames in the Flash Player Click Ctrl+Alt+Enter Or 1. Click on the Control menu 2. Choose Test Scene Flash exports the scene to a Shockwave Flash Format file and opens it in Flash Player. This .swf file takes the same name as the Flash movie 3. Press Escape to stop the scene 4. Closing the window returns you to the flash scene
Adding More Frames to Make the Animation Smoother This first movie is not very smooth and a bit crude. By adding more keyframes and moving the circle in each one, the bouncing ball can appear smoother. Before you add more keyframes, switch on onion skinning. This allows you to see the circle in context with the other circles in the keyframes.
Switching on Onion Skinning 1. Click on the Onion skin icon on the Timeline
Onion skin
2. Click on the right Onion skin marker 3. Drag it so it extends over all the frames you are using This is what you will see on the stage
81
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: FramebyFrame
Onionsking Icons Onion skinning shows dimmed or outlines of the content of your other frames in the animation. This helps if you need to align shapes and in refining your animation.
Turns on Onion skinning
Onion skin outlines
Happy Computers 020 7375 7300
Edit multiple frames
Modify Onion markers
82
Frame Rate The Frame Rate controls the speed at which Flash will show the images. If the frame rate is too high, the movie will appear as a blur, if it is too slow, the viewer will actually see each frame as separate images. A good frame rate setting for animation over the web is 12fps.
Setting the Frame Rate In the frame rate box on the Timeline, Doubleclick the frame rate Document Properties dialogue box opens up
Enter a value for the frame rate Press OK
Slowing Down the Animation Another way of slowing the animation is to add blank frames between the keyframes 1. Select keyframe 1 2. Click on F5 3. Select the second keyframe 4. Click F5 5. Repeat the steps so there is a blank frame between each keyframe
This inserts a Frame
6. Press Ctrl +Alt + Enter to test the scene Blurred animation If the animation appears blurred in the movie, try reducing the frames per second (fps).
83
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: Motion Tweening
Animation: Motion Tweening
Happy Computers 020 7375 7300
84
Motion Tweening Framebyframe animation produces large files and is a lot of work. So, Flash gives you an alternative, which is Tweening. Tweening is when you instruct Flash to fill in the frames in between (this is where "tweening" come from) the keyframes. What can Flash Motion Tween? · · ·
Symbols Grouped objects Text
Examples of Motion Tweening · · · ·
Animating objects that change colour Animating objects that fade out Animating objects that change size Animating objects that move
Animating Objects that Change Colour Here the colour changes, but all you do is choose the starting and ending colours and Flash will motion tween the in between frames. I.e. the colour will change gradually between the two keyframes. 1. Create a new Flash document 2. Rename the layer
(Or open one containing symbols, ensure that you are on a new layer, and then go to step 6) Make the name something that’s appropriate for the content
3. Ensure Keyframe 1 is selected 4. Drag an instance of a symbol onto the stage 5. From the properties inspector choose the motion tween 6. Select the frame that you want to end the animation to end on 7. Press F6
A keyframe is inserted
8. With your frame still
85
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: Motion Tweening
selected, use the pointer to select the object on the page Using the Property inspector 9. Click on the down arrow next to Colour
10.Choose Tint 11.Change the colour 12.Ctrl + Alt + Enter to view the scene
Flash recolours the shape in the inbetween frames
Animating Objects that Fade Out It is possible to "tween" an object so the colour fades. This example will show the object’s colour fade in and out. 1. Create a new Flash document, scene or layer 2. Rename the layer 3. Select frame 1 4. Drag an instance of a symbol from the library 5. Choose Create Motion Tween from the properties inspector 6. Select your next keyframe 7. Press F6 8. Select the shape 9. Click on the drop down next to Colour on the Property inspector
A keyframe is inserted
10.Choose Alpha 11.Change the % to 0
12.Keep inserting keyframes and changing the Alpha in each until you have the effect you want. 13.Press Ctrl + Alt + Enter to view the scene
Happy Computers 020 7375 7300
86
Animating Objects that Change Size It is possible to "tween" an object so it enlarges then gets smaller. This example will show a shape growing in size, and then shrinking. 1. Create a new Flash document, scene or layer 2. Rename the layer 3. Select frame 1 4. Drag an instance of a symbol from the library 5. Choose Create Motion Tween from the properties inspector 6. Select your next keyframe 7. Press F6 8. Click on the free transform
A keyframe appears
Tool on the Tool box 9. Change the size of the shape by clicking and dragging the corner handle 10.Repeat with as many keyframes as you want to include in your animation 11.Press Ctrl + Alt + Enter to view the Scene Time delay between objects animating If there is a time delay between one object ending and restarting, it may be that there are more frames being used for one object, so all the frames have to run before they can start again. I.e.
There is a 15 frame delay before "square" can start again
87
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: Motion Tweening
Animating Objects to Move Across the Stage It is possible to "tween" an object so it moves across the stage. This example will show a shape moving and rotating across the stage. 1. Create a new Flash document, scene or layer 2. Rename the layer 3. Select frame 1 4. Drag an instance of a symbol from the library 5. Choose Create Motion Tween from the properties inspector 6. Select your next keyframe 7. Press F6 8. Move the shape by clicking and dragging it to somewhere else on the stage 9. Repeat as many times as you like 10.Press Ctrl + Alt + Enter to view the Scene
A keyframe is inserted Cursor shape is a large black arrow with a smaller four headed arrow attached to it
Combine as many kinds of change as you want in your motion tween – you can do all of them to the same object with the same tween.
Animating Objects to Move Across the Stage Using Guide Layers Guides layers allow you to draw a path for your shape to follow. A normal layer is linked to this guide layer. 1. Add a new Scene or layer 2. Rename the layer 3. Select frame 1 4. Drag an instance of a symbol from the library Or Copy & paste an image from the web 5. Select frame 1 6. Choose Create Motion Tween from your properties inspector
Happy Computers 020 7375 7300
Create a shape which that will look different when rotated
88
7. In your properties inspector for the first frame of the tween – choose Snap This will ensure that the shape snaps to your guide path when you draw it 8. Click in the last frame for this animation 9. Press F6
A keyframe appears
10.Click on the Arrow tool if it is not already pressed in 11.Move the object to the end position 12.Click on the Add Guide Layer icon
The Guide layer appears above the original layer
13.Switch on onionskinning 14.Extend the skinning over all the frames
15.Click on the Pencil tool 16.Draw the pathway from the centre of the first shape to the centre of last shape
Start from the centre of the shape in frame 1 and end in the centre of the shape in the last frame
Last position of the shape
17.Press Ctrl + Alt + Enter to view the scene
89
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: Motion Tweening
Animating Objects to Move Across the Stage Matching the Shape‛s Orientation to the Path To make the movement of your shape look even more realistic, it is wise to change the object’s position according to where it is moving to. For example, if you had motion tweened a beetle to crawl across the stage, it would look better if the beetle was facing the direction it was moving in
The beetle is always facing the left even though the guide layer changes direction.
The beetle is always facing the direction it is moving in.
1. Create your motion tween as normal 2. In the properties inspector for your first frame on the motion tween choose Orient to Path 3. Create your guide layer as normal
Happy Computers 020 7375 7300
90
Animation: Shape Tweening
91
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: Shape Tweening
Shape Tweening Difference between Motion & Shape tweening? Motion tweening works on groups and symbols, whereas Shape tweening uses editable shapes and either morphs them or changes their colour. You will see it is possible to arrive at the same animation effect using either motion or shape tweening, i.e. the bouncing ball example Examples of Shape Tweening · · · ·
Morphing a simple shape into another Morphing letters/numbers Morphing one object into many objects Changing the colour of an object
Morphing a Simple Shape into Another 1. Insert a new scene or layer 2. Rename the layer 3. Select frame 1 Why not use one of your existing symbols…however you must “Break Apart” the instance otherwise you won’t be able to shape tween it 1. Drag an instance of the symbol onto the left side of the stage In this case it is a circle 2. Click on the Modify menu 3. Choose Break Apart 4. either use an existing symbol broken apart or draw a shape on the stage On the Property inspector 5. Click on the Tween downward arrow 6. Choose Shape 7. Click on the next frame you want as a keyframe 8. Press F7
Blank keyframe is inserted and frames 19 change to pale green with a dashed line
9. Create a different shape on
Happy Computers 020 7375 7300
92
the right side of the stage 10.Press Ctrl+ Alt + Enter to view the scene
This is what the animation looks like
Aligning the Two Shapes When you run through the animation, you may notice the location of the two shapes are different, as well as morphing into another shape, the shapes actually seem to move. To prevent this from happening, you can use onion skinning, so you can position your shapes. In the example below we are shape tweening a circle into a square in the same location. 1. Click on the Onion skin icon below the Timeline 2. Click and drag the markers so you can see all the frames 3. Doubleclick the square to select it 4. Click and drag it so it is on top of the circle
5. Click on the Outline icon for this layer so you can only see the outline for both shapes
6. Now you can reposition the shapes so they are exactly on top of each other
Use the arrow keys on the keyboard to move the shapes one pixel at a time
7. Press Ctrl + Alt +Enter to view the scene
93
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: Shape Tweening
Morphing Letters/Numbers 1. Create a new scene 2. Rename the layer "charactermorph" 3. Select frame 1 4. Click on the Text tool In the Property inspector 5. Format the text as you want 6. Click onto the stage 7. Type a letter or word 8. Singleclick on keyframe 1 9. Choose Shape tween from the properties inspector 10.Click into the last frame of your animation 11.Press F7 12.Click onto the stage where you want the new text to appear 13.Type a letter or word 14.Click on the first keyframe 15.Click on the Modify menu 16.Choose Break apart 17.Click on the second keyframe and break those letters apart too 18.Switch on Onion skinning to reposition “the letters 19.Press Ctrl + Alt + Enter to view the scene
A new blank keyframe appears
If you have a whole word or sentence you might have to break apart twice
If this does not work, check in “Break apart” has been chosen in both keyframes.
Viewing Morphing using Onion Skins 1. Click on the Onion skin outlines icon 2. Click and drag the onion skin markers so you can see all the frames
Morphing one Object into Many Objects 1. Create a new scene or layer
Happy Computers 020 7375 7300
94
2. Rename the layer 3. Select frame 1 4. Create a shape or use a broken apart symbol
You decide on the fill colour but for the stroke colour choose none
5. Singleclick frame 1 6. Choose shape tweening from the property inspector 7. Click on your last frame 8. Click on F7 9. Create other shapes around where the original shape was 10.Press Ctrl + Alt + Enter to view the scene
Again you decide on the fill colour but choose none for the stroke
Changing the Colour of an Object 1. Create a new scene or layer 2. Rename the layer" 3. Select frame 1 4. Create a shape
You decide on the fill colour but choose none for the stroke
5. Singleclick on keyframe 1 6. Choose Shape tweening from the properties inspector 7. Click in your final frame 8. Press F6
Duplicates the symbol from the previous keyframe
9. Click on the Arrow tool 10.Select the shape in the second keyframe if it is not selected 11.Change the fill colour of the shape to a colour of your choice 12.Press Ctrl + Alt + Enter to view the scene
95
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animated Masks
Animated Masks
Happy Computers 020 7375 7300
96
Animated Masks This type of animation is like a spotlight effect. The mask layer contains a single shape and it is this shape that is the "spotlight", moving over a background layer that shows through.
Creating an Animated Mask When you create an Animated Mask the ‘background’ can be any image you want.
Using an image from the Internet (be aware of copyright) 1. Find the image 2. Rightclick it 3. Choose Copy 4. Paste it onto the stage 5. Rightclick the image 6. Choose Convert to Symbol 7. Type a name for the symbol and choose a behaviour (in this case it is a graphic) The image is now an object in your library so can be used again View the entire stage before you start 1. Click on the View menu 2. Choose Magnification 3. Choose Show Frame 1. Open a new scene 2. Rename the layer 3. Click in frame 1 for the ‘background’ layer 4. Drag a graphic symbol from the library onto the centre of the stage 5. Click in the timeline at the last frame that you want in your animation 6. Press F6 7. Click on the Insert new layer icon 8. Rename this new layer
97
This will be our background layer
Background layer will be visible for the length of your movie A keyframe appears New layer appears above the background Calling it “Mask” is a good idea
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animated Masks
9. Click on frame 1 on the mask layer 10.Draw a shape that you want to be the mask 11.Click on frame 1 on the “Mask” layer 12.Click on Modify menu 13.Choose Group
The stroke & fill colours are unimportant
Shape appears with a line around it
Why do you need to group the object? This is an animation using motion tweening, so you must use a symbol or a grouped object.
14.Create a motion tween on the first frame of the Mask Layer 15.Create a multistage tween for the mask 16.Right click on the “Mask Circle" layer name 17.Choose Mask
Flash converts the layer to a mask which links and locks the two layers. The stage might look blank if you have used a large image as backround.
Both layers are now 18.Press Ctrl + Alt + Enter to view the scene What to do if it does not work Check that the Mask layer is the top layer.
Happy Computers 020 7375 7300
98
Buttons
99
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Buttons
Basic Rollover Buttons Using buttons on your website can allow the user to interact with the Flash movie. Buttons can be very basic and show static graphics – but can also be made more interesting by animating when they are clicked or rolled over. What is a button? A button is simply a symbol with four frames. Three of the frames denote the "state" of the button and the fourth one defines the active area of the button.
Frames in a Basic Rollover Button There are 4 frames in the timeline: Up
This is what the button looks like before it has been clicked on.
Over
This is what the button looks like when the cursor is positioned over it. This is what the button looks like when someone is pressing the button. This defines the area of the button.
Down Hit
Creating a Basic Rollover Button that Changes Colour 1. Click on the Insert menu 2. Choose New Symbol
3. Name the button 4. Click Button behaviour 5. Click OK
Dialog box appears
Flash creates a new symbol in the library and takes you to the symbolediting mode
Basic button By default the Up frame contains the keyframe, you must add keyframes
Happy Computers 020 7375 7300
100
Creating the Up State (Continued from creating a Basic Rollover button: ) This object will be the button that is just sitting on the stage waiting for the user to click it. 1. Select the Up frame in the Timeline
The crosshair, , in the middle of the stage serves as a central point for placing new or existing graphics on the stage
2. Create a shape Or Drag an instance of a symbol from the library
Align the symbol with the crosshair in the centre of the stage
if you’re using an instance of a symbol, remember to break the instance apart so that you can edit it in the same way as a norma object 1. Click on the Modify menu 2. Choose Break Apart or Ctrl + B
Creating the Over State Here we are going to make minor changes to the Over graphic, so the user knows when their mouse is on the button. 1. Select the Over frame in the Timeline 2. Click on F6
3. Click on the Paint Bucket tool on the Toolbox 4. Click on the Fill colour icon 5. Choose a different colour
This keyframe duplicates the contents from the previous keyframe
Shape in the over state has changed colour
Creating the Down State Now we are going to make minor changes to the Down graphic, so the user sees a slightly different colour when they click the button (i.e. when the button is being pressed down). 1. Select the Down frame in the Timeline
101
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Buttons
2. Click on F6
3. Click on the Paint Bucket tool on the Toolbox 4. Click on the Fill colour icon 5. Choose a different colour
This keyframe duplicates the contents from the previous keyframe
Shape in the over state has changed colour
Creating the Hit State This is the area around the button that is active. 1. 2.
Select the Hit frame in the Timeline Click on F6
This keyframe duplicates the contents from the previous keyframe
Changing the look of the button in the Hit state is unnecessary. To the user it is an invisible part of the button that will have an effect when they click on it. In editing mode you may see it as a semitransparent light blue shape.
Previewing the Button in the Movie-Editing Mode 1. Click on the Scene name. In the top left corner of the Timeline
2. Click F11 3. Drag an instance of the button onto the stage
4. Click on the Control menu 5. Choose Enable Simple Buttons 6. Test out your button by clicking on it
Happy Computers 020 7375 7300
This will move you back to your current scene.
This shows the Library Ensure the button is deselected, you may need to click on the Arrow tool then click on the stage
You will be able to see all 3 "states"
102
Previewing the button by testing the scene Press Ctrl + Alt + Enter to view the current scene
Don't forget to switch off Enable Buttons! 1. Click on the control menu 2. Click on Enable Simple Buttons (so there is no tick)
To edit the instance and edit the symbol see page 75
103
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Buttons
Buttons with Text It is easy to create buttons with text within them. Changing the look of the text in each state indicates when the user has moved the mouse over the button.
Summary of Steps · · ·
Create the button Add the text Testing the scene
Creating the Button This is the example we are going to create. Up State
Over State
Down State
Text in black
Text in Orange
Text in grey
1. Create a new scene if needed 2. Click on the Insert menu 3. Choose New Symbol 4. Name the button 5. Click on the Button behaviour 6. Click OK 7. Draw out the shape of your button or use an instance of a symbol (don’t forget to break it apart)
Adding the Text 1. Click on the Text tool icon on the Toolbox
You could create a new layer within the button to put the text in
1. On the Property inspector make any changes you want to the text style 2. Click in the centre of your button 3. Type the text that you’d like to have on your button 4. Click on the Arrow tool
Happy Computers 020 7375 7300
104
5. Position the text so it is in the centre of the shape Moving objects on the stage Use the arrow keys on the keyboard to move the text – you can be more accurate this way 6. Click in the Over frame 7. Press F6 8. Click away from the button onto an empty part of the stage 9. Make any changes you want to your button or the text 10. Click in the Down frame 11. Press F6 12. Click away from the button onto an empty part of the stage 13. Change the font colour to grey 14. Click in the Hit frame 15. Press F6
Inserts a Keyframe This will deselect everything
Inserts a Keyframe
Inserts a Keyframe
Testing the Scene 1. Click on the Scene name to return to the stage 2. Drag an instance of the button onto the stage 3. Click on the Control menu 4. Click on Enable Simple Buttons 5. Test out your button by clicking on it
105
F11 if the Library is not visible
You will be able to see all 3 "states"
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Buttons
Buttons that Change Shape It is possible to use Flash to create buttons that have different and imaginative shapes.
Creating the 4 States in a Button 1. Create a new scene if needed 2. Click on the Insert menu 3. Choose New Symbol 4. Name the button 5. Choose Button behaviour 6. Click OK
Flash creates a new symbol in the library and takes you to the symbolediting mode
7. Click on Onion skin icon in the Timeline
8. Select the Up keyframe 9. Choose a colour for the fill and stroke 10.Create a shape for your button
11.Move the shape so it is in the centre of the stage by using the align panel. Have To Stage selected Choose Align Vertical Centre and Align Horizontal Centre 12.In each of the states for the button press F6 13.In the Over state use the Transform Panel to make the shape a different percentage size 14.In the Down state use the Transform Panel to make the shape a different percentage size 15. In each state use the Align panel to ensure the shape
Happy Computers 020 7375 7300
You will get a duplicate of your shape in each one
This ensures that your button stays in the same place at
106
is central to the stage 16.Return to the scene by clicking on the scene name 17.Drag an instance of the button onto the stage 18.Click on the Control menu 19.Choose Enable Simple buttons 20.Test the button
each state
3 States of the Button Up state
Over state
Down state
If the shapes in the Up, Over and Down states are all different then in the hit state it is advisable to create another shape that covers all three shapes. Otherwise the viewer may not be able to interact with some parts of the button.
107
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Buttons
Invisible Buttons When you create a button you don’t have to put an object onto every state. In fact, the only frame that must have some content is the Hit frame. Buttons with no content in the Up, Down and Over frames are invisible in the final movie. In this example, there is some text on the stage and the user can click anywhere on the stage to move to the next frame in the movie. Because there is content only in the hit frame the button is invisible, The user can click anywhere on the stage. In this example you will add two frame actions and one object action. 1. Click on the File menu 2. Choose New 3. Name the layer 4. Click in the first frame 5. Click on the Text tool 6. Click in the centre of the stage 7. Type some text 8. Use the Arrow tool to position the text in the centre of the stage 9. Ensure frame 1 is still selected 10.Click on the Insert menu 11.Choose New Symbol 12.Name the symbol 13.Choose the behaviour Button 14.Click OK 15.Select the Hit frame 16.Press F7 17.Click on the Rectangle tool 18.Create a rectangle as large as the stage
19.Click on the scene name to return to the movieediting mode 20.Click on the Insert layer icon 21.Name the new layer
Happy Computers 020 7375 7300
This layer will contain the text
This is going to be your invisible button
Inserts a blank keyframe
This rectangle turns the entire stage into a button and since there are no objects in the other button frames, the button is invisible
This layer will contain your actions so it would be good to 108
name it ‘Actions’ 22.In the timeline, drag this layer to the bottom of the stacking order 23.Click on the first frame on the “Actions” layer 24.Click on the Window menu 25.Choose Actions 26.Click on Global Actions 27.Choose Timeline Control
28.Click on Stop
29.Close the Actions panel 30.Open the Library if it isn’t open already 31.Click on the first frame on the layer that contains the text 32.Drag an instance of your invisible button onto the stage 33.Reposition the button so it covers the stage
The stop action will appear in the right hand side of the panel
F11
To increase the size of a shape 1. Click on the shape on the stage 2. Click on the Free Transform tool icon on the toolbox 3. Click and drag any corner handle to increase the size of the shape This time you’ll be applying the 34.Click on the rectangle on action to the button rather the stage to select it than the frame itself 35.Click on the Windowmenu 36.Choose Actions > Global Functions > Timeline control 37.Make sure that Script Assist is turned on by clicking the button 38.Doubleclick the Go to 109
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Buttons
action 39.In the Action Script Assist panel fill in the number of the scene and frame you want to go to in this case the current scene and frame 2
40.Close the Actions panel 41.Click into the second frame on the content layer 42.Press F7 43.Click on the Text tool 44.Click on the stage 45. Put in some different content
Inserts a blank keyframe
You can add some animation here so after the user has clicked on the stage some animation is played.
46.Press Ctrl + Enter The movie loops, so you need to add another STOP action in the final frame 47.Click on the final frame on the “Actions” layer 48.Press F7 49.Click on the Window menu 50.Choose Actions > Global Functions > Timeline Control 51.Doubleclick the STOP action 52.Press Ctrl+Enter to view the movie
Happy Computers 020 7375 7300
Inserts a blank keyframe
Timeline should look like this
110
Buttons with Multiple Hotspots Buttons don’t always have to behave as a button or switch, but can be used as a fun element of your movie. In this example the Hit frame has nothing to do with the graphics of the button, but as a separate graphic. This example is a game for the user, where they try to find a bean under the cup. If the user chooses the wrong cup a message will appear and when they find the correct cup another message appears. 1. Click on the File menu 2. Choose New 3. Click on the View menu 4. Choose Grid 5. Select Show Grid 6. Create 5 cups in frame 1
To create a cup use the Oval tool then delete the bottom part of the oval and use the pencil with the smooth option
The easiest way to select an object is to click and drag around it (with the arrow tool switched on)
7. Select 4 of the cups 8. Click on the Edit menu 9. Choose Copy 10. Click on the Insert menu 11. Choose New Symbol 12. Choose Button as the behaviour 13. Type a name for the button 14. Click OK
111
15. 16. 17. 18.
Click on the Hit frame Click F7 Click on the Edit menu Choose Paste
19. 20. 21.
Click on the Down frame Click F7 Click on the Type tool
Use Shift key and click each cup
You are in symbolediting mode Inserts blank keyframe Flash pastes the 4 cups in the centre of the stage
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Buttons
22. Type a message the user will see when they click on the wrong cup 23. Position the text below the cups 24. Click on the scene name
Returns you to movieediting mode
Flash shows the cups as a transparent preview 25. Position the hotspot cups so they are on top of the cups 26. Do the same for the remaining cup See steps 725 27. Click on Ctrl + Alt + Enter to test the scene
Happy Computers 020 7375 7300
112
Actions
113
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Actions
Actions In animation, Flash plays the scenes your movie in sequence. However, in an interactive movie, your audience plays a part in the movie. This might be by using the keyboard, the mouse to jump to different parts of the movie, move shapes, enter information and do lots more. You can make your movie interactive by using actions, which are instructions written in ActionScript. An action is like a statement or a command. 2 types of Actions § Frame actions Requires nothing from the user, when the playhead reaches the frame with the action, it just goes ahead and runs the action § Object actions These actions are played when the user does something ie clicks on a button Actions can also be assigned to a movieclip that responds to the user doing something or runs when the movie is first played.
In the actions panel there is a button called Script Assist – turn this on to get help creating your action script
To turn on Script Assist This manual only refers to and creates actions using Script Assist mode. Check you you have Script Assist turned on for ActionScripting before you add an action 1. Click on the Window menu 2. Choose Actions 3. Click the Script Assist button More than one action can be added to the same frame/button. They will occur in the order they appear in the Actions dialog box.
Object Actions Dialog Box 1. Click on the Window menu
Happy Computers 020 7375 7300
114
2. Choose Actions
You can open and close the Action Script window as you need 3. Click on the arrow at the top of the panel The actions we will be using are in the Global Functions and then Timeline Control
Organising Actions 1. Add a new layer 2. Rename the layer Actions 3. Drag this layer to the bottom or the top
This will make it easier for you to find it – you can put your frame actions here
It is good practice to lock the “actions” layer This will prevent you from accidentally adding any graphics to this layer.
Adding a stop and go to Action to a Button Instance Why do I need a stop action? This is to prevent the movie from looping continuously.
1. Open a new Flash document 2. Rename the layer “text” 3. Click in frame 1 4. Click on the text tool 5. Click anywhere on the stage 6. Type “Scene 1 frame 1” 7. Click in frame 2 8. Press F6 9. Change the text so it reads “Scene 1 frame 2” 10. Insert a new layer 11. Click and drag it to the bottom of the layers list
115
Duplicates from frame 1
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Actions
12. Rename this layer “actions” 13. Click in frame 1 of the “actions” layer 14. Click on the Window menu 15. Choose Actions 16. Choose the Actions category 17. Click on Global Functions > Timeline Controls 18. Doubleclick stop action
Stop action is added to the Actions list
19. Select frame 1in the text layer 20. Drag an instance of a button onto the stage Instead of recreating a symbol use an existing one from another Flash document 1. Click on the File menu 2. Click on Open as Library Find the Flash document 21. Select the button 22. Ensure the Actions panel is open Make sure Script Assist is turned on 23. Choose Global Functions > Timeline Controls 24. Doubleclick go to action 25. For the Scene and Type, do not change anything 26. For the Frame number, change to 2 27. Choose the Go to and Stop option
Actions appear in the right side of the screen
If you don’t choose this your movie will play then continue to loop
28. Click on the Control menu 29. Choose Enable Simple Buttons 30. Test the button
Deleting an Action 1. Open the Actions panel 2. Select the action to delete
Happy Computers 020 7375 7300
116
3. Click on the
icon
Some actions are straightforward is Stop, Play & Go To, others such as FS Command & Set Property require a certain amount of programming knowledge.
Adding Frame Labels and Comments In some actions you need to specify a particular frame, instead of referring to the frame number it is safer if you refer to them by a name, so you know you have the right one. For example, if you add or remove frames you will not need to change the frame number for the action as Flash will still find the frame by the label name. For frames that are not used in actions, you can add comments to them describing what it going on. You cannot add a label and a comment to the same frame.
Labelling a Frame 1. Select the frame in the timeline On the Property inspector 2. Type a name for the frame
3. Deselect the frame in the timeline 4. You can also choose a label type from the dropdown list
117
A small red flag appears in the frame
You can choose Name, Comment or Anchor
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: MovieClips
Animation: MovieClips
Happy Computers 020 7375 7300
118
Movie-Clip Symbols Movie-clip symbols There are 2 types of animated symbols · Graphic symbols · Movie clips An animated graphic symbol uses the timeline of the movie it has been placed into, whereas a movieclip symbol has its own timeline. Movieclips are able to retain their interactivity, because they do have their own timeline to which you can add actions. Graphic symbols lose some of their interactivity when they are converted into a graphic symbol. This example is of a button, with a movie clip inside the Over frame. When the user moves their mouse over the button and clicks on the button, an animation will play, which will be the border of the button getting larger and fading out.
Summary of Steps · · · · ·
Create a basic rollover button Creating the graphic symbol Creating the movieclip Editing the button Testing the button
Create a Basic Rollover Button 1. Create a new Flash document 2. Click on the Insert menu 3. Choose New Symbol 4. Name the button "Circle button" 5. Select the Button behaviour 6. Click OK 7. Select the Up frame 8. Click on the Oval tool on the Toolbox 9. Change the line thickness to 4 and the line colour to black 10.Change the fill colour to a colour of your choice 11.Create a perfect circle 12.Click on the Over frame 13.Press F6
119
Use the crosshair to postion it in the centre of the stage Inserts a keyframe
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: MovieClips
14.Click on the Over frame 15.Press F6 Inserts a keyframe 16.Click on the stage to deselect the circle 17.Click once to select the stroke 18.Press Delete on the keyboard 19.Right click on the Over keyframe 20.Choose Copy frames 21.Right click in the Hit frame 22.Choose Paste frames 23.Click on the Scene name Returns to movieediting mode Open the Library if it isn't open already F11
Creating the Graphic Symbol This graphic symbol will be used to create the movieclip. A button is used so the shape of the button remains constant. 1. Drag an instance of the button onto the stage 2. Click on the Modify menu 3. Select Break Apart 4. Click on the stage to deselect the shape 5. Click on the fill of the shape
Appears selected
6. Press Delete on the keyboard
Shape appears with only the outline
7. Click once to select the stroke 8. Click on the Insert menu 9. Choose Convert to Symbol 10.Name the symbol “outline” 11.Choose Graphic as the behaviour 12.Click OK 13.Press Delete
Happy Computers 020 7375 7300
This will delete the instance from the stage 120
Creating the Movie Clip 1. Click on the Insert menu 2. Choose New Symbol 3. Name the new symbol “circle animation” 4. Choose Movie clip as the behaviour 5. Click OK 6. Drag an instance of "outline" onto This will form the basis of "circle the stage animation" 7. Line "outline" up with the crosshair on stage 8. Click on Frame One of the Movie Clip 9. Choose Create a Motion Tween from the Properties Inspector 10. Click on frame 20 11. Press F6
On the Property inspector 12. Click on the drop down arrow for Colour 13. Choose Alpha 14. Change the Alpha setting to 0% 15. Press Enter
16. Click on the Transform panel 17. Change the Scale option to 400% 18. Insert a new layer
19. Rename this layer “actions” 20. Drag it to the bottom of the list of layers 21. Click on frame 20 on the “actions” layer 22. Press F7 23. Click on the Window menu 24. Choose Actions 25.
121
This is transparency
Symbol will disapper except for selection box around it
Icon is in the bottom left of the Timeline
Inserts a blank keyframe
Select Global Functions >
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Animation: MovieClips
Timeline Controls 26. Doubleclick the Stop action 27. Close the Actions panel
28.
Click on the Scene name
This is what the Timeline should look like for the MovieClip
Returns to movieediting mode
Editing the Button 1. Right click on the button in the library 2. Choose Edit 3. Insert a new layer 4. Click in the Over frame in the new layer 5. Press F7 6. Drag an instance of the movie clip onto the button 7. Line up the movie clip “circle animation” with the crosshair on the stage 8. Select the Down and Hit frames 9. Press F7 10.Click on the Scene name
Inserts blank frames Returns to movieediting mode
Testing the Button 1. Drag an instance of the button onto the stage 2. Test the scene Ctrl + Alt + Enter 3. Move the cursor over the button and click
Happy Computers 020 7375 7300
122
Movie Explorer
123
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Movie Explorer
Movie Explorer As you add text, graphic symbols, buttons and actions to your movie, it can be quite difficult to keep track of what is in each scene and layer. The Movie Explorer is a way for you to find and track different elements in your movie.
Using the Movie Explorer 1. Click on the Window menu 2. Choose Movie Explorer This is the name of the scene This is the only object on the stage at the moment. FrameLayer name Symbols in this document.
CusList of symbols tom set Text Buttons, Movie clips and
Video Click here
Frames and
ActionScrip
Movie Explorer can slow down your machine! Because it constantly updates, Flash can slow down considerably, even if it is only sitting open on your screen. So only open it when you are ready to use it.
Finding a Symbol from Movie Explorer 1. Rightclick on a symbol name in Movie Explorer 2. Choose Find in Library Symbol appears in the Library If the Library is not open, it will open showing the symbol
Happy Computers 020 7375 7300
124
Editing a symbol Just doubleclick the symbol name in Movie Explorer and it will take you to the symbolediting mode.
Renaming a scene Just doubleclick the scene name in Movie Explorer and rename the scene.
Changing the contents of a text box Just doubleclick the text in Movie Explorer and change the text.
Finding an Element 1. Click in the Find field
2. Type the text 3. You do not have to press enter as Flash will start the search as soon as there is text in the box
Printing the Levels 1. Change the display so it is how you want it 2. Click on the Options menu 3. Choose Print
125
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Interactive Movies
Interactive Movies
Happy Computers 020 7375 7300
126
Interactive Movies An interactive movie involves your audience, by using the keyboard, mouse or both. Your audience will be able to jump to different parts of your movie and perform many other functions. An interactive movie is a collection of scenes, buttons and actions. Pictorially, this is what a simple interactive movie could look like.
Main Clicking on the Contact Us button will go to the
Contact Products
Clicking on the Products button will go to the
Scene name Main
Main
Products Contact
Contact Products
Scene name – Contact
Scene name Products
Creating interactive movies Summary of steps · · · · · · · · ·
127
Creating a new movie & modifying the properties Creating a layer for your buttons Inserting instances of buttons onto a scene Adding more buttons Duplicating and renaming each scene Adding some text to each scene Add the relevant Actions to each button Adding the Get URL action to "Contact Us" button Adding the Get URL action to a URL
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Interactive Movies
· ·
Add a Stop action to each scene Testing the Movie
Creating a New Movie & Modifying the Properties Change the colour of the stage here, so you don't have to keep doing it. 1. Click on the View menu 2. Choose Magnification 3. Choose Show Frame 4. Click on the File menu 5. Choose New 6. Change the background colour to one of your choice)
Creating a Layer for Your Buttons This will be a different colour background only at the top of the stage for your buttons to sit on. 1. Rename the layer Headings 2. Click on fame 1 of this layer Create the following using Aligning Shapes on page 51 The colour of the rectangles is pale grey (#ffffff)
Inserting Instances of Buttons onto a Scene Here you will create 3 lozenge shaped buttons with the text Main, Contact and Products and place them on the largest rectangle on the background layer. For the buttons, the text in the Up state will be black, the Over state will be orange and the Down state will be grey.
1. Create a new layer 2. Rename it "Buttons"
Happy Computers 020 7375 7300
128
3. Select frame 1 of this layer Already created the button elsewhere and you don't want to recreate it? 1. Click on the File menu 2. Choose Open as Library 3. Open the Flash document 4. Find the button 5. Drag an instance to the stage The symbol is now in the Library of this movie too 4. Drag an instance of "button with text" onto the stage Before you start using this instance of the button, you may want to make changes to it. 1. Rightclick the instance on the stage 2. Choose Edit 3. Make your changes In this example I have reduced the size of the button so it fits on the rectangle and removed the stroke so the button blends in to the grey background 5. Click on the Arrow tool 6. Move the shape to the top left side of the stage largest rectangle
You now need to duplicate this button 7. Rightclick the name "button with text" in the Library 8. Choose Rename 9. Type “main menu” 10. Rightclick the “main menu” button in the library 11. Choose Duplicate 12. Type "Products" 13. Click OK 14. Rightclick "Products" 15. Choose Edit
You are now in symbolediting mode
16. Click on the Up keyframe
129
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Interactive Movies
17. Doubleclick the text in the shape 18. Type "Products" Repeat the above for the remaining 3 states of the button 19. Click on the Scene name
Returns you to movieediting mode
20. Rightclick on "main menu" in the Library 21. Choose Duplicate 22. Type "Contact Us" 23. Click OK 24. Repeat the steps from above for this button so it has the correct text 25. Click on the Scene name 26. Add an instance of each button on to the stage 27. Click on the arrow tool and position the buttons equally on the rectangle You can also use the Align panel to realign the three buttons 1. Click on the Window menu 2. Click on Panels 3. Choose Align 4. Click on Align Vertically Center 5. Click on the Distribute Horizontal Center Creating Buttons with Type See page 104
Adding more Buttons Duplicate the "main menu" button. Call one "Email" and the other "URL". Edit both, so they have the correct text in the label.
Duplicating & Renaming Each Scene Referring to the diagram on page 127, we have just created the first scene with 3 buttons. We need to create two more scenes. The easiest way to do this is to duplicate the scene and rename each one. 1. Click on the Window menu 2. Choose Panels 3. Select Scene
Happy Computers 020 7375 7300
130
4. Double click the current scene name 5. Type “Main” 6. Press Enter 7. Click on the Duplicate Scene icon 8. Doubleclick "Main copy" 9. Type "Contact" 10. Click on the Duplicate Scene icon 11. Doubleclick the new scene name 12. Type “Products” 13. Close the Scene panel To move to another scene Click on the Edit Scene icon in the bottom right corner of the Timeline See the scene name in the bottom left corner of the Timeline
Adding Some Text to Each Scene 1. Click on the Edit Scene icon in the top right corner of the Timeline 2. Choose Main 3. Click on the Text tool 4. Type “this is the main screen” 5. Click on the Edit Scene icon 6. Choose Products 7. Type “This is the products screen” 8. Click on the Edit Scene icon 9. Choose Contact 10.Drag an instance of the button Email onto the stage 11.Drag an instance of the button URL onto the stage
Now each scene has something different on it
Adding the Relevant Actions to Each Button Now that everything is set up, all you need to do is add the actions to the buttons!
131
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Interactive Movies
1. Ensure you are in the Main scene 2. Click on the Arrow tool 3. Click the "Products" button on the stage 4. Click on the Window menu 5. Choose Actions 6. Make sure Script Assist is turned on 7. Click on Global Functions > Timeline Control 8. Doubleclick the Goto action 9. Click on the down arrow for Scene 10. Choose "Products" 11. Leave the type as Frame number 12. Leave the frame number at 1 13. Click on the Go to and Stop button
This is what the action should look like
Remember you don’t need to add any action to the Main Menu button – since you are already on the scene.
14. Click the "Contact Us" button and follow the steps above, but choose "Contact Us" scene in step 7 15. Go to the "Contact Us" scene and do the same for the Main Menu and Products buttons 16. Go to the "Products" scene and do the same for the Main Menu and Contact Us buttons Button actions should be added to the instance on the stage rather than the symbol in the library.
Happy Computers 020 7375 7300
132
Removing an action If you accidentally add the wrong action, just click on the minus, –, sign on the Actions panel.
133
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Interactive Movies
Adding the Get URL Action to the "Contact Us" Button As well as giving your audience buttons to navigate your movie, you may also want them to view other relevant websites and email you. Both of these are done using the Get URL action. 1. Go to the Contact scene 2. Click the "Email" button 3. Click on the Window menu 4. Open the Actions panel 5. Choose Global Functions > Timeline Conrol 6. Click on the Browser/Network category 7. Doubleclick the Get URL action 8. In the URL box, type mailto:[email protected] ever 9. Click on the down arrow by Window 10.Choose _self 11.In the Variable box, change it to Send using POST
Adding the Get URL action to a URL 1. Click the "URL" button on the "Contact Us" scene 2. Doubleclick the Get URL action 3. In the URL box, type http://www.happy.co.uk 4. Click on the down arrow by Window 5. Choose _blank 6. In the Variable box, ensure it says “Don’t Send” Which window do I choose? You probably don't want your audience to lose your website if they click on the URL button, so targeting it to a blank browser means they can always come back to your website. ._self
Opens in the same browser window
._blank ._parent
Opens in a new browser Opens in main frameset
Happy Computers 020 7375 7300
134
._top
Opens in other frameset
If you test the movie now (Ctrl + Enter), it may loop through all the frames continuously. So you now need to add some Stop actions to each scene (see below).
Adding a Stop Action to Each Scene 1. Click in the "Main" scene 2. Add a new layer 3. Rename it "Actions" 4. Click on the Window menu 5. Click on the Actions 6. Choose Global Functions > Timeline Conrol 7. Doubleclick the Stop action
Ensure it is the top layer
It appears in the Action list on the right side of the dialog box
8. Add a new layer and the Stop action to the other two scenes
Testing the Movie 1. Press Ctrl+Enter browser 2. Click on the Close to close the browser
135
Shows movie in the
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Testing & Publishing
Testing & Publishing
Happy Computers 020 7375 7300
136
Testing & Optimising Movies Optimising your Movie See Optimising Movies p 145
Testing using the Controller This is a quick and easy way of testing animation without leaving the authoring environment. 1. Click on the Window menu 2. Choose Toolbars 3. Choose Controller 4. Use the controls to play the movie
Enabling Buttons & Frames 1. Click on the Control menu 2. Choose Enable Frame Actions or Choose Enable Simple Buttons
Testing Scenes/Movies Instead of testing individual parts of the movie, why not test a scene at a time or even the complete movie.
Testing Download Performance 1. Open the scene you want to test 2. Click on the Control menu 3. Choose Test Scene/Movie 4. To return to the authoring environment, click on the second cross in the top corner
137
Ctrl+Alt+Enter
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Testing & Publishing
Testing Download Speeds 1. Click on the Flash Player’s Debug menu 2. Choose a downloading speed 14.4 Kbps 28.8 Kbps 56 Kbps
View the Bandwidth Profiler 1. Click on the Flash Player’s View menu 2. Choose Bandwidth Profiler
A graph is displayed
Shows information
Each bar represents a frame. The size corresponds to the frame’s size in bytes
The red line is what indicates how the frame will Anything above the red line means the
3. Close the window
Light and dark grey blocks show each frame, its size is relative to byte size
Returns you to movieediting mode
View the frames which will cause pauses 1. Click on the Flash Player’s View menu 2. Choose Streaming Graph
What is Streaming? This is a technique which allows the movie to start playing when only part of it has been downloaded. If this works fine, then the movie should play smoothly.
Happy Computers 020 7375 7300
138
Publishing
139
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Publishing
Publishing your Movie The aim of creating a Flash movie can be to have it published onto a CD ROM as a standalone application. However, the most common aim is to publish them for use on the Web (or an intranet). Before Flash movies can be viewed on the web, they need to be inserted into an HTML file. Don't worry at this point about having to know any HTML!! Flash will do it all for you all you have to do is amend a few settings.
Publish Movie for the Web 1. Ensure nothing on the stage is selected On the Property inspector 2. Click on the Publish: Settings button
3. Ensure you are on the Formats tab
4. Ensure Flash & HTML as the type are selected 5. Click on the HTML tab 6. Leave the Template setting on “Flash only” 7. Change the dimensions to Percent 8. Remove the tick from Loop
This creates a Shockwave Flash file (.swf) and HTML file (.htm)
Prevents the movie from continuously playing
9. Click on the Flash tab Generating a report listing the data in the final Flash Player file 1. On the Flash tab, click on Generate Size Report 10.
Click on Publish
Happy Computers 020 7375 7300
140
11. 12.
Click OK Click F12
Viewing the Flash Movie in Internet Explorer 1. Open Internet Explorer 2. Click on the File menu 3. Choose Open 4. Choose Browse 5. Find the HTML document
This has just been created. The file ha the icon
6. Doubleclick the file 7. Click OK Viewing the report 1. Open Word The report is generated as a .txt file 2. Click on the Open dialog box 3. Navigate to the folder containing your .swf files 4. Choose All Files in Files of type 5. Doubleclick the file The name of the report is the name of the Flash movie with “Report” at the end
Different Files Created Having published your movie, another file has been created, with an .html extension. When uploading to a webserver you will need to upload both the .swf file and the .html file (it will not be necessary to upload the .fla file, as that is the authoring file, rather than the finished product).
141
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Publishing
Naming Files You are not prompted to name any of the files.
Does the size of your Flash document matter? Your Flash file should not be larger than 700KB
Happy Computers 020 7375 7300
142
Appendices
143
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Appendices
System Requirements System Requirements The following hardware and software are required to author Flash movies: § For Microsoft® Windows: An Intel Pentium 200 MHz or equivalent processor running Windows 98 SE, Windows ME, Windows NT 4.0, Windows 2000, or Windows XP; 64 MB of RAM (128 MB recommended); 85 MB of available disk space; a 16bit colour monitor capable of 1024 x 768 resolution; and a CDROM drive. § For the Macintosh: A Power Macintosh running Mac OS 9.1 (or later) or Mac OS X version 10.1 (or later); 64 MB RAM free application memory (128 MB recommended), plus 85 MB of available disk space; a colour monitor capable of displaying 16bit (thousands of colours) at 1024 x 768 resolution; and a CD ROM drive. The following hardware and software are required to play Flash movies in a browser: § Microsoft Windows 95, Windows 98, Windows ME, Windows NT 4.0, Windows 2000, or Windows XP or later; or a Macintosh PowerPC with System 8.6 or later (including OS X 10.1 or later). § Netscape plugin that works with Netscape 4 (or later) in Windows, or works with Netscape 4.5 (or later) or Internet Explorer 5.0 (or later) on the Mac OS. § To run ActiveX controls, Microsoft® Internet Explorer 4 or later (Windows 95, Windows 98, Windows Me, Windows NT4, Windows 2000, Windows XP, or later). § AOL 7 on Windows, AOL 5 on the Mac OS § Opera 6 on Windows, Opera 5 on the Mac OS
Happy Computers 020 7375 7300
144
Optimising Movies
145
·
Use tweened animation, rather than keyframes.
·
Use symbols for every element that appears more than once.
·
Solid lines use less memory.
·
Using the pencil tool requires less memory than brush strokes.
·
Use layers for separate objects that are animated over time.
·
Limit the fonts and font styles.
· ·
Limit your use of gradients; it takes more memory than filling with a solid colour. Use alpha transparency sparingly, it slows down playback.
·
Use Movie clips rather than graphic symbols.
·
For sound use MP3, which is the smallest sound format.
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Appendices
On MouseEvent Options Options Press
What it does Occurs when the mouse button is pressed while the cursor is with the hit area of the button
Release
Occurs when the mouse button is release within the hit area of the button
Release Outside
Occurs when the mouse button is released while the cursor has been dragged outside the Hit area
Roll Over
Occurs when the mouse cursor moves into the hit area
Roll Out
Occurs when the mouse cursor is moved out of the hit area
Drag Over
Occurs when the mouse button is held down and dragged out of the hit area and then back onto it
Drag Out
Occurs when the mouse button is clicked with the hit area then dragged outside it
Key Press
Can be used to specify a key on the keyboard to trigger the action
Actions within Global Functions Action name
What the action does
Go to
Instructs the movie to jump to a specific frame
Play
Instructs a movie to play
Stop
Stops the movie playing at a specific point
Toggle High Quality
Displays graphics at a higher quality
Stop All Sounds
Turns off any sounds playing
Get URL
Instructs the movie to open a specific web page
FS Command
Lets your movie communicate with the Web browser
Load/Unload
Loads/unloads movie
Happy Computers 020 7375 7300
146
Movie
147
Tell Target
Use to interact with other Flash movies by using actions within the current one
If Frame is Loaded
Instructs movie to perform an action if a certain frame has been downloaded
On MouseEvent
Depending on the event chosen an action will be performed (see all the options above)
If
Checks to see if a particular statement is true or false. Depending on the action a specific action is performed
Loop
Keeps performing the action while a certain condition is met, loop stops as soon as the condition changes
Call
Performs a set of actions
Set Property
Allows you to edit items in a movie as it is playing
Set Variable
Used to process data that has a variable value, such as text entered into a text box
Duplicate/Remo ve Movie Clip
Duplicates or removes movie clip as the movie is playing, depending on the action by the user
Drag Movie Clip
Allows movie clips to be dragged whilst playing
Trace
Generates a message when an action is performed. Only appears when testing the movie
Comment
Individual comments are placed in an action script to explain what something does. Only appears when testing the movie.
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Index
Index
Happy Computers 020 7375 7300
148
Index Actions ................................115 Adding ..............................116 Comments .........................118 Deleting.............................117 Frame ...............................115 Frame labels.......................118 Go to action .......................116 Object ...............................115 Organising .........................116 Stop action ........................116 ActionScript ..........................115 Alpha.................................... 76 Animated Masks ..................... 98 Animation Blurred ............................... 84 Framebyframe................... 81 Motion Tweening .................. 86 Shape Tweening................... 93 Slowing down ...................... 84 Smoother............................ 82 Bandwidth Profiler..................139 Basic Actions.........................147 Bezier handles........................ 40 Brush tool ............................. 47 Brush modes ....................... 47 Creating shapes ................... 47 Button Multiple hotspots.................112 Button frames.....................101 Buttons ................................101 Change shape.....................107 Changing colour ..................101 Enabling ............................138 Text ..................................105 Type .................................105 Controller .............................. 82 Crosshair............................ 75 Down..................................101 Download Performance ...........138 Download Speeds ..................139 Drag Out option.....................147 Drag Over option ...................147 Fill Colours ............................ 49 Flash environment .................. 20 Flash formats ......................... 15 Flash Movies .......................... 29 Flash Overview....................... 14
149
Flash Player ........................... 15 Frame Rate....................... 30, 84 Setting ............................... 84 Frames ................................. 61 Get URL action Adding...............................135 GIFs .................................... 17 Gradient colours ..................... 50 Adding more Pointers............ 50 Creating ............................. 50 Removing ........................... 51 Saving................................ 51 Graphic symbols ..................... 58 Gridlines ............................... 42 Guide layers .......................... 89 Orientate to path.................. 91 Help ..................................... 11 Hit ......................................101 Images ................................. 17 Instance................................ 58 Interactive Movies .................128 Creating ............................128 Invisible Button .....................109 JPEGs .................................. 17 Key Press option....................147 Keyframes ........................... 61 Layers .................................. 61 Adding a shape to ................ 65 Creating ............................. 64 Deleting.............................. 64 Drawing.............................. 66 Locking............................... 64 Moving ............................... 64 Outlines .............................. 65 Properties ........................... 65 Renaming ........................... 64 Stacking order ..................... 66 Library .................................. 58 Folders ............................... 79 Line Tool ............................... 41 Lines Moving ............................... 42 Selecting ............................ 42 Lozenge shape Creating ............................. 46 Macromedia site ..................... 15 Mask layer
Happy Computers 020 7375 7300
Macromedia Flash 8 Essentials Index
Unlinking .............................72 Mask layers .................... 61, 70 Creating ..............................71 Motion Tweening .....................86 Objects fading out.................86 Objects that change size ........88 Objects that move .......... 89, 91 Movie Testing.............................. 136 Movie Explorer ...................... 125 MovieClip symbol Creating ............................ 120 MovieClip symbols................ 120 Movies Creating ..............................29 sizes ...................................30 On MouseEvent options .......... 147 Onion Skinning ..................... 107 Aligning...............................94 Optimising Movies .......... 138, 146 OPtimising Movies Bandwidth Profiler............... 138 Download Performance ........ 138 Download Speed................. 138 Oval Tool ...............................33 Over................................... 101 Pen tool .................................42 S curve ...............................44 Upward curve.......................43 Pencil tool ..............................46 PNGS....................................17 Pointers .................................50 Removing ............................51 Press option ......................... 147 Publishing Movies .................. 141 Release option ...................... 147 Release Outside option........... 147 Roll Out option...................... 147 Roll Over option .................... 147 Rollover Buttons.................... 101 Scene Previewing...........................82 Scenes ..................................67 Adding ................................67 Duplicating ..........................67 Renaming ............................68 Shape Changing colour ...................49 Shape Tweening......................93
Happy Computers 020 7375 7300
Shapes Aligning...............................52 Changing the shape ..............40 Grouping .............................48 Moving ................................36 Ungrouping..........................48 Shared libraries.......................77 Simple Objects........................32 Stacking Order........................66 Stage ...................................20 Stop action Adding .............................. 136 Streaming ..............................17 Stroke Moving ................................37 Subselect tool .........................40 Symbol MovieClips ........................74 Symbols .......................... 58, 74 Buttons..............................74 Converting an existing object..58 Converting into graphic symbols .......................................58 Creating a symbol from scratch .......................................75 Deleting ..............................77 Duplicating ..........................77 Editing ................................76 Instance ..............................58 Organising ...........................79 Shared libraries ....................77 Swapping ............................78 Types..................................74 System Requirements ............ 145 Text Formatting...........................55 Hyperlink.............................55 Kerning ...............................55 Rotating ..............................56 Text tool ................................54 Timeline ......................... 20, 63 Toolbox .................................33 Moving ................................33 Tweening .............................61 Type .....................................54 Up ...................................... 101 Vectorbased images ...............17 Work Area..............................20
150
Related Documents
1-flash 8 Ess
May 2020 2
Ess
October 2019 19
Ess-reviewofalgebra
October 2019 18
Ess Visualization Syllabus2
December 2019 12
Ess Questionnaire Staff
June 2020 9
Ess Vs. Rockstar
November 2019 8More Documents from ""
Task 2 What House Do You Belong To?
December 2019 0
Julian Opie Portraits
May 2020 1
Project Task 1
December 2019 1
Flash Intro 2 Car And Ramp
April 2020 1
1-flash 8 Ess
May 2020 2