Home » ActionScript 3.0, Flash CS4

AS3 Panorama viewer + Mouse Interaction

17 March 2010 12 Comments
Share on Facebook

Objective of this tutorial is to create Panoramic viewer using Flash Actionscript 3.0, At the end of this tutorial you can create Panoramic viewer.

So before starting the tutorial download a nice panoramic picture from Internet. Rename the file as ‘panorama.jpg’

Difficulty:
Beginner to Intermediate Actionscript knowledge.

At the End of this tutorial we will know how to use,

  • Ternary operator in ActionScript.
  • HitTestPoint in ActionScript

Using Ternary Operator:

The ternary operator “?:” is shorter version of “IF Else”  statement used to evaluate a condition is either true of false, The syntax for ternary operator is

(Condition)?if condition is true : if condition is false;

We can write the above for IF ELSE
if(Condition)
{
If Condition is true;
}else
{
If Condition is false;
}

Using hitTestPoint Method of DisplayObject:

hitTestPointMethod used to test whether a point hits over a shape even it is irregular one.

Syntax for hitTestPoint:

displayObject.hitTestPoint(point.x, point.y, true|false);

Note: Supply true if you want to test against actual shape and false to test against the bounding box.

Demo File:
Below is the output file of this Actionscript panoramic viewer.


Image from acojon.deviantart.com

Create a new Flash File( Actionscript 3.0 ) save it on disk, where the panaromic picture got saved.

Change the Document Size by pressing Ctrl + J , Set dimension to 500 px X 500 px

Create a rectangle shape of above dimensions with x,y = 0,0 and convert it to MovieClip.

Give instance name for the MovieClip as “touchMC”

Next, We need to load the Panorama image in to Flash. We can load external files into Flash using Loader Class.

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
loader.load(new URLRequest("panorama.jpg"));

When the image got loaded in to Flash completeHandler will be triggered. Where we are duplicating the loaded image to create panoramic effect using Bitmap Class.

var image1:Bitmap = (Bitmap)(loader.content);
	var image2:Bitmap = new Bitmap(image1.bitmapData.clone());
	holder_mc.addChild(image1);
	holder_mc.addChild(image2);
	addChild(holder_mc);

Finally we are adding ENTER_FRAME event to stage, which will be listened by PanaromaMove function.

stage.addEventListener(Event.ENTER_FRAME, PanaromaMove);

In ENTER_FRAME function we are checking whether the Image Pans across right limit or left limit and adusting it accordingly to the stage.

touchMC.hitTestPoint(this.mouseX, this.mouseY) == true? _flag = true:_flag = false;

	if(_flag)
	{

		//this.mouseX>stage.stageWidth/2 ? holder_mc.x -= 10 : holder_mc.x += 10;
		this.mouseX>stage.stageWidth/2 ? holder_mc.x += Math.ceil((((stage.stageWidth/2)- this.mouseX)*.01)*_speed): holder_mc.x -=Math.floor(((this.mouseX-(stage.stageWidth/2))*.01)*_speed);

		if (holder_mc.x>0)
			holder_mc.x= -holder_mc.width /2;
		else if (holder_mc.x < stage.stageWidth - holder_mc.width)
			holder_mc.x= stage.stageWidth - holder_mc.width/2 ;

	}

Entire code for Reference.

import flash.display.BitmapData;
import flash.geom.Rectangle;

var _flag:Boolean = false;
var _speed:Number = 4;

var loader:Loader = new Loader();

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
loader.load(new URLRequest("panorama.jpg"));

var holder_mc:Sprite = new Sprite();

function completeHandler(event:Event):void{

	var image1:Bitmap = (Bitmap)(loader.content);
	var image2:Bitmap = new Bitmap(image1.bitmapData.clone());
	holder_mc.addChild(image1);
	holder_mc.addChild(image2);
	image1.x = 0;
	image2.x = image1.width;

	addChild(holder_mc);
	holder_mc.x = 0;

	stage.addEventListener(Event.ENTER_FRAME, PanaromaMove);
}
function PanaromaMove(e:Event):void
{

	touchMC.hitTestPoint(this.mouseX, this.mouseY) == true? _flag = true:_flag = false;

	if(_flag)
	{

		//this.mouseX>stage.stageWidth/2 ? holder_mc.x -= 10 : holder_mc.x += 10;
		this.mouseX>stage.stageWidth/2 ? holder_mc.x += Math.ceil((((stage.stageWidth/2)- this.mouseX)*.01)*_speed): holder_mc.x -=Math.floor(((this.mouseX-(stage.stageWidth/2))*.01)*_speed);

		if (holder_mc.x>0)
			holder_mc.x= -holder_mc.width /2;
		else if (holder_mc.x < stage.stageWidth - holder_mc.width)
			holder_mc.x= stage.stageWidth - holder_mc.width/2 ;

	}
}

In this tutorial we learnt some basics of Flash ActionScript3.0 and we have created Panaromic viewer in AS3

Download the Final Output Files.

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner


12 Comments »

  • admin said:

    Yes We can there are two conditional statements that check the X position and width/2 calculations…

  • Kevin said:

    Great Tutorial! I have one question though, and id be grateful if you have the time to answer. Is there i way i can have the panoramic stop at both ends instead of looping around 360 degrees?

    Thanks in advance,

    Kevin.

  • David said:

    I have been trying to add the ability to tween the holder_mc using a button but it always jumps a bit. Do you have any code that will do it. This is what I have been trying (using Flex by the way)

    private function rotateForward():void
    {
    TweenMax.to(holder_mc, 10, {x:(stage.stageWidth - holder_mc.width), repeat:-1, ease:Linear.easeNone});
    if (holder_mc.x

  • admin said:

    Hi David,

    Intead of using the EnterFrame use Timer…

    this might helps you…

  • Alan said:

    To have the panoramic stop at both ends of the image instead of looping around 360 degrees I modified the code thus:

    if (holder_mc.x>0)
    holder_mc.x= 0;
    else if (holder_mc.x < stage.stageWidth – holder_mc.width) holder_mc.x= stage.stageWidth – holder_mc.width ;

  • diego said:

    Hi, very nice
    Can I put links or hotspots in the image?
    thanks

  • Midoo said:

    thankx 4 this great tutrial …

    but i’ve one small question ….

    can i use a swf file instead of bmp or jpeg

    or can i use an animated file instead of still photo …

  • admin said:

    Hi midoo

    yes we can load swf file intead of JPEG file..

    thanks
    http://www.designscripting.com

  • Ricky said:

    i am having trouble when i import the external swf panoramic file into another flash document. When i import the external flash swf file using the UILoader and publish the movie the image moves to the top and covers the whole of the width. I there an alternitive way i can import the panorama flash image into a flash document or do i have to change the code. The stage within the flash document i am trying to import the flash panorama within is larger than the actuall panorama which is 500 by 500.

  • admin said:

    Try to mask the image holder..

  • Dave said:

    This is awesome, I’ve always wondered how to do this! Thanks. Making panoramic images in Photoshop is so fun to do. I’ve made a few “in my time”. They’re really neat to experiment with.

  • Minisite Design said:

    Perfect Panoramic viewer! This type of information is what I’m looking for. Thanks for sharing. I’ll visit again for more updates.

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.