Takshshela junior college

2013-2014 project:- computer science

Submitted by-:

shivangi dargar

Guided by:vandan a maam

index
what is Macromedia flash How to open flash Introduction to flash interface What is stage What is timeline What is frame What is keyframe What is layers What is panel Understanding toolbar Putting text into flash application How to change the text size and font Smoothen /straighten flash drawing

Animation Part

Animation Part 1- Using Layers ,Key frames and Motion Tweening. Animation film making. Animation Part 2- Shape tweening.

What is macromedia flash

Macromedia Flash, also known as

Adobe Flash or

Shockwave Flash, has became a popular program to create

animations, advertisements, web pages and presentations since its introduction in 1996.Now, it is even used to program games and internet applications. Macromedia Flash contains a scripting language called Action Script. The program Flash was the brain child of Jonathan Gay, who developed the idea in college and developed the software while working for Silicon Beach Software. Basically Macromedia Flash is an animation tool for creating movies that run on your computer as well as on the Internet using the Flash player. It is now widely used to create animated and interactive advertisements for the web pages. This kind of advertisements are more effective than static advertisement because of the animation well as sound and music that accompanied them. In fact, Macromedia Flash itself can create a whole webpage and it is more lively than plain HTML.

The list of applications that you can build with Macromedia Flash is endless,. For example, you can make your own cartoon shows for own enjoyment or share them with the Internet users, educators also can build interactive classroom to teach the students almost any subject such as physics, mathematics, chemistry , biology, language and standalone interactive games and games that can be played on the Internet. Lastly, you can also program interactive games. Macromedia Flash at elementary level is relatively easy to learn, you can almost master it in one or two weeks. However, for higher level applications like games programming , you need to learn action scripts. If you want to master Macromedia Flash, you have come to the right place. We are in the process of building a comprehensive Macromedia Flash tutorial from the basics to the more advanced action script. In this tutorial, we will provide you with the basic concepts and many sample programs so that you can master Flash quickly. Please check back often for the updates. Happy Learning!

To open flash: click on start-all programsmacromedia-macromedia flash

Introduction to flash interface

In order to start creating Macromedia Flash applications, you need to buy the Macromedia Flash Pro 8 software from any computer retail store or online store (The installation is self explanatory, remember to check the requirements first!). After installing Macromedia Flash Pro 8(which is the version of Flash that I am using, there are many other versions.), the program and you would see the interface of the program as shown below.

To build a new flash project, click on Flash Document under the Create New label. The startup interface should look like this:

 Before,we begin to create animations in flash, we needto become familiar with the document window that shows the following elements:timeline,stage,information bar,toolbar and panels. flash mx 2004 presents with the most handly and intuitive environment or working interface. It makes easier to assuming flash,and speeds its management and control.

 The Stage in Adobe Flash Professional is the rectangular area where you place graphic content when creating documents. The Stage in the authoring environment represents the rectangular space in Adobe Flash Player or in a web browser window where your SWF content is displayed during playback. To change the view of the Stage as you work, zoom in and out. To help you position items on the Stage, you can use the grid, guides, and rulers. To view the entire Stage on the screen, or to view a particular area of your drawing at high magnification, change the magnification level. The maximum magnification depends on the resolution of your monitor and the document size. The minimum value for zooming out on the Stage is 8%; the maximum value for zooming in on the Stage is 2000%.

stag e

When the Stage is magnified, you may not be able to see all of it. To change the view without having to change the magnification, use the Hand tool to move the Stage:

In the Tools panel, select the Hand tool and drag the Stage. To temporarily switch between another tool and the Hand tool, hold down the Spacebar and click the tool in the Tools panel. Double-clicking the Hand tool in the Tools panel scales the Stage so that it fits completely within the application window. Double-clicking the Zoom tool in the Tools panel sets the magnification of the Stage to 100%. To place objects on the Stage, drag instances of symbols out of the Library.

Setting the Stage Size in Document Properties

The size of your Stage will determine the size of your Flash project when you embed it on a Web page. Figuring out what size to make your Flash project can be a tricky process, because this is something you generally don't want to set later, or else you may have to redo a lot of work. Generally, you want to mock-up your project in another program, like Photoshop, and then import the elements into Flash. In our case, we will set the document size to the same size as the photos we will be using for the slide show; which is 400 pixels wide and 300 pixels high

Setting the Stage size in Adobe Flash CS4

In Adobe Flash CS4, click on the Edit button in the Properties window under the Properties section. Remember, the properties window is contextual, so if you don't see this option, then click on the Stage first. In the document properties window, set the Stage size to 400 x 300 pixels, and set the framerate to 15 frames-persecond

The framerate is a value you that you can change at any time when creating your Flash project, and it won't affect anything your have already done in your project. The faster the framerate, the smoother and quicker animations will play. For our purposes, we found 15 to work well, but you can change this to 24 or 30 fps to see the differences in speed.

Setting the Stage size in Adobe Flash 8 or CS3 If you are using Adobe Flash CS3, the document properties are in a slightly different location. Click on the Stage size button in your Property Inspector bar at the bottom of your screen. Remember, you may have to click on the Stage first if this option is not present

In the document properties, there are some additional fields. You can leave these blank for now. Filling these out would identify the Web page you embed your Flash project on in the last step; should you choose to let Flash create a Web page for you.

Timeline
Definition: In animation, a timeline refers to the breakdown of frames sequenced over time. Timelines are used in both digital and traditional animation, but are often portrayed differently between the two (for example, dope sheets / x sheets are often more useful in maintaining timelines in traditional animation). The most common portrayal of a timeline is a linear timeline, which follows a linear forward progression straight from beginning to end. The linear timeline will mark out time in various increments, depending on the length of the animation and the user's preferences. Some timelines document increments in seconds, others in minutes. Typically the timelines will also display individual frames, segmented off by the number of frames per second (fps).

Frame

In the computer world, a frame can be many different things. The different definitions of "frame" are listed below: Some Web sites use HTML frames, where the pages are broken up into various areas. Each area consists of an independent Web page. Frames allow the multiple Web pages to all show up in the same page. Graphics and desktop publishing programsalso use frames. In these programs, frames are rectangular areas meant for inserting graphics and text. They allow users to place objects wherever they want to on the page. In video and animation, frames are individual pictures in a sequence of images. For example, a Flash movie you see on the Web may play 12 frames per second, creating the appearance of motion. Most video is shot at 24 or 30 frames per second, or FPS. FPS is often measured in 3D games as a way of checking how fast the graphics processor of a computer is.

Insert frames in the Timeline

To insert a new frame, select Insert > Timeline > Frame (F5). To create a new keyframe, select Insert > Timeline > Keyframe (F6), or right-click (Windows) or Control-click (Macintosh) the frame where you want to place a keyframe, and select Insert Keyframe from the context menu. To create a new blank keyframe, select Insert > Timeline > Blank Keyframe, or right-click (Windows) or Control-click (Macintosh) the frame where you want to place the keyframe, and select Insert Blank Keyframe from the context menu

Keyframe
Traditionally a master animator doesnt draw every frame of the animation. The master animator will only draw the key action frames, and a flunky animator would come behind and fill in the frames in-between. If the story called for an animated character to sit down, the master animator might draw two frames, the character standing, and the character sitting. Those two frames are the Keyframes in the animation sequence. When using Flash, youre the master animator. Youll set the keyframes. Flash, your own personal flunky, will fill in the animation between the keyframes. Understanding Keyframes When you play an animation, youll see the playback head moving across the timeline. As the playback head moves itll intersect dots in the different layers. Those dots are keyframes.

Layers
Layers help you organize the artwork in your Adobe Flash Professional document. You can draw and edit objects on one layer without affecting objects on another layer. In areas of the Stage with nothing on a layer, you can see through it to the layers below. To draw, paint, or otherwise modify a layer or folder, select the layer in the Timeline to make it active. A pencil icon next to a layer or folder name in the Timeline indicates that the layer or folder is active. Only one layer can be active at a timealthough more than one layer can be selected at a time. When you create a Flash document, it contains only one layer. To organize the artwork, animation, and other elements in your document, add more layers. You can also hide, lock, or rearrange layers. The number of layers you can create is limited only by your computer's memory, and layers do not increase the file size of your published SWF file. Only the objects you place into layers add to the project's file size. To help create sophisticated effects, use special guide layers to make drawing and editing easier, and to make mask layers.

 To create a normal layer, do one of the following: Click the New Layer icon in the Timeline in the bottom left corner of the Timeline. Right-click (or Control-click) an existing layer and choose Insert Layer in the menu that appears.

Panels
The panels are command sets grouped according to their functions {for example, all that makes references to the actions,will be in the actionpanel}.its missions is to simplfy and facilitate the command use. There are following types of panels listed in the menu bar: Color mixer: that allows you to create new colors and fill the color in different style. Transform: that allows you to rotate and skew an object numerically. Movie explorer: shows the contents of the movie. color swatches: have the 216 web safe colors. library: stores symbols that include graphics,buttons and movie clips

Panel Features
Many panels have a pop-up Options menu, indicated by the right-facing arrow (Flash 5). If there are no options for a panel, the arrow will be greyed out. All the panels have a link to the Help file which you access by clicking on the question mark icon (Flash 5). The Help file will open in a browser window and take you to the section pertaining to the panel you're viewing.

 The Mixer panel is an example of two panels grouped into one. When a panel has more than one tab, like the Mixer does, click on the rear tab to bring that portion forward (Flash 5). In Flash MX/MX 2004, the pop-up Options menu basically unchanged for most panels, but the button to open it is slightly different. Additionally, in the these newer versions of Flash, there is no longer a Help button, but the Help file for the panel can still be accessed in the pop-up menu, under Help. To resize a panel: click and drag on the lower right corner. To move a floating panel: click and drag it by the title bar to a new location. To temporarily hide all panels and the Toolbox: press Tab (Flash 5) or F4 (Flash MX/MX 2004) and press it again to show the panels and Toolbox again. To close a panel: click on the close icon in the upper right corner.

Understandin g toolbar
1.Selection Tool 2.Subselection Tool 3.Free Transform Tool 4.Gradient Transform Tool 5.Line Tool 6.Lasso Tool 7.Pen Tool 8.Text Tool 9.Oval Tool 10.Rectangle Tool 11.Pencil Tool 12.Brush Tool 13.Ink Bottle Tool 14.Paint Bucket Tool 15.Eyedropper Tool 16.Eraser Tool 17.Hand Tool 18.Zoom Tool 19.Stroke color 20.Fill color 21.Black and white 22.Swap color 23.No color

Putting text into flash application

Every flash application you see in the Internet contains text. Text is important as it can be used in creating caption, label, explanatory notes and stories . To put text into flash, first click on the text tool:

Then, drag the textbox to any size you want the textbox to be on the blank space. After that, it should look like this:

Now, you can input any text you want into the text box

Does it seem too small? If it is too small, you can change the size of the text

After you change the text size, it should look like this:

you can also change the font of the text:

Now, you can put text in your flash applications.

Smoothen/Straighten Flash drawings

In this lesson, I will show you how to smoothen lines and drawings. First, draw a line with the pencil tool or brush tool. The outline of the drawing doesn't look smooth, does it?

To smoothen the drawing/line, right click the drawing and click smooth.
After that, it should look like this:

compare the drawing that has been smoothened with the previous drawing, does it look smoother? To straighten a drawing, just click straighten after right-clicking the drawing. After that, it should look like this:

NOW, YOU CAN USE THIS METHOD TO IMPROVE THE QUALITY OF THE DRAWINGS YOU DRAW IN FLASH, THOUGH IT IS ALSO GOOD IF YOU USE OTHER PROGRAMS TO DRAW THE PICTURES.

Animation Part 1- Using Layers ,Key frames and Motion Tweening

Layers are added to the movie so it will be easier to make a picture with different positions (front, behind etc.). To add a layer, click on the insert layer button, which is shown below.

After adding the layer, the interface should look like this:

Now, the movie has two layers, the pictures at the bottom layer will appear behind whereas the picture in the top layer will appear in front.

You can draw different pictures in each key frame. Now, right click on the 10th frame, and then click insert key frame to add a key frame.

After that, it should look like this:

Animation film making

In this lesson, I will show you how to make a simple animation with motion tweening. First, draw a picture in frame one, which can be anything that you want to animate. After drawing the picture, the key frame will change it's color to grey

should look like this-:

Note that only key frames can be changed. So, frames 1-9 are the same as the key frame in frame 1. Now, copy (right click then click copy) the picture to key frame 10(right click then click paste in place so that after you paste the picture, the pictures position will be the same. Otherwise, the picture will be in the middle). Then, move the picture to a different position. After that, it

Click the first frame and press enter or click control, then press play to test the animation. Notice that the picture stays at the same position until frame 9 then it goes to the next position in frame 10 instantly . To create the animation, you have to use motion tweening. To use motion tweening, right click the key frame then click create motion tween

After that, it should look like this:

Press enter again to test the animation and you would see the complete animation of the picture going from the first position to the second position. Motion tweening is useful for making animations much quicker than frame by frame animation. Though frame by frame animation has a better quality than motion tween animations. In the next lesson, I will show you how to make frame by frame animation Animation Part 2- Shape tweening In the previous lesson, you have learnt how to use motion tweening to make a simple animation. In this lesson I will teach you shape tweening. Shape tweening is used to change the shape of an object. First, draw a perfect circle (hold shift):

Then put a key frame at frame 10 (Hotkey: F6). After that right click frame 1 and convert it into a shape tween:

Now draw a different shape at frame 10:

Play the animation and you will see the circle slowly turn into a square. Draw anything you want to animate on layer1. Put a key frame at frame 10 (or more, because 10 frames may be too fast) then create a motion tween just like the previous lesson. To use a motion guide line, first, right click layer 1 then click on add motion guide:

Then, in the motion guide layer, draw a motion guide line (the path you want the object to follow) using the pencil tool or brush tool:

Then, at the last key frame, move the object to the end of the line. Play the animation and you will see the object moving on the line. test the movie (Hotkey: Ctrl + Enter) to see the object moving but you will not see the line. So it is useful for making guided animations, much easier than frame by frame animation. Tweening is a non-frame by frame animation. Now, I will show you how to make frame by frame animation. First, draw anything you want to animate. Then, add a key frame (Hotkey: F6), then move the drawing to a different position or change it slightly. Repeat the process and you will get something like this:

I used the onion skin to see 3 frames behind and in front of the frame. To use it, click the onion skin button:

Thank - you
For seeing my all slides once again thankyou.