Get tutorials on EMail

Navigation

Create a Dynamic Football field with Adobe Flash and ActionScript

(36 votes)

Written by Daniel H

I got a call from a guy at a locat TV Studio asking me for some kind of application that they could use to show of tactics of football maches. This is what i came up with (with some help from a buddy).

Step One

Get yourself a football field background image / scheme / matrice.
If you cant find one, download mine Football field background.

* Note * For the purpose of projecting the SWF on the plasma screen the image should be 800x600.

Step Two

Start Flash, create a New Document >> Ctrl + N and give it these properties :

Step Three

Rename the first layer "field" and create two more layers calling them : "buttons" and "actions" like in the image below :

Lock the "actions" and "buttons" layers and select the "field" layer by clicking it.

Step Four

Import your Field Background Image (or the one i provided you by) File > Import > Import to Stage (Ctrl +R) .
Next convert it to a MovieClip Ctrl + R and name it "field_bg".
If the image is not already centered you should center it.
Now you have a flash file with a FootBall field MovieClip.

Step Five

Now we will create the Virtual Players.

Select the Oval Tool (O) and create a small circle like the size of a player in the left-down side of the field just (hold down shift when your dragging the circle for proportion constrainsts). Give it whatever color you like, im using DARK RED.
If you dont want to modify the ActionScript your circle should have this SIZE (Width = 24px, Height = 24px).
Again for using the same ActionScript you should also position the circle like me (X = 6, Y = 612).
This is the way your players will look like, so you can let your imagination work here.
Now select the shape you created and convert it to a MovieClip (Ctrl + R). Give it whatever name you want.

Step Six

The Red Team

Now that you have your first player, we should make 10 more.

Select the MovieClip, copy it (Ctrl + C) and paste it in place (Ctrl+Shift+V). Now hold down the Shift button and nudge the newly created MovieClip to the RIGHT by pressing the the RIGHT arrowkey 3 (three) times. By holding down the Shift Key you will nudge the MC (MovieClip) 10 pixels at a time.

Now you have 2 movie clips (2 players), Select them both by clicking each while holding down the ShiftKey. Copy and Paste them in Place, then nudge them again to the RIGHT by holding down the shiftkey and pressing the arrowkey 3 times untill you have 4 Players. Repeat this process untill you have 11 players on the LEFT down side of the FootBall field.

The Blue Team

Select the Oval Tool (O) and create a small circle like the size of a player in the left-down side of the field just (hold down shift when your dragging the circle for proportion constrainsts). Give it whatever color you like, im using DARK BLUE for the other team.
If you dont want to modify the ActionScript your circle should have this SIZE (Width = 24px, Height = 24px).

Again for using the same ActionScript you should also position the circle like me (X = 767, Y = 612).
Select the shape you created and convert it to a MovieClip (Ctrl + R). Give it whatever name you want.
Select the MovieClip, copy it (Ctrl + C) and paste it in place (Ctrl+Shift+V). Now hold down the Shift button and nudge the newly created MovieClip to the LEFT by pressing the the LEFT arrowkey 3 (three) times. By holding down the Shift Key you will nudge the MC (MovieClip) 10 pixels at a time.

Now you have 2 movie clips (2 players), Select them both by clicking each while holding down the ShiftKey. Copy and Paste them in Place, then nudge them again to the LEFT by holding down the shiftkey and pressing the arrowkey 3 times untill you have 4 Players. Repeat this process untill you have 11 players on the RIGHT down side of the FootBall field.
Please pay attention and great detail to the positioning of the Players, thus you will be using the same ActionScript we are.
You should end up with an image like the one below :

Step Seven

Now we need to name each MovieClip (Player) so we can reffer to it in the ActionScript.
Click the first red MC, and give it this instance name "r1", select the second red MC and give it this instance name "r2".
Repeat this project by giving the RED PLAYERS (MC) instances name from 1 to 11.
r1, r2, r3 ... r11 . Check the image below :

Repeat the same process for the BLUE PLAYERS (MovieClips) but use this names "b1" , "b2", "b3" ... "b11".

Step Eight

Now we need to create a reset button. This way you can make the players return to their normal position and start another tactical session.
Lock the "field" layer and UNLOCK the "buttons" one.
Now click on the first frame of the "buttons layer", select the Text Tool (A) and type some text, like "reset" and give it a white fill color. Press escape, and convert this text to a Button Symbol by Pressing Ctrl+R. Give it whatever name you want BUT give it an instance name of "reset".

Now go inside the BUTTON by double clicking it, CLICK once on the "Over" area and add frame (F5) then click the "Down" area and add a frame (F5), then CLICK ONCE on the Hit area an add a KEYFRAME (F6).

The HIT STATE of a button is the CLICKABLE area of that button, so we need to make the WHOLE "reset" text CLICKABLE.
Select the Hit state by click on the keyframe and by using the Rectangle Tool (R) draw a rectangle matching the size of the "reset" text.

It is very important to give Symbols Instance Names if we are going to use them in the ActionScript, so give the BUTTON an instance name of : reset

Step Nine

Now for the ActionScript, LOCK the "buttons" layer and click on the first frame of the "actions" layer.
Now press F9 to bring up the Actions Pannel and paste this code in :

/* Declaring a variable that we will use for the return button */

var Numar:Number = 0;

/* Creating the drag function */

function press() {
if (Numar >= 1){
delete this.onEnterFrame;
this.startDrag();
}
else {
this.startDrag();
}
}

/* Creating the release function */

function release(){
if (Numar == 1){
delete this.onEnterFrame;
this.stopDrag();
}
else {
this.stopDrag();
}
}

/* Creating the Press and Release Actions for each RED TEAM MovieClip Instance*/

r1.onPress = press;
r1.onRelease = release;
r2.onPress = press;
r2.onRelease = release;
r3.onPress = press;
r3.onRelease = release;
r4.onPress = press;
r4.onRelease = release;
r5.onPress = press;
r5.onRelease = release;
r6.onPress = press;
r6.onRelease = release;
r7.onPress = press;
r7.onRelease = release;
r8.onPress = press;
r8.onRelease = release;
r9.onPress = press;
r9.onRelease = release;
r10.onPress = press;
r10.onRelease = release;
r11.onPress = press;
r11.onRelease = release;

/* Creating the Press and Release Actions for each BLUE TEAM MovieClip Instance*/

b1.onPress = press;
b1.onRelease = release;
b2.onPress = press;
b2.onRelease = release;
b3.onPress = press;
b3.onRelease = release;
b4.onPress = press;
b4.onRelease = release;
b5.onPress = press;
b5.onRelease = release;
b6.onPress = press;
b6.onRelease = release;
b7.onPress = press;
b7.onRelease = release;
b8.onPress = press;
b8.onRelease = release;
b9.onPress = press;
b9.onRelease = release;
b10.onPress = press;
b10.onRelease = release;
b11.onPress = press;
b11.onRelease = release;

/* Button reset function */

reset.onRelease = function (){
Numar += 1;

/* Start Experiment with this number for a faster or slower
return of the players to their start positition */

speed = 5;

/* Declaring the RETURN position of the players */

r1.onEnterFrame = function () {
this._x += (6-this._x)/speed;
this._y += (612-this._y)/speed;
}
r2.onEnterFrame = function () {
this._x += (36-this._x)/speed;
this._y += (612-this._y)/speed;
}
r3.onEnterFrame = function () {
this._x += (66-this._x)/speed;
this._y += (612-this._y)/speed;
}
r4.onEnterFrame = function () {
this._x += (96-this._x)/speed;
this._y += (612-this._y)/speed;
}
r5.onEnterFrame = function () {
this._x += (126-this._x)/speed;
this._y += (612-this._y)/speed;
}
r6.onEnterFrame = function () {
this._x += (156-this._x)/speed;
this._y += (612-this._y)/speed;
}
r7.onEnterFrame = function () {
this._x += (186-this._x)/speed;
this._y += (612-this._y)/speed;
}
r8.onEnterFrame = function () {
this._x += (216-this._x)/speed;
this._y += (612-this._y)/speed;
}
r9.onEnterFrame = function () {
this._x += (246-this._x)/speed;
this._y += (612-this._y)/speed;
}
r10.onEnterFrame = function () {
this._x += (276-this._x)/speed;
this._y += (612-this._y)/speed;
}
r11.onEnterFrame = function () {
this._x += (306-this._x)/speed;
this._y += (612-this._y)/speed;
}
b1.onEnterFrame = function () {
this._x += (767-this._x)/speed;
this._y += (612-this._y)/speed;
}
b2.onEnterFrame = function () {
this._x += (737-this._x)/speed;
this._y += (612-this._y)/speed;
}
b3.onEnterFrame = function () {
this._x += (707-this._x)/speed;
this._y += (612-this._y)/speed;
}
b4.onEnterFrame = function () {
this._x += (677-this._x)/speed;
this._y += (612-this._y)/speed;
}
b5.onEnterFrame = function () {
this._x += (647-this._x)/speed;
this._y += (612-this._y)/speed;
}
b6.onEnterFrame = function () {
this._x += (617-this._x)/speed;
this._y += (612-this._y)/speed;
}
b7.onEnterFrame = function () {
this._x += (587-this._x)/speed;
this._y += (612-this._y)/speed;
}
b8.onEnterFrame = function () {
this._x += (557-this._x)/speed;
this._y += (612-this._y)/speed;
}
b9.onEnterFrame = function () {
this._x += (527-this._x)/speed;
this._y += (612-this._y)/speed;
}
b10.onEnterFrame = function () {
this._x += (497-this._x)/speed;
this._y += (612-this._y)/speed;
}
b11.onEnterFrame = function () {
this._x += (467-this._x)/speed;
this._y += (612-this._y)/speed;
}
}

Here is a working example FOOTBALL FIELD FLASH TUTORIAL

Do you find the ActionScript Code horrible ? Or maybe to long ? Well for the drag and drop part you can use only the first part. All the long stuff, that comes after that is used by the RESET button, for the really cool reset of players position.
Thank you for your time, and i hope you enjoyed this tutorial.

You need to Register in order to download the FLA file.

If you have any questions feel free to Contact Us

Dynamic Host Configuration Protocol
DHCP is a network protocol that enables an interface (computer, router, other equipment) to obtain its network setting from a centralized source.
Setting up Windows after install
In this tutorial, I'll try to guide you step by step in adding the utilities mostly recommended after installing a fresh copy of Windows (2000, XP or other).
Artistic curve logo

In this tutorial we will build a very nice artistic curve logo, great for smooth and shiny headers using Adobe Fireworks

Subscribe now via RSS feed and get all the new tutorials

written by Rajeev , August 28, 2007

Hi,
I've gone through your Football field file. The idea is good. But, you've used somany lines of code which you can reduce by using either eval() (This method is supported by AS 3.0) or 'this["r" nmbr];'.

For eg:-
//-----------------------------------------------
var Obj:Object;

for (var nmbr:Number=1; nmbr

written by Rajeev , August 28, 2007

For eg:-
//-----------------------------------------------
var Obj:Object;

for (var nmbr:Number=1; nmbr

written by Rajeev , August 28, 2007

var Obj:Object;
for (var nmbr:Number=1; nmbr

written by Sean , November 15, 2007

Placing all the players on the stage beforehand is a bad idea altogether (ESPECIALLY using eval or referring to them using the associative array syntax).

The players should be created dynamically at runtime via attachMovie(). That way, you could use math to place them instead of having to type in all those numbers.

Your tutorial could be reduced to a fraction of the code you have here.

var playerArray: Array = new Array();
for ( var i:Number=0; i<11; i ) {
var depth: Number = _root.getNextHighestDepth();
var newPlayer: MovieClip = _root.attachMovie( 'bluePlayer_mc', 'bluePlayer' i '_mc', depth, {
_x = 50 * i,
_y = 300,
onPress: press,
onRelease: release
}

playerArray.push( newPlayer );
}

Each player then stores their own original location, and can go back to it with a function on the bluePlayer_mc's timeline. A simple for loop through playerArray can tell all players to return at once. Please stop spreading horrible practices throughout the Flash community.

written by Sean , November 15, 2007

alert('None of these tutorials are any good.');

written by b , December 15, 2007

It would be nice to have a soccer ball graphic.

written by demesis , July 07, 2008

I agree with the line " Please stop spreading horrible practices throughout the Flash community. "
but then you use the foul keyword _root twice plus:
for ( var i:Number=0; i

written by cleon , November 01, 2008

i do no know the name of ihe circle

written by djhugodaniel79 , January 14, 2009

hello im trying to run this program you did. cause im a soccer coach and im trying to look for something to make set plays and teach my kids. kind of a play book i need to know what flash software thank you.

written by coach patrick , February 13, 2009

am very interesting in your coaching information and i will like you to help me to get some skills from you to coach my team and a i will be very happy if i can get a copy from you to use as my coaching guide booklet.please this is my address , coach Patrick
box 293 ,Ashaiman-tema.Ghana west africa

written by Kaitsu , March 30, 2009

Hey, any chance that You could send the .fla file to me?

written by Tvtp public , May 15, 2009

nice job, could i have a .fla file ?
Thanks a lot

written by RJccc , December 26, 2009

I thought you said a football field...

written by stinky blak-fat cheek , January 08, 2010

wehr da blaady fil? ur prik

written by shifaz , June 26, 2010

dear sir.. could u pelase send me this soft copy if flash file, i have a big project in this tiutorial

pelase reply me as soon as possible

Do you need more help? Ask now!

Trackback(0)

Comments (16)

Last Updated ( Friday, 21 March 2008 )