Saturday 30th January, 2010
Before I wrote this tutorial I used google to search for a droptarget tutorial but I found none. So I decided to make some research on it and it worked for me.
In this tutorial you will learn how to make a drop and drag with drop target enabled. This can help you in designing you flash game.
Step 1
Create a new flash document. Then make two (2) layers namely “actions” and content”
Step 2 – The Drag Movie Clip
Make the object you want to drag for my case I made a simple rectangle with the following properties Width -89.9 Height-38.8 a yellow fill, and a text in it “one”. Select the whole thing and from Modify > Convert to Movie Clip, then select movie in the movie clip dialog. Then click ok.
When you have finish you click your movie clip and from property inspector bar click and change the instance name to “mydrag_mc”
That’s all about the drag movie clip. Now let’s proceed to the drop target.
Step 3 - The Drop Target
This will be the item that you will drag your movie clip to.
In my case I made a rectangle with the following properties
Width-110.0
Height-106.1
With a black background colour and a white text on it “1”.
Now when you’re done select the whole thing and convert it to a movieclip with the instance name of “mytarget_mc”
Step 4 – The Dynamic Text
This dynamic text will be given a variable that when we drag our object into the drop target it will display a message like “you have drop something” or “correct answer”.
Now take the Text Tool (A) and from the property inspector bar choose dynamic text drag a wide dynamic text box with the following properties.
Width-249.3
Height-38.8
Fill colour-red (#FF0000) then give the variable “showresult"
Save your work.
(Final) Step 5 – ActionScript
Now we our going to add some actoinscript that will really make our drag and drop target work.
Click on the actions layer we made and press f9 to bring up the actionscript menu.
Copy and paste the following code:
mydrag_mc.
this.startDrag(false);
};
mydrag_mc.
this.stopDrag();
if (eval(this._droptarget) == mytarget_mc){
mydrag_mc._visible = false;
showresult = "Correct Answer!";
}
}
Test your movie
Now you can see your drop target working for you!!!! lol
How to Make a Simple Working Drop Target in Flash
VIDEO PLAYER IN FLASH
The first thing you need to do is convert a QuickTime video file (MOV) to a Flash video file (FLV). You may use any video converter to do this.
The next thing is to create a new flash document.
From the property bar Then make set the page properties as follows-
Width-360
Height-240
Adding the video player
To add the video player from windows>click components>Then from the drop down menu of FLV Playback – Player 8 you will see FLVPlayack. Click it and drag unto the stage. Centralize it to the stage.
To centralize the FLVPlayback to the stage.
Click on the FLVPlayack and on the property are enter these settings]
Width-360
Height-240
X-0
Y-0
With the new component still selected on the Stage, select Window > Component Inspector to open the Component inspector.
In the Component inspector's Parameters tab, click the contentPath parameter.
Click the magnifying glass icon that appears next to it.
In the Content Path dialog box, enter the file name of the video you converted or browse and locate it and click OK.
Still in the Component inspector, set the autoRewind parameter to false.
Save your work.
Now test your document. Ctrl+Enter.
HOW TO MAKE A CHARACTER MOVE ON KEY PRESS
First of all setup you character and convert to a movie clip then select your character and then press F9 to open the action scripts menu and type in these.
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
_x--;
}
if (Key.isDown(Key.RIGHT)) {
_x++;
}
if (Key.isDown(Key.UP)) {
_y--;
}
if (Key.isDown(Key.DOWN)) {
_y++;
}
}
Note test your movie.
BASIC TWEENING
This short tutorial will show you how to make a basic tweening. In my case I used a rectangle tool.
First draw a big rectangle with width -300 and height-160.
Select your rectangle and rich click on frame 5 press create motion tween. Click your rectangle and move it from it original position.
Now test your movie and see how it would look like.
HOW TO MAKE A CHARACTER BOUNCE USING ACTIONSCRIPT
First of all setup you character and convert to a movie clip. And give your object instance name myBOUNCE_mc. Then create another layer but renamed it to actions layer. Click on the first frame of your actions layer and press F9.
Type in these on your action script menu.
import
mx.transitions.Tween;
import
mx.transitions.easing.*;
new Tween
(myBOUNCE,"_y",Bounce.
easeOut, myBOUNCE._y,
280,5,true);
To change your direction and angle. You can change the y axis to x.
Then the code will look like this.
import
mx.transitions.Tween;
import
mx.transitions.easing.*;
new Tween
(myBOUNCE,"_x",Bounce.
easeOut, myBOUNCE._x,
400,5,true);
You’re done test your movie!
HOW TO MAKE A DRAG AND DROP IN FLASH
First create a new flash document. Then make the character you want to drag and drop. Convert it to a movieclip and then on the property bar make the instance name.
Myobject_mc
Click on the movieclip and copy these actionscript into it.
Myobject_mc.onPress = function(){
startDrag(this);
}
Myobject_mc.onRelease = function(){
stopDrag();
}
HOW TO MAKE A CUSTOM MOUSE CURSOR IN FLASH
Step 1
Draw how you would like the shape of your cursor to be.
Step 2
Select the whole document and from Modify click convert to symbol
Choose movie clip and click ok
The on your property instance name type
Cursor_mc
Step 3
Insert a new layer untop of your layer 1 rename it to actions
Click on frame 1 of the layer and press F9
Step 4
Type these into the actions script windows
cursor_mc.startDrag("true")
Mouse.hide();
That’s all you need to do.
HOW TO MAKE A RAIN EFFECT IN FLASH
Step 1
Open a new Flash document.
Select an appropriate stage size. I used 550 x 200 pixels. The size of the stage does not affect the final result.
Step 2
Select Insert > New symbol. Give your symbol an appropriate name e.g. rain. And check the type movie clip the click ok.
Now select the Oval tool (O) and drag a thin oval shape onto the stage. I used light blue colour, but you whatever colour you want. Your shape should look something like below:
\
Return to the main timeline by clicking the back arrow or on the scene 1 button on the timeline.
**Make sure your shape is as close to the registration point as possible. This creates a nicer rain drop effect. If your shape is too far away from the registration point it makes your rain effect look odd, as it creates large gaps between rain drops. You can test this out later, if you wish.
Step 3
On the library panel right click on your movie clip and select linkage. If you can’t see the library panel select Window > Library or Ctrl + L. Give the identifier the name “rain_id” and check export for actionscript and export in first frame.
Step 4
On the timeline right click on the 1st frame of layer 1 and select Actions. And enter the following code:
1. var rain_speed:Number = 10;
2. var rain_density:Number = 50;
3. for (i=0; i<=rain_density; i++) {
4. _root.attachMovie("rain_id", "rain"+i, _root.getNextHighestDepth(), {_x:Math.random()*Stage.width, _y:Math.random()*Stage.height});
5. }
6. makeRain = function () {
7. for (i=0; i<=rain_density; i++) { _root["rain"+i]._y += rain_speed; if (_root["rain"+i]._y>Stage.height) {
_root["rain"+i]._y = 0;
}
8. }
9. };
10. setInterval(makeRain, 20);
**Lines 1-2, sets the speed and density of the rain. So if you want the rain to fall faster you can increase the number. The same with density, if you want more rain drops to fall on the stage then you can increase the number.
Lines 3-5, attaches the rain drop you created dynamically on the stage by using the attachMovie function. This function also randomly places your rain drop within your current stage boundaries. The For loop sets the number of rain drops you want on the stage.
Lines 6-8, the makeRain function repeatedly performs a specific task. This task is for each rain drop to be set to speed of the rain drop of the variable rain_speed. The rain drop is limited to the height of the stage, so if a rain drop goes over the bottom of the stage it will return back to the top.
Line 10, the setInterval function called the function makeRain every 10 miliseconds. This function makes the rain drops become more randomise as the object is call at periodic intervals, but you could also use the following code:
_root.onEnterFrame =function(){
makeRain()
}
Step 5
Test your movie clip Ctrl + enter.
HOW TO MAKE A DIGITAL CLOCK IN FLASH
Step 1 Open your flash 8 and click on new flash document.
Step 2 Click on the text tool is the one with the letter "A" on it make sure is on static text and type the following "time", "today", and "date" TIME TODAY DATE
Step 3 Now click on the text tool again but this time make sure is on dynamic text instead of static text and just drag it next to each of the static text. If your property toolbar is not on click on Windows>Property>Properties or use the shortcut Ctrl+F3. Step
4 After you are done with the dynamic text now its time to give each one of the variable names the way you do this first you select the first dynamic box the one that is right next to the word "time" then you go to the properties window and where is says var type the following "nTime" Step
5 Follow that step again for the next two boxes. On dynamic box that says "Today" name that one "displayDay" and on the one that says "Date" name that one "displayDate" remember you have to place the variable on the dynamic box not on the static text. Step 6 The next step click on the first static box and convert it to a symbol to do this select it and press (F8) make sure movie clip is clicked and name it whatever you want. Step 7 Now select the other two dynamic boxes and make them both into one symbol. not seperate symbol make sure to make both of them one symbol. and name it whatever you want. Step 8 Now select the top symbol the one that is by itself then
press (F9) this will bring up the actionscrip windo type the following
onClipEvent (enterFrame) { myTime = new Date(); nSeconds = myTime.getSeconds(); nMinutes = myTime.getMinutes(); nHours = myTime.getHours(); if (nHours>=12) { ampm = "pm"; } else { ampm = "am"; } if (nHours>=13) { nHours = nHours-12; } if (length(nMinutes) == 1) { nMinutes = "0"+nMinutes; } if (length(nSeconds) == 1) { nSeconds = "0"+nSeconds; } nTime = nHours+":"+nMinutes+":"+nSeconds+" "+ampm; } Step 9 Now select the on the other symbol which has both the "today" and "date" and open the actionscript window again if its not already open and type the following. onClipEvent (load) { mon = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"]; weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; } onClipEvent (enterFrame) { now = new Date(); nDay = weekdays[now.getDay()]; nMonth = mon[now.getMonth()]; nDate = now.getDate(); nYear = now.getFullYear(); displayDate = nMonth+" "+nDate+", "+nYear; displayDay = nDay; }
Step 10
If you press (Ctrl + Enter) you will see your movie clip working it should be displaying the time, todays date, as well as the date of the month if it does not re read this tutorial carefully and see if you did somethign wrong. here is what mine looks like. dont mind the graphics is just a little something i added is not important. and also dont go away next i will explain the code. TIME CODE: onClipEvent (enterFrame) { This part of the code loops the actions contained within it every time the movie is accessed. myTime = new Date(); This creates the Date Object that will be used to retrieve the information from your system. nSeconds = myTime.getSeconds(); nMinutes = myTime.getMinutes(); nHours = myTime.getHours(); This defines the variables for seconds, minutes, and hours, and retrieves the information from your system and incorporates it into the Flash file. if (hours>=12) { ampm = "pm"; } else { ampm = "am"; } This if statement allows for the switch of am for pm when the hour is greater than or equal to 12. if (hours>=13) { nHours = nHours-12; } Because Flash displays time in the 24 hour system instead of the 12 hour system, this if statement is used to subtract 12 from the hour if the hour is greater than or equal to 13 ( 13 – 12 = 1). if (length(nMinutes) == 1) { nHinutes = "0"+nMinutes; } if (length(nSeconds) == 1) { nSeconds = "0"+nSeconds; } Both of these if statements are here to add a “0” in front of the seconds and minutes if their length is equal to one, meaning that the variable is less than 10. nTime = nHours+":"+nMinutes+":"+nSeconds+" "+ampm; } This displays the time using the dynamic text box named “nTime” that you created. DATE CODE: onClipEvent (load){ This performs the actions contained within the brackets only once, when the movie clip is loaded. This is usually used to define variables. mon = ["Jan","Feb","Mar","Apr","May","Jun","Jul", "Aug","Oct","Nov","Dec"]; weekdays = ["Sunday","Monday","Tuesday", "Wednesday","Thursday","Friday","Saturday"]; These are the arrays that are used for the rest of the code. Arrays are zero-based, so when the following code outputs a 0, January will display, 1 = February, etc… You can edit these as necessary. now = new Date() } Again, this creates the Date Object that will be used to retrieve the time information. onClipEvent (enterFrame){ Again, this loops the animation and performs the actions every time the movie is accessed. nDay = weekdays[now.getDay()] nMonth = mon[now.getMonth()] nDate = now.getDate() nYear = now.getFullYear() These are used to retrieve the information. The arrays are contained within brackets “[ ]”. displayDate = nMonth+" "+nDate+", "+nYear displayDay = nDay }
Input Text Interactivity
In this lesson you will learn how to use some basic actionscript, dynamic text, and input text. First open a new flash document . Click on the Text Tool (A) then from your property bar below your page select static text. Click on the stage and Type something like "Enter Your Name Below" then Click on the (A) Tool again and then Choose Input text - Click and drag a text box and then on your property bar > locate var Put myName on the var box. Then click Auto Kern Note the variable myName is what you are going to be using in your dynamic text box that will display the entered name in the input text box. Now its time to add a button that when click will move to the next frame where you have the content of your application or game. From WIndows > Components > Click the + sign on the User Interface and locate Button. Click and drag out the button to the stage. And then from Windows again > Choose Components Inspector then click on your button and on the Componenets Inspector dialog box choose > label change the "button label name" to submit. Then select your button again and on the property inspect click on and type submit_btn
Its time to add some actionscript that when the user click the submit button it
will move to the next page. Now on the time line layer where you have Layer 1
click the plus (+) sign to add a new layer and name it "actions" on the timeline
of actions layer you have created click frame 1 and press f6 to insert a new frame
on top of frame your layer 1.
Then press F9, this will bring up the action script menu
type in the text below in the actionscript menu
stop();
submit_btn.onRelease = function(){
gotoAndStop(2);}
Then click on your layer 1 and after the frame 1 in the timeline click and press F6 this inserts a new frame after frame one.
Take the text tool and choose static text from your property inspector dialog box.
Click on the stage and type something like "Welcome"
Take the Text Tool again (A) and choose dynamic text click and drag a text box then on your property inspector, remember the variable you gave to the other input box.
On the var box put myName.
You are done now test your movie and try to type your name on the first box and click submit.
Snow Effects In Flash
Look for a christmas snow background image if you dont have one goto google and look for a snow background, then its time to add a falling snow fit your snow background to your page and lock that layer up. By cicking on the Key sign on the timeline.
Click on the + sign and add a new layer and rename it snow.
Now from the toolbox choose the paint brush and choose white colour from your property tool box.
Then still from the toolbox brush size toolbox choose the smallest size and then make some dotted points all over the stage when you are satisfy then click on the snow layer (this will select all the snow your made using the paint brush) then from Modify Menu > Convert to Symbol - Now on the name box put SNOW. choose movie clip then make the registration point center > click ok.
From the library (if not present goto properties menu bar and then click library) double click on the "snow" this takes you into the snow mc your created now select all and duplicate the snow but you have to take it up ontop of the snow you created. now to make sure the speed of the snow is not too fast click on frame 40 and then press F6 to insert a frame. Then right click on Frame 40 and Click - Create Motion tween
Go back to Scene 1. Now test your movie
How to Make a Calculator Application in Flash 8
How to Make a Simple Calculator Application in Flash 8
By Otobong Ini Archibong – Wednesday, January 27, 2010
This tutorial will help you understand some basic mathematical operations in flash. With this tutorial you will learn how to fix a function to a button and also how to make a calculator that function well.
Step 1 – DESIGN
First setup your page design you can make the layout page to be
W-200
H-300
The give the page background yellow or any other colour you may wish.
Step 2 –TEXT
Make a static with the label "Addition" and then make another text box but this time an input text box with the instance name of add1_txt place it just after the addition static text you made. Then make another static text box with the addition sign (+) "+" then just after the static text box you’ve just made with the label "+" make another input text box you can copy the former one you made and paste but remember to change the instance name to add2_txt now after you have done this make a static texbox with the equal to sign "=" and place it after the input text box "add2_txt".
Step 3(a) – BUTTON
Now its time to add the button that when clicked will display the result in a dynamic text box that we will make in the next lesson.
From windows goto components from the dialog box that appears choose UI Components then drag a button unto the stage and from windows again goto components inspector. Click you button and on the components inspector look for "label" change the label "button" to equal. Save your work!
Step 3 (b) – CODING THE BUTTON
Click the button you’ve just made and press F9 to bring up the action script windows copy and paste these.
//otodeluxe flash calculator © 2010
on (click) {
with (_parent) {
additiontotal_txt.text = Number(add1_txt.text)+Number(add2_txt.text);
}
}
Step 4 – RESULT DYNAMIC TEXT BOX
We are now done with the necessary thing. Its time to add a dynamic text box that will display the answer. Click the text tool (A) and drag a wide dynamic textbox and give the instance name "additiontotal_txt"
That’s all you wee need to make our calculator work but note that these was only for the addition. Test your work!!!
To make a multiplication, subtraction, division etc.
Note that you will need to change the actionscript. Below is how its going to be for
Subtraction
//otodeluxe flash calculator © 2010
on (click) {
with (_parent) {
additiontotal_txt.text = Number(add1_txt.text)-Number(add2_txt.text);
}
}
------------------------------------------------------------------------------------------------------------
You can see that in the above code the only thing we have change is the (+) sign to (-) so repeat the same step but change it to (*) for multiplication (/) for division.
-----------------------------------------------------------------------------------------------------------
All Right Reserved
© 2010.
www.otodeluxe.blogspot.com
PLEASE TO SUPPORT OUR BLOG
SEND CASH OR DONATION TO THE ADDRESS BELOW
164 Oron Road,
Uyo
Akwa Ibom State
P.O.Box 489 Uyo,
NIgeria
Popular Posts
-
-Author: Otobong Click here to view the swf sample This is a very straightforward tutorial. You will be making a twinkling... -
-BY OTO In this tutorial I will show you how to make some eye catching Iphone like buttons in flash. With this technique you will be able ... -
In this tutorial we will make an interactive flash menu that you can use on your website, flash games and applications. Step 1 Open a new f...
-
Click here to view the final result. Introduction This could be useful for your flash games, applications etc. Just some view steps ... -
We are going to make three eye-catching stunning colorful buttons in flash, which you can use for your website, flash games and misc. You ... -
In this tutorial you will learn how to make a complete character movement which will include rotation and hit test for your flash games char... -
Within 15minutes or so, depending on your reading speed you will be able to make classic style navigation using Flash Professional. Previ... -
This will be the most interactive and remarkable lesson on flash menu, that you have ever learnt. We are going to make a flash menu that ...
Posts
