Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
28. Click on the first frame to select it.
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.
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).
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.
33. Create a new layer and call it ad message.
34. Hide the pan layer to see more easily the placement of your text message in relation to the stage.
35. Select the Text tool (T). In the Properties panel, select Static text.
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.
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.
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.
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.
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.
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.
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.
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.
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.
48. Right-click on frame 117 and select Insert Keyframe.
49. 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.
50. Right-click anywhere on the grey area between the two keyframes and select Create Motion Tween.
51. You will now make two more motion tweens. Insert a keyframe in frame 127 and make a motion tween animation.
52. 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.
53. 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.
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.
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.
54. 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.
REMEMBER 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.
55. 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.
56. 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.
57. 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:
58. 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.
59. Repeat this one more time: right-click on the first empty frame (frame 141) and select Paste Frames.
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.
60. 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).
61. Right-click on frame 145 and select Paste Frames.
62. Go over to frame 215, right click on it and select Insert Frame.
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.
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.
63. Lock the ad message layer. Make a new layer above it and call it button.
64. 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.
65. 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).
66. 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.
67. 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.
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.
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.
68. Lock the button layer. Make a new layer above it and call it actions.
69. Click on the action layer's first frame to select it. Press F9 or select Window > Actions to open the Actions panel.
70. 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.
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.
If you have found this tutorial useful, please consider donating to support lukamaras.com.
Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!
