Flash Explained

Learn Flash easily.

Creating a 360° panoramic view ad banner

October 12th, 2008 | Author: Luka | Category: Banners


I will show you in this lesson how to create a 360-degree pan banner. It is very easy to make – basically, this is an animation tutorial.

You will learn how to:

  • Position a 360° panoramic image,
  • Make an animation inside a movie clip,
  • Create a message for your banner and animate it,
  • Set up an invisible button and make it clickable, and more.

Below is the example of the ad banner you are going to make.

Setting up your document

1 Start Flash. Select File > New. Go to the Templates tab and select Advertising > 180x150 (Rectangle). This will open a new template for a 180 by 150 pixels banner ad.

2 Press Ctrl+J or select Modify > Document to open the Document Properties dialog. Enter 21 in the Frame rate field and click OK (see 1 in the figure below). This will be a decent speed for the animation.

Adjusting the properties of the document.

Just a small note: if you're completely new to Flash, fps stands for frames per second, which is how many frames your Flash movie will advance in the time space of 1 second.

3 If you are working in Flash MX, you can skip this part and just proceed to step 4. If you are working in Flash MX 2004 or Flash 8, read this step.

Select File > Publish Settings. Click the Flash tab. In the Version menu, select Flash Player 6 (see 1). In the ActionScript version menu, select ActionScript 1.0 (see 2). Click OK.

Defining the Publish Settings for your movie.

What you just did will make your banner backwards-compatible so that it can be seen by people who have still Flash Player 6 installed on their machines. This is important, especially when you're making banners for sites that get a lot of visitors and will require of you to make the banner for the widest possible audience. Also, since there are just a few lines of simple ActionScript that are going to be added later, there is no need to publish this movie for the latest version of Flash Player (although it wouldn't be a mistake at all if you did this).

4 Call the first layer pan. When you choose a banner template in Flash, the first layer is by default called content. That's not bad, but it is definitely better to give it a name in accordance with what you're going to put inside it.

Changing the name of a layer.

Top of page

Importing and positioning the panoramic image

You will now have to find a panoramic image that can be spinned around for 360 degrees all the while looking like one long continuous shot that goes on without interruption. What? You don't have one of those at hand? No sweat, just download mine 🙂

Unzip the downloaded file and put the picture somewhere where you'll easily find it.

5 Select File > Import > Import to Stage. Find the picture (oceancliffs.jpg), select it and click Open. The image has now appeared on your document's stage.

6 Open the Align panel (Window > Align). With the picture still selected on stage (if it isn't, just click on it to select it), do the following:

  • Make sure that the Align/Distribute to Stage button is turned on (see 1 in the image below),
  • Click on the Align left edge button (2),
  • Lastly, click on the Align top edge button (3).

Manipulating the placement of the image with the aid of the Align panel.

The picture will now perfectly be aligned with the stage's top and left edge. If you take a look at the bottom left part of the Properties panel, you'll notice that the X and Y coordinates for the picture equal zero.

The Properties panel showing the dimensions and coordinates for the selected image.

It is important that the coordinates are set to round numbers (like here, 0.0 and not 0.5 for example). In this way, you are sure that the image will be displayed sharply in your final SWF file. Always strive for round coordinates when images are involved, whether they are used in Flash banners, sites or other kinds of SWF movies. If an image isn't positioned on round coordinates, it might get displayed blurry.

Also, you might have noticed that the image's height (150 pixels) equals the document's height. I made this on purpose - why make a bigger image if all of it won't be visible in the end? Also, you save on file size. Even if it's just a small difference, like 1 or 2 KB, why not make it? Especially when it's about ad banners that you're dealing with, which have frequently maximum file sizes defined by the web site owners that are putting the ads on their pages.

Top of page

Making the seamless panorama

7 Make sure that the image is selected - if it is, a grey border can be seen around it.

The panoramic image selected on the main scene.

8 Press Ctrl+C to copy the image. Press Ctrl+Shift+V to paste it in place. You have just made a copy of the image, which is by pasting in place positioned exactly on the same coordinates as the original one, only sitting on top of it.

9 So now don't click anywhere, just hold Shift and press the right arrow key on your keyboard to move the copy of the image to the right. Move it until it gets far enough so that there's a little space between it and the original.

The copy of the image placed alongside the original.

10 Now press the left arrow key until the two images are seamlessly joined together. Click on an empty place on stage to get rid of the grey border around the image and better see how do they look joined together. Then click again and move it until it looks right.

Joining the two images together at their sides.

Let me share a few thoughts about 360°panoramic images with you here. As you can see, the image you're working on in this tutorial isn't a perfect example of this kind of image. I made it from some pictures I snapped some time ago. To have a perfect, seamless panoramic image you should have a tripod to prevent your camera from moving vertically and also pay attention to changes in light as you turn around, and make the appropriate changes in Photoshop later.

But, even if you haven't got the most perfect panoramic 360 degree photo, in an ad like this it won't be noticed by the visitor to the site where the banner is being displayed on. Especially when the message comes jumping in and maybe some additional animations are added. The point is that this kind of banner looks attractive and nice to the eye.

You can also use this technique to show rooms and other kinds of spaces for sites that want to display the services they offer: hotels, restaurants and the like, or even museums and cityscapes. It requires a lot of patience to get your 360°VR photos right. Sometimes you might be lucky so that your client will provide you with finished images, or you can always hire a photographer who will do it for you.

To see a great application of this neat technique, visit the Sydney Opera House virtual tour.

11 Click on the first image, then hold Shift and click on the second one. Both should be selected.

Both images select on the scene.

12 Hit F8 or select Modify > Convert to Symbol. In the Convert to Symbol dialog that appears, select Movie clip as type, name it panorama and click OK.

Top of page

Creating the continuous uninterrupted VR animation

13 Go to the frame 140 of the current (and the only one so far) layer. Right-click on it and select Insert Keyframe.

Insering a keyframe inside the pan layer.

14 Right-click on the grey area that appeared between the two keyframes and select Create Motion Tween.

Making a motion tween animation.

A continuous arrow on a magenta background will appear, indicating that you have just made a proper motion tween.

You will now create the continuous animation of the panorama. This will necessitate some precision adjustement and trial-and-error work. So let me show you how!

15 Click on frame 140 to select it, than click on the panorama movie clip on the stage. This is important, because if you had clicked on the movie clip on stage while the playhead in the timeline was in the magenta area, you would have selected the movie clip on the frame 1, instead of 140.

16 Move the movie clip to the left by holding down Shift and pressing the left arrow key. Move it until the point where the two images are joined together inside the movie clip is aligned with the left edge of the scene.

How to know when to stop? Well, just move your movie clip up a little bit, until the white scene background appears. Then check if the point in question is really aligned with the left edge of the scene.

Aligning the movie clip.

When you think you got it right, just move the movie clip back down.

17 Test your movie by pressing Ctrl+Enter.

Watch carefully. After the quad has appeared on the screen for the first time, comes the crucial part. In the example below, if you observe it watchfully, you can see a little "jump" in the animation. In other words, it doesn't flow seamlessly as it should.

This is because the movie clip isn't placed properly on the second keyframe (the second keyframe is the one situated in frame 140). You will now see how to fix this.

18 Close the testing window and go back to your document.

19 Click on the movie clip to select it again (on frame 140). Press the right arrow key on your keyboard just once. This will move the movie clip 1 pixel to the right.

20 Test your movie again (Ctrl+Enter). Watch your animation again. Does it "jump" even more then the previous time? If it does, move your movie clip in the opposite direction. Press the left arrow key this time to move it back, then press it again to move it 1 pixel to the left.

Test your movie again to see if the animation is playing as it should be, without any visible errors. If the error gets less visible, then just continue moving your movie clip in the same direction by 1 pixel at a time and testing your movie to check if it is playing properly.

Like I said, it is a trial and error type of work, until it turns out good. And that's it - the big secret of the 360-degree VR panoramic animations 🙂

21 Click on frame 1 to select it.

Selecting the first keyframe.

22 Hold down Shift and click on frame 140. This will select all the frames that make up your animation.

Selecting all the frames of the animation.

23 Right-click anywhere on the blackened area (i.e., the frames you just selected) and select Cut Frames from the menu that appears.

24 Select Insert > New Symbol. In the window that appears, select Movie clip as type and call it panorama animation. Click OK.

You have just created an empty movie clip, which, although empty and without any contents, exists with all the properties of a movie clip object. The name you gave it appears above the layers to tell you that you are working inside it now and not on the main scene (the main timeline).

Working inside the movie clip symbol.

25 Right-click on frame 1 and select Paste Frames. The complete animation that you have cut out from the main scene just a moment before has now been pasted inside this new movie clip.

Why was this done? Simply to make your flash web designer's life easier 🙂

Imagine this: you leave the animation on the main timeline. After that, you add the banner message and maybe some other animations. And then after you have finished this nice flash ad, your client isn't completely satisifed and/or has some additional requirements for it (you wouldn't believe how many times you will have to change your work to meet these requirements)!

And so, you have to go back, change the animation(s) and move/cut/paste/change all these hundreds of frames, back and forth, until it turns out right. That's a waste of time and especially if you have to do it more than once, a nerve-wracking thing.

But, when you have each separate animation placed in its own movie clip, life is easy. You can change the animation easily, without having to worry about the other ones. Make this a habit!

26 Click on the Scene 1 link above the layers to return to the main timeline.

Clicking the link that leads to the main scene.

27 There is some cleaning up to do now. When you cut frames, blank, empty ones are always left behind. Do the following:

  • Click on frame 2 of the first (and only) layer of the main scene to select it,
  • Hold Shift and click on frame 140 to select all the frames between it and frame 2,
  • Right-click anywhere on selected frames (the blackened area) and select Remove Frames.

Selecting and removing multiple frames.

The layer is nicely cleaned up now

28 Click on the first frame to select it.

Selecting the first frame of a layer on the main scene.

29 Open the Library (Window > Library). You will see your panorama animation movie clip sitting nicely inside. There is also the panorama movie clip, which holds the two same images, and the panoramic image itself.

The Library window in Flash.

30 Click on the panorama animation movie clip and drag it out to the stage. When you're with your mouse over the stage, just release the mouse button and the movie clip will appear on the scene.

31 Position the movie clip so that it is aligned with the stage's left and top edges. Do this the same way you did it before: open the Align panel (Window > Align), make sure that the Align to Stage button is turned on (1), then click the button for left edge aligning (2) and top edge aligning (3).

Align panel with sequence of clicking shown.

32 Lock the current (pan) layer. You can test your movie now if you want to. The animation will play just the same as it was when it was situated on the main scene. That's because an animation in Flash loops endlessly, whether it is on the main scene or in a movie clip. Unless you tell it to stop via ActionScript, of course.

Top of page

Making the ad message animation

33 Create a new layer and call it ad message.

The newly created ad message layer.

34 Hide the pan layer to see more easily the placement of your text message in relation to the stage.

Making the pan layer invisible.

35 Select the Text tool (T). In the Properties panel, select Static text.

Making the text field a static one.

Choose a font you like, make its size 24 and also bold it if you wish. Select a dark color for this text.

36 Click on the stage and write your ad text: "Ocean cliffs quad ride" or anything else that coveys the message of your banner.

Press Esc to exit the text editing mode and position your text field so that it is centered horizontally in relation to the stage. You can do this easily with the arrow keys on your keyboard.

Positioning the static text field.

37 With the text field still selected, hit F8 to convert it to a movie clip. Call it message and click OK.

38 Double-click on the newly created movie clip on the stage to enter inside it. Call the first layer text shadow.

Managing layers inside the movie clip symbol.

39 Click on the text field once to select it. Press Ctrl+C to copy it.

40 Lock this layer. Make a new one and call it text.

Making a new layer inside the movie clip symbol.

41 Select the first frame of the new layer. Press Ctrl+Shift+V to paste the previously copied text field in place here.

42 Press the left arrow key twice and the up arrow key twice to move this text field up and to the left by two pixels.

The identical text fields in two separate layers.

43 In the Properties panel, change the text field's color to white. You might have to click on the text field again so that its options would appear in the Properties panel.

The final look of the ad message.

There! You just saw a nice and easy way to make cool shadow text!

44 Click on the Scene 1 link to return to the main scene.

Going back to the main timeline.

45 Click on the message movie clip to select it. Press F8 to turn it into a movie clip, again! Call it message animation and click OK. This is needed because here too, you wil be making an animation inside a movie clip.

46 Double-click the message animation movie clip on the stage to enter inside its timeline.

Inside the message animation movie clip.

47 Click on the first frame (it is a keyframe, actually) inside this movie clip and drag it forward until you reach frame 100. Release it there.

Dragging a keyframe forward.

You just moved this keyframe to frame 100 and left blank frames behind it. This is done so that the message wouldn't appear instantly as the banner loads. It will pass about 5 seconds before it shows up. If you like, you can drag it to frame 50 or any other if you think that it's more appropriate for the message to show up earlier. This is just a question of ad banner design and marketing thinking. You'll find what works best (what is the most clickable thing) through practice, as with everything else.

48 Click on the message movie clip (which is on the stage, inside the message animation movie clip you're working inside right now), to select it.

49 Using the combination of Shift and left arrow keys, move the movie clip off the stage, to the left.

Moving the message movie clip outside the stage boundaries.

50 Right-click on frame 117 and select Insert Keyframe.

Inserting a second keyframe in the layer.

51 Hold down Shift and press the right arrow key repeatedly to move the message movie clip to the right, just a little bit off stage.

Moving the message movie clip to the right.

52 Right-click anywhere on the grey area between the two keyframes and select Create Motion Tween.

A motion tween represented by an arrow inside a layer.

53 You will now make two more motion tweens. Insert a keyframe in frame 127 and make a motion tween animation.

Adding a second motion tween animation.

54 On frame 127, select the movie clip and move it back to the left, this time placing it in such a way so that just a small part of it finds itself off-stage.

Positioning the movie clip in this segment of animation.

55 Here comes the last segment of the ad message appearing animation: Insert a keyframe at frame 133 and make a motion tween, then position the message movie clip so that it is centered horizontally in relation to the banner's width.

Finishing the animation for the ad banner message.

If it is difficult for you to see where the horizontal center lies, go back to the main scene, hide the pan layer and come back inside the message animation movie clip. Then you'll see the banner's white background only and will be able to work more easily.

The movie clip holding text centered in relation to the banner width.

Ok, fiiine! As a final added touch, once the message has arrived and settled itself on the screen, you will make it blink a few times so that it is more spottable by the viewers. And this is really easy to do.

56 Right-click in the frame just after the last keyframe (frame 134) in your animation and select Insert Frame. This will make the last keyframe last just a fraction longer.

Inserting a frame into the layer.

Keyframes are used when a change in animation is needed. Frames are there to prolong the duration of a particular keyframe, when there are no changes that are bound to happen, but when you just wish for a particular scene in your Flash animation to last longer.

57 Right-click on the next frame (frame 135) and select Insert Blank Keyframe. This is needed if you want to achieve a blinking message effect. Since a blank keyframe doesn't contain any content whatsoever within itself, this will make the message disappear for a moment.

A blank keyframe inserted into a layer.

58 You need to prolong the duration of this blank keyframe too, so that this small time interval matches the one preceding it, where the message is. Right-click on the next frame (frame 136) and select Insert Frame.

Extending the duration of the blank keyframe.

59 To have a good blinking message effect, you will need to copy and paste these four frames a couple of times. Click on the last keyframe in the message motion tween animation (it is the one with the black dot), hold Shift and click on the last frame (the one with the small rectangle). Here, the image explains it clearly:

Selecting the four frames that are going to be duplicated.

60 Right-click anywhere on the selected frames (the black area on the layer) and select Copy Frames. Then, just right-click on the first empty frame (frame 137) and choose Paste Frames.

Pasting the copied frames.

61 Repeat this one more time: right-click on the first empty frame (frame 141) and select Paste Frames.

The blinking message sequence completed.

You have just made the blinking message effect. It was easy, wasn't it? There is the message, there isn't, and so on for a few times. But, the visitor to the site where the banner will be displayed must be able to actually read the message, whether it says "dream vacation", "best offer", "click here" or anything else.

In order to achieve that, you must make the message appear for one last time and then make it last longer.

62 Right-click on frame 133 and select Copy Frames. You can also copy any keyframe that contains your banner message (these are the ones with the black dot inside them).

Copying the keyframe with the ad message.

63 Right-click on frame 145 and select Paste Frames.

Pasting the last keyframe in this animation sequence.

64 Go over to frame 215, right click on it and select Insert Frame.

The finished ad message animation.

There! The ad message animation is complete! Go back to the main scene by clicking the Scene 1 link above the layers. Test your movie and see how the animation plays out.

Of course, you may choose to make the message appear just out of nowhere, have it sit there for a while and then just disappear. The ad message animation in this example lasts for 215 frames, while the panoramic image animation lasts for 140 frames. You can play around with the duration of these animations to see what works best for you, depending at what time intervals you want your ad message to appear.

Let me show you now how to make the banner clickable.

Top of page

Making the banner's invisible button

You are now going to create an invisible button for your banner. The whole banner area must be clickable and so a visible button is out of question, as it would cover the banner contents.

65 Lock the ad message layer. Make a new layer above it and call it button.

Creating a new layer for the clickable button.

66 Select the Rectangle tool (R). Choose any fill color you like, and also any outline color you like. As the button is going to be invisible, this doesn't matter at all.

Draw a rectangle of any size on the stage.

A rectangle drawn above the existing content.

67 Double-click on the rectangle with the Selection tool (V) to select both the fill and the outline. Open up the Align panel (Window > Align).

Make sure that the To stage button is turned on, then click the third button from the left in the last row to make the rectangle's dimensions equal those of the stage (see 1 on the image below). Then align it horizontally in relation to the stage (2), and also vertically (3).

Making the rectangle the same size as the stage and aligning it with the aid of the Align panel.

68 Press F8 to convert this rectangle to a symbol. This time, select button as type instead of movie clip, call it the button and click OK.

69 Go to the Properties panel and find the Color menu on its right side. Select Alpha from the menu and set it to zero. The alpha property of a symbol defines its degree of transparency. When you set it to zero, it becomes completely invisible.

Setting the alpha property for the button to zero.

Still in the same panel, go to the left and find the Instance name field. Type adButton inside it and hit Enter to confirm it.

Assigning an instance name to the ad banner button.

The Instance name serves to issue commands to the button via ActionScript. You can do without it and place the actions on the button directly, but it is a much, much better practice to assign Instance names and use them to program your buttons.

Top of page

Inserting the ActionScript that makes the ad clickable

70 Lock the button layer. Make a new layer above it and call it actions.

Making a layer for ActionScript.

71 Click on the action layer's first frame to select it. Press F9 or select Window > Actions to open the Actions panel.

Selecting the keyframe where the actions will be placed.

72 Enter the following ActionScript code inside the Actions panel:

adButton.onRelease = function() {
getURL("http://www.msn.com", "_blank");
}

Let me explain you now what goes on here. It is really simple. The first line,

adButton.onRelease = function() {

assigns a function to the onRelease event handler of the adButton button. And just what all of this means?

An event handler tells Flash what to do when a specific event has happened. In this case, the onRelease event handler handles what is going to happen when a user has clicked and released his/her mouse button over the button area. This means if a user presses (clicks) the mouse button and then drags the mouse out of the button area (which is the whole area of your banner in this example) and releases it outside, nothing will happen.

If you want to, you can write onPress instead onRelease and this particular handler executes actions as soon as the mouse button is clicked over the button, without the user releasing it. To see a detailed description of more button symbol events, check out my tutorial on Flash ad banners basics.

So, when this button is clicked, the function assigned to this event will get executed. This means that every action within the function's curly braces, { and }, will get excuted.

And what's inside is a simple getURL action.

getURL("http://www.msn.com", "_blank");

The first parameter inside the parentheses is the URL of the website the banner is pointing to, and it has to be written inside quotation marks, and with the http:// prefix before the actual website address. I have put here the MSN's address for the purpose of this example. Of course, you will have to replace that with the address of the website that paid you to do the banner.

The second one is the window or frame into which you want the website to open. _blank stands for a new browser window. On most portals and similar sites with high traffic, this is the option used and the one that will be required for you to put inside the banner. If you write _self as the option, the link will open in the same window.

Top of page

Some afterthoughts

If you want your 360-degree landscape to play out smoothly, you should try different movie speeds (frame rates, defined at the start of this tutorial) in combination with different motion tween animation periods. Kep in mind that an image, especially as wide as this one, might always display some small non-smooth movements. A good result can be obtained by making the image move via ActionScript, and also giving the user control over the direction of the movement, but I'll leave this for another tutorial.

That wraps it up for this lesson! To learn more, go to my Flash banners tutorials section and check out the other ones. And as always, have fun while learning and creating in Flash :)! Below you can download the source file for this lesson, in Flash 8 and Flash MX formats.

Download the Flash 8 zipped source FLA file for this lesson.

Download the source file for Flash MX.

Comments

Submit a comment

  • Upali Rathnayake Oct 15, 2008 at 1:36 pm

    Thank you very much for your teaching = Upali

  • flash designer Oct 15, 2008 at 11:35 pm

    thanks was just lloking for something basic like this

  • Luka Oct 20, 2008 at 10:23 am

    You’re welcome guys! 🙂

  • […] Creating a 360° panoramic view ad banner […]

  • Kumbi Feb 23, 2009 at 6:20 am

    All your tutorials are very user-friendly, easy to follow, and I’ve always been able to come out with the final product. My friend told me to learn flash the other day so we can start building websites. I had no idea where to start. I find your site last week and now I’m doing things i never thought i was able to do. thank you so much!!!

  • GABRIELA Jun 11, 2009 at 3:20 pm

    QUISIERA CREAR UN BANER PARA MI FOTOLOG

  • George Oct 28, 2009 at 1:59 pm

    Well this is doing my head in !!!! I have tried the code over a dozen time in flash cs4 and it keeps telling me that the code is wrong and that get URL is no longer used ………..any ideas please

  • George Oct 28, 2009 at 2:05 pm

    Just to say I have used this site a lot for infomation and i find it very helpful , but i cant find any infomation on the net to create a flash banner and add a simple url request to it in FLASH CS4… please help..!!
    George

  • Luka Oct 29, 2009 at 9:29 am

    @George: Switch the ActionScript version to 1.0 or 2.0.

  • Rage Dec 21, 2009 at 5:35 am

    Luka,

    How do I make the images drag-able. I mean like google streetview. I only rotates when I drag from corner to corner. Also, how do I make the images load externally? Thanks. Great tut! 🙂

  • Suvendu Sep 2, 2010 at 1:50 pm

    Thanks a lot for a nice tutorial But i am looking for a panoroma effect to videos. Here it include only the still pictures but i need it to be implemented on FLV movies.

    Please give some solution

  • Ather Dec 19, 2010 at 7:34 am

    Thanks for the detailed tutorial. I was not able to get the panoramic view moving at step 17 so I stopped there. It does not move across the frames and just jumps to the end position on frame 140. I’ve checked the motion tween and it is there. I am using CS4. Not sure what else to do. Thanks.

  • anil Mar 30, 2011 at 8:05 am

    how to create a panoramic view in flash scripting

  • […] Learn to create a 360 degree VR scenic banner ad in Flash easily … Oct 12, 2008 … I will show you in this lesson how to create a 360-degree pan banner. It is very easy to make … […]

  • U?ur Sep 9, 2011 at 2:03 pm

    This is great , i am going to try that.

  • ciccio pasticcio Oct 17, 2011 at 8:04 am

    excuse me, but there are no links to download template … no one can help me, please?

  • Rajeesh Jan 8, 2012 at 5:08 pm

    Thank you

    its really helpful

You must log in to post a comment.