The place that has your tutorials

Tweens And Animations

July 29th, 2007

A tween is a movement between at least two keyframes. There are two types of tweens a motion tween and a shape tween.

Motion tween is a tween where an object’s changes seize and or position smoothly. it is usually a blue arrow linking two keyframes.

Creating motion tweens.

To create a tween you first of all have to create two tweens. Draw an object on your workspace. Then you press on key frame 10 for example with the mouse then you press F6. That will create a keyframe. It should look something like this so far.

If you press return or enter the red indicator will move from frame 1 to frame 10, but between 1 and 10 there is no change. On keyframe 1 or 10 change the size by the free transform tool or position by the select tool. Right click on the area between keyframes 1 and 10 then press “create motion tween”. If it looks something like this no problem, just right on key frame 10 the one that is not shaded blue and press “create motion tween”. . Now it should look like this .

If you get this then one of the things it means is that not all the objects in keyframe 1 are the ones in keyframe 10. For example an extra object could have been on keyframe 10 that is not on 1. So all the objects on keyframe (kf) 1 should be on kf 10 or else the part that is common in both keyframes will be tweened while the new object will just appear from nowhere. Later in this tutorial I will tell you common used of motion tweens.

Fading text

1) Create a new document
2) Create a keyframe on frames 1
3) On keyframe 1 write “welcome here”
4) Right click on the text and press convert to symbol,
5) Select graphic
6) Create a keyframe on frames 10
7) On the text pres once then in the colour choose alpha change it to 100 to be visible
8) On keyframe 1 change the text’s alpha to 0
9) Click on any frame between keyframes 1 and 10
10) In the properties panel select shape for the tween.

Like before if a keyframe is not highlighted blue, right click on it and press create motion
see what i mean.

Shape tweens.

A shape tween is when an object transforms from one shape to another. To make it clearer will be doing three things: changing a square to a circle; “hello” to “how are you”, and also changing a red square to a blue square.

Changing a square into a circle.

1. Create a new document
2. Create a keyframe on frame 1
3. On keyframe 1 draw a square
4. Create a keyframe on frames 10
5. On keyframe 10 delete the square and draw a circle
6. Click on any frame between keyframes 1 and 10
7. In the properties panel select shape for the tween.
8. Like before if a keyframe is not green right click on it and press create motion tween.
. now your time line should look like this .

Creating a red square to a blue square

1) Create a new document
2) Create a keyframe on frames 1
3) On keyframe 1 draw a red square
4) Create a keyframe on frames 10
5) On keyframe 10 delete the square and draw a blue circle
6) Click on any frame between keyframes 1 and 10
7) In the properties panel select shape for the tween.
8) Like before if a keyframe is not green right click on it and press create motion tween.

To change colour you select the square for example and then in the bucket in the properties panel change the colour or in the tool bar change the bucket colour to what every you want or from the colour swatches panel on the side. You may have noticed that these steps are very similar to the ones above the.

Changing hello to how are you(morphing text)

1) Create a new document
2) Create a keyframe on frames 1
3) Select the text tool and click on the work area
4) Type hello
5) Go to modify and the break apart
6) Do the above step again
7) Create a keyframe on frames 10
8) On keyframe 10 delete hello
9) Select the text tool and click on the work area
10) Type how are you
11) Go to modify and the break apart
12) Do the above step again.
13) Click on any frame between keyframes 1 and 10
14) In the properties panel select shape for the tween.
15) Like before if a keyframe is not green right click on it and press shape tween in the properties panel
16) Press return or enter.
You will see that you can change the colour of the text on either keyframes to whatever you want but after breaking apart twice. The timeline should look like this.

This all I have for you about tweens but here are some common web uses of motion tweens:

-from big to small and vice versa
-from right to left and vice versa as like a marquee
-fade in or out

These are the only ones I can think of right now but there are hundreds of other effects. If you have any problems please do not hesitate to contact me and i will be happy to help.


Flash MX Interface introduction

July 29th, 2007

Here is the first tutorial for Macromedia Flash MX. I have tried to make it as simple as possible but with as much information as possible I hope you find it useful and enjoy it. Now let’s start. Macromedia Flash MX is the professional standard authoring tool for producing high-impact Web experiences. Whether you are creating animated logos, Web site navigation controls, long-form animations, entire Flash Web sites, or Web applications, games, picture galleries, you’ll find the power and flexibility of Flash ideal for your own creativity.

The above picture is a screenshot of Macromedia Flash MX user interface. It has:

Menu
Tools
Colour Mixer
Colour Swatches
Components
Answers
Properties
Actions-frame
Timeline
Layers
Work area

Here is everything explained as briefly and informative as possible so that you don’t get bored.

1:- Menu: There are 9 menus in flash they are:

1-File
2- Edit
3-View
4- Insert
5-Modify
6- Text
7-Controle
8-Window
9- Help

The menus will all be explained in detail next tutorial. I hope you don’t mind.

2:- Tools: There are 19 tools in the toolbar on the side. They are:

Arrow – for selection
Brush – for drawing brush like strokes
Eraser – for rubbing
Eyedropper –to pick colour
Fill Transform- sorry I don’t know how to use it
Free Transform - to transform an object freely
Hand – for moving during zooming in/out
Ink Bottle – modify a brush stroke
Lasso – for selection
Line –to draw a line
Oval –to draw an oval
Paint Bucket –to fill a shape
Pen –like the path tool in Photoshop
Pencil –to draw freely like a normal pencil tool
Rectangle –to draw a rectangle
Selecting –for selection
Sub selection –to select part of an object
Text –to enter text in it.
Zoom –to zoom into the stage.

3:- Colour Mixer: Is a tool where you mix colour to get the colour you want to fill in an object or a drawing.

4:- Colour Swatches: are common used colours and gradients. 216 are in the colour swatch but more can be added from the colour mixer panel.

5:- Components: Are basically form items but a bit more complicated and harder to use. I personally make the components my own.

6:- Answers: Is the help panel where new stuff, tutorials, and the read me file are available. It has an update button where the information there are updated from the internet connection

7:- Properties: This part is usually located at the bottom of the interface. When no object is selected it shows the properties of the flash file e.g. Background colour, size and what flash release to play it on. When an object is selected it shows the properties.

8:- Actions-(frame): It doesn’t always have to say frame. Anyway this is the place where flash code (actionscript) goes. The word frame is shown when no object is selected to it shows the actionscript of the frame. You can place actionscript in a symbol or a frame only.

9:- Timeline: Is the place where all actions are placed. It is like a storyboard for when making a film or a cartoon. There are several types of things that go on a timeline:

Keyframe- Is a main point. If it is shaded that means it has contents else it is a white un-shaded dot.

Frame: - Is a normal frame that doesn’t have to have content on it.

Tween: - Are several frames with at least two keyframes with the same contents but modified in size or colour.

10:- Layers: Like any other graphics program objects can be layered. There are several types of layers. They will be discussed in a later tutorial.

11:- Work area: Is the place where you place every visual item

That’s it really. If you have any problems please do not hesitate to ask me and I will be back as soon as I can.


Flash Cookies

July 29th, 2007

OK here is how to create a cookie in Flash backened with PHP.

Firstly we start with the Flash file.

1. Create a flash button. To do so draw a rectangle, right click on it and select make symbol. select button then press ok.
2. In the action panel of the button add the following:

Actionscript:
  1. on (release) {
  2.     cookie = "flashsite";
  3.     getURL("input.php", "", "POST");
  4. }

3. On the action for the frame add the following:

Actionscript:
  1. cookie = "value";

4. Now you have set a variable as soon as the SWF loads called cookie, when you press the button it changes to flashsite. the seconline takes you to input.php where it sees the variable and acts upon it.
5. My input.php looks like this:

PHP:
  1. <?php
  2.    
  3. $cookie = $HTTP_POST_VARS['cookie'];
  4.    
  5. if($cookie == 'flashsite')
  6. {
  7. setcookie("asgsoft_redirect", $cookie, time()+31536000);
  8. header("Location: index.php");
  9. }
  10. if($cookie == 'nonflash')
  11. {
  12. setcookie("asgsoft_redirect", $cookie, time()+31536000);
  13. header("Location: nonflash");
  14. }
  15.    
  16. if($cookie == 'skipintro')
  17. {
  18. setcookie("asgsoft_redirect", $cookie, time()+31536000);
  19. header("Location: index.php?scene2");
  20. }
  21.    
  22. ?>

6. This is part of mu upcoming site where it allows the user to select whether to see flash/nonflash site. if they select flash then whether to see the into or not.

I hope this has been helpful to somebody


Random Banner for each visit

July 29th, 2007

Flash has never been so interactive. In this tutorial i will be showing you how to load up a random swf each visit. So lets start!

1- rename all your desired movies into banner(number).swf eg banner1.swf,banner1.swf they have to consiguative numbers starting at 1
2- Load up flash
3- go to windows>actions

Enter the following:

Actionscript:
  1. itemtotal = 2; //total banners that are going to be viewed randomly
  2. fscommand("flashpath");
  3. temptotal = itemtotal;
  4. movieprefix = "banner";//as for the file name set previosly
  5. aItemTemp = new Array(); //set a new arrey
  6. aMovie = new Array(); //set another new arrey
  7. newvar = math.round((math.random()*1)+1); // the alotherigom to work out the number which is going to be viewed.
  8. loadMovieNum(movieprefix+(newvar)+".swf", 1); //loads the movie

test the movie by clicking control+ enter again and again(that will refresh it)
Tell me,how easy was that!
If you encounter any problems please do not hesitat to contact me. :)