Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
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:
Below is the example of the ad banner you are going to make.
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.
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.
NOTE 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.
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:
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.
REMEMBER 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.
7. Make sure that the image is selected - if it is, a grey border can be seen around it.
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.
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.
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.
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.
13. Go to the frame 140 of the current (and the only one so far) layer. Right-click on it and select Insert Keyframe.
14. Right-click on the grey area that appeared between the two keyframes and select Create Motion Tween.
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.
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.
22. Hold down Shift and click on frame 140. This will select all the frames that make up your 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).
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.
27. There is some cleaning up to do now. When you cut frames, blank, empty ones are always left behind. Do the following:
The layer is nicely cleaned up now. To insert the panoramic animation inside it, please proceed to the next page.
