Flash Professional 8 / MX - Tutorial for beginners - How to use Flash 8

The video tutorial below is recommended for beginners wanting to learn how to use the following tools:

Timeline - timelines control your flash animation.

Layers - shows how to make a layer.

Drawing and coloring shapes (circle, rectangle tools).

Filling or outlining flash shapes with color. Also includes gradient fills.

Rotating or scaling shapes and objects.

Pen tool.

Text tool.

Lasso tool.

Pencil tool.

Brush, fill, eraser, zoom and hand tools.

Frames - demonstrates how to create Adobe Flash frames and play them.

Explains the difference between a frame and a key frame.

Movie (document) properties. Shows how to make a movie smoother by setting the frame rate higher.

Tweening - motion tween.

What makes this Flash tutorial great for beginners, is that it doesn't complicate things with fancy animation or technical terms. It simply demonstrates all the basic tools, showing how to use each. If you've recently purchased Adobe Flash or only opened it a few times, then this is the tutorial for you. However, if your more experienced than beginner level then you may want to move on to a more advanced tutorial.

The software used in this tutorial is Adobe Flash.

To start this Adobe Flash 8 MX tutorial press the go arrow:

Now you're familiar with the basic tools used to create an animation movie, you will find it easier to follow other Flash tutorials. Fun tutorials are often the best way to learn how to use Flash 8. For example, the next tutorial demonstrates how to make an animated face from scratch:

 

 

Adobe Flash Game Animations - Sprites

Shown below are a couple of tutorials for webmasters who include Flash games into their websites. The tutorials demonstrate how making flash animations for games, differs from making animations for website headers or movies. If your new to Adobe Flash, it's recommended you first look at 2 earlier tutorials.

1. How to use Flash tools
2. Stick man flash animation

The two part tutorial below demonstrates how to animate game figures, or rather sprites as they are better known, into karate type moves. The animation uses a movie clip with 17 different sprites. Each sprite contains its own movie clip for each move required. The game programmer can then link an action script to a sprite, depending on what button is pushed.

The software used in these tutorials is Adobe Flash.

Part One:

Part Two:

Since this post another has been made specifically showing you how to use ready made sprites.

Numerous other helpful links for game animation:

Sprite Sheets - Sprite sheets contain all the animations moves. In other words, the character is displayed in all different positions, ready to be included into an animation.

Basic Game Development in Flash - Shows you step by step how to create a character and control it using Flash 8.

Numerous game tutorials from Flash Kit.

Space Invaders Game - Flash tutorial.

Have Fun!


 

Adobe Flash Tutorial - How to make an interactive car game.

Anyone who plays online Flash games will tell you that car games are very popular. This tutorial will show you how to make an Adobe Flash movie where the viewer starts and stops a moving car. Furthermore, the viewer can also drag the car around the screen which is useful for panning to the left or right side of a road.

Before starting the tutorial it is recommended that you already have an image of a car. Remember this lesson is teaching you how to use action script code for moving a car and not how to actually make a car graphic.

The software used in this tutorial to create the car game is Adobe Flash.

There are many other car Flash game tutorials available online. We've sourced out a few of the best for you to learn from:

1. Download car game .fla file that works similar to the car tutorial above. Note: There is no collision detection. You simply move the car around with mouse. However, it's still good to learn from and use as a basis for your first flash car game.

2. fla file download for controlling and accelerating a car. This time the user moves the car around with their keyboards arrow keys.

3. Adobe Flash RPG Car Game Tutorial - Basic level recommended for beginners. Also includes download link to files used within the Flash tutorial.

Tutorial for spinning or rotating a circle in Adobe Flash

This Adobe Flash tutorial demostrates how to make an animation that smoothly spins a circle. Firstly it shows you how to do it with a motion tween and one object. This works fine, however there is a short hickup or pause after each rotation. This is due to the animation being in a loop and starting again from the 20th frame back to the first.

To improve on this, the tutorial continues on and demonstrates the results of adding a second layer with a bit of action script (goto play 1) thrown in. This time when the Flash animation gets to frame 19, it reads the action script and goes back to frame 1 before it gets to the end of the movie. As you can see by the demonstration, it does look smoother than the first attempt. Although it still hops quickly back to the first frame. It just does it quicker so is harder to see.

Whats the answer? Well the answer is to add a few more lines of action script to the movie. Here is the action script as shown in the video tutorial:

onClipEvent (enterFrame)
{
i = getProperty(this, rotation);
setProperty(this, rotation, 1+18)

}

If your not familiar with how to add actionscript to your movie, Adobe has a good tutorial: Adobe Flash action script tutorial.

The software used in this tutorial to create a spinning circle is Adobe Flash.

To start the spinning circle animation tutorial click the go arrow:

 

Bouncing Ball Flash Tutorial with ActionScript

Here is a flash tutorial on how to create a bouncing ball with ActionScript. It is recommended for intermediate animation designers. Listed further down the page, below the visual tutorial are other Flash tutorials that demonstrate how to bounce a ball using ActionScript. As you can imagine, there are numerous ways to bounce a ball. For example, straight up and down or off walls to the left and right. Hence the reason for listing a few different tutorials.

The software used to make a bouncing ball in this tutorial is Adobe Flash.

More bouncing ball flash tutorials:

http://newmedia.purchase.edu/~Jeanine/flashbballlab.doc
Word document tutorial aimed at Flash 5, Flash MX and Flash 8 users.

This bouncing ball tutorial is different to the others in that the ball squishes on impact. Just as a real ball would. Therefore making it more convincing.
http://www.adobe.com/devnet/flash/articles/squash_stretch.html

Here is a simple tutorial that is easy to follow for beginners to Adobe Flash:
http://www.acky.net/tutorials/flash/bouncing_ball/

Now for a Flash movie where the ball bounces 5 or so times then stops:
http://www.spoono.com/flash/tutorials/tutorial.php?url=gravity

Bouncing ball with a shadow: http://www.flash.0tutor.com/archive/42/Bouncing-ball-casting-a-shadow-in-Flash.shtml

Now for something a little different, here is a tutorial where the ball bounces horizontally along a line. This could be changed to bounce along a footpath or roadway etc.
http://www.amazing-kids.org/anitutorial.htm

Free .FLA files to use in Adobe Flash - websites, games, preloaders, intros and hundreds more!

Learning from others is often the most effective way to teach yourself a new design method. For example, if your unsure how to make an Adobe Flash preloader, then download a couple of preloader .FLA files that others have created and play with them to see how its done.

You will need Adobe Flash software to use these FLA files.

Listed below are many useful .FLA files you can download for free to learn from:

1. DeviantART offers hundreds of free FLA files for download including preloader packs, the ever so popular matrix effect, MP3 flash players, platform game engines, a flash website design, drop down box, flash website navigation systems, moving cloud background for flash movies and many others.

FLA file to create an Adobe Flash website

2. Flashkit is a useful site to download FLA files from. Free downloads include flash ecards, intros, banners, vector animations, rotating cubes, anime, games and full flash applications including guestbooks, chat rooms, calendars and much more.

3. Taengo Media Concept has 15 free FLA files to download. They offer simple spinning cubes, numerous flash interfaces, backgrounds and kaleido files.

4. Entheos is useful for those learning how to use Adobe Flash. It offers numerous tutorials that also include .fla files for the user to download and practise with. FLA files include motion tween, custom cursors, photo slide shows and galleries, flash games and many others.

5. Internet Cross is another useful tutorial website that offers free Flash .FLA downloads with each lesson. FLA files for download include moving objects from point to point, creating forms, clocks, passwords, loading jpg images amongst others.

6. The most downloaded FLA source files from Flash Advisor incude dynamic photo gallery, smoke text effect, scrolling menus and mouse trailers. While their featured FLA download is a 3D Christmas tree.

7. Adobe Flash Developer Center has a good collection of sample files to download. Scroll about half way down the page to where it says, Macromedia Flash MX Sample Files. From there you can download all the Flash MX FLA samples that are included on their installation CD.

8. Pixel2life makes learning Flash easy with 100's of tutorials, many of which come with full fLA file downloads to experiment with and customise. Popular ones include firing bullets, creating a Flash website intro, random actionscript movements, super mario sprite character, security Flash game and others.

If your new to Adobe Flash, you may also be interested in Flash tutorials available on this blog.

 

 

Text animation in Flash

This tutorial demonstrates how to create animated text in Adobe / Macromedia Flash. Animating text is one of the most popular movements that is often used for creating banners or intros. The lesson is pretty involved so its recommended you watch it a few times to familiarize yourself with text animation.

The software used in this tutorial is Adobe Flash.

Other useful resources for Flash text animation:

1. Kirupa has a very basic text animation tutorial for Adobe Flash users. This step by step tutorial is recommended for beginners who want to learn how to scroll text from left to right. On the very last page of the Flash tutorial is a free .FLA file you can download and experiment with.

2. How to animate text using actionscript.

3. Tutorialized has many different Flash text effect tutorials including: making text shake, stretch zoom and slide text, falling text, disappearing text in Flash, text that changes color, text transformation effect and hundreds of others.

 

 

 

 

Adobe Flash tutorial on how to use sprites

Here is a really useful tutorial for future flash game developers wanting to know how to use sprites. To follow along with this tutorial you need a png file that contains the sprite characters. You can download some png files from searching sprite sheet on google images. You'll notice if you follow that link it has literally hundreds of sprites. Some are in gif format while others are png. If you want to use a super mario brothers sprite like shown in this tutorial then you can find it at: Mario Brothers sprites.

You don't need to use the whole sheet of sprites. Simply open the file in Photoshop or any other graphics editor that supports png and cut out the characters you want to use. Make sure you resave it as a png then open Adobe Flash and click on File > Import... the .png. Now your ready to follow the tutorial.

The software used in this sprite tutorial is Adobe Flash.

I'm also adding a second Flash tutorial that will show you how to add sound to your sprite movements. For example, when super mario brother runs through a coin, it makes a sound effect as the coin dissapears.

This is basically all there is to know about using sprites and sounds in Flash game animation.

You might also be interesting in an earlier post that involved sprites called: Making game animations in Flash.

How to zoom in your Flash movie clip, re-scaling it as you go.

Here is a useful demonstration showing you how to change the scale and position of a MovieClip. In other words how to zoom and pan a movie clip then re scale it. The action script for this tutorial is quite long, so to save you time in typing it all into your Flash movie, we've included it below for you to copy and paste. What it does basically is tell the program to fit everything inside the square.

function camControl() { parentColor.setTransform(camColor.getTransform()); var _l4 = sX / this._width; var _l3 = sY / this._height; _parent._x = cX - this._x * _l4; _parent._y = cY - this._y * _l3; _parent._xscale = 100 * _l4; _parent._yscale = 100 * _l3; } // End of the function function resetStage() { var _l2 = {ra: 100, rb: 0, ga: 100, gb: 0, ba: 100, bb: 0, aa: 100, ab: 0}; parentColor.setTransform(_l2); _parent._xscale = 100; _parent._yscale = 100; _parent._x = 0; _parent._y = 0; } // End of the function this._visible = false; var oldMode = Stage.scaleMode; Stage.scaleMode = "exactFit"; var cX = Stage.width / 2; var cY = Stage.height / 2; var sX = Stage.width; var sY = Stage.height; Stage.scaleMode = oldMode; var camColor = new Color(this); var parentColor = new Color(_parent); this.onEnterFrame = camControl; this.onUnload = resetStage; <p>//V-Cam Script<br />
 

 

The software used in this tutorial is Adobe Flash.

To start the zoom in Flash tutorial below click the go arrow:

Note: you don't need to add the zoom cam to each Flash layer. Simply put the zoom cam on a layer by itself and if you ever want it to disappear add a blank keyframe or use normal frames to keep the cam active.
 

Adobe (Macromedia) Flash Tutorial - motion tweens

Motion tweens are important for animation beginners to understand and learn how to use properly from the very start. You will use this technique in just about every flash movie you create. Tweening allows the movie to be displayed smoothly from one frame to another. Or in other words creating motion in your Flash movie.

You can make a motion tween using a shape or a symbol. In this tutorial a cirlce is drawn then created into a symbol instance. It then uses the symbol instance to demonstrate how to create a motion tween that looks like a rolling ball.

Step by step guide for creating a motion tween:

1. Draw a shape with Adobe Flash, for example a circle.

2. Press keyboard V key and double click the circle shape. Depending on your settings you may not need to double click the shape to select it.

3. Press F8 on keyboard to convert it to symbol. Leave the 'type' set on 'graphic' mode when the dialog box appears and name the symbol.

4. Now to animate the instance, click on frame 20 and press keyboards F6 to insert a key frame.

5. Click the circle once (not double click) and drag it to the right of the screen to move the position.

6. Highlight the first keyframe again so the circle looks like its on the left again and look down the bottom of your program to where it says 'Properties Inspector' and in the drop down choose motion. Notice the frames then turn blue. This blue color tells you that they are a motion tween. If you don't see the blue then go back to step one as something is not going right for you at this stage of the tutorial.

7. Press your keyboards enter button to test the animation.

Shown below is a visual demonstration of the motion tween tutorial explained above. To start the tutorial press the go arrow. The software used in this tutorial is Adobe Flash.