introduction to adobe flash cs3 - university of akrongozips.uakron.edu/~khm6/files/adobe flash cs3...

��

Introduction to Adobe Flash CS3

Course Name

5100:800:633 Hypermedia

9/ 24/2008- Zook Hall 315 Wednesday 4:50pm-7:20pm

Created by Instructor

Khalid H. Moukali Dr. I-Chun Tsai

Jennifer Stover

Fall-2008

Hypermedia Fall-20008

Introduction to Adobe Flash -2

Introduction to Adobe Flash

Objectives

Students will be able to: 1- Understand the concepts of Adobe Flash and terminology. 2- Identify operation tools of Adobe Flash. 3- Describe how these tools are used to create motions twins, animations and symbols. 4- Learn how to import and use images and sounds in Adobe Flash. 5- Organize thoughts and ideas to complete tasks. 6- Produce creative works on Adobe Flash.

Recommended Resources

- Adobe Systems Incorporated: Adobe Flash CS3 Professional http://www.adobe.com/products/flash/ - Flash Animation Tutorials: Step-by-Step Lessons http://animation.about.com/od/flashanimationtutorials/Flash_Animationons.htm - Flash Actionscript Tutorials http://tutorialoutpost.com/tutorials/flash/actionscript - Cartoon Animation Tutorial create flash cartoons free and easy� http://www.leconcombre.com/board/flashtutorial/us/flashmaniacsquinzeus.html

Examples Frog Enigma: http://www.albinoblacksheep.com/flash/frog Virtual Dissection Software: http://www.froguts.com/flash_content/index.html

About Adobe Flash

Adobe Flash previously called Shockwave Flash and Macromedia Flash - is a set of multimedia technologies developed and distributed by Adobe Systems and earlier by Macromedia. Since its introduction in 1996, Flash technology has become a popular method for adding animation and interactivity to web pages; Flash is commonly used to create animation, advertisements, various web page components, to integrate video into web pages, and more recently, to develop rich Internet applications.

To open Adobe Flash: 1- Click on Adobe Flash icon. 2- Press on Flash Document.



Adobe Flash components 1. Toolbox - Where you keep your tools. 2. Stage - Where the action is. 3. Timeline - What keeps everything from happening at once. Adobe Flash Main Page Key Frames • Describes an object’s details at a given point in time. • Includes position, size, rotation, skew, and transparency. • Those values are maintained until either there are no more frames or another keyframe overrides it. • Keyframes are created automatically when an object is placed on the stage. • It is a good idea to only place one object in a given keyframe on a given layer.

Toolbox

Stage

Timeline



Static Elements • A static element is something that needs to be on the stage for a period of time but does not move. • Any number of static elements can share a single layer. • Placing elements on the stage will create the key frame containing them. • To stretch out this key frame so that the elements will exist over a period of time, do one of the following. • Click on the last frame that the static elements will exist. Then select Insert: Timeline: Frame (F5) This will extend the key frame to this frame. • Click on any frame inside of an extended key frame. Hit F5 to extend it by one frame. • When a new layer is created, empty frames are created to make it as long as the longest layer. Elements can be placed in this frame and they will exist over the entire length of the layer. • Symbols are good to use even for static elements when there will be many instances of them throughout the movie. • Animation can be created with static elements by displaying them in sequence. (i.e. Letters building a word.)

Motion Tweens • ‘Tween’ is short for “in-between” When you want something to move in Flash, you define the start and end points (key frames) of the motion and the computer creates all the frames “in-between.” • Only Symbols can be Tweened. • There can only be one symbol in the layer your are Tweening.



• Creating a Tween 1. You create the first key frame by simply placing a symbol on the stage. 2. To create the end point key frame click on a frame later in the timeline in the same layer as the first key frame. Then select Insert: Timeline: Keyframe. 3. Then select the new end key frame and move the symbol to it’s ending location. 4. Click a frame in between the two key frames and select Insert: Timeline: Create Motion Tween. • Selecting the start or end key frames and then moving the object will change the motion path of the tween. • Clicking in the middle of the motion Tween will display all the properties of the Tween in the Properties Inspector. • An object can change size during the tween by simply adjusting the size of the object in one of the key frames. • An object can be made to rotate during the tween by either rotating the object at one of the key frames or changing the value of the “Rotate” pop-up in the Property Inspector. • An object can be made to fade in our out during a tween by changing the ‘alpha’ value at either end of the tween.

Symbols & Instances • A symbol is an object that you create once and then reuse multiple times. • A symbol contains at least one graphic and has it’s own timeline. • Symbols can contain other symbols. (and other symbols and other symbols) • Each time you use a symbol that use is called an instance. • An instance of a symbol takes up almost no space and is a very efficient way to build a movie. (i.e. Create a symbol that looks like a tree and place it on the stage 50 times and it still only takes up enough memory space for a single tree.)



• You can edit the symbol and all instances of that symbol will reflect the changes. (i.e. Don’t like the way the trees look? Edit the symbol and the whole forest changes.) • Library Panel - A list of all symbols and other reusable objects contained in a movie. • Creating a Symbol 1. Create a new symbol by selecting Insert: New Symbol... 2. Convert an existing graphic to a symbol by selecting the graphic and then selecting Modify: Convert to Symbol... (Right clicking will also allow you to convert what you have clicked on into a Symbol.) 3. After you create the Symbol you will be asked to name it and select which type of symbol it should be. Give it a understandable name and select Movie clip as the type. 4. Drag a symbol from the Library panel to the stage to create an instance of that symbol. 5. Double click a symbol in the Library panel to edit it. 6. Double click a symbol on the stage to edit it “in context.” So you can see what it looks like with the other elements on the stage. 7. Click the left arrow in the upper left corner of the stage window to exit the symbol editor.



Shape Tween in Flash

Flash can create two types of tweened animation using timeline:

Motion Tween & Shape Tween.

Creation of Motion/Shape tween using timeline is the basics of Flash. By tweening shapes, you can create an effect similar to morphing, making one shape appear to change into another shape over time. Flash can also tween the location, size, and color of shapes.

This tutorial will teach you a simple shape tween.

Steps to follow:

• Open a new flash file (Ctrl+N). New Document window will appear Select General panel and choose Type: Flash Document . Press OK.

• If your timeline window is not open, press (Ctrl+Alt+T). • Now you can see a single Layer called "Layer1" in your timeline

Window.

• Select the first frame. Now go to your working area and draw any object. To start off with, may be you can draw a circle. This is going to be your initial object. In the above demonstration, my initial object is a short line.

• Select frame 20 and press F6 to insert a new keyframe. • Still keeping playhead on frame 20, delete the object present in your

working area. Now draw a different object, may be a square. In the above demonstration, I have drawn a long line.

• Select any frame between, 2 to 19 and select Shape from the tween pop-up menu in the Property inspector. Now your Layer will look something like the one shown below.



• Now press (Ctrl+Enter) to view your motion tween.

In the above tutorial, you learnt how to create a simple shape tween. Therefore, using this logic you can create number of beautiful things.

Scenes • Scenes allow multiple timelines to be sequenced together in a single movie. • To create a new Scene, select Insert: Scene. This will create a new scene and move the stage window and timeline to that new scene. • To move from one scene to another, select the desired scene from the Scene icon/popup list in the upper right corner of the stage window. • To reorder or rename a scene, select Window: Other Panels: Scene to show the Scene’s pallet. There panels can be renamed, reordered, created and deleted. • When a movie plays and reaches the end of one scene, the playback head jumps to the next scene. • The Scene Panel can be displayed by selecting Window: Design Panels: Scene. With this panel, you can create, delete, duplicate and reorder scenes. • There are some severe restrictions to scenes that make them unsuitable for more complex movies but for simple, linear animation like what we are currently working on, they are ideal.



Bitmaps Images • A bitmap can be a digital photograph, scan of a document, graphic borrowed from a web page, animated GIF, etc. • Flash can import JPEG, GIF, BMP, PSD (Photoshop native file), TIFF, etc. • An array of colored dots or pixels make up a bitmap image. • Bitmaps are very good at reproducing real life scenes. They can represent subtle shapes like clouds, people’s faces, and rich textures like a field of grass. • Their drawbacks are they take up a lot of space (expensive) and don’t scale up in size very well. • They are imported into your Flash movie by selecting File :Import: Import to Stage... or File: Import: Import to Library... • Both commands add it to the Library but the first also places it onto the stage for you. • They are like symbols in that they are only stored in your movie once no matter how many times you use them. • Bitmaps are unlike symbols as they must be placed in a symbol like any other graphic to be tweened. • Scale a bitmap, using a bitmap editor like Photoshop, as close as you can to the final size to help minimize the amount of space they take up. • Double-clicking the bitmap in the Library window will display an information dialog box that allows you to change the JPEG compression settings. • Flash supports alpha channels in the image if they are there. (An alpha channel is extra information that defines the transparency of each pixel in the image allowing parts of your image to be transparent and others, opaque.) • A bitmap cannot be edited in Flash but you can launch the program that created the bitmap by Right-clicking on the bitmap in the Library window and selecting “Edit with...”



Sounds • Adding sounds and sound effects to your movie enhance it more than one might think. • Flash can read AIFF, WAV, MP3, AU, and number of other sound file formats. • Sounds, like bitmaps, are imported into the library once but can be used any number of times without taking up more space. • A sound can be played at a certain point in time by being attached to a keyframe. • A good way to keep your sounds organized in your timeline is to create a layer and name it “Sounds.” Then create a key frame in that track and attach a sound to it whenever you want it to play. • Once a sound starts playing, it will play through once and stop. • It can be set to repeat a specific number of times or loop forever by changing the Loop property in the keyframe’s property inspector. • The sound can also be set to play from the left or right stereo speaker, pan from one side to the other, or fade in or fade out. • Any number of sounds can play at any time. If you need another sound track, just create one. • Don’t be afraid to make your own sound effects, it can be quite fun!

Masking in Flash Masking is revealing portion of your picture or graphic in the layer below. While surfing through net you might have come across lots of beautiful Flash effects such as ripple effect , some wording with sky background or glitter bordering an object, and wondered "How? What is the logic behind this". The answer for all this is masking. This tutorial will teach you the basics of masking in Flash

STEPS TO FOLLOW

Inserting Layers and Naming them

• By default you will have a layer in your timeline window. Insert one more layer, totally you need two layers to mask an object.

• Rename the top layer to "Mask" and the layer below that to "background".



Creating Shape Tween

• Import your picture to the "background" layer.



• Using Oval tool from your tool box, draw a circle in your "Mask" layer and delete it's border.

• Drag the circle to one end of your picture.

• Now go to "frame 40" of your "Mask" layer and press "F6" to insert a new keyframe.

• Now go to "frame 40" of your "background" layer and press "F5" to insert frames, so that your background image is available all through your mask.



• Select "frame 40" of your "Mask" layer, that is your new keyframe, Keeping the playhead on "frame 40" of "Mask" layer, drag the circle to other end of your picture.

• Now go back to "frame 1" of your "Mask" layer, keeping the playhead on "frame 1" of your "Mask" layer, select Shape tween in your properties window.



Masking

• Right click on the "Mask" layer (the area where you named the layer not where the frames exist) and select Mask.

Your Mask is all ready. Press Ctrl+Enter to view your Mask.

ActionScript, the First Line • Let’s stop the playback head to allow us to have an animation play through only once. Say in a movie clip for instance. • Create a “actions” layer. • Attach a keyframe to the frame where you want the playback head to stop. • Open the “Actions” panel and enter the following: stop();



Frame Labels • Used to invoke some Actionscript at a specific point on the timeline. • Frame numbers can also work but are very fragile. Insert or delete one frame before them and they are now invalid. • Create a track at the top of the timeline called “Labels” and create Keyframes for labels there.

Frame Scripts • Used to make something happen at a particular time in an animation. • Attached to a key frame. • Create a track at the top of the timeline called “Actions” and create Keyframes for scripts there. • Common frame scripts • stop(); • gotoAndPlay( label ); • gotoAndStop( label ); • Goto commands can either use a frame number or a label. • DO NOT USE FRAME NUMBERS! They are fragile and become invalid easily. • Inserting or deleting a frame will break any reference to a frame past that frame. • Frame labels will move with the timeline and inserts and deletes do not affect them.

Button Type Symbols • Select “Button” instead of “Movie Clip” when creating new symbol. • Identical to “movie clip” type symbols except for special frames in their timeline. • “Up” frame is shown when the button is at rest. • “Over” frame is shown when the mouse is over the button. • “Down” frame is shown when the mouse is pressed on the button.



• “Hit” frame is never shown but defines the clickable area of the button. • Cursor changes to pointing finger when it is over the button.

Object Scripts • Used to invoke some Actionscript in response to a user action. • Attached to a movie clip instance. • Commands must be contained in a “on” clause to define what event will trigger that block of code. on ( event ) { ---- commands here ---- } • Most Used Events • release - All common buttons respond when the mouse is released. • press - When immediate response is necessary. Not typical. • rollOver - Good for having something happen with no clicking needed. • rollOut - Good to undo what the rollOver event did. • Multiple “on” clauses can be included in a single button to have it respond to multiple events.

Button Type Symbols Review • Select “Button” instead of “Movie Clip” when creating new symbol. • Identical to “movie clip” type symbols except for special frames in their timeline. • Each ‘state’ of the button is represented by a special frame in its timeline. • Up - This frame is shown when the button is at rest. • Over - This frame is shown when the mouse is over the button. • Down - This frame is shown when the mouse is pressed on the button. • Hit - This frame is never shown but defines the clickable area of the button. • Cursor changes to pointing finger when it is over the button.



• Buttons can have many layers. • Buttons can have sounds attached to different button states. Just create a Sounds layer and create a keyframe to there to attach the sound to. Button Object Scripts • Used to invoke some ActionScript in response to a user action. • Attached to a movie clip instance. • Commands must be contained in a “on” clause to define what event will trigger that block of code. on ( event ) { ---- commands here ---- } • Events are messages sent to a button in response to some user action to invoke some button action. • Most Used Events: • release - All common buttons respond when the mouse is released. • press - When immediate response is necessary. Not typical. • rollOver - Good for having something happen with no clicking needed. • rollOut - Good to undo what the rollOver event did. • Multiple “on” clauses can be included in a single button to have it respond to multiple events. For example: on (rollOver) { ! stop(); } on (rollOut) { ! play(); } How to organize thoughts and ideas to complete the projects: We will talk about the importance of selecting the topic before creating the project. We should have a perspective about what we are going to do before getting started with Adobe Flash or any software. It is important to create a scenario or outline for the project which contains all things we want to do in the project. This step is required if we want to organize our thoughts and ideas. So, this step is the first step before doing any thing. How to save your file: To save your work, simply press on file and � Publish Sitting � choose the types that you are going to save your file with. You have to do this process only one time and later when you want to save your file just click on Publish. How do we insure that the instructional objectives were accomplished?



In order to create your own project, check if you understood this lesson or need some help.

Obj

ectiv

es

Students will be able to:

Students' performances

Using Technology The result

1-

Understand the concepts of Adobe

Flash and terminology.

They identified the usage of

Adobe Flash

Lab Computer White Board Data Show

They learned about Adobe Flash

functions

2-

Identify operation tools of Adobe

Flash.

They used the program tools to draw shapes and make them move

Lab Computer Adobe Flash

Software

They learned about the functions of

Adobe Flash tools

3-

Describe how these tools are used to create motions

twins, animations and symbols.

They used the program tools to add effects to the shapes and texts


Software

They learn how to make shapes or text have movement and

effects

4-

Learn how to import and use images and

sounds in Adobe Flash.

They imported pictures and sounds to the

stage


Software

They learned how to import and use

images and sounds

5-

Organize thoughts and ideas to

complete tasks.

They used different methods

to plan for the projects firstly

Lab Computer White Board Data Show

They learned about how to think about the end results in

advance

6-

Produce creative works on Adobe

Flash.

Their skills improved and

they was able to design projects by using the program

tools


Software

They design projects by Adobe

Flash tools

Thank You !!

introduction to adobe flash cs3 - university of akrongozips.uakron.edu/~khm6/files/adobe flash cs3...

Documents