Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
11th October 2009

Create a continuously scrolling panorama in Flash

Here we show to create a continuously scrolling panorama in Flash that responds to mouse movement

Here we show to create a continuously scrolling panorama in Flash that responds to mouse movement.

The trick to it is to have two separate Movie Clips that line up dynamically as they move. Once the first panorama is completely off the stage, it replaces the second panorama and begins the whole cycle again. Another problem to overcome is that of the mouse, which must move the panorama and slow it
down as the mouse moves towards the centre of the stage.


01 Two Movie Clips

Create a continuously scrolling panorama in Flash
Import your panorama into Flash and convert this to a Movie Clip, ensuring the registration point is in the top
left corner. Place two copies of this onto the stage on top of one another, naming them ‘nav1’ and ‘nav2’.

02 Create code
Create a new layer and select frame one. Open the ActionScript panel and enter the code shown below. This code controls the panorama images based on the position of the mouse in order to get continually scrolling panorama.

var movieWidth:Number = stage.stageWidth;
menuWidth = nav1.width;
nav2.x = nav1.x + menuWidth;
addEventListener(“enterFrame”,frame_handler);
function frame_handler(e:Event) {
var a:Number = mouseX;
var b:Number = movieWidth/2;
var c:Number = 20;
var pos:Number=0-((a-b)/20);
nav1.x += pos;
nav2.x += pos;
if (nav1.x >= 0 && nav1.x <= menuWidth) {
nav2.x = nav1.x – menuWidth;
} else if (nav1.x <= movieWidthmenuWidth)
{
nav2.x = nav1.x + menuWidth;
}
if (nav2.x <=movieWidth-menuWidth) {
nav1.x = nav2.x + menuWidth;
} else if (nav2.x>=0) {
nav1.x = nav2.x- menuWidth;
}
}

03 Test your movie
Once your code is in place, press Ctrl+Enter on the keyboard to test your movie. You now should have a fully working panorama that moves in relation to the position of the mouse.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Jordy

      Hey, I love these tutorials but i really think it would be a better idea to have a working demo posted of some of the flash items. I really would have liked to see a working example of this effect to see if it was something I wanted to learn before committing the time.

      Thanks
      J

    • sid

      Hello. I tried to copy and paste the code just to see and it throws errors.

    • http://thinkluke.com Luke

      I strongly agree with Jordy…

      Nice Tut but, cant wait to see more.!

    • Amanda

      Hi there, I’m basically in the beginner stage of teaching myself flash. I’m using CS4.
      What type of file is this for, ActionScript 2.0 or 3.0? My dimensions are 125pixels (wide) x 300pixels (high) with a 2351pixels on the stage. I already have the 2 movie clips, one on top of the other.
      I was wondering if there is a way to pan down. Is it just replacing the x to y?
      I’ve tried doing it this way, following the tutorial, but it doesn’t seem to work.
      Can someone please help me?
      Thanks!!

    • http://www.iamannak.com Anna

      Hi,
      Are there Tutorial Files that I can download for this. If so, which issue should I look for?

      Thanks

    • Josh

      if (nav1.x >= 0 && nav1.x <= menuWidth) {
      nav2.x = nav1.x – menuWidth;
      } else if (nav1.x <= movieWidthmenuWidth)
      {
      nav2.x = nav1.x + menuWidth;
      }

      If you get an error, read the code.
      There is an error in this part, to be precise the else if statement isnt correct. there should be a minus in between, if im not mistaken.

    • http://stephengdell.com steve

      I tried the code and just had to clean it up a bit. also, there was one – missing. the html i copied got some stuff messed up, my ” came in as smart quotes, my minus symbols came in as n-dashes or something, i don’t know…and one var declaration missing

      It is actionscript 3, it works, looks nice and is an awesome effect, though a little more choppy than your usual quicktime vr panorama. Nice to be able to make your own in flash though without a 3rd party engine, although it is only the very basic basic panorama effect.

      Here’s my code that worked, hopefully you can try it and not have to clean it up again…

      var movieWidth:Number = stage.stageWidth;
      var menuWidth:Number = nav1.width;
      nav2.x = nav1.x + menuWidth;
      addEventListener(“enterFrame”,frame_handler);
      function frame_handler(e:Event) {
      var a:Number = mouseX;
      var b:Number = movieWidth/2;
      var c:Number = 20;
      var pos:Number=0-((a-b)/20);
      nav1.x += pos;
      nav2.x += pos;
      if (nav1.x >= 0 && nav1.x <= menuWidth) {
      nav2.x = nav1.x – menuWidth;
      } else if (nav1.x <= movieWidth-menuWidth)
      {
      nav2.x = nav1.x + menuWidth;
      }
      if (nav2.x =0) {
      nav1.x = nav2.x- menuWidth;
      }
      }

    • Josh

      The “” quotations still transfer wrong, but i recon that has to do with the copying the code. It is easily overcome by replacing them with the correct ones. These two however aren’t.

      1093: Syntax error. nav2.x = nav1.x – menuWidth;

      1084: Syntax error: expecting rightbrace before menuWidth.
      nav2.x = nav1.x – menuWidth;

      So i went digging a little and there is one more faulty statement, which put the nav2.x off. It is causing trouble with the nav2.x, because it sets it back to 0, therefor the script does not work.
      See the snippit below:

      if (nav2.x =0) {
      nav1.x = nav2.x- menuWidth;
      }

      this statement should be:if (nav2.x <=0)
      Once that is replaced, the script worked here.

      cheers
      Josh

    • tirex

      errors and errors!

    • sid

      shame its not working!!!

    • http://www.innovationlab.gr telis

      did some changes to the codes and it works flawlessly both scrolling continusly both sides

      var movieWidth:Number = stage.stageWidth;
      var menuWidth:Number = nav1.width;
      nav2.x = nav1.x + menuWidth;
      addEventListener(“enterFrame”,frame_handler);
      function frame_handler(e:Event) {
      var a:Number = mouseX;
      var b:Number = movieWidth/2;
      var c:Number = 20;
      var pos:Number=0-((a-b)/c);
      nav1.x += pos;
      nav2.x += pos;
      if (nav1.x >= 0 && nav1.x <= menuWidth) {
      nav2.x = nav1.x – menuWidth;
      } else if (nav1.x =0 && nav2.x <= menuWidth) {
      nav1.x = nav2.x – menuWidth;
      } else if (nav2.x <= movieWidth – menuWidth)
      {
      nav1.x = nav2.x + menuWidth;
      }
      }

    • sandra

      Could you PLEASE do something like a step by step tutorial? (With screenshots etc.?)

      This seems to solve my problems with not wanting to actually buy a tool.
      I do have flash cs5 but never used it, so I need the beginners version of a tutorial.

      PLEASE!

    • Mister K

      The problem here is that symbols are being converted: as well as the quote marks becoming 66s and 99s the minus signs are in fact hyphens. Delete and replace these and it will stop throwing errors.

    • Mister K

      You will, as pointed out above, also need to change line 14:

      nav1.x<=0 && nav2.x <= menuWidth

      and increase the frame rate of the document to stop jerkiness.

    • Pingback: Flashpanorama | Steineklopfer.net