Flex | Flash | Air | AS3
Create a 360° panorama viewer with AS3
November 10th, 2009 in FlashDiscover 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?