Following Cursor
April 17, 2007
Assumed knowledge: Basic Flash Navigation, Object creation and Basic Actionscript knowledge
Concepts Covered: Commanding a movieclip to follow the X and Y values of your cursor
This is probably my favourite little Flash program that I have made. Its so simple, anyone can do it.
Load up Flash and create a movieclip with something clearly visible inside it. All that?’s left now is to insert the code.
This is the code that you put into your movieclip.
onClipEvent(enterFrame){
this._x=_root._xmouse;
this._y=_root._ymouse;
}
Lets look at this code.
onClipEvent tells the program that once an event happens in the movieclip then?’. The condition in the brackets is that event. In this case once the current frame is entered. The { sets us up for the action which is about to occur when the frame is entered. This?’ is referring to the current movieclip which the code is in. ._x is referring to the x value. Equals sets the value to be the same as the other value. _ root._xmouse looks for the x value of the mouse. The ; closes off the action. The code on the next line is the same but for the y axis. The { closes off the code.
What this means as a whole is that once the frame is entered then the x and y values of the current movieclip are the same as that of the mouse.
You can do what I like to do and edit your movieclip so that it looks pretty. I made a little planet and a moon in my example which can be found here:
Tags: Tutorials, Following Cursor, flash mx, tutorial
Posted in Tutorials | Comments (0)
Editing and Animating Text
Ever wanted to change the way that your text looks in Flash MX? Then make it animate and do cool effects? This tutorial goes through most of the common ways.
Editing Text
This is relatively simple and can be achieved through just playing around with the Text properties.
Firstly select the Text Tool
Then type any text that you want into the text field that you create. Try to keep the text field at the right length to avoid creating a new line. I chose to work with Raven.
Look down at the properties bar and make sure that the font is static text.
Okay now we have our text lets have a little play around with it. In the Text properties play around and choose a font that you like I chose Arial Rounded MT Bold. Chose the type of script, it is probably better to leave it as normal. Chose the A/V tool and space out the text.
My text now looks like that:
You can have a play around with the bold, italics and its aligning too if you want to but that doesn?’t provide much to do if you want to change the way your text looks. To change the text we would break it apart and craft it the way we want it to be.
Select your text and press Ctrl +b, which breaks the text into letters, you can move the letters around and make the text look strange if you want to.
But if you want to edit your text even more select all of the letters and press Cntrl + b again. Now they are all shapes that you can freely edit. So have a play around and change how your text looks. Use the arrow tool and change the edges of the text. Heres what I made:
You can use the text and edit it in anyways that you can with a normal object. I used the color mixer and added a radial effect to my text, so it looks like this.
The sides are white and had no alpha effects for those who are experienced. But if you use a different colored background then choose the matching color or set the white to 0 alpha. Setting it to 0 alpha and the background colour give off basically the same look. That is probably most of the text effects that you can do in Flash MX. Its all really up to you depending on what you want your text to look like.
Alpha Tweening
So you can make text look pretty cool in Flash MX, well how about animating the text? Making it do cool tricks. This can all be achieved using Flash MX?’s symbol properties and basic tweening.
Firstly type in some text and right click on the text and convert the text into a movieclip.
Okay now we have our movie clip. Right click 20 frames into the timeline and make a key frame.
Now in frame 20 select the movieclip and go to it?’s properties. On the color drop down menu select alpha and set the alpha to 0.
Right click in the timeline. Anywhere except for the 1st and 20th frames and create a motion tween. Press Ctrl+ Enter to export the movie or select Test movie from the Control tab.
Wow look we have a cool alpha tweening effect! You can make a new key frame at frame 40 and tween the Text back to normal alpha if you want to so that the movie looks complete. This is only one of many animation effects that you can do with text. Of course you could do the same thing but use colors by tinting the movie clip. But this tutorial has taught you the basic system for changing what text look likes through animation. Not only can you use text but you can use anything as long as you follow that system.
Tweening letters
So far we have learnt how to break apart text and how to animate text. This part of the tutorial combines some of the best bits of the rest of the tutorial to create something neat.
Start off and create some text and break it apart into shapes. Select each letter and convert them into movieclips. Create a few new layers and cut and paste each letter onto a separate layer. When you paste your movieclip right click and select paste in place.
Now we have all of our letters on separate letters. On each of the layers create a keyframe at the end at frame 30.
On frame 30 select each separate letter and move them offstage, do this for all of the letters. Then make every layer have a motion tween and test your movie. See how all of the letters separate. That?’s the effect! For more information on tweening keep on reading.
Easing
When you tween an object in Flash MX you can make it move faster or slower depending on what you set the ease to. Create a tween be it a motion tween or a shape tween and select the ease in the tween properties.
Change the ease to what you want it to be. The best way to discover tweening is to tween objects yourself and test. It?’s a nice effect when used well.
Now you know how to create cool looking text and are able to apply cool animations to them.
If you would like the Fla. Version of all of what is set in this tutorial then click below to download it. Each section is put into a scene, to play just a scene press Cntrl + Alt + Enter or click test Scene under Control. Raven?’s showpiece is a little movie that shows some effects that can be done with what has been done in the tutorial.
Tags: Tutorials, Editing and Animating Text, flash mx, tutorial
Posted in Tutorials | Comments (0)
Line Properties
Assumed knowledge: Basic Flash interface
Concepts covered: How to create lines, line properties and line joining
This tutorial goes through everything to do with using lines in Flash MX.
To create a line select the Line tool then click on the stage, while holding down move your line in the direction that you want it to go and then release it.
When your line is on the stage you can move it by clicking on it then grabbing and dragging it. You can also change the curve in your line by selecting any part of the line when it displays the curve signal. Or increase/decrease the length of the line and rotate it by placing your cursor over the start or end of the line and then moving it when the symbol changes to a right angle.
You can draw another line and connect the two with the right angled cursor. With these techniques you can create many good line drawings in Flash.
When selecting your lines you can change their properties. Once your line/s are selected look at the Properties bar and you can change the properties. You can change their thickness, colour and the type of stroke. You can also do this before you go to draw your line.
Like any other shape that you draw in Flash, lines can be connected to other shapes easily.
There is an easy way to create wavy lines in Flash and this can be done via the Pen Tool. Select the Pen Tool from the Tool bar.
Then drag a line on the stage like you would with the Pen tool. This creates a blue line with a dot in the centre. Do it again but a little bit out from your last one. You?’ll see that a wavy blue line is created. This is your line, you can make more and more cuves by repeating these steps. To stop creating a line you can use the Arrow tool and select off of your line. Learning how to use this tool properly takes time and practice.
Tags: Tutorials, lines, flash mx, tutorial
Posted in Tutorials | Comments (0)
No Brush Signature
Concepts covered: Using a series of blends to create a good looking sig with no brushesIf your fairly new to Photoshop or are just sick of the same brush based sigs and want to try something new then this tutorial is for you. This tutorial will run thru how to make a sig such as this one:
To begin with create a new Photoshop document. I’d set the size to be around 350 by 100 or similar. Then open up the file which contains your render. The render doesn’t need to be anything special, I’d suggest something that has colours similar to the colours that you want in the final version. Press Cntrl + A or from the main menu Select>>All. Then press Cntrl + X or Edit>>Cut and then paste(Cnrl + V or Edit>>Paste) in the document with your sig. Adjust the render so that its it a nice position.
Its not required but I recommend that you clear any background that you have as it will appear in the final version. Just select the magic wand tool from the tool menu and select and delete. It doesn’t have to be a perfect job. Duplicate the render by right clicking and selecting duplicate layer.
Select the above render layer and the from the main menu select Filter>>Blur>>Gaussian blur and then set the blur to 15.
Duplicate the layer. On the duplicate layer select Filter>>Blur>>Motion Blur and set the angle to be 35 degrees and the distance to about 99.
Next we need to rotate the image to cover the whole canvas. Select Edit>>Transform>>Rotate 180 degree. Then duplicate the rotated layer, this should cover up the rest of the canvas.
Now go back to the original render and bring it to the top. Select Filter>>Blur>>Motion Blur and then set the specifications to an angle of 13 degrees and distance to over 200. Then select Filter>>Brush strokes>>Spatter and select similar specs to these:
Then duplicate that layer and on the duplicate layer select Edit>.Transform>>Flip Horizontal. Then right click on the layer and select Blending options, then set the type of blend to Overlay.
So far this is what I have so far:
Not bad so far. Since writing this I’ve realised that other effects work really well. A light film grain filter works well, also if you change the angle/strength of the motion blur then you can get a different flow for the signature. I recommend that you play around as you go and see what stuff you can make.
Next select Layer>>New Layer>>Layer… then Image>>Apply Image and set the options to a default setting. Then set the type of blend to Hard light and netx select Filter>>Sketch>>Water Paper wth the following specs:
Head down to the two motion blured layers, one that blurs to the right and one that blurs to the left. Duplicate each layer and put them ontop with a blend set to Opacity.
To finish off I did another applied image and set the blend to Hard light with a 35% opacity.
From there just add some text in and a 1 stroke border with an Overlay or Soft light blend.
Thats how you do it! Try to mix and match. What I just showed was fairly complex but you can capitalize on some nice effects. Here are 2 samples sigs that I whipped up in a few minutes using this tutorial.
Tags: Tutorials, no brush signature, photoshop, tutorial
Posted in Tutorials | Comments (0)
« Previous Page — Next Page »
Have you checked out my gaming personal blog yet? No! Then take a squiz:
