|
 |
|
|
Sign Up to Submit Guides and Earn Credibility! |
|
 |
|
|
|
|
Author: Keo
2,539 Views
23 Comments
|
I was thinking of an easy way to explain to CED how to make a flash sig after he posted for help in a thread a couple of days back. This seems to be the easiest way!
I hope a few of you can use this basic start to produce som pretty cool work since I know that many of you are pretty good artists.
The software I used is Macromedia Flash MX and Adobe PhotoShop CS. I have access to both of these through my Uni and therefore haven't examined many alternatives. Perhaps someone else can?
Terms
Stage - This is the working area where you will build your sig
Timeline - The numbered bar at the top which is split into layers
Layers - Think of the image like a sandwich, it's made of layers but you can only see the top one and bits that show through
Import - Like opening a file but importing opens it and adds it to what you're doing
Lets make a sig!
Start Flash MX and create a new Flash Document
Right click the stage and set your sig size. I've found that resizing the stage at any point after you've started can be disasterous!
Using your graphics applet of choice create a new image the same size as your stage. You don't have to do this but it helps to keep things correctly arranged. Make a frame and as many buttons as you'll need. I've gone for a basic design using Photoshop, these are the images:
Background & Frame:
 
Buttons:
   
My psd file can be downloaded HERE
Back in Flash name the existing layer Background and then create 2 new layers and name them Frame & Buttons
Select the Frame layer and press Ctrl+ R to Import to Stage, find your frame and load it.
Do the same with the buttons, Select Buttons layer and Ctrl+R. Buttons will appear in the middle of the stage and need to be moved Ctrl+K will bring up the align panel to help you get things to the edges.
Now you need your characters or whatever pics you are going to include.
I am using these 4 characters:
   
Select the Background layer and then create a new layer, I'll call this Char. Make sure the layer is selected.
At frame 5 on the Char layer Right Click and choose Insert Keyframe. Don't worry when everything goes blank!
Ctrl+R and insert your first Character.
Go to frame 5 on the other layers and right click...choose Insert Frame (Not Keyframe this time) and the reast of the images will insert up to that frame.
Now you need to be careful what you click on the stage. MX tends to select only from the top active layer so you'll either need to hide layers above where you're working or use the arrow keys to position your char.
Insert another Keyframe on the Char layer at frame 10
Delete your first character from this frame, just click the image and hit Del. We don't want them at this point in the timeline.
Bring up your other layers and arrange accoringly. Rinse and repeat for the other chars.
Once all your chars are in you should have something that looks a little like this.
Now we need to create the buttons.
If like me your buttons are not the top layer you may need to hide the layers above them in order to select them.
Select your first button and press F8, select Button and give it a short but meaningful name.
Next go to the Properties bar and name the Instance, I've used the same name just to keep it simple.
Do this with all your buttons.
Now to make it all work...
First of all go to the first frame of your Char layer, pull up the actions bar and type in the code: stop();
This will stop the movie just running through all the frames non-stop.
Create a new layer and drag it to the bottom of the stack. Call this layer Action.
Enter this code changing the button names and frame locations to suit, I hope you can see the pattern and be able to make more buttons yourself.
Btn_Warrior.onPress=function()
{
gotoAndStop(5);
}
Btn_Necro.onPress=function()
{
gotoAndStop(10);
}
Btn_Monk.onPress=function()
{
gotoAndStop(15);
}
Btn_Mes.onPress=function()
{
gotoAndStop(20);
}
NOTE! Actionscript is case sensitive and if you get a problem it's most likely going to be down to a typo here.
And that's it. Hit Ctrl+Enter to test the movie.
Don't worry about bits sticking off the side of the stage, they will be cropped when you save the movie as a swf file.
Download .fla file HERE
Ctrl+Alt+Shift+S to export movie and I just stick with the default settings.
The code to place in your sig area would be (replace { & } with < & >):
{EMBED src="path/to/sig/sig.swf" width="400" height="250"}{/EMBED}
So it's all that simple and I hope to see more Flash Sigs appear! Just watch the filesize when you save. Anything over a couple of megs and this site will never load for all the extra content!!
Please add hints and pointers in you comments since this is simply what I learnt in a day when I wanted to create my sig. I am by no means a competent Flash user.
Thanks again!
^_^
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
