Create a 360° panorama viewer with AS3

November 10th, 2009 in Flash | 30 Comments

Discover how to create with AS3 a 360° panorama viewer that the user controls using the left and right arrow keys.

View DemoDownload Source

1. Create a new flash file (Actionscript 3.0) and save it as panorama.fla.

2. Rename “layer 1″ to “preload”. With the Text tool selected put a Text box in the middle of the stage. Set its type as Dynamic text and give it an instance name of “percent”.

3. Next create an “actions” layer and with the first frame selected open the actions panel.
First we need to load our external 360° panorama image :

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

4. The progressHandler function will be used to show the progress of the image’s loading : (if you are a bit lost, take a look at our tutorial about flash preloader riacodes.com/flash/basic-flash-preloader )

function progressHandler(event:ProgressEvent):void{
	var ratio:Number = event.bytesLoaded / event.bytesTotal;
	percent.text = Math.ceil(ratio*100).toString() + " %";
}

5. When the image has finished loading, the completeHandler function is called.
First we remove the percent text that was used to display the percentage progress of the image’s loading.
Next outside this function we declare a content_mc Sprite variable that will contain the panorama.
Back in the function, in order to create our 360° panorama effect we need to add twice the same image. To do so we create a first bitmap image by retrieving the loader content and we create the second as a clone of the first one.
Then we add both images into content_mc by putting the second one next to the first one.
And we add content_mc to the stage.
Finally we add a KeyboardEvent.KEY_DOWN event listener to the stage, event that will be handled by the keyPressed function.

var content_mc:Sprite = new Sprite();

function completeHandler(event:Event):void{
	removeChild(percent);
	percent = null;

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

	addChild(content_mc);
	content_mc.x = 0;

	stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
}

6. In the keyPressed function we check whether the left or right arrow keyboard has been pressed and in that case change the value of content_mc’s x property.
Then we check if the content has reached its right or left limit and reposition content_mc accordingly as explained here:

function keyPressed(event:KeyboardEvent):void {
      switch (event.keyCode) {
          case Keyboard.LEFT :
		  		content_mc.x += 20;
            	break;
          case Keyboard.RIGHT :
           		content_mc.x -= 20;
           	 	break;
      }

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

7. Here’s the final code, test your movie to see it in action.

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

function progressHandler(event:ProgressEvent):void{
	var ratio:Number = event.bytesLoaded / event.bytesTotal;
	percent.text = Math.ceil(ratio*100).toString() + " %";
}

var content_mc:Sprite = new Sprite();

function completeHandler(event:Event):void{
	removeChild(percent);
	percent = null;

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

	addChild(content_mc);
	content_mc.x = 0;

	stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);

}

function keyPressed(event:KeyboardEvent):void {
      switch (event.keyCode) {
          case Keyboard.LEFT :
		  		content_mc.x += 20;
            	break;
          case Keyboard.RIGHT :
           		content_mc.x -= 20;
           	 	break;
      }

	  if (content_mc.x>0) {
	   		content_mc.x= -content_mc.width /2;
	   }
 	   else if (content_mc.x < stage.stageWidth - content_mc.width){
		 	content_mc.x= stage.stageWidth - content_mc.width/2 ;
	   }
}
  • Digg
  • del.icio.us
  • Reddit
  • StumbleUpon
  • Twitter


What you think ...

(30 Comments)

+ Add a Comment
  1. Brenda
    Nov 11th, 2009

    Thank you!! I was looking for a tutorial on how to do this.

  2. George
    Nov 11th, 2009

    Wow cool !!!
    Thanks Riacodes

  3. ziggy
    Nov 11th, 2009

    what is the script to make this play on its own (without mouse/keyboardevents)?

  4. Sam
    Nov 15th, 2009

    ah finally !! , I was searching this for a long time :-)

    Thanks a lot

  5. Kamil
    Nov 16th, 2009

    Thank! Really useful. You could mention that at the end you have to export the file as .swf file or it will not work. It took me 2 days to came up with this. (I am new to Flash. Maybe this is way). Again, great idea.

  6. Ryan
    Nov 16th, 2009

    @ ZIGGY, to create this without the keyboard events you would just change line 29 to:
    stage.addEventListener(Event.ENTER_FRAME, loop);
    the function would be:
    function loop(e:Event):void
    {
    content_mc.x += 20;
    }
    to go in the other direction just change it to -=

  7. Srdjan
    Nov 17th, 2009

    Thanks a lot!!! it is fantastic project and tutorial :) ))))

    Just few questions:
    1. Is it possible to have links at the certain positions in the panoramic picture, for instance, when you are scrolling to be able to click (to have a link) “the man in striped top” or “horse statue”, with a highlight on rollover’ and possibly some text ie. on rollover on the statue, some text at some place in the picture: “This is statue of famous person on the horse” something like that.

    2. Is it possibl to make .swf file and to imbed into another .fla project?

    Best regards
    Srdjan

  8. Srdjan
    Nov 17th, 2009

    I was thinking, in connection to my first post, question one, instead uploading “panorama.jpg” to rather make movie clip ( panorama.mc) with rectangles as links, and on rollover to make them alpha, say 20% and maybe some text in the corner. That will be good solution, if it is possible of course. I guess that I don’t have to mention that I am new in AS3 :)

    Also I was thinking if you make stage bigger, and want to put panorama in the middle, and to restrict in x direction, how to put mask, as you don’t have physically in the frame?

    Best regards
    Srdjan

  9. Alberto
    Dec 6th, 2009

    may make a move with the cursor movement, if anyone can help I would be grateful I would also be able to zoom the image, this resort is fantastic is the best I’ve known you can upload pictures of 7000px wide, thanks for very good resource.

  10. ZIGGY
    Dec 7th, 2009

    Thanks a lot Ryan!

  11. Projektowanie
    Feb 5th, 2010

    i love dat panorama, how to make the control on the mouse as well?

  12. nuri
    Mar 13th, 2010

    it explein image loader mask keyboard events switch on as3 its a helpfull lesson.

  13. Advanced Authoring » You have to see this …
    Mar 17th, 2010

    [...] A lot simpler than that, but with some key ideas is the following tutorial: http://www.riacodes.com/flash/create-a-360-panorama-viewer-with-as3/ [...]

  14. Graveir
    Mar 24th, 2010

    Hi,
    maybe stupid question, but how to create this panorama image ;) It’s not about flash i know. But any link would be prizeless.

  15. Thio
    Mar 27th, 2010

    Hi Ryan!
    This is a great tutorial.
    But, can you tell me how if i want to make this 360° panorama as an intro and put a button that contain mc on it?
    Thanks before.

  16. Alsy
    Jun 18th, 2010

    Thanks!! It helped me alot for my project!

    Can i ask how to make it move up and down like a spherical one?
    I search but could not find one. T_T

    Pls help?
    Thanks in advance.

  17. Alsy
    Jun 18th, 2010

    oops, sorry, I think I got my sentence wrong.

    I meant, just having it move up and down or just left and right.
    Not the spherical type where all goes up, down, left, right at the same time.

    I hope it is understandable.

    Thanks.

  18. Create a 360° panorama viewer with AS3 « GuarniBlog
    Sep 25th, 2010

    [...] View tutorial complete (Source http://www.riacodes.com )   Comments Off [...]

  19. Wilson
    Dec 20th, 2010

    hi nice tutorial
    is it possible to make up and down and right and left panaroma also

    thanks

  20. johnny
    Jan 15th, 2011

    Thats not a real 360 view. You just explain how to scroll the pictuers. The displacement, whitch is necessary for reallistic 360 views (like quicktime vr) is compleatly ignored.

  21. dennis
    Apr 19th, 2011

    I’m trying to bring this to the iPad but it just lags like a maniac.
    Isn’t there a way to instead of moving the content, move a camera over the content?
    Greetings,
    Dennis

  22. Mamdouh
    Jun 4th, 2011

    Many thanks for this appreciated tutorial, but I wanna make it by mouse events! also to add hot spots on the image that should move correctly like the image. Any help please?

  23. Ksun
    Jul 6th, 2011

    Hi MAMDOUGH,

    This is the code I wrote to control the panning with mouse events:

    **************************************************************************
    stage.addEventListener(MouseEvent.MOUSE_DOWN, pressMouse);
    stage.addEventListener(MouseEvent.MOUSE_UP, releaseMouse);
    var mouseDownX:Number=0;

    function pressMouse(e:MouseEvent):void{
    mouseDownX = mouseX;
    addEventListener(Event.ENTER_FRAME, panByMouse);
    }

    function releaseMouse(e:MouseEvent):void{
    removeEventListener(Event.ENTER_FRAME, panByMouse);
    }

    function panByMouse(e:Event):void{
    var speedAdjustment:Number = .5;
    content_mc.x+= (mouseDownX-mouseX)*speedAdjustment;
    if(content_mc.x>0) {
    content_mc.x= -content_mc.width /2;
    }
    else if (content_mc.x < stage.stageWidth – content_mc.width){
    content_mc.x= stage.stageWidth – content_mc.width/2 ;
    }
    }

    ***************************************************************************

    Just paste that in place of the keyPressed function. Should work. You can adjust the speedAdjustment variable to play with how fast you want the image to pan.

    As far as hotspots – you could make the original image into a MovieClip and add hotspots (buttons or whatever you'd like to it) and then add those two MovieClips to the content_mc rather than two bitmaps. Just a warning – this will probably slow things down though.

    If you have questions about this you can email me here: kasonflash@gmail.com. I will check this account in the next couple days – but I don't use it that often.

  24. Ksun
    Jul 6th, 2011

    Oh, and DENNIS.

    I don’t know if you’ll be checking this forum since you posted about a month ago. But if you set the cacheAsBitmap property on the content_mc to true it may help your performance on the ipad.

    After you add the bitmaps to the content_mc add this line:
    content_mc.cacheAsBitmap = true;

    Then in your publish settings for Air iOS set the hardware acceleration to GPU. I think this should help. Probably worth a shot anyway.

  25. panoramas 3d flash tutorial let you to build… « Doing & Done
    Aug 9th, 2011

    [...] in Flash Panoramic 360 with Papervision3d Full Screen Flash 360 Panoramas – Are They Worth It? Create a 360° panorama viewer with AS3 3d Panorama Cruise Virtual Reality On Adobe Air Creating a 3D Room in Flash Catalyst Share and [...]

  26. Siyad
    Aug 13th, 2011

    hi Ksun

    Mouse pan script didnt working for me…..

    I did like this which is not working

    // File downloaded from http://www.riacodes

    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
    loader.load(new URLRequest(“panorama.jpg”));

    function progressHandler(event:ProgressEvent):void{
    var ratio:Number = event.bytesLoaded / event.bytesTotal;
    percent.text = Math.ceil(ratio*100).toString() + ” %”;
    }

    var content_mc:Sprite = new Sprite();

    function completeHandler(event:Event):void{
    removeChild(percent);
    percent = null;

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

    addChild(content_mc);
    content_mc.x = 0;

    stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
    }

    stage.addEventListener(MouseEvent.MOUSE_DOWN, pressMouse);
    stage.addEventListener(MouseEvent.MOUSE_UP, releaseMouse);
    var mouseDownX:Number=0;

    function pressMouse(e:MouseEvent):void{
    mouseDownX = mouseX;
    addEventListener(Event.ENTER_FRAME, panByMouse);
    }

    function releaseMouse(e:MouseEvent):void{
    removeEventListener(Event.ENTER_FRAME, panByMouse);
    }

    function panByMouse(e:Event):void{
    var speedAdjustment:Number = .5;
    content_mc.x+= (mouseDownX-mouseX)*speedAdjustment;
    if (content_mc.x>0) {
    content_mc.x= -content_mc.width /2;
    }
    else if (content_mc.x < stage.stageWidth – content_mc.width){
    content_mc.x= stage.stageWidth – content_mc.width/2 ;
    }
    }

  27. Siyad
    Aug 13th, 2011

    Oops it works…

    Sorry for the previous post.

    Thanks alot Ksun

  28. Francis
    Sep 16th, 2011

    Is there a version of this tutorial in either Actionscript 1.0 and Actionscript 2.0?

  29. Mladen
    Oct 23rd, 2011

    how to place a button in front of the panorama? Please help

  30. hans
    Dec 31st, 2011

    Good day to all….
    I’ve tried the tutorial above and it is great works fine, but what if i add an invisible button on the image which when clicked will open another image.
    Is that even possible??? it would be a great help if you make a tutorial of it.

    Thank you so much!!
    and i wish everyone a Happy New Year!!! :-)

Leave a Comment

Name (required)

E-mail (required, will not be published)

Website