Create a 360° panorama viewer with AS3
November 10th, 2009 in Flash | 30 CommentsDiscover how to create with AS3 a 360° panorama viewer that the user controls using the left and right arrow keys.
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 ;
}
}
Nov 11th, 2009
Thank you!! I was looking for a tutorial on how to do this.
Nov 11th, 2009
Wow cool !!!
Thanks Riacodes
Nov 11th, 2009
what is the script to make this play on its own (without mouse/keyboardevents)?
Nov 15th, 2009
ah finally !! , I was searching this for a long time
Thanks a lot
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.
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 -=
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
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
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.
Dec 7th, 2009
Thanks a lot Ryan!
Feb 5th, 2010
i love dat panorama, how to make the control on the mouse as well?
Mar 13th, 2010
it explein image loader mask keyboard events switch on as3 its a helpfull lesson.
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/ [...]
Mar 24th, 2010
Hi,
It’s not about flash i know. But any link would be prizeless.
maybe stupid question, but how to create this panorama image
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.
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.
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.
Sep 25th, 2010
[...] View tutorial complete (Source http://www.riacodes.com ) Comments Off [...]
Dec 20th, 2010
hi nice tutorial
is it possible to make up and down and right and left panaroma also
thanks
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.
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
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?
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.
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.
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 [...]
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 ;
}
}
Aug 13th, 2011
Oops it works…
Sorry for the previous post.
Thanks alot Ksun
Sep 16th, 2011
Is there a version of this tutorial in either Actionscript 1.0 and Actionscript 2.0?
Oct 23rd, 2011
how to place a button in front of the panorama? Please help
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!!!