|
lil boi blue -> Flash help and tutorials, checked daily (9/4/2005 12:38:10)
|
OK, after reading the title for Q and A area of this forum, I wanted to start a universal thread for learning flash, if you know of any techniques which i do not list or have questions, feel free to post (stated we can make tutorial threads)
(those with tips, no matter how new or old, i'll add your tutorial here if post or pm me one and i'll add your name to the tutors list,the more tips we have, the better)
though im doing flash help, i've seen this question so many times
Flash tutors
Lil boi blue (specialty)=cartoon/character animation and emphasis
Zoltan red is going to be what he would say (specialty)=game/general programming
Goten Maxwell purple is going to be what he would say (specialty)=flash artwork
Flash users (if you have the program flash MX 2004 tell me and i'll add you, this is to help any and all flash users with their skills)
-lil boi blue
-Zoltan
-Goten Maxwell (legend)
-imdark
-karn blood tooth
-codelabmaster
-independence quiad!!
-rich316
-gandalf5849
-Valgaera
-althorne
====if you use these tutorials please tell me you did so i know it helps people/doesn't help and that its not a waste through pm or something[:)]
================================================================================
LINKS
THOSE INTERESTED IN WANTING TO GET FLASH PROGRAM OR TRIAL GO HERE
here is the site for the free trial
here is a picture for reference of flash MX 2004
FAQ
BASIC LEARNING SECTION
(click links in words to see examples of what to do and what it looks like for reference
Table of contents
-motion tween
-skipping frames
-making objects move with keys
-making cameras
-how do i make a button
-how do i put it to work
-how do i make dynamic buttons (animated)
-custom cursors
-get objects to follow cursor
-uploading
-large pixels
-flasy text
-shadow effect
-glowing effect around text
-dream sequence
-oneframe animations
Action script
-making dragable movie clips
-making objects move with keys
-object follows mouse
-making mouse a pen
-RPG inventory
-change frame when MC's collide
Special coloring tutorials:
lighting using a skull
SOUND
Is there a program that records your voice?
1) my computer
2) C drive
3) WINDOWS
4) system32 folder
5) right click in background and arrange icons by type
6) then go down and look for sndrec32
FIN) now just make sure you have a microphone and start recording
how do i put sound in my movie?
1)first, you must have a recording of what you want
2)open a flash document
3)go to file -> import -> import to library (then obviously get the sound file you need)
4)click window tab on top bar ->scroll down and open library
5)you should see a sound file of what you want in library,
6)click and drag onto white space of document
7)in timeline there should be a white frame with a line going horizontal in the center
8) now, right click around 15 frames ahead of the new frame and key frame it
FIN)the horizontal line should be different now according to the sound, press enter to test it
MOVEMENT
Index
-motion tween
-skipping frames
-making objects move with keys
-making cameras
how and what is motion tween?
VIDEO OF MOTION TWEEN:
Motion tween is a mechanism that allows you to not draw each frame over and over again but let the computer do the work
1)open a flash document
2) make a circle in the right hand corner
3)in the time line, right click the grey keyframe and select 'create motion tween' (the first option)
4) right click on frame 15, and select 'insert keyframe'
5)left click on key frame 15
6)press 'q' on your keyboard to select freetransform tool
7)circle should be highlighted
8) move circle to top left hand corner
FIN)press 'enter' and watch the circle move
hint)you can use this same technique on multiple layers
How do i make one frame go to another without stopping/stopping at the frame
there are 2 answers to this
1)open flash MX 2004
2)say you want to jump from frame 5 to frame 18
2) make a circle in right hand corner
3) highlight frame 5,right click, and make it a keyframe
4)go to the actionscript section at the bottom of the screen (keep five as the frame you want to apply action, check in lefthand column of action area to make sure it says something like'layer 1-frame 5
==OPTION 1==
5) type {gotoAndPlay(18);} so that you are saying once the video hits frame 5 it will go and play frame 18 (1,2,3,4,5,18,19,20)
==OPTION 2==
5)type {gotoAndStop(18);} so that once the movie hits frame five, it will go to frame 18 and stop, the only way when watching the movie to make it continue from there would be to press some button that you would create
how do i make objects move and the touch of my arrow keys<^V>?
1)open a flash document
2)on layer 1 make a circle (hold down shift when making it to keep it a perfectly round circle)
3)with the freetransform tool select the whole circle
4)now right click on the selected circle and convert it to a symbol, in the white typing space type 'test' and make it a movieclip
5)go to the properties tab on the bottom of the screen and open it
6)with the circle clip selected, type in the instance space 'test'
7)make a new layer on top of layer 1 and select frame 1
8)in the actionscript tab type this
EXPLAINATION FOR CHANGE= this is one problem i had when testing this out, was figuring out how to do different ones with different names, on that first line of script: test.onEnterFrame = function() {, when you use a different clip or name you change test to whatever you named your clip
How do you make a camera?
1)open a flash document
2)make a new layer
3)name layer 2 'camera'
4)in layer 1 make a box on stage
5)for fill take an exotic fill with many colors and fill in the box
6)on layer camera make a box and fill it white
7)select the whole white box and convert it to a movie clip
8) open flash actionscript tab at bottom and click on white box
9)add this script to the white box movie clip
quote:
ORIGINAL: codelabmaster EDITS: Lil boi blue, in blue
onClipEvent (load) {
function camControl() {
parentColor.setTransform(camColor.getTransform());
var scaleX:Number = sX/this._width;
var scaleY:Number = sY/this._height;
_parent._x = cX-(this._x*scaleX);
_parent._y = cY-(this._y*scaleY);
_parent._xscale = 100*scaleX;
_parent._yscale = 100*scaleY;
}
function resetStage() {
var resetTrans:Object = {ra:100, rb:0, ga:100, gb:0, ba:100, bb:0, aa:100, ab:0};
parentColor.setTransform(resetTrans);
_parent._xscale = 100;
_parent._yscale = 100;
_parent._x = 0;
_parent._y = 0;
}
// make frame invisible
this._visible = false;
// Capture stage parameters
var oldMode:String = Stage.scaleMode;
Stage.scaleMode = "exactFit";
var cX:Number = Stage.width/2;
var cY:Number = Stage.height/2;
var sX:Number = Stage.width;
var sY:Number = Stage.height;
Stage.scaleMode = oldMode;
// create color instances for color
// transforms (if any).
var camColor:Color = new Color(this);
var parentColor:Color = new Color(_parent);
// Make the stage move so that the
// v-cam is centered on the
// viewport every frame
this.onEnterFrame = camControl;
// Make an explicit call to the camControl
// function to make sure it also runs on the
// first frame.
camControl();
// If the v-cam is ever removed (unloaded)
// the stage, return the stage to the default
// settings.
this.onUnload = resetStage;}
6) click frame 1 of layer camera and make it motion tween
7) make frame 15 a keyframe on layer camera
8) make frame 15 a keyframe on layer 1
9) on frame 15 of layer camera, move the box up a lot (like 6 inches from its original position)
FIN) test it out
EXPLANATION for future use: anywhere you move the white box, it will show whatever is in its line of sight so if you expand it, it will "zoom out" if you close it it will "zoom in" this helps a lot when dealing with scenes with major details
BUTTONS
index
-how do i make a button
-how do i put it to work
-how do i make dynamic buttons (animated)
how do i make a button?
1)open a flash document
2) create a circle
3)right click on the circle
4) at the bottom look for 'convert to symbol' and click it
5) click the bubble for button and press ok
how do i put it to action?
PRE)make a button
1)on the bottom of the screen there are 3 bars, one of them says actions, open it up by pressing the triangle next to it
2)leftclick on the circle if you had not done so so that the title of the action bar says 'action - button'
3) now type exactly this in the given small white box where you can type:
on(release){gotoAndPlay(2);}
translation: 'on(release)' when you let go of the button '{gotoAndPlay(2);}' go to and play frame 2
you may change the frame to whatever you want
4)click on frame 1 in timeline
5)action tab should say action - frame
6) simply say:
{stop();}
dont put anything inbetween the parenthasis
translation: '{stop();}' stop this frame from playing
how do i make dynamic buttons(animated ones)
1)open flash document
2) make a circle in space given
3)turn it into a button following the previous tutorial
4)now with your new button, double click on it with free transform tool
5) in timeline there should be four boxes,......1=up 2=over 3=hit 4=release, make them all keyframes
6)the names of those boxes explain themselves, 1=when mouse is off button, 2=when mouse is over button 3=when you click the button, 4=when you lift your finger off the left click button
7)for 1st box, let it be the way it is, for 2nd box, darken or lighten it, for 3rd box, make the button shrink a bit using the free transform tool and decreasing its size, for 4th, copy frame 1 and put it in 4th
8)click on the word 'scene' that is above the timeline
FIN) go to control on top bar and press 'test movie' to push your button over and over
CURSOR AND CURSOR EFFECTS
index
-custom cursors
-get objects to follow cursor
how do i make custom cursors?
1) Open a new flash document.
2) On the stage draw what you want to be your cursor
3) Make the "cursor" a movie clip by right clicking it->convert to symbol, make it movie clip, and call it "cursor" (You should get into the habbit of naming things)
4) Add this script in actionscript text spac on bottom of screen----> onClipEvent(load){startDrag("", true);Mouse.hide();}
how would you get things to follow the cursor?
1) Open a new flash document.
2) On the stage draw what you want to be the object that follows the mouse
3) Make the "object" an movie clip and name it
4) Add this script ---->
onClipEvent(mouseDown){if(hitTest(_root._xmouse,_root._ymouse,true)){goforit="yes";}}
onClipEvent(enterFrame){if(goforit == "yes"){_x -= (_x-_root._xmouse)/6;_y-=(_y-_root._ymouse)/6;}}
TECHNICAL DIFFICULTIES WITH FLASH UPLOADING
index
-uploading
-large pixels
why is it taking forever/not uploading with my hoster?
1)how big is the memory size, if its bigger than 250 for photobucket it wont host, if its bigger than 1070 for image shack it wont work
2)save as a .gif file and upload it (go to file->publish settings-> select .gif and click .gif tab-> check the box for animated
3)try some other hosters i.e.// www.applepics.com www.putfile.com etc...
4)hoster itself may be having some technical difficulties
why is my flash/picture with abnormally large pixels?
1)change your settings for your flash in publish settings so that it doesn't fill the whole screen but so it just fills a certain ammount (you would have to input the width and length coordinates)
2)go to file->publish settings->HTML tab and adjust the scale size
COMPLEX LEARNING SECTION
(in order for me to lessen the amount of typing and information complexity, you are required to have a basic understanding for most buttons on flash MX before going beyond this point, check my reference of the screen for details of terms i may use)
TEXT
index
-flasy text
-shadow effect
how do i make a flashy effect or spinning star around my text?
1)open flash document
2)make a box in the background, covering up all the white part of the stage
3)make the fill black (stage feeling)
4)with text tool, type 'STAGE'
5)on bottom of screen bring up the properties tab, closing action and help
6)highlight your text and make it like...80 font with blue color
7)now on timeline name the only layer there 'stage', after that make another layer and name it 'sparkle 1'
8)lock layer 'stage' so only sparkle 1 appears
9)in the tools column click squaretool and hold for 1 second, then select the polystar tool
10)in colors, click the pencil and below the fill color is a button with a red dash symbol in a white box saying 'no color', click it
11)go to properties which we opened at the beginging, click options in that tab
12)for style select star, give it 4 sides, and 0.05 point size
13) click the fill color and select yellow, then with color mixer make #FFFFC8
14)now, in sparkle 1 layer, in first frame make a tiny star so that itsl ike a dot (MAKE SURE that the layer stage is locked)
15)select the star and convert it to a graphic
16)on layer sparkle make a keyframe on frames 10 and 20
17)now on frame 10 make that little dot star bigger
18)right click on any frame between 1-10 and click 'create motion tween' do the same for 10-20, then make frame 20 a 'motiontween'
CHECKPOINT)= there should be 2 layers, layer 1 = stage_____layer 2= sparkle____ on layer stage there are the words 'STAGE' on layer 2/sparkle, there is a small star that is a graphic, frames 1-20 are keyframed for layer sparkle
19)click frame 2,3,4,5,6,7,8, or 9, any one works, (just dont press keyframe)
20)go to properties on bottom, and double click on the box so that you have two rows
21) on bottom row in middle there is a little box that says 'auto' in it, change it to CW
22)make the amount of rotations as much as you want
FIN) and your done, click Ctrl + enter to make sure everything works......these were a lot of instructions so if i seemed to have not explained one enough tell me and i'll expand on it or make more steps
how do i put a shadow effect on my text
1)open flash document
2)make 2 layers, one on top name 'shadow', one on bottom name 'text'
3)with text tool type 'test' in middle of stage with font 80 in MAKE SURE YOUR TYPING THIS IN LAYER TEXT
4)now that you've done that lock layer test and now we'll work with layer 'shadow'
5)in layer shadow type 'test' again on stage, except below the first test that you wrote
6)open properties tab located on bottom of screen and with freetransform tool select what will be our shadow text
7)choose fill color #999999 (shade of gray) for our shadow text
8)go to color mixer on right hand column (open it if you have too) and apply alpha at 50%
9)now your shadow text should be transparent a little so allign it with THE FIRST 'TEST' THAT YOU WROTE
10)with freetransform tool, skew it horizontally to the right (hover cursor over segment on top of selected area so it has 2 arrows pointing opposite direction and are parallel to eachother)
11) align the base of the shadow test so they pair up with the solid test
FIN)walla, your done with a cool shadow effect)
CREATIVE IDEAS
(THINGS I MADE UP FROM MESSING AROUND WITH IT)
Index
-glowing effect around text
-dream sequence
-oneframe animations
how do i make a glowing effect around my text?
ok this is pretty simple, probably one of the easiest things i could teach
1) type something like 'glow'
2)take the circle tool and make a circle around the word 'glow' holding shift button
3)in the color mixer tool bar on the right hand side, select the box and change it to radial
4)there is bar with two boxes on it, on the one on the very right, make it white and change the alpha to 0%
5)on the one to the left make it yellow
6)take the erase tool and make it from normal mode to faucet mode.
7)delete the lines in the circle
FIN)done, see that easy
How do you make a Dream sequence (fade in fade out)
1)open flash document
2)in frame one make a circle on stage
3)click frame one so that everything is highlighted
4)rightclick on the highlighted circle and go down to timeline effects ->transform/transitions
5)click on transform(in new opened transform window) check the box saying 'change color'
6)select the color white (foamy look) and click ok
7)on frame 31 make a square then click frame 31 and again go rightclick the square and go to transform window (just say yes to the warning)
8)check box of 'change color' and make the final color white
9)click ok
10)now, here it gets a little funny, highlight all frames from frame 31-60 and right click on them
11) now convert them all to keyframes (again say yes to warning)
12)with all the new keyframes from 31-60 right click, go to bottom, and click 'reverse frames'
13) here it gets a little tricky so pay close attention until i get this on video tutorial
14)make a new layer
15)make a keyframe on frame 31
16)for fill color click the black and whit radial color
17)open color mixer tab on right column and make the black on the right white
18) click the white color box for the swatch on the left and click on alpha
19) make it alpha 0%
20) now in frame 31 of layer two make a box that fills up the screen (or atleast the dimensions you have adjusted)
21) make a keyframe on frame 60
FIN) now go to frame one and press enter to check it out
How do i make a one frame rotating object?
1)open flash document
2)select and holddown on rectangle button so droplist comes down
3)select polystar
4)go to properties at the very bottom of the screen and select options and make it a star
5)make a star on the screen now with a fill besides black/white
6)make the star a movie clip
7)on the only frame, motion tween it and left click it; go to properties tab
8)there should be two rows and three columns, if just one double click on middle space in properties tab
9)on middle column make tween "Motion" and change rotation to CW and check the box "orient to path"
10)press 'q' (freetransform tool) on your keyboard and make the vertex of the star in the very center of it
11) make a motion guide for this star by going to the timeline and pressing the "+'''." looking button
12) select circle tool and hold down shift while making it very smal in the center of the star
FIN) i think i covered it all, try it out
ACTIONSCRIPT WITH ZOLTAN (good for making games)
Index
making dragable movie clips
making objects move with keys
object follows mouse
making mouse a pen
RPG inventory
change frame when movie clips collide
Making A Dragable Movie Clip
1) In flash Draw what you want to be draggable and make it a movie clip and give it a name.
2) Add this script to it to make it draggable
Script----->
on (press) {
startDrag(this);
}
on (release) {
stopDrag();
}
3) Try the sucker out and if it works try to make something like mr patato head or...... stuff....
Making an object move with the keys
1) on the stage of your new flash document draw what you want to be moved by the keys make this a movie clip and give it a name
2) in the properties inspector also name the object the same name (this is crutial so make shure you do it)
3) make a new layer and ADD THIS SCRIPT TO THE NEW LAYER
Script-----> *replace name with the name of your object
name.onEnterFrame = function() {
if (Key.isDown(Key.UP) && Key.isDown(Key.RIGHT)) {
this._rotation = 45;
this._y -=15;
this._x +=15;
} else if (Key.isDown(Key.DOWN) && Key.isDown(Key.RIGHT)) {
this._rotation = 135;
this._y +=15;
this._x +=15;
} else if (Key.isDown(Key.UP) && Key.isDown(Key.LEFT)) {
this._rotation = -45;
this._y -=15;
this._x -=15;
} else if (Key.isDown(Key.DOWN) && Key.isDown(Key.LEFT)) {
this._rotation = -135;
this._y +=15;
this._x -=15;
} else if (Key.isDown(Key.UP)) {
this._rotation = 0;
this._y -= 30;
} else if (Key.isDown(Key.LEFT)) {
this._rotation = -90;
this._x -=30;
} else if (Key.isDown(Key.RIGHT)) {
this._rotation = 90;
this._x += 30;
} else if (Key.isDown(Key.DOWN)) {
this._rotation = 180;
this._y += 30;
}
};
And now your movie should work and you can control your movie clip and zoom it around ....... fun fun fun!
Object followes mouse and you lose if it hits it
1) In a new flash document draw what you want to follow the mouse and make it a movie clip and name it, also name it in the "properties inspecter" otherwise the script wont work
2) create a new layer and give it this scipt (replace cat with the name you gave the object)--->
setInterval(catchase, 5);
// call the catchase function every 5 ms
function catchase() {
// set x, y for cat closer to x, y of mouse
cat._x = cat._x + (_xmouse - cat._x)/100;
cat._y = cat._y + (_ymouse - cat._y)/100;
// test if x,y of mouse intersects cat
if (cat.hitTest(_xmouse, _ymouse, true )) {
// if it does, display a you lose message
cat.nextFrame();
// and change the name of the cat instance so
// it no longer follows the mouse
setProperty(cat, _name, "youLoseMessage");
}
// refresh screen
updateAfterEvent();
}
3) Double click on the movie clip you made and make a keyframe in the timeline, in the new frame delete the image and replace it with text saying 'you lose'
4)make a new layer and give it this script-----> stop();
making your mouse a pen thing
1) Open flash (if you dont know how to stop reading......now!)
2) add this script to flash and you done! its really easie but the final product is simple and kinda usless as well
_root.onMouseMove = function() {
_root.lineStyle(1, 0xFF0000, 100);
_root.lineTo(_xmouse, _ymouse);
updateAfterEvent();
}
Changing colour of the line
1) Replace the FF0000 part of the script with another colour code such as 0000CC = blue
"these codes can be found when you add colours to these kind of messages"\
RPG Inventory
This tutorial covers making item slots for a walkaround RPG.
1) Add this script to your first frame (you only need to put everything on one layer)
--->
currentslotnum = 1;
stop ();
function addToslot (item) {
if (!item.found) {
item._x = eval ("itemSlot" + currentslotnum)._x;
item._y = eval ("itemSlot" + currentslotnum)._y;
item.found = true;
currentslotnum++;
}
}
2) On the stage draw what you want to be the items that can be picked up, make them movie clips and give them the following script
---->
onClipEvent (enterFrame) {
if (_root.character.hitTest (this)) {
_root.addToslot (this);
}
}
(character = The name of your character, so it can be changed depending on what you call it)
3) Draw what you want to be your character, make it a movie clip and give it the following script. Also name it in the propertey inspecter "character" ,without speech marks of corse.
---->
onClipEvent (load) {
moveSpeed = 19;
}
onClipEvent (enterFrame) {
if (Key.isDown (Key.RIGHT)) {
this._x += moveSpeed;
} else if (Key.isDown (Key.UP)) {
this._y -= moveSpeed;
} else if (Key.isDown (Key.DOWN)) {
this._y += moveSpeed;
} else if (Key.isDown (Key.LEFT)) {
this._x -= moveSpeed;
}
}
(This is a very very basic script but you can change the speed by altering the number in red)
4) Now draw your item 'holders' ,they could be rectangles (with no fills works best) and make them movie clips. If you hade 1 item that could be picked up only make one box but if you have two items that could be picked up make two boxes and so forth.. Now give the box(s) the names itemSlot1 changing the number for every box eg: itemSlot1, itemSlot2 ---> Dont forget to right itemSlot like this ---> itemSlot
5)And now your done!
EXTRA---> Arrow keys to move and 'walk over' items to 'collect' (if you pick up 'axe' first it will go into item slot 1 but if you pick up 'sword' first it will go into item slot 1, there are no set slots for items)
EG= http://haze.voodoolabs.net/inventory.swf
Using a Hit Test to 'goto' Another Keyframe
1) In flash draw a image that you want to be your character and convert it to a MC (movie clip)
2) Name the character guy for now in the properties inspector and give it this script---->
onClipEvent (load) {
moveSpeed = 19;
}
onClipEvent (enterFrame) {
if (Key.isDown (Key.RIGHT)) {
this._x += moveSpeed;
} else if (Key.isDown (Key.UP)) {
this._y -= moveSpeed;
} else if (Key.isDown (Key.DOWN)) {
this._y += moveSpeed;
} else if (Key.isDown (Key.LEFT)) {
this._x -= moveSpeed;
}
}
3) Create the object that when it is hit by the 'guy' goes to another keyframe make it a MC and give it this script---->
onClipEvent (enterFrame) {
if (_parent.guy.hitTest (this)) {
_parent.gotoAndStop("inn");
}
}
|
|
|
|
