Best viewed in Firefox

Awesty Productions

Making a wrap around effect

May 18th, 2007 by awesty

In this tutorial you will learn how to make a wrap around effect, so when you character goes of one side of the stage it appears on the other side. I am using Adobe Flash CS3 for this tutorial, but Macromedia Flash 8 and Flash MX 2004 should work as well. If you are using Flash CS3 make sure you select a Flash Actionscript 2.0 document. I am assuming that you have a basic knowledge of flash so I won’t be going into to much detail about the Movieclips and other graphical stuff.

Here is an example of what we will be making.

Arrow Keys to move, Internet Explorer users will need to click on it for it to work.

Open a new Flash document and make a character that you want to use for the tutorial. Make it a movieclip (make sure the registration point is on the left) and give it an instance name of ‘man’.

Giving it an instance name

Select the frame that the ‘man’ MC (Movieclip) is on and open the actionscript panel (F9 or Window > Actions) and enter the following:

onEnterFrame = function () {
    man._x>(Stage.width+6) ? man._x=(0-(man._width-5)) : null;
    man._x+man._width<(-6) ? man._x=(Stage.width+5) : null;
    Key.isDown(Key.LEFT) ? man._x -= 2 : null;
    Key.isDown(Key.RIGHT) ? man._x += 2 : null;
};

If you hit Ctrl+Enter you should be able to see something like what I had up the top.

As always, the first line means ‘Everytime this frame is entered, run the script between the curly braces’. So this would happen 12 times a second if you movie is running at 12 fps. Mine is running at 36 fps, so it is happening 36 times a second.

The next line might look a bit confusing, but it is actually really simple. It is just an if statement, but in shorthand.

Normal if statement:
if(condition){
//some code;
}else{
//else do this;
}

Shorthand:
condition ? //some code : //else do this;

So:

if(x == 5){
x–;
}else{
x++;
}

is the same as

x == 5 ? x– : x++;

If there is no else, you just put null after the ‘:’, or if you are really lazy you can just put 0.

So:

man._x>(Stage.width+6) ? man._x=(0-(man._width-5)) : null;

Means ‘if the ‘man’ MC’s _x > the stage width plus 6 (that just makes sure it is completely off the stage), that the mans _x will become -5 minus its width’, so it will be 5 pixels from the left of the stage. As you can see I put null at the end since there is no else needed.

man._x+man._width<(-6) ? man._x=(Stage.width+5) : null;

This is basically the same thing except it checks if the ‘man’ MC if off the left side of the screen, and if it is it gets placed onto the right side of the screen.

Key.isDown(Key.LEFT) ? man._x -= 2 : null;

This is what makes the MC move left. It checks if the left key is down (Key.isDown(Key.LEFT)), and if it is it decreases the ‘man’ MC’s _x by 2.

Key.isDown(Key.RIGHT) ? man._x += 2 : null;

This is what makes the MC move right. It checks if the right key is down (Key.isDown(Key.RIGHT)), and if it is it increases the ‘man’ MC’s _x by 2.

If you need any help just post a comment below.

You can find more tutorials in the tutorial section of the site.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • del.icio.us
  • digg
  • Furl
  • MyShare
  • NewsVine
  • Netscape
  • Reddit
  • Simpy
  • Slashdot
  • StumbleUpon
  • Technorati
  • YahooMyWeb

RSS feed | Trackback URI

8 Comments »

Comment by Kurt Subscribed to comments via email
2007-05-22 01:53:24

Cool I’m first for another tutorial

good tutorial awesty.

 
Comment by austin Subscribed to comments via email
2007-05-27 04:26:56

great tut. when i am done doing this professional crap i will make a game :).

 
Comment by Poseidon Subscribed to comments via email
2007-05-29 07:10:04

This is a little out of place, but which works better for games on the web:
the standard organization for AS (1 frame)
or
OOP?

Comment by awesty
2007-07-03 17:46:02

It really depends on the size of the project.

 
 
Comment by Adam
2007-06-07 01:30:50

Nice tut. Will probably do this if I ever make a game ;)

 
Comment by flash begginer-imidiete
2008-10-11 14:46:42

wth only move left right use the moving movie clips with arrow keys for this but dont do the top and bottom EASY well thanks for shows us newbies

yours truly,

Flash Begginer-Imidiete

 
Comment by roman Subscribed to comments via email
2010-06-15 02:27:14

i need help cuz my man wont make a shadow

plz help

 
2011-01-21 18:39:28

Good for Game Developement!

Thanks!
Raghunath D. Sontakke

 
Name (required)
E-mail (required - never shown publicly)
URI
Subscribe to comments via email
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> in your comment.