Saturday, 26 February 2011

Spinning globe in Actionscript 3

In this tutorial you will learn how to create a 2D spinning globe effect in Actionscript 3. I have used a similar technique in the Endless scrolling background tutorial. Essentially you will use an enter frame event to move the map, and use a conditional statement to determine if the map has gone pass the globe edges. If the map goes over the globe edge then it will get placed on the other side of the other map. You will need an image of map for this tutorial.


Spinning globe in Actionscript 3

Step 1

Open a new AS3 file and select the Oval tool and draw an oval shape on the stage. You can use the Radial gradient from the Colour panel to give your oval a realistic globe colour. Then convert your shape into a movie clip (F8). Give the movie clip the name ‘Globe’ and select the top left registration point and click ok. Now give the globe the instance name ‘Globe’.


Step 2

Double click the globe to enter its timeline. Rename ‘Layer1’ to ‘Globe’ and insert a new layer called ‘Map’. Import an image of a map onto the stage File > Import > Import to Stage. Convert the map into a movie clip (F8) with the top left registration point selected and give it the instance name: m1. Now hold down the Alt key on the keyboard and create a copy of the map and place it next the map and give it the instance name: m2.


Step 3

Insert a new layer on the timeline called ‘Mask’ then select the oval shape on the globe layer and copy it (Ctrl + C). Select the Mask layer and paste in place (Ctrl + Shift + V). Right click on the Mask layer and select ‘Mask’. Your map should now be masked.


Step 4

Return back to the main timeline and insert a new layer on the timeline called ‘Actions’. Then open up the Actions panel and add the following code:

var speed:uint = 4;

addEventListener(Event.ENTER_FRAME, enterHandler);

function enterHandler (e:Event):void {
 globe.m1.x -= speed;
 globe.m2.x -= speed;

 if( globe.m1.x + globe.m1.width < 0){
  globe.m1.x = globe.m2.x + globe.m2.width;
 }
 
 if( globe.m2.x + globe.m2.width  < 0){
  globe.m2.x = globe.m1.x + globe.m1.width;
 }

}

The code above moves both of the maps -4 pixels every frame. If map 1 goes pass the globe's left edge then it gets placed after map2, and if map2 goes pass the globe's left edge then it get placed after map1.

Step 5

Export movie Ctrl + Enter.

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP