Tikier Hosting » button

Glowing neon playback control buttons

admin — Thu, 01 Apr 2010 13:51:56 +0000

In this easy lesson made for Flash 8 professional I will show you how to create a set of cool, neon glow playback control buttons easily. No other applications will be used to create these buttons, because Flash has so much power on its own! You will see:

How to use the basic shapes to create the ones you need,
How to use the great blending filters in Flash 8 pro,
How to combine multiple filters and objects stacked upon one another, and some more.

You can see the example of the sleek buttons below.

Preliminary steps — setting the background

1 Open a new Flash document. Choose Modify > Document (shortcut: Ctrl+J). Select black as document background color. Click OK.

2 Select the Rectangle tool (R). Turn off the stroke color by clicking on the little pencil icon and then the small red-striped square at the bottom of the Tools panel: .

3 Make sure that both the Object drawing and Snap to objects options are turned off: .

4 Click the Set Corner Radius icon () and enter 6 in the window that will show up, click OK. This is done in order to have rectangles with round corners.

5 Draw a flat color (any color will do) 410 by 120 pixel rectangle.

6 Select the Paint Bucket tool (K). Go to the Color Mixer panel (opened by default — you can always find it in the top right part of the Flash working space). Do the following (see numbers in the screenshot below):

Click on the paint bucket icon to select the fill color.
In the Type menu, select Linear.
Click once on the small colored square found on the bottom right.
In the color code field, enter the hex code #2E70AA (that’s a zero, not the letter O).
Set the Alpha property for this color to 34%.
Set the same color for the left square, but set its Alpha to 100%.

7 Press and hold Shift, click near the rectangle’s top and drag your mouse down until the rectangle’s bottom. Release your mouse button, and there is your nice gradient!

Top of page

Creating the glowing outer ring

8 Lock the current layer and call it background. Create a new layer and call it buttons.

9 Select the Oval tool (O). Go to the Property inspector and make the following selections: block the fill color, select any flat color for the stroke (outline) color, set the line type to Solid and choose 3 for line thickness.

10 Somewhere over the rectangle, draw a ring (it is a circle, but because of the line thickness and lack of fill, it looks like a ring). Make it 70 by 70 pixels.

11 Select the ring by clicking on it with the Selection tool (V), if it isn’t already selected. Go to the Color Mixel panel and click on the pencil icon to select the Stroke color (). In the Type menu, choose Linear exactly like you did for the fill color previously. Add two more color squares to the gradient by simply clicking anywhere between the two existing ones. You should have four of them in total, with the following color values, positioned like this:

Note: all the four squares should have their alpha set to 100% (complete opaqueness). The ring will now look like this:

I have hidden the background layer to work more easily and so that you can more clearly see the various steps.

12 Select the Gradient Transform tool (F). Click on the ring to select it. Rotate the gradient by 90°. To successfully do this, make sure that Snapping to Objects is turned on (View > Snapping > Snap to Objects). Then, press and hold Shift, click on the white circle handle and start moving your mouse clockwise.

13 While the ring is selected, press F8 (or select Modify > Convert to Symbol) to make a symbol out of it. Name it outer ring. Select Movie clip as type and be sure to select the registration point in the middle (see screenshot below):

Click OK. This choice for the registration point will make it easier to align the elements inside the button later.

14 Click on the Filters tab in the Properties panel (see no. 1 in screenshot below). Click on the plus icon (2) and select the Glow filter. Make the adjustements as follows:

Blur X and Y: 8
Strength: 260%
Quality: High.
Color: #ADE2FC.

Leave the Knockout and Inner glow options unchecked. You will get a nice glow for your outer ring:

Making the main button circle

15 Select the ring again and press F8 again, while leaving the same registration point as previously and Movie clip as type of symbol. Call the new symbol play button and click OK.

16 Double-click on the newly made play button symbol to enter inside it. Call the first layer outer ring and lock it. That’s where the ring that you have just created resides. Make a new layer above it and call it circle.

17 Select the Oval tool (O) again. Go down to the Properties panel. Set #B0E2FD for the outline color and #3A5274 for the fill color. Select Solid as line type and a thickness of 2.

18 Draw a 54 by 54 pixel circle on the stage, anywhere.

19 Select the circle (both the outline and the fill). Open the Align panel by selecting Window > Align. Turn on the To stage button (1). Click the align horizontal center (2) and align vertical center (3) buttons.

The circle will now be perfectly aligned with the play button movie clip’s registration point and also with the ring below it.

20 Choose the Selection tool (V) and click on the fill of the circle once to select it. Press Ctrl+C to copy it.

21 Lock the current layer and call it circle. Make a new layer above it and call it circle overlay.

22 Select Edit > Paste in Place to paste the circle you copied two steps earlier exactly on the same position, but inside this new layer.

23 The copy of the circle fill will be selected by default after pasting. Go to the Color Mixer panel. Click on the paint bucket icon to select the fill color. In the Type menu, select Linear. Make the following gradient:

You should have three color squares, one in the middle and one on each end of the gradient.
Each square’s color should be white.
The alpha factor of squares on each end should be 41%. The middle one’s should be set to 3%.

24 Use the Gradient Transform tool (F) to rotate the gradient by 90°, just like before. The final result should look like this:

Creating the play icon

25 Lock the circle overlay layer, make a new layer above it and call it icon.

26 Select the Rectangle tool (R). Block the stroke color. Set the fill color to #3A5274. Draw a 33 by 33 pixelsquare anywhere on the stage.

27 Turn on the Snap to Objects option and use the Selection tool (V) to create a triangle out of the rectangle. Do it like this (follow the image sequence below):

Bring the cursor close to the square’s upper right corner.
Click and start dragging down, until you reach the middle of square’s height. Release your mouse button.
Repeat the same thing for the lower right corner of the square, this time dragging the corner towards the point you just made in the previous move. Once near, the corner will snap into place. Release the mouse and there is your triangle.

28 Click on the triangle to select it. Go to the Property inspector and type 27 in the W (width) field. There! You have a good-looking play button now. The screenshots below show the difference in size before and after the width of the triangle was modified.

29 Center the triangle inside the button.

30 Select the Ink bottle tool (S). In the Properties panel, choose Solid as type and set the thickness to 4. Click anywhere on the triangle to give it an outline.

31 Choose the Selection tool (V). Double-click on the triangle’s border to select it.

32 Press Ctrl+X to cut the outline.

33 Lock the icon layer. Make a new layer below it and call it icon outline.

34 Select Edit > Paste in Place to place the icon border here, right below the icon itself.

35 Lock the icon outline layer and unlock the icon layer. Select the triangle inside it.

36 Hit F8 to convert it into a symbol. Call it play icon and click OK.

37 The new play icon movie clip will be selected by default. Go to the Properties panel and click on the Filters tab to set the blending options for this symbol. Choose the Glow filter and tweak it like this:

Blur X and Y: 6
Strength: 240%
Quality: Medium
Color: #ACE0FD
Inner glow must be turned on.

And — ta-daa — here’s the final result, with the background:

Now ain’t it cool? This blue neon glow looks soooo good ! Let me show you now how to easily duplicate theis button and create a stop button out of it.

Creating the glowing stop button from the play button

38 Go back to the main scene by clicking on the Scene 1 link.

39 Open the Library by selecting Window > Library.

40 Right-click on the play button in the Library and select Duplicate from the pop-up menu. The Duplicate Symbol window ill appear. Just change the symbol’s name to stop button and click OK.

Repeat the same thing with the play icon symbol: duplicate it and call the new symbol stop icon. You will have fice symbols (all of them movie clips) in the Library now: the outer ring which is present in both the play button and stop button symbols, as well as play icon and stop icon for each respective symbol. Let me show you now how to make the modifications.

41 Double-click on the stop button symbol inside the Library to enter inside it. Unlock its icon layer.

42 Click once on the play icon that is inside it, to select it.

43 Go to the Properties panel and click the Swap button.

44 The Swap Symbol window will show up. All the symbols that you made in your Flash document so far are displayed here — exactly as they appear in the Library. Select the stop icon symbol and click OK.

Although this movie clip symbol looks exactly the same as the play icon, you know that this is the stop icon in fact. Flash informs you of this by displaying the name of the currently selected symbol in the Properties panel:

45 Now, double-click the stop icon movie clip on the stage to enter inside it. Erase the triangle and draw a 28 by 28 pixel borderless square in its place. I have made the square smaller, because if it had the dimensions of the triangle, it would come too close to the circle’s border and that wouldn’t look so good. Oh, yes: the color of the square should be the same as triangle’s: #3A5274.

46 Click on the stop button link to go back to the movie clip’s timeline.

47 Align the icon in relation to the movie clip’s center.

48 Lock the icon layer. Unlock the icon outline layer. Erase the outline triangle that is inside it.

49 Draw a rectangle here, without a fill, and make it the same size as the icon above it: 28 by 28 pixels. the line should have the same thickness as before (4) and the same color (#3A5274). Align it like you did with the icon. It should look like this:

And finally, here are both the play and stop neon glow buttons, side by side:

They look awesome! And there was no need at all to use Photoshop! The pause, fast forward and rewind buttons can be made easily now — you know now the easy principle of duplicating symbols. Just make smaller triangles for the rewind button and make two rectangles for the pause button. Nothing easier than that.

A single button that you just made has a file size of only 439 bytes! The same button made in Photoshop would have a file size ten times bigger than the one made in Flash! Still, it is much easier to create a neon effect in Photoshop than it is in Flash.

Hope you liked this tutorial.

Download the source file for this lesson

Related posts brought to you by Yet Another Related Posts Plugin.

Making an interactive country map

admin — Tue, 30 Mar 2010 11:01:02 +0000

In this lesson, I will show you have to make a very useful and widely used element: an interactive map. Whether it be a country map, like the case is here, or an anatomical map of human body, city plan, an engine schema, etc., the method applied is the same. It is very simple, as you’ll soon see.

Click the buttons on the right side of the map situated below and see what do they show you.

Slick, isn’t it? Yet so simple. The above is just an example of a map, which you’ll be making in this tutorial. Otherwise, if need be, you can make it a lot more complex, with additional data, more information and so on.

But if I made just that, this tutorial would never reach an end. You’ll understand the main concepts you need to know while making an interactive map, graph or diagram. That’s what counts! More complex maps and diagrams need just more time and dedication to make, that’s all. So let’s start!

Setting up the map’s sections

To spare you the work that needs to be done first, the actual drawings – countries, borders, cities, you can download it below. This is just so that you can get up to speed in time.

Download the starting source FLA with maps for this tutorial.

Save the file in a folder you’ll reserve for this lesson and unpack it. Open the source .fla file. You’ll see many layers in it. All this maps were made in the following way:

You must import the image of a map into Flash. After that, you lock the layer with it, make a new layer above it and trace the map – borders, countries, provinces and so on, using either the Line tool (N) or the Pen tool (P), whichever is easier for you. And that’s it, you get to work. There’s no special trick, you just draw and draw until you’ve got your vector map in Flash

1 All the layers you see in the source file should be locked. If they are not, lock them now.

The top three layers, namely – title, scale and country names contain only visual elements that won’t be manipulated. So you can forget about them altogether. If you’d like to know what do they contain, just click on the small dot beneath the eye on each layer, and you’ll see the content of that layer being hidden on the scene.

2 Unlock the cities layer. Do this by clicking on the small padlock icon found on it. Click on the layers first (and only) keyframe. The keyframe will become black, thus making you know that it is selected.

Once you did this, all the content of that keyframe becomes selected. Which is just what you need! You will turn those dots representing cities and their accompanying names into a movie clip symbol. You’ll need to do that so that you can make the cities appear and disappear at a click of a user’s mouse.

3 Hit F8 or select Modify > Convert to Symbol. In the window that appears, select Movie clip as type, call it cities on the map and click OK.

4 Now, without unselecting this movie clip you just created, go to the Properties panel. On its left side, enter the Instance name for this movie clip: call it cities. Hit Enter on your keyboard to confirm.

Lock this layer (cities). You just prepared this section of the map for manipulation via ActionScript. Later, thanks to the Instance name you just assigned to this movie clip, you’ll be able to make it invisible, and then appear at a click of a button.

5 Repeat the same procedure for the provinces’ borders. Unlock the provinces layer. Click on its first and only keyframe to select its contents.

6 Hit F8 to convert the selected drawings into a symbol. Again, just like you did before, select Movie clip as type and call the symbol provinces on the map. Click OK.

7 In the Properties panel, give this movie clip the Instance name provinces.

Lock this layer.

You will now make the section that shows the country’s population density. As you can see in the example at the beginning of this tutorial, this portion of the map fades in slowly once the “Pop density” button is clicked. This is really easy to make – you will be creating a simple fade-in motion tween animation.

Creating the animation for the population density section of the map

8 Unlock the pop density layer. Click on its first keyframe to select all of its contents.

9 Press F8 to open the Convert to Symbol window. Select Movie clip as type. Call it population density animation. Click OK.

10 Double-click this newly created movie clip on the stage to enter inside it. If you look above the stage now, you’ll see that you are currently working inside the population density animation movie clip.

11 Click on the first keyframe of Layer 1. You have just selected the population density graphics again, but you are now doing this inside the movie clip.

12 Select Modify > Convert to Symbol, choose Movie clip as type and call it population density map. Click OK. You won’t assign an Instance name to this movie clip because you will only make it move – you’ll make a motion tween with it.

Why a movie clip animated inside a movie clip? It makes the whole movie easier to work with. So, this animation serves to make the population density graphic fade in slowly.

If you did that on the main timeline, you would have to extend the duration of every other layer so that you maintain all the other elements visible all the time. And that is just unnecessary work. By having the animation inside a movie clip, you can control it independently of the main timeline which a lot more practical and easier to maintain.

Imagine that you had to change the fade-in animation because your client wanted it slower or faster, or because you’d maybe just decided to change it when all the other parts were finished. You would then have to go back and change the duration of all the other layers, which is really just a waste of time. I am sure that you understand the benefits of having an animation inside a movie clip symbol, like in this project you’re working on

13 So, still inside the population density animation movie clip, right-click on the frame 30 and select Insert Keyframe in the menu that appears.

14 Right-click anywhere on the gray area between the two keyframes (1 and 30) and select Create Motion Tween. If you did everything right up to this point, a continuous arrow on magenta background will appear.

15 Go back to the first keyframe (frame 1). Click on it. Next, click on the population density map movie clip on the scene, once. The movie clip icon will appear on the left side of the Properties panel, indicating that you selected the movie clip proper, and not a frame.

16 Now, on the right side of the Properties panel, go to the Color menu.

Select the Alpha option and bring it down to zero.

You have just created the animation which makes the population graph appear from complete invisibility to total opaqueness. Try it! Just press Enter and you’ll see the playhead go.

17 Lock this layer. Call it graphics. Create a new layer and call it actions. Lock this layer, too. You can insert ActionScript code inside a layer even when it’s locked.

18 Click on the first keyframe of the actions layer to select it.

19 Select Window > Actions to open the Actions panel. Type in the following code:

stop();

The stop(); action is necessary here, because without it, the animation would begin playing. All the animations in Flash are playing infinitely in a loop, unless stopped with ActionScript. And you don’t want the animation to start unless a user pressed the button which shows the population density on the map.

You also need to stop the animation once it reaches the end, when the population density graph is fully opaque. Otherwise, it would continue playing again. That means it would reach the first frame again, read the stop(); action and stop right there, where the graph isn’t visible at all.

20 So, right-click on frame 30 of this layer, exactly above the last keyframe of the graphics layer below it and select Insert Keyframe.

21 Press F9 to open the Actions panel. Again, insert a stopping command here:

stop();

There! Now you have just finished the preparation for this section of your interactive map. Nice. Let’s move on

22 Go back to the main scene by clicking on its link, just above the layers.

Save your document if you haven’t yet! The saving saves your nerves if the power sudenly goes out. Do this frequently!

23 Select the movie clip containing the animation you just made by clicking once on it. Hey! But you can’t see it! Since this movie clip has exactly the same surface as the map of Croatia beneath it, just click anywhere inside Croatia’s borders and you’ll select it. You will see a blue rectangular frame appear, which represents the movie clip.

24 In the Properties panel, give this movie clip the Instance name popDensity.

Lock the pop density layer. There! You can now proceed to create the elements which will enable user interaction with the map.

Creating the invisible buttons for the map’s user interface

See the button labels layer? That’s where the names of the various map features and sections are situated, like cities, provinces, etc. I put these labels on a separate layer, rather then make separate buttons from each label.

Why? Because it’s much easier to create an invisible button and just duplicate it. It saves a lot of time. And if you ever need to change a label, you just change the text, you don’t need to change a whole button. You will now make the invisible buttons.

25 Create a new layer above the button labels layer and call it buttons.

26 Select the Rectangle tool (R). Select any colors whatsoever, they aren’t important at all, because you are creating an invisible button. In the Options portion of the Tools panel, be sure that the Snap to Objects option is turned off. You can check that by looking at the little magnet icon – it should look the same as on the image below.

27 Draw a rectangle just above the “cities” link label.

28 Select the rectangle you just drew, complete with the outline. Do that by using the Selection tool (V).

29 Select Modify > Convert to Symbol. This time, select Button as type. Call it invisible button and click OK.

30 Double-click on the button you just made on the stage to enter inside it. You will see its specific timeline appear.

You’ll see in a moment that making an invisible button is extremely simple to do.

The Up, Over and Down keyframes correspond to the states when the button isn’t being interacted with, the mouse is over the button and the button is clicked, respectively.

The last keyframe – Hit – designates the clickable area of a button. This area can be bigger or smaller then the visible button itself. So, to have an invisible button, all you have to do is having just an area drawn in the Hit state, with all the others empty.

31 Click on the Up keyframe and drag it to the Hit state. That’s it! Cool, isn’t it?

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

33 Your invisible button will be represented by a transparent turquoise rectangle. Click on it once to select the button. Go to the Properties panel and give this button an Instance name. Call it cities_btn.

34 Click on the button once again (one click, not double-click, you don’t want to enter inside it!) to select it. Well, the button is already selected, but you’re inside the Instance name field in the Properties panel. You need to copy the button, that’s why you need to click on it.

Press Ctrl+C to copy it. Press Ctrl+Shift+V or select Edit > Paste in Place to paste this button in place.

Use the down arrow key to move this newly made copy down, until it comes over the next link label – provinces.

35 With this new button still selected, choose the Free Transform tool (Q). Handles for manipulating the button will appear.

Hold Alt and start dragging on the right-side handle.

Make it enough big so that it covers the whole “provinces” label.

36 There is one more change to be made – an important one. When you copied the button, the new copy retained every aspect of the original, not just the looks, but the Instance name also! And you can’t have two same Instance names in Flash.

So, click on the new invisible button you just finished resizing, once, and go to the Propertis panel. Erase the old Instance name and call it provinces_btn.

37 Repeat the steps 34 through 36. Make a copy of the button again, place it above the “pop. density” label and resize it. Also, don’t forget to change its Instance name. Call it popDensity_btn.

You have just finished this part of the map’s interface. The next step is to make obvious to the user what sections and graphs on the map are turned on and which are hidden. Remember, always be as user-friendly as possible!

Before continuing, lock the buttons layer.

Designing the map’s sections and graphs visibility icons

38 Create a new layer above the buttons layer and call it displayed.

39 Zoom in on the interface area to work more easily. Be sure to see the area between the buttons and the map – that’s where you’ll be placing the visibility icons.

40 Select the Line tool (N). In the Properties panel, choose black as color and enter 1.5 as line thickness.

41 Draw a small diagonal line, then, once you’ve released the mouse, don’t move it, just draw a new one, so that the two are connected. You should make a little “checked” sign.

If you find it difficult to draw, because maybe the tool snaps to nearby objects, turn off the Snap to Objects option in the Tools panel (the little magnet at the panel’s bottom).

42 Select the little icon you just made (both lines) and hit F8 to convert it to a symbol. Select movie clip as type and call it displayed.

43 Now, double-click on the Zoom tool in the Tools panel to bring the zoom factor back to 100%.

44 Make two copies of the displayed movie clip and place them on the left side of the “provinces” and “pop. density” labels, respectively.

45 Click once on the topmost displayed movie clip, go to the Properties panel and give it the Instance name displayedCities.

46 Repeat the same thing with the remaining two displayed movie clips. Give them the Instance names displayedProvinces and displayedPopDensity.

Lock the displayed layer.

Ta-daa! You just finished the design part for your interactive country map. The only thing that remains now is some simple ActionScript that will enable use interaction with the map.

Entering the ActionScript that powers the map’s interface

47 Create a new layer above all the others and call it actions. Lock it.

48 Select the layer’s first keyframe and press F9 to open the Actions panel.

49 Enter the following ActionScript code inside:

cities._visible = false;
provinces._visible = false;
popDensity._visible = false;
displayedCities._visible = false;
displayedProvinces._visible = false;
displayedPopDensity._visible = false;
cities_btn.onPress = function() {
if (cities._visible == false) {
cities._visible = true;
displayedCities._visible = true;
} else {
cities._visible = false;
displayedCities._visible = false;
}
}
provinces_btn.onPress = function() {
if (provinces._visible == false) {
provinces._visible = true;
displayedProvinces._visible = true;
} else {
provinces._visible = false;
displayedProvinces._visible = false;
}
}
popDensity_btn.onPress = function() {
if (popDensity._visible == false) {
popDensity._visible = true;
popDensity.play();
displayedPopDensity._visible = true;
} else {
popDensity._visible = false;
popDensity.gotoAndStop(1);
displayedPopDensity._visible = false;
}
}

Hit Ctrl+Enter to test your movie. Click on the map’s sections buttons, turn different map features on and off. Marvel at your creation! OK, let me explain you what makes this map work.

The ActionScript code explained

The first section is quite simple. It makes invisible all the sections of the map (except the base map layout, with the countries), and the little “checked” signs that show if a section is visible or not.

cities._visible = false;
provinces._visible = false;
popDensity._visible = false;
displayedCities._visible = false;
displayedProvinces._visible = false;
displayedPopDensity._visible = false;

The first keyword of every line is the Instance name that belogns to a particular movie clip. Remember, you named them all previously. The second keyword, _visible, defines the visibility of a movie clip or a button. This property’s only possible values are true or false. They are self-explanatory.

The ActionScript code for the first button (cities_btn) is what comes next. It says what will happen when this button gets pressed.

cities_btn.onPress = function() {
if (cities._visible == false) {
cities._visible = true;
displayedCities._visible = true;
} else {
cities._visible = false;
displayedCities._visible = false;
}
}

The onPress event is what happens when a user presses this button with the mouse. So the line

cities_btn.onPress = function() {

says that a function will be executed once this event (onPress) occurs. When a function gets executed, what is in fact executed is all the code found within its curly braces: { and }. And this code is an if/else statement:

if (cities._visible == false) {
cities._visible = true;
displayedCities._visible = true;
} else {
cities._visible = false;
displayedCities._visible = false;
}

I will now explain you this classic and widely used programming concept. The first line sets a condition:

if (cities._visible == false) {

Translated from ActionScript into English, this line literally says this: if the condition within the parentheses is true, execute the code within the first pair of curly braces. So, it says that the _visible property of the cities movie clip must equal false for the condition to be fulfilled.

Is it set to false? Yes it is. You did it by writing the first portion of code, when you made invisible all the map’s sections. So, the condition turns out to be true and the code within the first pair of curly braces gets executed:

cities._visible = true;
displayedCities._visible = true;

This code sets the _visible property of the cities and displayedCities movie clips to true. What effectively happens then is, when a user has clicked the cities_btn button, the cities appear on the map, and the little check mark appears near the clicked button.

If the condition didn’t turn out to be true, the code between the first pair of curly braces would be completely ignored and skipped as if it wasn’t there at all. What would be executed in that case is the following:

} else {
cities._visible = false;
displayedCities._visible = false;
}

The else keyword means if the condition between the parentheses (cities._visible == false) isn’t fulfilled, the code between the second pair of curly braces gets executed. This code makes the cities on the map invisible again, and its mathcing “checked” icon.

So what this if/else statement creates is in fact an on and off switching mechanism. A user presses the button in question, if the cities aren’t visible on the map, they appear. Once they are visible, when the same user clicks on the button again, the if gets ignored, the else gets executed and the cities are made invisible again.

The code for the provinces_btn button is exactly the same, only the Instance names differ – this shows and hides Croatia’s provinces borders on the map.

provinces_btn.onPress = function() {
if (provinces._visible == false) {
provinces._visible = true;
displayedProvinces._visible = true;
} else {
provinces._visible = false;
displayedProvinces._visible = false;
}
}

The code for the last button is a little bit different from the previous ones. In addition for setting the visibilty of the population density graph on and off, it also sets it in motion.

popDensity_btn.onPress = function() {
if (popDensity._visible == false) {
popDensity._visible = true;
popDensity.play();
displayedPopDensity._visible = true;
} else {
popDensity._visible = false;
popDensity.gotoAndStop(1);
displayedPopDensity._visible = false;
}
}

If you remember, back in step 8 you made the fade-in animation inside the population density animation movie clip. Then you stopped it with ActionScript. So, once this movie clip is made visible, it is also set in motion so that its animation unrolls and the population graph on the map fades in slowly.

popDensity.play();

In the else portion of the code, which gets executed only when the popDensity movie clip’s _visible property is set to true, the movie clip is sent back to its first frame and stopped there, so that it can fade in again when requested.

popDensity.gotoAndStop(1);

Some points to keep in mind when creating an interactive map

Before you start drawing a map in Flash, it is useful to be aware of some important things:

Make the country shown on the map stick out from the rest. A good method to make this is to color the other countries on the map with the same, but faded out color. Also, make the other countries’ names visible, but not too much – use a faded color here, too. See the image below for explanation – I used these colors in the map you just worked on in this tutorial.

Don’t use pure black for country borders and land/sea border. If I made that, the map would have looked messy and the black would stick out too much, diverting attention from the map as a whole. Use an intermediate shade of grey.
When the population density (or any similar statistical map) shows, you should also include a scale that explains what each color means. Red are the most heavily populated areas, but you must write that. I didn’t include it not to make this tutorial too long. Just put a scale with colors and explanations in the population density animation movie clip, on a separate layer. It would be good that if it appeared somewhere below the interface buttons.
Your map can have many sections and graphs. Just be sure to make the interface intuitive and easy to use.
Be aware of the scale you’re working in. Don’t clog your map with unnecessary information – for example, in the map found on top of this page, putting in some subregional borders – like counties or city territorial limits would make no sense at all. Or every local road – this kind of information is reserved for local, more detailed maps.

With that said, enjoy creating an interactive country, city, or any other kind of map! It is really a very useful element of a website, which can help the visitors to a particular site a lot, be it for finding the exact location of a small business office, getting a quick overview of a country or anything else! And guess what – the interactive map you just made is only 16 KB in size! That map doesn’t need a preloader even for slower modem connections!

Oh, yes, and if you want to know more on Croatia, visit the Croatian Tourist Board’s website. There is a map similar to this one there, if you click on the “Destinations” link once you choose your language. Believe me, it isn’t much more complex than this one. And the effect is great, being very clear and intuitive also. You just learned how to make a professional-looking map in Flash! Cool!

Before you set off to create your own maps and plans, look at the expanded example I made. Roll your mouse over the westernmost region, and click on it! You’ll find the source for this example available for download below.

Download this lesson’s zipped source FLA file.

Also, you can download the source for the expanded version.

Related posts brought to you by Yet Another Related Posts Plugin.

Glowing neon playback control buttons

admin — Tue, 16 Mar 2010 15:51:15 +0000

How to use the basic shapes to create the ones you need,
How to use the great blending filters in Flash 8 pro,
How to combine multiple filters and objects stacked upon one another, and some more.

You can see the example of the sleek buttons below.

Preliminary steps — setting the background

1 Open a new Flash document. Choose Modify > Document (shortcut: Ctrl+J). Select black as document background color. Click OK.

2 Select the Rectangle tool (R). Turn off the stroke color by clicking on the little pencil icon and then the small red-striped square at the bottom of the Tools panel: .

3 Make sure that both the Object drawing and Snap to objects options are turned off: .

4 Click the Set Corner Radius icon () and enter 6 in the window that will show up, click OK. This is done in order to have rectangles with round corners.

5 Draw a flat color (any color will do) 410 by 120 pixel rectangle.

Click on the paint bucket icon to select the fill color.
In the Type menu, select Linear.
Click once on the small colored square found on the bottom right.
In the color code field, enter the hex code #2E70AA (that’s a zero, not the letter O).
Set the Alpha property for this color to 34%.
Set the same color for the left square, but set its Alpha to 100%.

7 Press and hold Shift, click near the rectangle’s top and drag your mouse down until the rectangle’s bottom. Release your mouse button, and there is your nice gradient!

Creating the glowing outer ring

8 Lock the current layer and call it background. Create a new layer and call it buttons.

10 Somewhere over the rectangle, draw a ring (it is a circle, but because of the line thickness and lack of fill, it looks like a ring). Make it 70 by 70 pixels.

Note: all the four squares should have their alpha set to 100% (complete opaqueness). The ring will now look like this:

I have hidden the background layer to work more easily and so that you can more clearly see the various steps.

Click OK. This choice for the registration point will make it easier to align the elements inside the button later.

14 Click on the Filters tab in the Properties panel (see no. 1 in screenshot below). Click on the plus icon (2) and select the Glow filter. Make the adjustements as follows:

Blur X and Y: 8
Strength: 260%
Quality: High.
Color: #ADE2FC.

Leave the Knockout and Inner glow options unchecked. You will get a nice glow for your outer ring:

Making the main button circle

15 Select the ring again and press F8 again, while leaving the same registration point as previously and Movie clip as type of symbol. Call the new symbol play button and click OK.

17 Select the Oval tool (O) again. Go down to the Properties panel. Set #B0E2FD for the outline color and #3A5274 for the fill color. Select Solid as line type and a thickness of 2.

18 Draw a 54 by 54 pixel circle on the stage, anywhere.

The circle will now be perfectly aligned with the play button movie clip’s registration point and also with the ring below it.

20 Choose the Selection tool (V) and click on the fill of the circle once to select it. Press Ctrl+C to copy it.

21 Lock the current layer and call it circle. Make a new layer above it and call it circle overlay.

22 Select Edit > Paste in Place to paste the circle you copied two steps earlier exactly on the same position, but inside this new layer.

You should have three color squares, one in the middle and one on each end of the gradient.
Each square’s color should be white.
The alpha factor of squares on each end should be 41%. The middle one’s should be set to 3%.

24 Use the Gradient Transform tool (F) to rotate the gradient by 90°, just like before. The final result should look like this:

Creating the play icon

25 Lock the circle overlay layer, make a new layer above it and call it icon.

26 Select the Rectangle tool (R). Block the stroke color. Set the fill color to #3A5274. Draw a 33 by 33 pixelsquare anywhere on the stage.

27 Turn on the Snap to Objects option and use the Selection tool (V) to create a triangle out of the rectangle. Do it like this (follow the image sequence below):

Bring the cursor close to the square’s upper right corner.
Click and start dragging down, until you reach the middle of square’s height. Release your mouse button.
Repeat the same thing for the lower right corner of the square, this time dragging the corner towards the point you just made in the previous move. Once near, the corner will snap into place. Release the mouse and there is your triangle.

29 Center the triangle inside the button.

30 Select the Ink bottle tool (S). In the Properties panel, choose Solid as type and set the thickness to 4. Click anywhere on the triangle to give it an outline.

31 Choose the Selection tool (V). Double-click on the triangle’s border to select it.

32 Press Ctrl+X to cut the outline.

33 Lock the icon layer. Make a new layer below it and call it icon outline.

34 Select Edit > Paste in Place to place the icon border here, right below the icon itself.

35 Lock the icon outline layer and unlock the icon layer. Select the triangle inside it.

36 Hit F8 to convert it into a symbol. Call it play icon and click OK.

Blur X and Y: 6
Strength: 240%
Quality: Medium
Color: #ACE0FD
Inner glow must be turned on.

And — ta-daa — here’s the final result, with the background:

Now ain’t it cool? This blue neon glow looks soooo good ! Let me show you now how to easily duplicate theis button and create a stop button out of it.

Creating the glowing stop button from the play button

38 Go back to the main scene by clicking on the Scene 1 link.

39 Open the Library by selecting Window > Library.

41 Double-click on the stop button symbol inside the Library to enter inside it. Unlock its icon layer.

42 Click once on the play icon that is inside it, to select it.

43 Go to the Properties panel and click the Swap button.

46 Click on the stop button link to go back to the movie clip’s timeline.

47 Align the icon in relation to the movie clip’s center.

48 Lock the icon layer. Unlock the icon outline layer. Erase the outline triangle that is inside it.

And finally, here are both the play and stop neon glow buttons, side by side:

Related posts brought to you by Yet Another Related Posts Plugin.

Photoshop CS4: Intelligent extensions with panels

admin — Sat, 06 Mar 2010 15:50:08 +0000

Since CS4 it’s possible to extend Photoshop with so called panels. Panels are palettes that you can easily create yourself. Based on Flash, they give you numerous options that go far beyond actions and even scripts, such as sending email directly from Photoshop, blog infos, watermark, lorem ipsum, or grid generators.

Installation

First download all the data to your computer and unpack the files. Some panels offer icons to directly install them with a double click, others need to have their files moved to a certain directory.

When an icon with the ending .mxp is double clicked, the Adobe Extension Manager CS4 pops up. This should work on a Mac just as it does on a PC. You follow the instructions in the program and close it after the installation. Other sorts of files must be moved to the folder Adobe > Adobe Photoshop CS4 > Plug-ins > Panels. When you (re)start Photoshop, you can call the panels with Window > Extensions. The palettes can be free floating or docked with the other palettes.

Avoiding problems

It can happen that an older version of the Extension Manager (like CS3 for CS4) tries to install the panels. Naturally, this won’t work, so in order to avoid errors you should open the most recent version of the Extension Manager by hand. The installation is then called with a button of the same name.

Lorem Ipsum

The dummy text „Lorem ipsum“ has been used as a placeholder for centuries now. The words are similar to Latin, but are meant to be incomprehensible so the viewer can concentrate on the layout first. And even though this placeholder can sometimes cause funny customer reactions – like somebody asking if the foreign language will be translated later on – it is very frequently used, in web design as well.

The Lorem Ipsum panel creates a dummy text generator as a palette for Photoshop CS4. After the installation you can find it under Window > Extensions > LoremGen. Unfortunately, only the number of sentences can be entered for now. A click on Generate Text creates them and they can be copied and pasted into the layout. Another input field to arrange paragraphs would be desirable.

Gridmaker

Especially in web design layout patterns, also called grids, are frequently used. This helps in making the page appear clean and structured. They also assist the designer with his arrangements, because certain formats (in width) are simply pre-defined. The Gridmaker is a panel that can create such grids.

After clicking on Window > Extensions > GridMaker you can already create a new document. You enter values for the number and width of the single units, which also affects the overall width of the document. You then create it with a click on Create Document. By the way, the grid is made of guide lines.

The Emailer

The Emailer is also opened via Window > Extensions. This one lets you send emails directly out of Photoshop. The panel offers two options for this. The Email Account Preferences button leads to a second page where you can enter any outgoing server (port 587). Complete the form with values for the account name, password, and the sender address, and you’re ready to send documents including a message without ever leaving Photoshop.

The second method uses an external program like Microsoft Entourage, Mac Mail or Microsoft Outlook. You just tick a checkbox for Use email application and select the desired email software. Now you can decide whether only the current document or all open documents should be put into the email via Send all open images. The images can also be sharpened, converted to sRGB or resized beforehand.

Otherwise you simply enter the address, a subject, and optionally a short message, just like in any other email program. Click on the Send current image button and all of the concepts are sent to the customer. If you have selected an external application like Outlook or Mail, the respective program pops up and lets you do the necessary inputs there.

Sharpening

With Pro Capture Sharpening and Professional Sharpening Actions we have two professional palettes that take care of sharpening image material.

Capture offers some presets which are divided into five categories: Low Resolution Digitial Cameras (LRDC) for photographs below 3MP, Medium Resolution Digital Cameras (MRDC) for pictures between 3MP and 8MP, High Resolution Digital Cameras (HRDC) for images above 8MP, Small Film Scans (SFS) for films such as APC and 35mm, and Large Film Scans (LFS).

Depending on the preset and its subitems the sliders change, although you could adjust them manually as well. On the lower right side there’s a small button that executes the application. The sharpened result is now on a layer of its own. Sharpening’s clean and well-arranged interface offers numerous actions and action sets for sharpening.

The Watermark Creator

The panel called The Watermark Creator puts a watermark in one or more files. First you define a water mark source file. This could be a Photoshop or Illustrator file, a JPEG, a PNG or a TIFF file. In case of Photoshop files you can retain the layers, and blending modes and styles are kept as well.

You can choose to have all open documents fitted with a watermark, or those within a certain folder. Since you shouldn’t overwrite your original files of course, you should input a folder where the marked versions are stored after the treatment. A rough positioning of the watermark is possible through a selection menu that offers options like Top right or Centered left.

In order to avoid a watermark sticking right to the edge, you can define a horizontal and vertical margin. You could then scale the mark or change its opacity. The Watermark Preview button allows you to check the effect of your inputs at any time.

Finally, you can set some JPEG export options such as selecting Standard JPEG or JPEG for web. The quality, size, and resolution of the photo can be entered and a sharpening pass could be applied. A click on Execute sees to it that the watermarks are inserted and the images are saved in the selected folder.

Adobe Configurator

You can easily create your own panels. It’s easy when they have a very simple structure. For more advanced solutions you will need knowledge of Flash. The Adobe Configurator, which is an Adobe AIR application, can be downloaded from the Labs.

After starting the software and choosing Create New Panel you first select the size of the palette, then you can already insert the contents of the panel via Drag & Drop. You could easily insert your most frequently used tools as icons, or menu items that might usually be nested too far down in the depths of Photoshop – all for quicker access.

Using the mouse you can position these buttons and icons with millimeter precision. If you create your own actions you can use them in a panel as well. Even a Photoshop newbie can do this.

Javascripts or Flash files are a bit more tricky. By the way, videos and text can also be inserted. If you’re satisfied with your work, you click on File > Export Panel in the menu. The exported files belong in Photoshop CS4’s panels folder, and you’re ready to call your own palette with Window > Extensions.

Related posts brought to you by Yet Another Related Posts Plugin.

Making the camera focus change effect in Flash with the aid of the blending filters

admin — Sat, 06 Mar 2010 15:20:45 +0000

In this Flash 8 Pro tutorial, I will show you how simply it is to create an interactive image with camera blur/sharpen effects that appear as the user moves her mouse over it.

In this easy and comprehensive lesson, you will see how to:

Use the Pen tool to create a precise mask,
Make invisible buttons with custom shapes that cover specific parts of your image,
Create a motion tween that uses the blending filters available in Flash 8 Pro,
Make a slow or quick change of focus with ActionScript and a lot more.

Below is the finished example of what you are going to achieve at the end of this detailed tutorial. Move your mouse over the various parts of the picture to see the change of camera focus.

Nice effect! The photo is an interesting one – a car wreck in Zagreb.

Preparing the workspace

Before using the drawing tools, you’ll first tweak some properties of your document and import the picture for this lesson.

1 Open a new Flash document.

2 Select Modify > Document to open the Document Properties window.

3 Change the Dimensions of your document (see 1 in the image below) so that its width equals 500 pixels and height 600 pixels. This will be enough to accommodate the picture that you’re going to download later and import into your Flash document.

Set the speed of your movie (the Frame rate -see 2 below) to 30 fps.

4 Download the image i prepared for this tutorial, save it someplace where you will easily find it and unzip it.

5 Select File > Import > Import to Stage, find the image, select it and click Open. The image should appear on your document’s stage.

6 While the image is still selected, check out in the Properties panel that it is positioned on round pixels.

The image’s X and Y values (its coordinates on the stage, expressed in pixels) should end with a zero and not any other number. If this isn’t the case with your image, change those numbers to zeros manually.

If the image isn’t placed on round pixels, it may turn out blurry in your final SWF movie. This is not the blur effect you will be doing in this lesson I’m talking about, but rather the question of how Flash displays objects that are not placed on round coordinates. Since a part of the image (either the foreground or background) will always be in focus, the image itself has to be sharp.

7 Call the current layer background. Make a new layer above it and call it car.

8 Click on the image with the Selection tool (V) to select it. Press Ctrl+C to copy the image.

9 Lock the background layer.

Click on the car layer’s first keyframe to select it.

10 Press Ctrl+Shift+V to paste the image in place here. Pasting an object in place in Flash is different from simple pasting. When you paste something in place, that object is placed exactly on the same spot as the original one.

So now you have two copies of the same picture, placed exactly one above the another, in their respective layers. This is a must if you wish to obtain the effect discussed in this lesson. You can’t have a realistic focus-changing effect if your images are placed on different locations.

Top of page

Using the Pen tool to create a precise outline

11 Lock the car layer. Make a new layer above it and call it car mask.

12 Zoom in on the image using the Zoom tool (Z). You are going to draw a precise outline of the car, so zooming in on the picture will make your work a lot more easier.

13 Select the Pen tool (P). In the Properties panel, select hairline as type of line and choose a color that will be in good contrast with the image.

14 Position your cursor somewhere on the left bottom edge of the car (see the left image below).

Click and don’t release your mouse – just drag it a little bit away from the point where you first clicked. As you can see in the image on the right below, thin blue handles will appear. You can release your mouse button now.

This technique of clicking and dragging is very important if you want to obtain adjustable curves with the Pen tool. If you just click without dragging, you would have obtained straight lines with points which are devoid of handles. You could add the control points with handles later, but why do it afterwards if you can do it now?

You will need curved and not straight lines, because you are going to adjust them later to make them follow the car’s outline precisely.

15 Next click just below the car’s rear light and again drag your mouse. Release it once the control handles for the second point have appeared.

After you release your mouse button, you will see the first segment of the curve on your scene.

16 Continue clicking-and-dragging until you have reached the other side of the car. Don’t be bothered if some segments of your curve go over the car – you will adjust that in a moment. For now, the only important thing is to place the points around the edges of the car.

You can stop once you reach the light on the car’s right edge, just like in the image above. You will soon see why. But, first, you must finish the curve so that it follows the outline of the car smoothly. (You call that a car?)

17 Select the Subselection tool (A). Click on the curve to select it for work. The little squares (control points) will appear.

18 Click on a control point to select it for manipulation.

19 Place your cursor over one of the control handles (the small circle at the end of the handle), click on it and start dragging. You will see a thin blue line appear, indicating the new position of the handles. Release your mouse.

As you can see in the image above on the right, the curvature of curves on both sides of the control point have changed. And you certainly noticed that both handles were moving in unison. What you need to do in order to adjust the curves so that they fit the car outline perfectly, is to control only one handle of a control point, not both at the same time.

20 To succeed in doing exactly that, place your mouse over the control handle, press and hold the Alt key, then click your mouse and start dragging the handle. Only the selected handle will move – the other one will stay still.

The picture above shows how just one curve (the one to the left of the selected control point) has changed its curvature. The other one has remained unchanged.

Following the said technique, adjust all the segments of the curve so that it fits the car perfectly. Start from either end of the curve, select point after point, and move each control handle until all of the curve has fallen into place. I have selected the curve on the image below, so that you can better see how it should look in the end.

Top of page

Completing the mask outline

21 Select the Line tool (N). Click outside the image, on its right (somewhere near the white plastic bag on the picture), hold Shift and start dragging your mouse to the left.

Once you have reached the other side, you can release your mouse and the Shift key.

22 Select the Selection tool (V). Click on the portion of the line that is “inside” the car to select it.

Hit Delete to remove this part of the line.

23 Use the Line tool (N) once again to create three more lines that will encompass the rest of the car and the lower part of the picture. The only important thing you should pay attention to is that all the lines should be connected. You are going to fill this outline with color in a moment, so everything must be connected, with no gaps left behind.

24 Select the Paint Bucket tool (K) and choose a stark color that is well visible in contrast with the rest of the picture. Click anywhere inside the outline to fill it with color.

Fine! The form of the mask is now completed.

You will now create the mask and also use the same shape you just created to make two buttons.

Top of page

Creating the mask and seeing it in action

25 Lock the car mask layer.

26 Hide the background layer.

It is necessary to hide the background layer if you want to see the masking effect in action. Since the background layer contains the same picture as the car layer, you wouldn’t be able to see the mask at work.

27 Right-click on the car mask layer and select Mask from the menu that shows up. The layer will turn into a mask, and the one beneath it (car) will instantly be the masked one.

As you can see, only the car is visible now, thanks to the precise shape for the mask you drew earlier. Flash rules!

Of course, the terrain around the car is visible too – it would be unnatural to make the camera focus effect which focuses only on the car and not its surroundings. In this way, the effect will seem more realistic.

Top of page

Creating the invisible button for the car

28 Unlock the car mask layer.

29 With the aid of the Selection tool (V), select the whole mask shape – the outlines as well as the fill. The easiest way to do this is to double-click on the shape’s fill.

30 Press Ctrl+C to copy the shape.

31 Lock the car mask layer.

32 Create a new layer above all the others and call it car button.

33 Press Ctrl+Shift+V to paste the shape in the same exact place as the one in the layer below it.

34 While, after pasting, this shape is still selected, press F8 (or select Modify > Convert to Symbol).

In the window that appears, select Button as type, call it car button and click OK. It doesn’t matter if this new button has the same name as the layer it is situated in. Flash has no problems with this, so there is nothing to worry about.

35 Double-click the newly made button on the stage to enter inside it. If ever in doubt as to what timeline you are currently working in, just have a look above the layers. Flash is always informing you where you are currently in.

36 Click on the Up keyframe, hold your mouse button and drag it over to the Hit keyframe.

You have just created an invisible button. The first three keyframes of a button symbol in Flash are the states which show up when a user interacts with the button in question:

The Up state is present when there is no interaction with the button.
The Over state shows up when a user rolls his mouse over the button.
The Down state happens when the button is clicked.

The Hit state of a button symbol isn’t visible at all – never ever. The contents of this keyframe define the clickable area of a button. This area can be bigger or smaller than the visible states of the button. So, when the first three keyframes are empty, the button is invisible, but still clickable! This is especially practical in projects like the one you are currently working on: you need a button to control the camera blur/sharp effect, but this button must not be seen, in order not to interfere with the visual aspect of your Flash movie.

37 Click on the Scene 1 link above the timeline to return to the main scene.

You’ll notice that in Flash, invisible buttons are represented with a bluish-turquoise hue.

Top of page

Making the invisible button symbol for the background

38 Lock the car button layer. You can hide it too, so that you can see more clearly your workspace.

Create a new layer above it and call it bkg button.

39 Select the Rectangle tool (R). Choose colors that are different from the ones that you used to create the mask for the car and the car button. Draw a rectangle that is bigger than the whole picture. You may need to make visible the background layer to better see the size of the rectangle you’re going to draw. Just remember, you’re creating this rectangle in the bkg button layer.

40 Lock the current (bkg button) layer and Unlock the car mask layer.

41 Just like you did before, select the whole mask shape with the Selection tool (V).

42 Press Ctrl+C to copy the shape. Lock the car mask layer.

43 Unlock the bkg button layer and click on its first frame to select it for work.

44 Press Ctrl+Shift+V to paste the copied shape into place.

45 Choose the Selection tool (V) and click on an empty part of the stage or outside it to unselect everything.

46 Double-click on the shape you just pasted to select it again, then hit Delete to erase it. You should be left with a shape that is just encompassing the background behind the car.

You had to click outside the stage and unselect everything. Had you pressed the Delete key immediately after pasting the shape onto the rectangle, you wouldn’t have cut out the form of the car from it. By unselecting everything, the pasted shape “takes out” the part of the rectangle it is pasted over. So when you erase it after that, you get the rectangle with the part that is “bitten” out of it.

47 Select the new shape with the aid of the Selection tool (V). Be sure to select both the fill and the outline – don’t leave anything unselected.

48 Hit F8 to convert it to a Button symbol. Name it background button and click OK.

49 To make this button invisible too, you’ll have to repeat the same operations (see steps 35 through 37 above for a more detailed description) you did for the car button. Here is a quick recapitulation:

Double-click the newly made button on the stage to enter inside it.
Once inside the button symbol, click on the Up keyframe and drag it over to the Hit keyframe.
Click on the Scene 1 link above the timeline to return to the main scene.

Great! Now you’ll have to give Instance names to your buttons, otherwise you wouldn’t be able to pass commands to them via ActionScript.

50 You are on the main scene now. Click the button on the stage once to select it. Do not double-click it, because you’ll end up inside it, which is not what you need now.

51 Go to the left part of the Properties panel, and type background_btn in the Instance name field. You may hit Enter to confirm that.

52 Lock this layer (bkg button) and unlock the car button layer.

53 Click once the car button found in this layer, and give it an Instance name too: call it car_btn.

Lock this layer.

Top of page

Creating the background fade in – fade out animation

54 Hide all the layers by clicking the eye icon situated above them.

55 Make only the background layer visible and unlock it.

56 Click on the image (old_car_wreck.jpg) that is inside it to select it. Select Modify > Convert to Symbol (or hit F8) to convert this picture into a symbol. Otherwise, you wouldn’t be able to animate it.

Make sure to select Movie clip as type of symbol, because the selection has stayed on Button from before. Call it background mc and click OK. Click on the movie clip on the stage once to select it.

57 Click the Filters tab for the movie clip in the Properties panel.

58 Click the little plus icon (see 1 in the image below) and select Blur as the filter. Set both the X and Y blur values to 9 (2). Finally, choose Medium as the quality setting for the filter.

59 Right-click on frame 20 of the current layer and select Insert Keyframe.

60 Click on the movie clip in this keyframe and in the Filters tab, just click on the small minus icon (see below) to remove the Blur filter from the movie clip in this keyframe.

61 Right-click anywhere on the gray area between the two keyframes in the current layer and select Create Motion Tween. An uninterrupted arrow on magenta background will appear indicating that you have just made a proper motion tween animation.

62 Right-click on frame 1 of this same layer and select Copy Frames from the menu.

63 Right-click on frame 39 and select Paste Frames. Your background layer should now look like this:

Right-click on the gray area between the middle and the last keyframe and select Create Motion Tween just like you did for the first segment of the animation.

Why did you had to copy the first keyframe and paste it at the end of the animation? Well, this saves you time: instead of turning the blur filter on again and setting the same values as before, copying is much simpler. And since you are going to enable the user to start the in focus/out of focus animation for the background with a move of the mouse, this is just the best thing to do: The background going out of focus has to come to the same level of blurness as it started out with. That’s why you just copied the first frame.

You are going to make a similar animation in the car layer in a moment.

Top of page

Creating the sharp/blur animation for the car

64 Lock the background layer and hide it. Unhide the car layer and unlock it. Click the first keyframe of the car layer to select it for working. Your layers should look like this:

65 Click the image in this layer to select it. Press F8 to convert it to a Movie clip symbol. Call it car mc and click OK.

A small note: you can use the same movie clip that you used in the background layer (background mc) for this animation, as it sits in a separate layer. However, in order to do that, you should delete the image from this layer and replace it with the background mc movie clip. This movie clip would have to be positioned exactly as the one in the layer below it, so I find it easier to just make a new movie clip here.

66 Right-click on frame 20 in this layer and Insert a Keyframe.

67 Click on the movie clip in this keyframe to select it and then click on the Filters tab below the scene. Apply the same settings as you did for the movie clip in the background layer: select Blur as filter, put the X and Y values to 9 and select Medium quality.

68 Right-click on the grey zone between the two keyframes and make a Motion tween.

69 Right-click on frame 1 of this layer and select Copy Frames.

70 Right-click on frame 39 and select Paste Frames.

71 Right-click anywhere between the second and third keyframes and select Create Motion Tween. Here is how the timeline of the car layer should look now, together with the one below it:

72 There is still one more thing to do before proceeding to make this movie interactive with ActionScript: you must prolong the duration of the mask. The mask must cover the car animation in its entirety if you want the final SWF file to be impeccable.

Therefore, right-click on frame 39 of the car mask layer and select Insert Frame. There is no need to insert a keyframe here, as there isn’t going to be any animation present. The mask will just last as long as the layer below it, with no modifications.

Lock the car layer. Here’s the final look of the three layers:

73 Of course, the buttons should be present at all times, so that your users can interact with the movie without any problems. Do the following:

Right-click on frame 39 of the car button layer and Insert a frame. Do not make the mistake of inserting a keyframe! A frame should be inserted here if everything is to function properly. Remember, you are not animating the buttons, you are just making them last throughout the whole animation.

Do the same thing with the second button: Insert a frame in frame 39 of the bkg button layer. There you are! You can finally start ActionScripting.

Top of page

Adding interactivity with ActionScript

74 You can make all the layer visible again, but lock any unlocked ones. Create a new layer above all the existing ones and call it actions.

75 Click the first keyframe of the actions layer to select it for placing ActionScript.

76 Press F9 (or select Window > Actions) to to open up the Actions panel. Put the following code inside it:

stop();
var carIsFocused:Boolean = true;
background_btn.onRollOver = function():Void {
if (carIsFocused) {
play();
}
};
car_btn.onRollOver = function():Void {
if (!carIsFocused) {
play();
}
}

77 Now, right-click on frame 20 of the actions layer and select Insert Keyframe. The timeline of the actions layer will now look like this:

78 While this new keyframe is still selected, open the Actions panel if you have closed it, and insert the following ActionScript code inside:

stop();
carIsFocused = false;

79 Test your movie by pressing Ctrl+Enter or selecting Control > Test Movie. If your car appears blurred (and it shouldn’t be), do the following:

Close the testing movie and go back to your FLA document.
Unlock the car mask layer.
If your mask shape appears to be selected, just click anywhere outside the stage to unselect everything.
Lock the car mask layer.

I don’t know why this is so, but the mask doesn’t function if it is selected. I know that this is annoying, but somehow this little “misfunction” exists within Flash, so you have to live with it.

Test your movie again and roll your mouse over the background. It will come into focus, while the car along with its surrounding area will fade out of focus and will become blurred. Then try the opposite: place your cursor over the car and see it coming into sharp focus, while the background gets blurred out. Neat, huh? Superb! But let me explain you how this functions.

The first line of the ActionScript code in the first frame is simply:

stop();

This stops the playhead from going on. This is a necessary piece of code if you don’t want your animation to loop endlessly – it wouldn’t make any sense and the interaction with the movie would have no meaning.

Next, you are creating a variable to make Flash aware that the car is now in sharp focus.

var carIsFocused:Boolean = true;

When you want to create a variable, you first write the keyword var, followed by the variable’s name. In this example, I chose the name to be carIsFocused. I just liked it that way and this name is also meaningful – it reminds me of the variable’s purpose. I could have called it carFocus, carissharp or any way I liked.

The colon after the variable’s name (:) signals to Flash that there is the type of value going to be written next. The value of this variable is of the Boolean kind. This type of value can be either true or false, and not any other whatsoever. A variable can also have a numerical value, textual, and so on.

So, why is this necesssary at all? In order to have this kind of basic interactivity, where the two buttons react to the mouse being rolled over them, you must tell Flash what’s currently in focus and what’s not, so that it can tell the buttons how to react to the mouse.

By setting the value of the carIsFocused variable to true, you make it clear to Flash that the car is in focus now, which is really the case at the start of your animation.

Now comes the function which controls the background_btn button’s response to user’s actions:

background_btn.onRollOver = function():Void {
if (carIsFocused) {
play();
}
};

When you want a button to react to a roll over mouse event happening, the easiest way to do this is to tie this event to a function. This function will then execute when a user rolls her mouse over that particular button.

So, the line

background_btn.onRollOver = function():Void {

does exactly that. The button’s rollover event is handled by the event handler for this event: background_btn.onRollOver. When you place the assignment operator (=) after it, followed by the keyword function, this function will be run once this event has transpired. The Void keyword after the colon (:) tells Flash that this function does not return a value. Some functions are set up so that they return a value, be it numerical, text or some other kind of value. Even if there is no value being returned, like in the case of the aforementioned function, you must tell Flash this too.

And when a function is being run, what is in fact being executed is all the ActionScript code placed between its curly brackets: { and }. Let’s have a look at this code:

if (carIsFocused) {
play();
}

What you see above is a simple conditional statement. Conditional logic is used so that the computer can decide by itself what actions to take, based on the input.

The first line of this simple if conditional statement says

if (carIsFocused) {

Translated to English, this means: if the value of the carIsFocused variable equals true, the code between the statement’s curly brackets will get executed.

In the case of an if conditional statement, when you use the shorthand version of checking if a variable’s value equals true, you write only the name of a variable between the parentheses (carIsFocused). This has the same effect as if you had written the full version: (carIsFocused == true).

So, if this is true (which it is at the beginning, because you had set the value of the carIsFocused variable to true in the second line of your ActionScript code), the code between the conditional statement’s curly brackets will be executed. And this code is a single line containing a single command:

play();

To sum it all up, this is what happens when a user rolls her mouse over the background_btn button:

Flash runs the function which is connected to the button’s onRollOver event handler. This function checks if the carIsFocused variable has a value of true. It has, so the animation starts playing.

The playhead goes on until it arrives at frame 20, where it is stopped. Why? Because at this moment Flash reads the ActionScript code contained within this keyframe and executes it:

stop();
carIsFocused = false;

The first line is clear: it is a simple stop(); action which stops the animation.

The second line sets the value of the carIsFocused variable to false. This makes sense, because at this point of the animation, the car is blurred, and the background is in focus.

Now, at this point in the animation, if a user rolls his mouse over the background button, nothing will happen. Why? Well, the function attached to this button’s onRollOver event handler will check if the carIsFocused varaible equals true. Since Flash has just set it to false, nothing will happen.

That’s the basic way an if conditional statement works: if the condition is true, the code between its curly brackets will be executed. If it turns out to be false, nothing happens. Flash simply skips the code between the curly brackets as if it wasn’t there at all.

OK, so the background button does nothing at this point. But the car_btn is active now. To see why, just take a look at the function associated with this button’s onRollOver event handler:

car_btn.onRollOver = function():Void {
if (!carIsFocused) {
play();
}
}

This function bears a very close resemblance to the one attached to background_btn button. The only thing that’s different is the conditional if statement.

In this function, the conditional statement checks if the value of the carIsFocused variable equals false. And it does – when the playhead has arrived to frame 20, Flash read and executed the line of code

carIsFocused = false;

which has effectively set the value of this variable to false.

When you want a conditional if statement in ActionScript to check if the value of a variable equals false, all you have to do is place an exclamation mark (!) right in front of the variable’s name:

if (!carIsFocused) {

So the code placed between this conditional statement’s curly brackets will be run, and again, it is a simple play(); command. What happens at this point is that the animation continues playing, comes at the end (frame 39), and as every Flash animation does, it goes back to the beginning (frame 1), where it reads the stop(); command and it stops there.

The value of the carIsFocused variable is set back to true, so the background button becomes active again, and the car button inactive.

And that’s it! I will show you just a small trick before the end of this lesson: how to make the instant transition from focused to blurred possible, with a simple modification to your ActionScript code (the modified parts are shown in bold). This change is applied to the code found in the first keyframe only. The code in the frame 20 stays unchanged.

stop();
var carIsFocused:Boolean = true;
background_btn.onRollOver = function():Void {
if (carIsFocused) {
gotoAndStop(20);
}
};
car_btn.onRollOver = function():Void {
if (!carIsFocused) {
gotoAndStop(1);
}
}

Related posts brought to you by Yet Another Related Posts Plugin.