One of the most frequent questions I have been recieving How do you import audio and preview it simply by moving the playhead. This is very simple, first of all, import the audio that you want to the library. Rename layer 1 audio. Drag the audio file from the library to the stage on the first keyframe. insert another key frame where the audio ends, if the audio has ended the wave line will just be a straight line. Once you have established the audio ending point, click on the first keyframe of the audio layer, and in the properties inspector, you will see an option that says sync, click on the drop down menu and set it to stream. Click on the last keyframe and change the sync option to stop, this is so the audio will stop playing when it reached the specified keyframe.
Now move the playhead along the timeline and the audio will play at wherever the playhead is.
Learn how to use Adobe Flash with all the free tutorials. Game Making, Animating, Cartoon Design, Web Design and much more...
How to make your character walk with the arrow keys
Insert an additional layer so that you will now have two layers; name the top layer actions, and the bottom layer character.
On the first frame of the character layer, draw out your character facing to the left of the stage. Convert it into a movie clip and name it stand still. Right click on stand still in the library and select duplicate, name the duplicate walk left. Double click on the walk left symbol in the library and animate him walking right. IMPORTANT NOTE: Don’t actually make him move to the right; just animate the legs as if he was walking right.
When you have done that, click back to the main timeline.
Now right click on the walk left movie clip in the library and name the duplicate walk right.
Double click on the walk right movie clip to enter it timeline and then select modify from the top menu options, transform and flip horizontal. Now click back to the main timeline.
On the first frame of the character drag an instance of the stand still move clip to the centre of the stage, give it an instance name of standStill. Double click on this move clip and insert a blank keyframe at frame 2. Then drag an instance of the walk left move clip to the centre of the stage making sure it is in the same position as the stand still move clip was. Insert another blank keyframe where, then drag an instance of the walk right movie clip from the library and position in the centre of the stage, as before make sure this is in the same position the walk left was, only is will be facing the opposite direction.
Insert a new layer, and name it actions, right click on the first frame and select actions, add the following code:
Stop();
Now click back to the main timeline.
Right click on the first frame of the actions layer, and select actions, add the following code:
//if the left arrow key is down, go to frame to of this movie clip and also move left.
standStill.onEnterFrame = function() {
if(Key.isDown(Key.LEFT)) {
this._x+=4;
this.gotoAndStop(2);
}
else if(Key.isDown(Key.RIGHT)) {
this._x-=4;
this.gotoAndStop(3);
}
//if none of the above is happening, stop on frame 1
else this.gotoAndStop(1);
}
Well done, that is all you need to do.
As I always say: any questions Email me at: learn_flash_pro_makeitsimple_now@hotmail.com
On the first frame of the character layer, draw out your character facing to the left of the stage. Convert it into a movie clip and name it stand still. Right click on stand still in the library and select duplicate, name the duplicate walk left. Double click on the walk left symbol in the library and animate him walking right. IMPORTANT NOTE: Don’t actually make him move to the right; just animate the legs as if he was walking right.
When you have done that, click back to the main timeline.
Now right click on the walk left movie clip in the library and name the duplicate walk right.
Double click on the walk right movie clip to enter it timeline and then select modify from the top menu options, transform and flip horizontal. Now click back to the main timeline.
On the first frame of the character drag an instance of the stand still move clip to the centre of the stage, give it an instance name of standStill. Double click on this move clip and insert a blank keyframe at frame 2. Then drag an instance of the walk left move clip to the centre of the stage making sure it is in the same position as the stand still move clip was. Insert another blank keyframe where, then drag an instance of the walk right movie clip from the library and position in the centre of the stage, as before make sure this is in the same position the walk left was, only is will be facing the opposite direction.
Insert a new layer, and name it actions, right click on the first frame and select actions, add the following code:
Stop();
Now click back to the main timeline.
Right click on the first frame of the actions layer, and select actions, add the following code:
//if the left arrow key is down, go to frame to of this movie clip and also move left.
standStill.onEnterFrame = function() {
if(Key.isDown(Key.LEFT)) {
this._x+=4;
this.gotoAndStop(2);
}
else if(Key.isDown(Key.RIGHT)) {
this._x-=4;
this.gotoAndStop(3);
}
//if none of the above is happening, stop on frame 1
else this.gotoAndStop(1);
}
Well done, that is all you need to do.
As I always say: any questions Email me at: learn_flash_pro_makeitsimple_now@hotmail.com
How to make a website
We will start by inserting the required layers, insert 4 additional layers.
In order from the bottom layer to the top layer, sections, title, stitle, navigate and actions(the order does not matter too much, this is the order I used).
Select modify from the top menu bar, than select the option document, change the background colour(preferably not white).
We will now insert all the required keyframes and frames needed to make the website.
Actions- Insert a frame at frame 4
Navigate- Insert a frame at frame 4
Stitle- Insert a keyframe in frames 2, 3 and 4 leaving you with 4 key frame in the layer.
Title- Insert a frame in frame 4
Sections- Insert a keyframe at frames 2, 3 and 4 leaving you with 4 keyframes.
Select the window option from the top menu bar, then select the option components.
Under the user interface section, double click on the button option.
Now there will be a on the stage and one in the library. Drag the button to the left of the stage(this will be so the user can navigate between pages).
NOTE: Make sure the button is on the navigate layer.
When you have positioned it where you want it, select it, then press:
Ctrl C
To Copy the Button
Ctrl Shit V
To Paste the Button In Place.
Using the arrow keys, position the copied button underneath the previous button(you may put this next to your button, depending on your layout).
Using the same method, ctrl c and ctrl sift v, put another button underneath the copied button. Now copy and paste one more under the button you just pasted, you should now be left with for buttons.
Now we don’t want the button name to be button obviously, however, we change the name using a different method when using a compiled button.
Select top button, now open up the properties inspector, then click on the tab labeled parameters. Just under icon, there will be a box that says label in it, next to it there will be a box that says button, change the box that says button to Home.
Give it an instance name of homepage. (the main page for a website)
Now select the bottom underneath the home button, and label it Tutorials, give it an instance name of tutorials.
Select the button under Tutorials and label it Tips, give it an instance name of tips also.
Select the button underneath tips and label it Did You Know? Give it an instance name of dyk.
We will now apply all the actions that will be required for the website.
Right click on the first frame in the actions layer, and select the option actions.
On the first line type in:
stop();
tutorials.onRelease = function() {
gotoAndStop(2);
}
tips.onRelease = function() {
gotoAndStop(3);
}
dyk.onRelease = function() {
gotoAndStop(4);
}
homepage.onRelease = function() {
gotoAndStop(1);
}
Now lets put the sections together. On the second keyframe in the sections layer, write out something like, “Welcome to my website”.
On the third keyframe of the sections layer write out something like “Great tips to get you started”.
On the fourth frame of the sections layer write out something like “Did you know http://www.learnflash8pro.blogspot.com/ is a great site for learning flash”.
Now for the first frame of the title layer, we want to insert the name of a website, for example, I would insert the text Learn Flash 8 Professional. This title will appear on every frame so make sure that it does not interfere with any of the other pages.
Last but now least the Stitle layer, this is to simple name the current page, so for example on the first frame you would write something like, homepage, the second would say tutorials and so on.(it is basically to tell the user what the current page features).
And that is how you make a website using flash, add some animations to make it look a bit better, it's always good to have an attractive website.
In order from the bottom layer to the top layer, sections, title, stitle, navigate and actions(the order does not matter too much, this is the order I used).
Select modify from the top menu bar, than select the option document, change the background colour(preferably not white).
We will now insert all the required keyframes and frames needed to make the website.
Actions- Insert a frame at frame 4
Navigate- Insert a frame at frame 4
Stitle- Insert a keyframe in frames 2, 3 and 4 leaving you with 4 key frame in the layer.
Title- Insert a frame in frame 4
Sections- Insert a keyframe at frames 2, 3 and 4 leaving you with 4 keyframes.
Select the window option from the top menu bar, then select the option components.
Under the user interface section, double click on the button option.
Now there will be a on the stage and one in the library. Drag the button to the left of the stage(this will be so the user can navigate between pages).
NOTE: Make sure the button is on the navigate layer.
When you have positioned it where you want it, select it, then press:
Ctrl C
To Copy the Button
Ctrl Shit V
To Paste the Button In Place.
Using the arrow keys, position the copied button underneath the previous button(you may put this next to your button, depending on your layout).
Using the same method, ctrl c and ctrl sift v, put another button underneath the copied button. Now copy and paste one more under the button you just pasted, you should now be left with for buttons.
Now we don’t want the button name to be button obviously, however, we change the name using a different method when using a compiled button.
Select top button, now open up the properties inspector, then click on the tab labeled parameters. Just under icon, there will be a box that says label in it, next to it there will be a box that says button, change the box that says button to Home.
Give it an instance name of homepage. (the main page for a website)
Now select the bottom underneath the home button, and label it Tutorials, give it an instance name of tutorials.
Select the button under Tutorials and label it Tips, give it an instance name of tips also.
Select the button underneath tips and label it Did You Know? Give it an instance name of dyk.
We will now apply all the actions that will be required for the website.
Right click on the first frame in the actions layer, and select the option actions.
On the first line type in:
stop();
tutorials.onRelease = function() {
gotoAndStop(2);
}
tips.onRelease = function() {
gotoAndStop(3);
}
dyk.onRelease = function() {
gotoAndStop(4);
}
homepage.onRelease = function() {
gotoAndStop(1);
}
Now lets put the sections together. On the second keyframe in the sections layer, write out something like, “Welcome to my website”.
On the third keyframe of the sections layer write out something like “Great tips to get you started”.
On the fourth frame of the sections layer write out something like “Did you know http://www.learnflash8pro.blogspot.com/ is a great site for learning flash”.
Now for the first frame of the title layer, we want to insert the name of a website, for example, I would insert the text Learn Flash 8 Professional. This title will appear on every frame so make sure that it does not interfere with any of the other pages.
Last but now least the Stitle layer, this is to simple name the current page, so for example on the first frame you would write something like, homepage, the second would say tutorials and so on.(it is basically to tell the user what the current page features).
And that is how you make a website using flash, add some animations to make it look a bit better, it's always good to have an attractive website.
How to make a banner in flash
In this tutorial you will be making a website banner, which is commonly used for advertising. And, it is super easy to make a banner in flash!
Here is what you will achieve:
You will get the banner to appear, and when the user clicks on the banner, it will take them to most likely a website link.
Start by drawing out a rectangle using the rectangle tool(this is how big your banner will be).
Using the text tool(static text), draw out a text box, and insert some text relating to the site, and possibly an image! For this banner it will be “Learn Flash 8 Professional”.
After you have added text to the banner, feel free to add anything else to make it more appealing. Convert the banner into a button, and name it button. Give the banner an instance name of banner_btn.
Now insert a new layer and name it Actions.
Right click on frame 1 of the actions layer and select actions. On the first line type in:
banner_btn.onRelease = function() {
getURL("http://www.learnflash8pro.blogspot.com/");
}
What this does is when the user releases the mouse on the banner it directs them to the website input in the actionscript panel. The only thing you would need to change would be the URL of the website(the URL is inside the brackets).
And that's how to make a banner in flash!
Here is what you will achieve:
You will get the banner to appear, and when the user clicks on the banner, it will take them to most likely a website link.
Start by drawing out a rectangle using the rectangle tool(this is how big your banner will be).
Using the text tool(static text), draw out a text box, and insert some text relating to the site, and possibly an image! For this banner it will be “Learn Flash 8 Professional”.
After you have added text to the banner, feel free to add anything else to make it more appealing. Convert the banner into a button, and name it button. Give the banner an instance name of banner_btn.
Now insert a new layer and name it Actions.
Right click on frame 1 of the actions layer and select actions. On the first line type in:
banner_btn.onRelease = function() {
getURL("http://www.learnflash8pro.blogspot.com/");
}
What this does is when the user releases the mouse on the banner it directs them to the website input in the actionscript panel. The only thing you would need to change would be the URL of the website(the URL is inside the brackets).
And that's how to make a banner in flash!
Action Script 2 - Important Note
Throughout these tutorials we have been applying most of the AS2 to the symbols and frames. This was to get you used to the Actionscript and become familiar with it, but from now on, we will be applying the AS2 to mainly the frames.
WHY? Simply because it is much easier, and when editing the fla. file, all the action script is kept neatly on the one layer.
WHY? Simply because it is much easier, and when editing the fla. file, all the action script is kept neatly on the one layer.
Subscribe to:
Posts (Atom)