Search
Left Quote    I think there is a world market for maybe five computers.
- Thomas Watson, Chairman of IBM 1943    
Right Quote
 
[login] | [Register]
 

Introduction to Flash MX Design

by: bs0d
Page: 1 of 6
(View All)

INTRODUCTION


Ok, im going to attempt to write a tutorial on using 'Macromedia FLASH MX' for Windows. Im using Windows ME, And I also use Windows XP and I dont think the program differs between Windows OS'. However, MACINTOSH maybe different. Also, if you're using Linux/Unix - I dont even know if macromedia makes FLASH for that OS. But be sure to check and make sure.

Anyways- Flash MX is the most current version of Flash as of 03/01/03. And, I will make two seperate tutorials i recommend you read when this is all complete:


  1. This Flash design tutorial.
  2. Action Script tutorial. Action Script is the programming behind flash, which is what does all the complicated stuff aside from designing.

This tutorial will cover the Flash design and such. If you're looking for a tutorial on how to learn Action Scripting, then you will have to wait until that tutorial has been written!


OPENING FLASH

Now, im going to assume that you have Macromedia Flash MX installed on your Windows OS. When you first open it, you will see a blank document, and on the right-


  • COLOR MIXER - Which you will use to select colors and adjust them to your specifications.
  • COLOR SWATCHES - Which are pre-set colors for you to choose from.
  • COMPONENTS - lets you choose from different components (combo box, check box, list box )to add to your flash document.
  • ANSWERS - This is where you can find whats new in Flash, and read the tutorials provided with the software.

Also, on the LEFT, are TOOLS that you will use to create your Flash document/animation.

FRAMES

The last tutorial I wrote, was 25 pages in MS Word; so I think I need to sort of Narrow things down a bit. Be more specific on how things work and such. The first thing we will discuss is FRAMES.

Movies, you watch on television are considered "FRAME BY FRAME" ; which means that each picture you see, is actually a 'STILL' frame and the next frame is slightly different than the first. If you plan on doing Animation in flash (such as cartoons) you will use the FRAME BY FRAME method.

You can adjust how many frames per second you want your movie to play. Default is 12fps. In the PROPERTIES you'll be able to adjust the frames per second. The higher the fps, the faster the movie will play. The lower the fps, the slower it will play. Also, in the movie PROPERTIES, you will be able to manipulate the canvas color, size and much more.


LINES

Lines Is a good place to begin. Go ahead and select that little PENCIL TOOL (Y) from the TOOL BOX and begin to (lets see...), SPELL YOUR NAME in LAYER 1 on the canvas. Does this remind you something? Remember "Paint?" -I tell ya, if it wasn't for "Paint" and Solitare during the 90's...I don't think anybody with a desk-job would have any hair.

Anyways, its just like that. Play around with it. But after you've spelled your name, you can select the ARROW TOOL (V) [BLACK] and double click your name. This will select it all.

Now, at the bottom of the tool box, you see OPTIONS. And then, two other boxes. One box will SMOOTH the line(s), the other will STRAIGHTEN them. Fool around a bit with that. That will help you in further animations so lines are not so jagged, ect.

TIP: Also, if you're wanting to select specific areas of certain objects- the LASSO TOOL (L) is just for you. Just select the tool from the tool box and draw around the area you wish to be selected.

ANIMATION


This is the part you've been waiting for, eh? Yea, me too. We're going to create a simple animation so that you can become more familiar with flash. Ok, on the tool bar, if you hold your mouse over the buttons, it will tell you what it is. Also, press; "A", then "S" and then try "F". Did you see what it did? It also has keyboard shortcuts for you to use if you're too lazy for a mouse. --back to work.

Select the 'TEXT-TOOL (T)' -this will allow you to put text in your document. Once selected, draw a box on the canvas ( that white box you see in front of you ). Now you can begin typing text you want to appear in your movie. Im going to type, "bs0d". ===Whats that? I cant see my text? Probably because if you notice, you're not viewing your document at 100% adjust that by clicking on the box and selecting the percentage to view.

Now, you can hilight that text and adjust the properties. The properties are located at the bottom (along with actions). Fiddle around with those... obviously you could figure out how things work. To the left, where it says " < INSTANCE NAME >" thats for using ACTION SCRIPT.

Anyways, you have text now in layer 1 on the canvas. This is important. FOR EACH DIFFERENT BLOCK OF TEXT, OR GRAPHIC (or whatever), I RECOMMEND YOU PUT IT ON A DIFFERENT LAYER! Why? because then it'll jack things up when you try to do some tweening. You can change the layer name by simply double-clicking on the layer name located at the top- which is along with the frames.

From there, type in whatever you want. Also, once you get so many layers; you can create a folder and put all layers associated with eachother in the folder. To create a folder, simply click on the button that shows a folder with a plus sign on it. To add a layer, simply click on what looks like a post-it note, that has a plus sign on it. And to delete either, select it (by clicking it) and click on the trash can icon which is next to the others.

Ok, im going to continue guiding you though a simple animation in flash. On the toolbar click on the black aarow button. This button is used for you to select items on the canvas. Now, click on your text box with text inside.

-REMEMBER- you can adjust the colors in the color mixer and such. I recommend that you just fool around with flash a bit and get familiar with its tools and how to use them.

Anyways, your txt box is selected. Right click on it. Scroll down to break apart. This make it as if you had created each individual letter. Right click again, and scroll down to break apart, again. This breaks the text apart where it can be modified letter by letter. Click on a letter and drag it around and such to see what I mean (press CONTROL+Z to undo any changes you made.) Now I want you to click on frame 10 and press F5 (this inserts frames to frame 10 where now your document is 10 frames long.

TIP: When you're working with animation, Its always made me mad when I tried to select something, but it was real close to something else and it'd select the other shit instead of what I needed. So let me save you some time by telling you how to lock layers. You can lock a layer by simply clicking once on the layer, and click on the lock icon just in front of it. This makes it non-selectable. And; if you dont want to see it, click on the eye icon and it will disappear / reappear. This always helps with the designing process.

SHAPE TWEEN


Right click on frame 10 and select, insert keyframe. A keyframe is basically a base or starting point of action, the original or whatever. Now, I want you to draw a box anywere on the canvas with the RECTANGLE TOOL (R). Ok, once you've done that and made it look however you want, click on any frame in between 1 AND 10. Now, in the properties box at the bottom you'll see tween. Cick on tween and select shape. This will create a shape tween from your text at the beginning, to the box you drew at frame 10. Wanna see the action? just hit < enter > or, go to CONTROL --> TEST MOVIE.


SHAPE HINTS

You can have shape hints to determine how your objects will 'morph' from one to another. To add a shape hint, go to MODIFY --> SHAPE --> ADD SHAPE HINT. ( make sure nothing on your canvas is selected by the way) The first one will say "A", your 2nd will be "B"...ect. Mess around with it. Click on the first frame and move "A" on your object to mark it. Click on the last frame and you'll see another "A". This is where the "A" will end up. Move it to where you want... then play your animation and see how it 'morphs' differently. Add as many shape hints as you wish.

TIP: You will not be able to learn flash by reading this tutorial. You will learn the most just by fooling around with things and seeing how it works because its visual. This tutorial will help you get the hang of where to begin your journey ;)


MOTION TWEEN

Ok, close that and open a new Blank Document. Create text in the first layer, saying whatever. Now, click on frame 10 and RIGHT CLICK --> INSERT KEYFRAME. Now, move the text to a different area on the canvas. Go down to the properties and select "Motion" in the "Tween" area. now hit < enter > to see. Did it move? if yes, you done it right. This is an example of a motion tween.

TIP: If you're making a bit larger project, it might be smart to have your objects in your library- saving them as a symbol. which can be a, Movie Clip - Graphic or a Button. A graphic would be an image, A button would be a button, and a movie clip would be an animation.


MOTION GUIDES

Ugh, getting motion guides to work by just trial and error learning for me kinda sucked. But im gonna tell you how to get-r-done. Motion guides are guides you draw with say the pencil for an object to follow through frames of animation (THE GUIDE WILL NOT SHOW IN YOUR FINAL .SWF FILE .swf file is your flash file, .fla is the file you edit.

Start with a blank document. Create a ball with the OVAL TOOL (O). Convert it to a symbol. Do this by RIGHT CLICK --> CONVERT TO SYMBOL. (graphic). You can name with whatever you want. Now, you can click on INSERT --> MOTION GUIDE. This inserts a new layer for motion for your graphic.

Select frame 10 in layer 1 and insert a keybrame. Select the guide layer frame 1. click the PENCIL TOOL (Y) and draw a guide for the ball to follow. Now, go back to layer 1, and click on the ball. Drag it to the beginning of the guide for which you wish it to follow (it should 'snap' to the line). Once its in position, move to frame 10 (the final frame) in layer 1 and drag the ball to the opposite end of the guide. Once you've done that - click anywhere between frames 1 and 10 and locate the properties and apply a motion tween. -Hit < enter > and you'll see your ball follow the guide you drew if done properly. If it dont, make sure their is a keyframe at frame 1 and 10 in Layer 1 (ball) and the line is drawn in the motion guide layer.

CREATING A BUTTON


Lets start with a blank document. Draw a box on the canvas. Adjust the colors as you wish with the COLOR MIXER and such. Now, select the text tool and draw text over the box. Name it something like, "CLICK ME"

TIP: If you ever create something and then you cant see it, make sure its arranged to the front, by clicking on MODIFY --> ARRANGE -->BRING TO FRONT. Also, when working with layers; if a layer is on top of another, whatever is in that layer- will be on top of anything in any layer underneath.

Now, I want you to highlight everything, (can press CTRL A) and RIGHT CLICK --> CONVERT TO SYMBOL. Now, select "Button", and name it whatever you wish, ( b_myButton ). Now when you select it, its no longer two different. objects- its one. Now, select it and RIGHT CLICK --> EDIT.

At the top you'll see, "UP" "OVER" "DOWN" "HIT". These are layers for the button. When active, the button will display the "OVER" Layer when the mouse is over it, "DOWN" when you click down, ect. Insert keyframes in each layer. ( right-click in each --> select insert keyframe ). Now select the "OVER" layer. Lets make it a lighter color than it is. Same with the text. Now, select the "DOWN" layer. Lets make the text say, red. and the "HIT" layer is different. This lets the mouse know where to begin activation of the button. Select the "HIT" layer and draw a box bigger than the button. Now, when active; the mouse icon will change as if you were over the button once it is over whatever the boundaries are of the box you drew in "HIT." It can be larger or smaller. Understand? Work around with it, you'll get the hang of it all.

Go back to the canvas, ( click on SCENE 1, or EDIT --> DOCUMENT ). Go to CONTROL --> TEST MOVIE. Click on your button and see how it acts. Cool eh?


BUTTON ACTIONS

Now you have your button, but dont you want it to go somewhere when you click it? Of couse. But this will involve some action script. I'll show you a basic action here. Right click on your button and go to --> ACTIONS. This will bring up the actions option. Make sure you're in normal mode by clicking on the far right button with alt "VIEW OPTIONS" --> select NORMAL. Ok, and on the left are the actions. movie control area of the actions should be open. If not, click on movie control where it shows the actions under it. Select the goto option, and drag it into the white empty area. New options will show up. Make it:




this is self explanitory- on release, it will goto and play frame 5. The other shit, it puts in there for you so it will work. Learn more in the ActionScript tutorial. Do we have anything in frame 5? No. Ok, lets put something there so we know its working. Click on the button layer and select frame 5 and insert a blank keyframe (do the same for actions layer) [we want it blank so you dont see the button in later frames]. Create another layer real quick and add a keyframe in frame 5 and add text that says, "YOU'RE IN FRAME 5 NOW." THEN - create a button that says "back" Now, you may or may not have noticed that flash will automatically loop your movie. This means that it will play it over and over and over and over and over and over...STOP! right? So lets tell it to stop on frame 1. Select frame 1 in the actions layer. RIGHT CLICK -->ACTIONS. and the stop function is on the left like this:




drag it into the white area for code to go, and now- the movie will not go any further until you tell it to. Add another stop(); to frame 5 in the layer of, "YOU'RE IN FRAME 5 NOW." You may have the hang of it by now... but right click on the "Back" button you created. and go to --> ACTIONS. Select the goto from the left. Make it:




This will take you back to frame 1 and start all over again. CONTROL --> TEST MOVIE to see if it all works. You shoul see your button, "CLICK" -->When you click it, it says; "YOU'RE IN FRAME 5 NOW." and a "BACK" button underneath that. And when you click the back button, it takes you where you started.

Scenes

I used the example of 'goto' frame 5. You can also jump scenes. Just like a movie... say, 1 room = a scene. If people would walk to another room, it'd be another scene. All new sorroundings. So, rather than cram all the junk into one scene and jump farther into frames... you can jump scenes. if you want to insert a new SECENE, do this: MODIFY --> SCENE. That will bring up a box. Click the "+" sign in the box to add new scene.


This example syntax in action script for going to another scene:



Exactly like selecting goto and frame 5. Except change the options. Change current scene to next scene or the name of the other scene you created. It clearly indicates- Go to and Play from Scene 2, frame 1. Its doing what it says. This will help with cluttering of your design process.


Import

You can import pretty much anything. You can import a small video clip, a picture and even a sound. Im going to give an example for playing a sound when a button is clicked. You can have sounds do anything really, but i'll show you how to do this.

If you have a sound you want, go to FILE --> IMPORT. Locate it, and hit < enter > . It will import it to the library. Now, find the button you wish the add the sound to. RIGHT CLICK --> EDIT it. Next, you will need a new layer for the sound to play on. So go to INSERT -->LAYER. Name it "sound" or something just so you know. Or name it "CHEESEBURGER" to confuse yourself ;) Create a keyframe on the HIT frame if you want it to play when you HIT the button. Now, select the sound layer, and in the properties it shows a sound option to the left. Click on it and select the sound you imported. Next you can adjust the loop and sync, ect. as well. Now when you click your button, it will play the sound you imported to that!

TIP: I've done this for some of my websites, you can create an image in like FireWorks or PhotoShop and import it into flash if its more complex that it couldnt be made in Flash.


FRAME BY FRAME ANIMATION

Frame by frame animation...eh; That'd be the animation that takes the most work. First, draw yourself a character or something simple -(you always start with something simple.) Assume you drew a smilie face. This is all in layer 1, frame 1. RIGHT CLICK FRAME 2 --> INSERT KEYFRAME. This copies your smilie to frame 2. Now, depending on what you want it to do... modify it slightly and repeat the process.(insert keyframe in frame 3)...modify object, and keep doing so until it does what you want it to do.


TIP: If you want to see the different symbols you have in your project, you can view the library by clicking on WINDOW --> LIBRARY. Also, If you liked the default layout of Flash and you jacked it up somehow you can get it back by going to WINDOW --> PANELS --> DEFAULT LAYOUT.

ONION SKINNING


Onion Skinning seemed useless to me when I first got to know flash. I was like, "WTF is this?" but i'll save you the trouble. Onion Skinning shows you previous frames to help you modify your symbol to do whatever you're trying to get it to do.

TIP: Remember, there are more that 3 tools on the tool bar. There is a 'FREE TRANSFORM TOOL (Q)' that can help you with modifying your symbols and such. You can do alot of cool stuff. Make text small, and get big. Fade-In / Out. (Done with ALPHA)- Set your first symbol/keyframe to 0% alpha in the PROPERTIES --> COLOR. then say 10 frames later create another keyframe, change the alpha to 80%, 10 later, -->KEYFRAME, alpha back to 0%. Create motion tween's between the 3 keyframes and play it. There is no limit.


PUBLISHING YOUR WORK

Ok, you've fooled around a bit with flash. You've learned some stuff on your own and followed some info in this tutorial. Now you want to see your work, right? Ok, first off - Save your work. ( FILE --> SAVE ) Now you can publish you work. Locate the "Publish Settings" from, FILE --> PUBLISH SETTINGS. First off you notice, formats. Look at them. Select the checkbox of those you wish to have. If you want your flash in an HTML document, check that - so on, so forth.

Next to formats you will see Flash. From that point, you can choose which version of Flash your animation will be published (i'd recommend the most recent).

Also you can protect it from other ppl. importing it with a password, generate a size report and more. And finally next to Flash is HTML. This allows you to specify how you want your Flash exported in HTML if you selected it to be.

Once you've selected how you want it published and made any other changes, press the publish button located under "OK." It will publish your work to the directory you're working from. Hit ok, and its PUBLISHED!


CONCLUSION

I dont know if any of that has done any good for you, but i tried to explain it the best i could. What else is there to learn? Tons of stuff! Im sure you've seen flash on other sites doing cool things- which is what has caught your interest in flash in the first place. But alot if it is design, and a majority if it is controlled by actionscript. So I recomend you learn that if you're seeking on getting deeper into Flash stuff.


Take it easy- get sleep while you can.

-bs0d


1  |  2  |  3  |  4  |  5  |  6  |  
Next »


No Comments for this page.

You Must be logged in or a member to comment.


Tutorial Stats

Tutorial Stats

41,809 Views
0 Total Comments
5 Rating of 5 (1 Votes)

Options

Tutorial Options

· Login to Rate This Article
· Login to Post a Comment
· Read more by this author
Digg This Article! Del.icio.us: Bookmark This Article Reddit: Bookmark This Article BlinkList: Blink This Article! YahooMyWeb BlogMarks: Add This Mark! Furl: Save This Article Spurl: Mark This Article

Articles

Related    

· Floating Flash!
Your Article Here



"AllSyntax.com" Copyright © 2002-2018; All rights lefted, all lefts righted.
Privacy Policy  |  Internet Rank