Tikier Hosting » layer

Flash Tutorial – Top Bluish Preloader

admin — Sat, 03 Apr 2010 11:10:44 +0000

In this thoroughly explained, detailed lesson, I will show you how to create a really cool bluish preloader with percent using the action script code and some special flash tips and tricks. Using this lesson, you will also learn how to design bluish preloader, how to convert any object into a movie clip symbol, how to use Free Transform Tool (Q) and much much more!

Step 1

Create a new document in Flash. Set the movie's width to 300 and movie's height to 200.

Step 2

Double click on layer1 to rename its name in preloader.Then, take the Oval Tool (O), go to the Properties Panel belwo the stage and choose the Following options:

a) Enter #1F63AB for the stroke color
b) Enter #B3C3D5 for the fill color
c) Select Solid as the type of outline, with the line thickness set to 4.
d) Turn on the Stroke hinting option to get rid of any blurry edges while drawing.

After that, draw a "circle" about 88x88 pixels. See the picture below.

Step 3

While the "circle" is still selected, press F8 key (Convert to Symbol) to convert this "circle" into a Movie Clip Symbol.

Step 4

Double-click on the movie clip on stage with the Selection tool (V), or choose right click and Edit in Place.You should now be inside the movie clip.

Step 5

Then, select only the Fill area of "circle ", without stroke, press Ctrl+x key (Cut), create a new layer (layer2), click on the first frame and press Ctrl+Shift+V (Paste in Place).

Step 6

Go back on layer 1, click on frame 100 and press F5. After that, lock layer1, select layer2 and press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.See the picture below.

Step 7

Click on frame 100 of layer2 and press F5 key. Go back on frame 1, choose right click and Copy Frmaes. Then, create a new layer above layer 2 and name it mask. Click on the first frame, choose right click and Paste Frames.

After that, lock and hide layer2 and select the mask layer. click on the first frame, take the Free Transform Tool (Q), and decrease the "circle" maximal. Look at the picture below!

Step 8

Take the Selection Tool(V),select a "circle" that you have just decreased and go to the Properties Panel below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.

Step 9

Click on frame 100 and press F6. Then,take the Selection Tool (V) again, select the "circle" and increase it like it shown on the picture below.

Step 10

Go back on frame1 and in Properties Panel (Ctrl+F3), for Tween choose Motion.

Step 11

Select mask layer and convert it to a mask by right-clicking on the mask layer and selecting Mask.

Step 12

Create a new layer above the mask layer and name it percent.

Step 13

Take the Text Tool (T) and in the Properties Panel (Ctrl+F3) below the stage, choose the following options:

a) Select a Dynamic Text field.
b) Select a Trebuchet MS font
c) Choose 14 as font size and bold it.
d) Select #1A50B8 as color
f) As the rendering option, select Use device fonts.

Then, somewhere beneath the "circle" type 99%. See the picture below.

Step 14

While the "type" (99%) is still selected, go to the Properties Panel below the stage, and for Var: type progress. See the picture below.

Step 15

Then, take the Selection Tool (V), click once on the "preloader" to select it and enter the following Action Script code inside the Actions panel:

onClipEvent (load) {
total = _root.getBytesTotal();
}
onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
progress = ""+percent+"%";
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}

Step 16

While the "preloader" is still selected, go to the Properties Panel below the stage, choose Filters > plus icon > Bevel, and choose the following options from the picture below.

Then, click again on plus icon, choose Gradient Glow and set the options from the picture below.

Now you get this:

Step 17

Create a new layer above preloader layer and name it loading.

Step 18

Take the Text Tool (T), go to the Properties Panel below the stage and choose Static Text. Then, type above the preloader loading. See the picture below

Step 19

While the text ("loading") is still selected, press F8 key and convert it into a Movie Clip Symbol.

Step 20

Double-click on the movie clip on stage with the Selection tool (V), or choose right click and Edit in Place.

Step 21

After that, press F6 key (Keyframe), six times.

Step 22

Click on every second frame, and after that, press delete key on the keyboard.See the picture below.

Step 23

Go back on the main scene (Scene1),Take the Selection Tool (V) and click once on the "loading" text to select it. Then, go to the Properties Panel, choose Filters > plus icon > Bevel and set the following options:

Step 24

Create a new layer above the loading layer and name it picture.

Step 25

Click on frame 2, and press F6 key. Then, go to the A.S.Panel (F9), and enter this code inside the Action Panel:

stop();

Step 26

Then, while you're still on frame 2, choose File > Import > Import to Stage (Ctrl+R) and Import any picture.

That's it!

Enjoy!

Download source file (.fla)

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

Combine Renders and Light Effects for Awesome Results – Photoshop Tutorial

admin — Fri, 02 Apr 2010 13:08:56 +0000

Abstract artworks often combine renders, stock photos and simple techniques in Photoshop to create professional results. However, understanding symmetry, composition, lighting and the tools in Photoshop can take awhile to learn, and practice is required.

In this tutorial, we are going to extract the ability of Photoshop tools to make an epic piece of digital art. We’ll look at how to manipulate a pre-made render into the composition, as well as how to utilize blending modes, gradients and the liquify tool to achieve a brilliant abstract result.

You’ll learn a variety of techniques and useful tips to use in your own compositions, so let’s get started!

Tools Required:

Adobe Photoshop

Final Image Preview:

Step 1:

To start, create new canvas sized at 994×1312 pixels, and fill it with black. Next, create a new layer, and go to Filter->Render->Clouds. Duplicate this layer, and then merge the two layers. Set your blending options to Luminosity and reduce the opacity to 21% and the fill to 13%.

Next, we need our subject. For this piece, I’ll be using this mask, located here: http://lured2stock.deviantart.com/art/Mask-1-2777188
Extract it from the background, in this case I just rendered it with the pen tool. Paste it into your document and arrange it where you want. There are a few rough edges, so I decided to do some enhancements to make it look better.

First, I applied smart blur to the mask. Go to Filter->Blur-> Smart Blur, and apply the following settings: Radius: 3, Threshold 34.7, Quality: Medium, Mode: Normal.

After applying this blur, I also adjusted the brightness and contrast. To do this, go to Layers->New Adjustment Layer, and apply the following settings: Brightness: 61, Contrast: -28
Resize it and erase the upper part using soft brush, to create a fading effect (see before and after below).

Here you can see the before and after, and how our effects helped bring out the image.

So, now you should have what I have below:

Step 2:

The ‘hair’ part of this mask is a render from Cinema4D. I only used one C4D for this tutorial, and manipulated it to get the result. You can get it here. Grab the rendered C4D and put it in to our canvas.

Next, I desaturated the render.

After desaturating the c4d, I applied some technique to make it flow around. To do this, I used the liquify tool. Open the liquify shortcut command (ctrl+shift+x) or go to Filter>Liquify.
In applying liquify, first you must have concept of what are going to make. Just play around liquify preset. I only used the forward warp tool, set the brush size to 150 and leave all the rest to default.

I came up with this and I’m comfortable of this outcome. So I duplicated and flip it horizontally for a symmetric effect.

I decided to add more hair volume, so grab the render again and open again the liquify preset. Just be creative and be patient, be willing to undo your changes if you don’t like the result. Erase some unwanted parts according to your liking. Resize it to be a bit smaller, which will help with the effect. Again, just experiment.

To add some more visual impact again, I used the same process but this time I didn’t apply desaturate to the C4D. This allowed the image to be colorful. I put the colored C4D layers in the middle, under the smaller render.

Step 3:

We are on to the coloring process, so first I used a nebula stock shown below:

Grab the nebula stock to our canvas, and set the blending option to ‘linear dodge’.

After I erased the unwanted parts, I just duplicated it and flipped horizontally to place it on the other side.

Now, we will add soft lights. Create a new layer under the colored c4d layers. Fill it with black and set the blending options to linear dodge. With the soft brush 400px size, I chose three colors to blend. ( #ff9c00)( #00e4ff)( #ff00fc) Next, I blurred it, by going to Filter>Blur>Gaussian Blur with a radius to 10px. Be sure to follow this process to make it like mine.

Step 4:

Create new layer again under the c4d layers. Fill it with black and set the blending options to linear dodge again. Grab the rectangular marquee tool put some gradient on it of color ( #00fff6) to transparent. Duplicate it and place it diagonally, erasing the hard edges using soft brush. Follow the image below to duplicate it and place it on the other side.

Using pen tool we will draw an illustration then stroke it with simulated pressure with 3px brush. Just like what we did before, again the rectangular marquee tool follow the same process but we will using this color ( #fc00ff). After that duplicate again and flip it horizontally.

Step 5:

We will add more lights. Create new layer again, fill it with black and set it to linear dodge. Using the rectangular marquee tool again we will make a selection like this:

Grab the gradient tool and set to this color (# 0000ff) to transparent.

After that, erase some parts using a soft brush, duplicate it, resize and place it to the desired position. I also added a pen tool stroke below it.

Add more effects, this time using elliptical marquee tool and gradients, just like our previous layers set it to linear dodge.

After erasing erase some parts and after adding more by duplicating and resizing it, make some small particles using a brush, and use an Outer Glow blending mode to give it a nice glow. Duplicate it and flip it to the other side to continue the symmetrical appearance.

Step 6:

We are almost finished. We will add small particles spashing around. To do that, we’ll use the same nebula stock as the previous tutorial.

Paste it onto our canvas and set the blending mode to linear dodge. Just play around in placing the stock.

I added some of this color ( #ff7200) to make it more dramatic. Create new layer, fill with black and set to linear dodge and paint the color using a soft brush.

Conclusion:

Try to check your layer arrangements, as it is important in order to make it more realistic. When making light effects, the blending option linear dodge is our main weapon here as well as the stock photos. The symmetrical appearance helps the visual appeal, and creativity and patience leads to a successful artwork. After a few minor adjustments, I came up with this. Thanks for reading and drop some comments below. Hope you learned something new in this tutorial.

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

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.

How To Create A Sparkle Trend Advertisement – Photoshop Tutorial

admin — Tue, 30 Mar 2010 11:58:45 +0000

In this tutorial I explore how to create a stunning ad in the sparkle/glow trend. I am pulling inspiration from one of the coolest ad designers around, Chuck Anderson, a.k.a. NoPattern. A lot of people are wondering how he creates his light and glow effects in his ads. I’ll show you how to create a light effect similar to NoPattern’s style in this easy to follow tutorial!

The first thing is finding a great image to suit what you are advertising, here I just grabbed something off istockphoto of a snowboarder, as I will base this tutorial on a fictional ski brand, “Bluesky Extreme”.

Step 1: First off start a new document, 1500×2000 pixels, and make a new layer with a black background. Next paste your image/photo into the middle of the a new layer and select the background layer by double clicking the black background and select ‘Gradient Overlay’ in the Layer Style window.

With the bottom color try and match the bottom most blue of the snowboarder’s background and likewise for the top gradient color select the top most blue.

Step 2: With the eraser tool (E) set to a soft/blurred edge, size 250 and 30% opacity, erase the hard edges of the snowboarder image so it blends in with the gradient background. Don’t be afraid of rubbing over the snow bits. Don’t erase the left hard snow edge as this will be extended out later.

With the hard edge select your Smudge tool (R) and brush the edge of the snow out towards the edge of the canvas so it is being extended out of the page in a blurred motion.

Step 3: Next add the text with the text tool (T). I’ve used a font called “Rockwell Extra Bold”. Here I have rotated the two pieces of text so that they are sitting on top of the snowboarder’s arm.

Mask out the text so that it is hidden from over his head, to do this hide the text layers to make it easier to select around the snowboarder, now select the magnetic lasso(L) and go around the guys head and arm (anywhere that contacts the text).

Now invert select the selection (ctrl+shift+I), and select the layer that overlaps the image and press the “Add Layer Mask” button, this button is located at the bottom of your layers palette as shown below.

Step 4: Now comes the fun part; adding the glow and sparkle effects! First off let’s give the canvas a bit of colour.

Make a new layer (ctrl+shift+N) and dab on three or four bright colors with a large soft brush – here I have used purple, aqua and yellow, as these are complementary colors with the snowboarders clothing. Set the layer to ‘Overlay’ when you have finished adding the color to the layer.

Next add a glow around the text by double clicking on the layer and add an ‘Outer Glow’, leave everything as the default but change the color to suit and increase the size so that it glows out from the text to the amount you want.

Step 5: Create a new layer with filled black background, then go to Filter > Noise > Add Noise. Select an amount of less than 5%, with the Gaussian and Monochromatic options selected. Then change the blending mode to Screen and adjust the Levels (ctrl+L) of black and white points to create a textured grain. Next use a big soft eraser to remove sections of the grain background so it’s not so uniform.

Now to get the little star bursts brushes, download this handy brush set ‘Star Brushes’ (URL: http://qbrushes.net/objects/star-brushe/).

Next set up the brushes to use by loading it to your brushes palette and select a star brush from the pack and turn down the size, also adjust the spacing to 1000%. In the Shape Dynamics tab, change the Size Jitter to full and Minimum Diameter to 0%. In the Scattering tab, change to Scatter full.

Paint some stars in areas you wished highlighted; adjust the brush size between strokes to give a wider range of sizes. Next add a green glow around the stars.

Step 6: Now for the glow lines. Add a new layer, draw a spot of white using a soft brush. Then with the select marquee tool (M) select half and delete.

Press ctrl+T to transform the semi-circle into a streak of light, squash and rotate to the angle you want. Here I have positioned it to represent movement lines along the snowboarder.

Step 7: Now clone the streak, this can be done easily by selecting the layer and then pressing down ALT and moving the streak over to create a new copy of it. Do this a few times overlapping where needed to create a nice effect!

Step 8: Now that the ad is done you can add in any other necessary information to finish it off! So here below is the final result:

To sum it all up…

Creating this sparkle effect is easy to achieve. With the right composition and colors you can transform something dull to something fantastic! The sample PSD included is a smaller version of 500px, with a water mark placed over the istock image, as it is copyrighted, but you can see how the layers work together to create these effects.

DOWNLOAD THE PSD FILE

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.

Design a Hot and Sparkling, Firery Text Effect in Photoshop

admin — Tue, 16 Mar 2010 16:17:49 +0000

In this tutorial, I will show you the steps I took to create this Hot and Sparkling, Firery Text Effect in Photoshop. Have a try!

The point I would like to emphasise in the totorial is how you can achive great result by simply mixing the layer blending options and apply various filter effects.

Here is a preview of the final image for this toturial: (click to enlarge)

To complete this tutorial, you will need the following stocks:

Font

OK let’s get started!

Step 1

Create a new document sized 1200px * 600px, fill the background layer with black colour and create a new layer on top of it, grab a soft round white brush and do a single click on the position as shown below:

Resize this new layer with the Ctrl + T free transform tool to the lower half of the canvas, as shown below:

Name this layer as “back light bottom” and reduce the opacity around 20%, duplicate this layer once and move the duplicated layer up a bit, increase the opacity of the duplicated layer to 40%, we’ll have the following layered effect:

Step 2

Use the font we downloaded, type some texts on top of the previous layers, a shown below:

Apply the following layer blending options to this layer:

Drop Shadow

Inner Shadow

Outer Glow

Inner Glow

Bevel and Emboss

Contour

Color Overlay

Stroke

And you will have the following effect so far:

Step 3

Now we have the base text, let’s add some sparkles around the text. You may achieve this effect through filters but I prefer using a dynamic brush. Let’s grab a 3px soft brush, apply the following brush dynamics to it:

Shape Dynamics

Scattering

Save the brushset as we will be using it later on in the tutorial.

Now let’s create a new layer called “sparks” and use this brushset and paint some dots around the text, as shown below:

Let’s spice up the effect by adding some motions into the text. Duplicate the “sparks” layer once, apply the following motion blur settings to it:

And you will have the following effect so far:

You can see so far we have just laying the fundation of the text effect. We will be adding more effect to it in the next few steps to touch things up.

Step 4

Create a new layer on top of all other layers called “cloud”, load the selection of the original text layer by Ctrl + left-clicking the thumbnail image on the layer palette of the text layer.

Render some cloud inside the selection on the new layer via the cloud filter:

Change the blending mode of the new cloud layer to “linear light” and drop the opacity to 80%, add the following layer mask to it:

And you will have the following effect so far:

Now here is an interesting trick: create a new layer called “cloud overlay”, firstly we render the whole layer with cloud, as shown below:

Then we use the free transform tool to resize this cloud overlay layer to around the same size as the text layer:

Change the blending mode of the cloud overlay light to “Pin Light” and drop the opacity to 50%, duplicate it once and you will have the following effect:

Step 5

Now we add a new color balance adjustment layer to give the text some colour boost, with the following settings:

And you will have the following effect so far:

You can see by simply adding a new adjustment layer, we give the text a great look (not yet finished, though).

Step 6

Now we can create a new layer on top of the two background bottom light layers, call the layer “dots” and use the custom brushset we made for the sparkles in Step 3, adjust the brush tip size to be a bigger one, keep the colour as White, paint some small dots around the text:

You can always paint some big dots (with a lower flow and opacity settings), as shown below:

You can see because of the colour balance adjustment layer we used, those dots will become red hot automatically.

Step 7

Now we can add some more splashing effect to the text. Remember we created a “Sparkle” layer below with tiny dots? We can duplicate that layer once, apply the following Radial Blur settings to the duplicated layer:

On the same layer, apply the following “Add noise” filter to it:

Resize the layer to a smaller size and position it to the centre:

Duplicate this layer a few more times, move the duplicated layer around, resize them to various shapes for variety, and you will have the following effect:

Step 8

We’re nearly there! We can flatten the image first (remember to save the layered one in a seperate file in case you want to go back), duplicate the background layer twice.

On the first duplicated layer, apply the following Smart Sharpen Filter to it:

On the second duplicate layer, apply the following

and the following mask to it:

and you will have the following final effect: (click to enlarge)

Ok that’s it for this tutorial! Of course you can alter the colour and add more effect it. Experiment and practices make you better.

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.

Burnt Wood Text Effect – Photoshop Tutorial

admin — Mon, 08 Mar 2010 16:09:15 +0000

In this photoshop text effect tutorial we’ll be creating a grungy, burnt wood text treatment. We’ll go over some basic blending modes and use some filters and layer styles to create a look that would be perfect for a Hollywood movie poster .

Final Image Preview

Our finished product will be a nice burnt wood text treatment cleared out of a charred and smokey piece of aged wood.

Gathering Materials

Just a couple of downloads required for this tutorial. And they’re both free:

Wood texture by Beyond-Oddities (available at Deviant Art)
Rough Edges brush pack from Brusheezy

Step 1

The first thing we need is the background texture. I’m using a roughed up wood image created by Beyond-Oddities. Open the texture in photoshop. I resized my texture to 1200×800 for a more manageable file size.

Step 2

Now we need to add some text. Select a brown color (I’m using #47e490e) and type out some text. I’m also using Arial Black for a nice bold typeface.

Step 3

We’re going to work our way from the outside inwards. Let’s first create the singed effect surrounding the actual text. Command+Click the Text Layer to Make a selection of the outline of the text.

Step 4

From the Select Menu choose Modify > Expand. Expand the selection by 25px.

Step 5

Create a new layer (“singed”) with this layer selected fill the selection with a dark gray (#222222). This will be used for the singed area around the burn text.

Step 6

Now we need to bring some life to the singe with a few filters. First clear the selection by pressing Command+D. With the “singed” layer selected, choose Filter > Blur > Gaussian Blur. Add a 1.8 Radius Gaussian Blur. This will help take away the hard edge.

Step 7

Next we need to add some variation with a wind effect. With the “singed” layer still selected, choose Filter > Stylize > Wind. Set the direction to “from the left.”

Step 8

Apply the same filter, this time with the direction “from the right.” Now we have a nice grainy look to complement the burnt text.

Step 9

Change the blending mode of the “singe” layer to Color Burn and set the opacity to 30%. We just want the hint of burning.

Step 10

Now let’s focus on the main text. Change the blending mode of your text layer to multiply. Now you can start to see our burn effect.

Step 11

Let’s add an inner glow to emphasize the burn. Double click the layer to bring up the layer styles. Select “inner glow” and apply the following settings:

Blend Mode: Multiply
Opacity: 60%
Color: #111111
Size: 21px

Step 12

Now we’ve got nice burned in text but it still looks to clean. We’re going to add some textured roughness to the edges. Add a vector mask to the text layer by clicking on the “add vector mask” at the bottom of the layer panel.

Step 13

Download and open the Rough Edges brush set from Brusheezy.

Step 14

Choose the 433 horizontal brush. With the layer mask selected and black set as your primary color, roughen up the edges of the text.

Step 15

Rotate the brush and continue around the edges until you have a nice roughed up burn.

Step 16

Let’s finish up by adding a charred effect to the background. Set your foreground color to black and your background color to white. Create a new layer called “charred.” Go to Filter > Render > Clouds. Set the blending mode of this new layer to Multiply.

Step 17

With the charred layer selected, grab a large, roughed up eraser and clean up the area around the text.

Step 18

Let’s make the entire image pop. Create a new Levels adjustment layer (Layer > Adjustment Layer > Levels). Set the Black input level to 15 and the white input level to 223.

Final Image

And we’re done. A smokey burnt text treatment ready for your next project. I hope you enjoyed this tutorial and maybe picked up a technique or two. Let me know what you think in the comments below.

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

Design a mirror website flash navigation menu

admin — Mon, 08 Mar 2010 15:37:21 +0000

In this lesson you will see how easy it is to create a nice Flash website menu interface and make it work also! Particularly, you will learn how to:

Create simple buttons and duplicate them,
Make your link text look crisp and readable,
Make mirror copies of your buttons easily,
Design and code a simple navigational system.

In the Flash example below you can see what you are going to create with this tutorial. Try clicking the buttons!

Drawing the gradient sky background

1 Open a new Flash document. Call the first layer sky.

2 Select the Rectangle tool (R). Use only the fill color – go to the colors portion of the Tools panel, click on the pencil icon (see 1 below) and then the small square with the red line (see 2 below).

3 Draw a borderless rectangle wider than the stage, and about 70 pixels high.

4 If the rectangle is selected, unselect it by clicking anywhere outside it with the Selection tool (V).

Go to the Color mixer panel (Window > Color Mixer). In the upper right part of this panel, select Linear as type of fill.

In the bottom, a color stripe will appear. Click on the small right rectangle and enter the #B6E2FA as color code in the appropriate field. Then click on the right rectangle and enter #78B0E9. The alpha (transparency) properties for both colors should be set to 100%.

5 Select the Paint Bucket tool (K). Click with your mouse on the top of the rectangle and start dragging it diagonally to create a nice diagonal linear gradient fill.

Top of page

Creating the menu buttons

6 Lock the sky layer. Create a new layer and call it menu.

7 Select the Rectangle tool (R). Go to the Properties panel. Set the outline color to a light gray hue, and the fill color to a dark blue one. You can see the colors I used in the image below. Also, set the thickness of the outline to hairline.

8 Draw a 90 by 30 pixel rectangle, over the sky background, near the left edge of the stage.

To have the exact dimensions of the rectangle (because it’s difficult to get them when drawing by hand), double click on the rectangle’s inside (fill) with the Selection tool (V). After you did this, both the outline and the fill will be selected.

Go to the left side of the Properties panel and you’ll see the the W (width) and H (height) fields there. Just enter the dimensions for your rectangle manually and hit Enter to confirm. Make sure that the little padlock icon on the left is unlocked so that you can enter the width and height values independently from one another.

Also, make sure that the position (coordinates on the stage) of the rectangle (the X and Y fields) is set to round numbers. There must be a zero at the end, not any other number.

Why is this necessary? Because when you are drawing precise graphics (like the hairline outline of the rectangle) or using bitmap fonts, crisp pictures, and so on, you must set their coordinates to round numbers. Otherwise you will get blurry and messy results in your SWF movie.

9 Select your rectangle on the stage once again (both the outline and the fill).

Press F8 (or select Modify > Convert to Symbol). In the dialog window that shows up, select Button as type and call it home button. Click OK.

You will see that the rectangle has changed – it is now a button symbol. The small circle in its middle is it’s registration point. This point is relevant when making changes and issuing commands to the button via ActionScript. For example, when you want to move the button programatically, this point’s coordinates are taken as button’s position.

10 Double-click with the Selection tool (V) on your newly made button to enter inside it. You know that you are inside the button if you look above the layers – the indication is there.

11 Call the first layer inside your button symbol rectangle. Lock this layer. Make a new layer and call it text.

12 Select the Text tool (T). In the Properties panel, select static as type of text.

Static text is used for text that will not change, unlike the dynamic or input text field types. The important thing here is to know that you can choose whatever font you like, because this kind of text field will be seen exactly the same by all users who are viewing your flash movie (or site), regardless if they are having that particular font installed on their computer or not. So you are free to choose any font you like, and that font will become embedded in your flash movie.

Choose a font you like. Make its size 12 or so. Select white as color, to make it stand out from the blue rectangle background. In the menu below the font size and color options, select “Anti-alias for readability”. This will make your link text look sharp.

13 Click with the Text tool somewhere inside the blue rectangle area and type “Home”.

14 Open up the Align panel (Window > Align). With the link text you just typed still selected, turn on the “Align to Stage” button (see 1 marked on the picture below).

Align the text horizontally (2) and vertically (3) inside the button. So, since the “Align to Stage” button is turned on and you are working inside the button, the text field will be centered in relation to the button’s central point. If you’re interested, I made a separate tutorial on the use of the Align panel.

15 However, there are still manual changes that need to be made. To ensure that your text renders correctly, without any blurry parts, to make it more readable, go once again to the Properties panel and set its position (coordinates) to round numbers.

If the last number in the X an Y fields is equal or above 5 (like 18.9 in the picture above), round the whole number to the upper value. If it is below 5, round it to the lower value. For example, if it is 14.3, round it to 14.0, and if it’s 14.5 or 14.8, round it to 15.0.

Once you have done this, if your text isn’t centered in relation to the blue rectangle below it, position it with arrow keys on your keybourd. Just press the up or down (or left and right if needed) key – this will move your link text by 1 pixel, and it will stay on round coordinates.

16 One last thing before you move on: be sure that the “Selectable” option is turned off. Check if this is so in the options for your text field below the scene.

Why is this necessary? If you have this option turned on, once a user moves her mouse over the button, the cursor for selecting text will appear, instead of the hand cursor. In addition to the fact that this sucks (a text selecting mouse cursor appearing over a button definitely does), your button may even not function at all!

Turn this option on only intentionally – for example, when you want your users to be able to select a piece of text on your flash site, like your address, etc.

17 Click on the “Scene 1″ link above the layers to return to the main scene.

There! The button is finished. Making the other buttons will be easy now.

Duplicating the other menu buttons from the existing one

18 Open the Library (Window > Library). Right-click on the home button symbol and select “Duplicate” from the menu that appears.

19 Call the new symbol gallery button and click OK.

20 Double-click on the newly created gallery button symbol in the Library to enter inside it.

Click on the link label text field to edit it. You can do this by double-clicking with the Selection tool (V), or by clicking once with the Text tool (T). Write “Gallery” (without the quotation marks, of course). Press Esc to exit the text editing mode.

Use the left arrow and right arrow keys if necessary to center the link label inside the button.

21 Go back to the Library and repeat steps 18 through 20. Make three more button symbols. Call them music button, links button and contact button. Change their labels accordingly.

You don’t need to return to the main scene to do this. Just duplicate them inside the Library, double-click on each one of them, change the text and center it. When finished with all the buttons, return to the main scene. You will have five different buttons for your menu in the Library.

Placing the site menu on the stage

22 Choose the Selection tool (V). Click once on the home button to select it.

Press Ctrl+C (Cmd+C on a Mac) to copy this button. Press Ctrl+Shift+V (Cmd+Shift+V on a Mac) to paste this button in place, exactly over the original one.

Now don’t click anywhere and don’t select any other tool. It may seem that you have just one button on the scene right now, but there are two. They are placed exactly one over the another (thanks to the Paste in Place command).

Just press and hold Shift on your keyboard and while holding it, press the right arrow key to move the copy of the button horizontally. Each time you press the right arrow key, you will move the button by exactly 10 pixels. Press the key 10 times to move the button exactly by 100 pixels to the right.

If you had pressed just the arrow key without holding shift, you would have moved your button by 1 pixel at time. This comes in handy when you must design a precise layout.

23 Repeat the previous step by copying and pasting in place the second button and moving it 100 pixels to the right. Do this two more times to have five buttons in all on the scene.

Finalizing the site menu by swapping the button symbols

You will see now how easy it is to place every menu button in its right place. I love Flash! It is wonderful and really easy to work with

24 Click once with the Selection tool (B) on the second button from the left. Go to the Properties panel and press the “Swap” button.

25 In the window that appears, select gallery button and click OK.

Repeat this procedure 3 more times for each of the remaining buttons. In the end, you will have all the particular buttons required for your flash website menu on the stage.

After finishing the part of the menu that will server to navigate through your Flash site, you are going to create the menu’s mirrored reflection.

Making the reflection of the menu

26 Select all of the buttons on the stage. Do this with the Selection tool (V). Click somewhere outside the buttons (for example, on the top left of the menu) and drag your mouse to encompass all of them.

27 Copy the buttons (Ctrl+C) and paste them in place (Ctrl+Shift+V).

28 While holding Shift press the down arrow 3 times to move the copies down 30 pixels from the original symbols.

Release the Shift key and press only the down arrow key five times. You have moved your button copies exactly 35 pixels downwards.

If you followed the dimensions I gave you at the outset of this tutorial for creating your buttons, the copies will be now spaced just a few pixels from the originals. This will make for a nice and more realistic mirror reflection effect. Also, you don’t want to move your mirrored buttons too far from the real menu, to save space.

29 Keep the copies you just moved down selected. Select Modify > Transform > Flip Vertical.

You have just made a mirror reflection of the menu. Now ain’t that easy? Sure it is But let’s give it a more realistic look.

30 You must have your reflection buttons still selected. In the Properties panel, click on the Filters tab (1 in the image below).

Then click on the little blue plus icon (2) and select the “Adjust color” blending filter. The controls for adjusting the colors of your buttons will appear.

By dragging their respective sliders to the left, set the Brightness to -18 and Saturation to -36. Or just enter these values manually in the appropriate fields. Leave the other two values (Contrast and Hue) at zero.

31 Click on the Properties tab (right next to the Filters tab you clicked in the previous step). Select Alpha from the Color menu and set it to 41%.

32 Lock the current (menu) layer. Create a new layer between the two existing ones and call it blue background.

You will draw a blue gradient here. This will make your navigational header look more realistic and beautiful. Since you already have a sky-like graphic behind your menu, it makes sense to create a reflection of it too.

33 Select the Rectangle tool (R). Block the outline color and select a fill color that is in good contrast with the existing graphical elements. You are doing this only to draw and position your rectangle more easily. You will change its color to a gradient later.

Draw a rectangle that 48 pixels high. The width isn’t important – only make it the same size as the scene or wider than that.

It is important to place the rectangle so that its upper edge is between the real buttons and their reflections.

Unselect the rectangle by clicking on an empty part of the scene with the Selection tool (V).

34 Go to the Color Mixer panel, click on the paint bucket icon to adjust the fill color (and not the outline – the pencil icon – just in case it is selected by default). Select Linear as fill type. Make the following choices for your gradient:

The first color (little square on the left) should be set to #B6E2FA and the second to #78B0E9. Leave the alphas for both colors at 100%. Leave the left color on the gradient’s left edge and move the right one a little bit inside (just click on the quare and drag it).

This gradient is just a little bit different from the one you made in step 4.

35 Select the Paint bucket tool (K), click on the rectangle’s bottom edge and start dragging upwards to make a vertical fill. In this way, the darker color will be at the top.

You don’t have to make the exact mirror copy of the sky beneath the menu buttons. What you’re making now will look very nice and interesting.

36 Select the rectangle and copy it (Ctrl+C). Lock the current layer (blue background).

37 Make a new layer above all the existing ones and call it overlay.

38 Paste in place (Ctrl+Shift+V) here the rectangle you just copied.

39 Go back to the Color Mixer panel and make the following gradient: you must have four color squares. Add a color square just by clicking anywhere between the two existing ones.

All the squares should have their color set to pure white (#FFFFFF). But their alphas should have the following percentage values (from left to right): 100, 79, 50 and 28.

Drag the squares so that they look like shown on the image below.

Lock this layer.

Now isn’t this a nice menu with its mirror reflection below it? Sure it is

Before making your menu functional via ActionScript, you must first make place for the different sections of your site, which is exactly what you will do in the next few steps. Onward!

Setting up the navigation system for your Flash website

40 Make a new layer on top of the existing layers and name it site content.

41 Right-click on frame 5 of the newly made layer and select Insert Keyframe from the menu.

42 Draw any kind of content here. Paint something with a brush, make a circle, anything at all. This is just temporary dummy content. Don’t lose time on making real content now, you will do it later. Follow through to the end of this lesson, it is easy to make changes later.

43 Repeat the previous step 3 more times: right-click on frames 10, 15 and 20, select Insert Keyframe from the menu and insert some kind of dummy content there.

You can draw over the existing content or erase it and make something new. I am telling you this because when you insert a keyframe into a layer, Flash automatically copies the content from the previous one, if there existed something.

44 When finished, go back to the first keyframe of this (site content) layer by clicking on it (standard left mouse click). Create some content here too. Write “home” or draw a house

Your timeline should now look like the one shown on the image below.

45 Lock this layer and make a new one above it and name it labels.

46 Click on the first (and only, so far) keyframe of the labels layer to select it. Go to the Properties panel – you’ll find the “Frame label” input field on its left side.

Click inside it, type home and hit Enter to confirm.

47 Still in the same layer, right-click on frame 5 and select Insert Keyframe from the menu. Do this again for frames 10, 15 and 20. Your upper two layers should have keyframes in exactly the same places.

48 Click on the frame number 5 to select it. Go again to the Properties panel and give it a name: gallery. Repeat this for the remaining three keyframes (10, 15 and 20): call them music, links and contact, respectively. All these frame labels will be visible on the timeline.

Lock this layer.

49 Right-click on frame 20 of the overlay layer and select “Insert Frame” from the menu (not Insert Keyframe).

This will make this layer’s content appear throughout your flash site. If you don’t this, these contents will only be visible on the first keyframe, at the beginning.

And of course, all the other menu elements must be visible throughout the timeline. So make this for each of the remaining layers: menu, blue background and sky.

Below you can see the final look of the timeline.

Now that the site’s navigation system is in place, you will name your buttons (all of them) so that you can issue them commands programatically later.

Naming the menu buttons

50 Unlock the menu layer. Select the Selection tool (V). Click somewhere on stage to unselect anything and everything that might be selected.

51 Click on the first button on the menu from the left to select it (the Home button). Don’t click it’s reflection.Go to the Properties panel, and enter its Instance name in the appropriate field: call it homeBtn. Hit Enter to confirm.

52 Repeat the procedure from the previous step for each one of the menu buttons: call them galleryBtn, musicBtn, linksBtn and contactBtn, respectively.

The Instance names make possible to control your buttons via ActionScript.

You must always give unique names to your buttons, keyframe labels and movie clips. You can’t have two objects in your Flash movie which have the same name. That’s why you had to call the first keyframe home and its corresponding button homeBtn. Also, remember that ActionScript is a case-sensitive programming language. If you called your button galleryBtn and later typed it as gallerybtn in your ActionScript code, your button will not function because those are two different Instance names. So, keep track of your Instance names and always type them in your code exactly as you have when you named your objects.

53 Now, select the first mirror button – the reflection of the home button (the first from left in the second row). Give it an Instance name – call it homeBtn1.

Why give Instance names to these mirror buttons? Well, precisely because their purpose is to serve only as visual elements – mirrored reflections of real menu buttons. If you left them like this, when a user moved his mouse over them, the hand cursor would have appeared. This would create a really inappropriate confusion. You must always be user-friendly! So, you are naming these mirrored buttons to turn them off later via ActionScript. Once you are going to do that, they won’t function anymore, and will just be graphical elements, which is what you want to accomplish!

54 Give Instance names to all the other mirrored menu buttons: call them galleryBtn1, musicBtn1, linksBtn1 and contactBtn1.

Writing the ActionScript code that powers the menu and the website navigation system

55 Lock this (menu) layer. Create a new layer above all the others and call it actions.

56 Click on the first (and only) keyframe of the new actions layer to select it.

57 Open up the Actions panel (Window > Actions). Write the following line of code inside:

stop();

This simple command stops your movie from going on and looping endlessly.

Now, I want you to do a little test. Test your movie (Control > Test Movie). Move your mouse accross the buttons and their reflections (mirrored buttons). As you can see, the hand cursor will appear over both the menu and its mirror image. And you don’t want that, so now I am going to show you how simply it is to disable these buttons.

58 Write this piece of ActionScript just below the first line you entered in the previous step:

homeBtn1.enabled = false;
galleryBtn1.enabled = false;
musicBtn1.enabled = false;
linksBtn1.enabled = false;
contactBtn1.enabled = false;

Test your movie again (Ctrl+Enter on a PC, Cmd+Enter on a Mac). Move your mouse over the reflection buttons. As you can see, there’s only the standard arrow cursor now – the hand cursor doesn’t appear anymore. You can even try clicking on them – nothing will happen.

Yep, it is that simple! The enabled property of the button symbol can have two values: true or false. By default, it is set to true. So when you set it to false, the button is visible, but doesn’t function any more – it cannot be clicked, even if you tell it to do so via ActionScript. The button stays disabled until its enabled property is set to true again (of course, you’ll leave it at false for the reflected buttons).

59 Append your code with the following lines (again, just put it after the existing code):

homeBtn.onRelease = function():Void {
gotoAndStop("home");
}
galleryBtn.onRelease = function():Void {
gotoAndStop("gallery");
}
musicBtn.onRelease = function():Void {
gotoAndStop("music");
}
linksBtn.onRelease = function():Void {
gotoAndStop("links");
}
contactBtn.onRelease = function():Void {
gotoAndStop("contact");
}

Test your movie (Ctrl+Enter). If you did everything exactly as i wrote up to this point, you should be able to navigate your site. Click on the menu buttons and see for yourself! Easy navigation, isn’t it?

Explaining the ActionScript behind the site menu buttons

First, I want to explain you why you named the frames. Using frame labels (like gallery for example) instead of a frame number (5) has one practical benefit:

If you ever change your site contents by moving the keyframes or inserting new ones, all you have to do is move the frames with labels so that thay stay above their corresponding content keyframes. There is no need to go back to your ActionScript code and rewrite or change the numbers.

Now let’s see how the code for the buttons works. I will explain the code functionality just for one of the menu buttons, because they are basically all the same – only the button Instance name and the frame label change.

homeBtn.onRelease = function():Void {
gotoAndStop("home");
}

The first line,

homeBtn.onRelease = function():Void {

says that a function is assigned the onRelease event for the homeBtn button. The onRelease event happens when a user clicks and releases his mouse over the button.

If you want you can put the onPress event here instead, that happens immediately when a user has just pressed his mouse over the button. But that event is more likely to be used in games, when something has to happen immediately when the mouse has been pressed – like a spaceship shooting, for example. I like to assign the “standard” (onRelease) click for the buttons, menus and various other kinds of website interfaces.

So, once the onRelease event has happened, a function gets executed. You certainly noticed the :Void keyword after the function() keyword. This means that the function in question does not return a value. In many cases, a function in ActionScript has to return a value. Look at this example:

function mySum():Number {
var a:Number = 3;
var b:Number = 4;
var sum:Number = a+b;
return sum;
}

This function calculates a sum of two variables’ values. The last line tells to return the value of sum to whatever object that called the function. So that’s why the :Number keyword after the function’s name. It states that the value returned by this particular function will be a numerical one and not a text value or any other.

So, in the case of your menu button, the type of value that the function returns is Void. This means nothing, zero – the function does not return any value, it just serves to advance the playhead to a particular frame on the timeline.

And just what is it that gets run when the function is executed? Everything between its curly braces – { and }. Here it’s about just one line of code:

gotoAndStop("home");

This line tells Flash to jump to the frame which is labelled home and stay there. That’s all there is! Simple! Just one more thing, however: if you wanted to insert a frame number instead of a frame label here, you must do it without the quotation marks. Like this:

gotoAndStop(1);

Fine. Before wrapping this tutorial up, just read some advice below.

A little bit about site navigation and usability

You have seen how to make a slick menu. However, always keep in mind your site (or your client’s site) users. The user is king. If a site happens to be difficult to navigate and counter-intuitive, the most beautiful and appealing graphics and design won’t help.

In fact, what is often overlooked, is that the design inolves thinking and responding to your users’ needs. Make a button look like a button – this doesn’t mean it has to look ugly or too similar to a real-world button. There many, many examples of beautifully designed navigation interfaces and menus who are also intuitive and easy to use.

You know that the reflection buttons you made in this lesson are real button symbols. The user sees them as a nice graphic element only, which is exactly how it should be.

Usabilty is a science in itself, that applies equally to HTML and Flash websites. HTML is simple, and yet there are many things you have to think about when building such a site. When confronted with all the powerful and rich possibilities that Flash has to offer, this just gets more complicated. When you have a myriad of possibilites for design and developement, don’t get overwhelmed and think that you must try and implement every single great gizmo in your Flash website. Be nice to your users and they’ll like your site

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

From Sketch to Vector Illustration

admin — Sat, 06 Mar 2010 15:33:11 +0000

For those of you without good sketching ability – please don’t jump ship just yet! I will also discuss a number of tips and techniques to using your pen tool that applies to ALL vector artists – so keep reading. You’ll still learn a thing or two. And who knows – maybe you try to sketch something anyway.

I am going to meander a bit between different sketches, but here is one example of a vector illustration that was based off of a sketch.

This is a design our firm was hired to do for the rock band Mr. Gnome. The theme was straight forward, a gnome with a guitar in a dynamic pose.

The tools you’ll need for this tutorial are:

1. Pencil
2. Paper
3. Scanner
4. Computer (with a monitor)
5. Adobe Illustrator (and Photoshop wouldn’t hurt either)

This tutorial will cover:

1. Sketching – How detailed to get in your sketch?
2. What resolution to scan your sketch.
3. How to set up your Illustrator file.
4. Tips and Techniques to digitally inking your sketch using vector lines.
5. Tips and Techniques to coloring your vector illustration.

Step 1. Sketching.
Ok here we go. Since we will not be using photographs – we’re going to have to rely on our ability to draw.

First, I believe that learning how to draw is like learning any other skill. It takes time, practice and it doesn’t hurt if you study a little. So go buy yourself books on drawing, find tutorials online or sign up for classes at your local college. And of course, nothing in the world can replace practice.

This sketching phase of the process should be a fun relaxing part of the process. If you put pressure on yourself you will surely struggle. When I am drawing I try to let go of all expectations. When you sit down to draw tell yourself: “I may draw for the next three hours and may draw nothing good. But I am going to enjoy the process.” Have a pile of paper, a pencil sharpener and an eraser. Always start by sketching as loosely as possible; just work on basic shapes. Get yourself to relax. Turn on some good tunes, have a can of Coke, whatever it takes to get yourself into a good place. I really think this is a big part of getting yourself in the right frame of mind to draw well. It may seem silly – but imagine if you sat down with one sheet of paper, a thirty minute deadline and a rigorous expectation of what you needed to draw. Wow… what pressure! You would be setting yourself up for failure! That’s no fun. So, sit down, relax, let go of any expectations you put on yourself and have some fun.

Also, you need to know that the final sketch will usually be achieved through a process. Many amateur artists don’t truly realize all the “steps” that go into creating a final piece of art like the one I drew. The assumption is that I sat down and in one fell swoop illustrated this final sketch. Frequently there are a lot more steps to this process. Here is a typical process that a professional illustrator might go through to produce a final illustration:

1. Extremely rough “comps” are drawn to show your client what you are intending to draw. Often times there will be several of these so your client has some options. Often times the client will give you feedback on your comps – so you’ll have to modify your composition until they’re happy. Here is a sample of how rough the early “comps” can be:

2. “Studies” are then drawn for a variety of the elements in the image. If, for instance you’ve never drawn a palm tree before you might want to download some pictures of palm trees and sketch them for a while till you get a good handle on how to draw them.

3. The first draft of the final illustration is then done. It always starts with loose light lines to get the composition worked out, then you’ll go over it filling in with “tighter” lines to get your details.

4. Often times some aspect of the illustration looks bad. A professional artist will re-work that part of the illustration on a separate piece of paper until they get it right.

As you can see – this is definitely a process. So, don’t get frustrated if it takes a lot of work to get your final sketch together.

How detailed you get with your sketch is up to you. Personally, I find that it is always easier to decide where I want lines while I am in the sketching phase. So I will get fairly detailed in my drawing before I scan it into the computer. Deciding where to put lines when I’m vectorizing (digitally inking) my sketch is much harder. So I will err on the side of a “tight” sketch (lots of detail) versus a “loose” sketch. Here are two examples of illustrations. This first one is the fairly tight sketch of a demon that I drew for Ozz Fest.

The second sketch is a much more loose drawing:

Lines are not well defined and there is a lot that you would have to make decisions about once you get the drawing into Illustrator. You have to be extremely skilled in your ability to work through a drawing on-the-fly. If you are, you can take a very rough sketch like this and make inking (vectorizing) decisions as you work. I don’t think most people have this ability, so I would recommend that you try to get a little bit more detail into your sketch before you scan it into Illustrator.

While I am endorsing a “tighter” sketch I want to mention the fact that one of the biggest advantage of creating a vector illustration off of a sketch is that the over-all feeling of it is MUCH looser than what you create when you work off of a photo. When, for instance you are working off of a photograph – you are somewhat bound by the natural laws of nature. But in a sketch you can really go over-board with exaggerated features. When you combine these loose exaggerated features of a sketch with the tight clean lines of vector art you really get a wonderfully unique looking illustration. So, don’t be too tight with your drawing! You don’t want to lose your personality.

Step 2. Scanning your Artwork.
HHmm.. not sure why I made this into a whole section of this tutorial. I guess it’s just an important step – you need to get your sketch into your computer. Here are a few tips to scanning your sketch:

1. Make sure to scan your sketch in “photo” mode at 300dpi or higher. You may want to go as high as 600dpi. It really helps to zoom in on your sketch while you’re vectorizing (digitally inking and coloring) it. At this zoomed in state you might be looking at a part of the sketch 300% – 400% bigger than the size you drew it, so you’ll need that extra resolution to see where to put your lines.

2. If your sketch is bigger than your scanner – you’ll have to scan it in pieces and stitch them together in Photoshop. One little tip that helps make this process easier is to make sure that you butt one side of the paper up against the edge of the scanning surface. Scan it, then slide the paper keeping that same side flush up against the edge of the scanning surface. This process insures that your different parts of the sketch are not rotated differently. It is much easier to piece together two images that don’t need to be rotated. Once your sketch pieces are in Photoshop, open one and enlarge the canvas area to make room for the other pieces. Copy-and-Paste the other pieces so that they are all in one image. Set the properties of each layer to “multiply.” This will allow you to see through each layer and more easily line them up. Once you have them all lined up, change the layer properties back to “normal,” flatten the image, and save it as a .jpeg

Step 3. Setting up your Illustrator file.

I like to create 3 layers in Illustrator when vectorizing a sketch. The bottom layer is where I place my sketch. I will lock this layer so I don’t accidentally select it or move it. The middle layer is my color layer. This is where I will fill in my shapes with colors. I will also lock this layer until I get to the coloring part of the process. The top layer is the inks (the lines) of the drawing.

I should take a moment here to mention that you can illustrate vector art without lines. The artwork can be comprised completely of solid shapes with no “line art.” Here is an example of each:

This is a vector illustration without any lines defining the shapes. It simply uses color and value to define the shapes.

This illustration does have lines to separate the shapes.

Whether you choose to make line art or not is up to you, but we WILL be making the line art first on this project.

Step 4. Tips and Techniques to digitally inking your sketch using vector lines.

Ok.. now we get to drawing our vector lines. I don’t have one set style for creating these lines; in fact I have several. I will discuss each. But before I do, I want to discuss our goals. The goals with these lines are that they have character. And by “character” what I mean to say is: “they look cool.” So, how do we make our lines look cool?

For starters, we need our lines to vary in what is known as “weight.” “Weight” of a line basically means how thick or thin your lines are. A lot of weight is thick a little weight is thin. Making your lines vary in weight adds a LOT of character (makes them look cool.)

And where we put this character into the lines is also important. I use three general rules when making a determination of where to put weight:

1. Most important is how close an object is to you. So, if you have a drawing where the super-hero is punching out towards you, the fist would be the closest thing to you. The closer something is to you, the thicker the lines should be. The further away something is – the thinner the lines should be. The city in the background, for instance, should be illustrated with very thin lines. This creates an illusion of depth.

2. The outer-most line of each separate object I will also tend to make a little thicker than the interior lines. This helps define that object apart from the other objects.

3. I will also pay attention to light source. If, for instance, the sun is just over the right shoulder of a character – I might thin that line so much that it ends… there is actually a gap where the line ends then re-starts. The side of the object opposite of the light source will have thicker lines.

4. Finally – I will tend to thicken a line that dead-ends into another line. This is a hard one to explain, so here is a picture:

Now that we have a clear understanding of what kind of lines we’re trying to make… how do we make them?

My first step is usually to outline my object or a portion of the object and then “knock out” the shapes that are inside it. Using my pen tool I will simply find a starting point and start drawing around a shape. If you are not experienced using the pen tool in Illustrator this may be a bit of a frustrating process. Have faith that in time you will get better and faster. It takes time to learn how to best use this tool. Here are a couple of tips:

1. Place your points at the most extreme spots – at the very top of the peak of a curve or the very bottom of a curve.

2. Fewer points will give you a smoother line, so challenge yourself to eliminate points.

3. If you need to bring a curving line to a sharp turn, click on where the curve will end, click-drag your mouse to create the curve before the sharp turn (don’t worry about the vector line on the far side of the point. When you get the curve before the point where you want it, let up on the button, but before you make your next point – click one time on the point you just made. This will eliminate the bezier handle that runs through the point. When you place your next point, the line from the previous point will come out straight from that point. Here is a little picture sequence of this process. **This is a VERY useful tip. So, if you don’t understand it – read it five more times, study the images below and don’t proceed till you get it. It will be on the S.A.T.!**

Once I have my outline I will simply start drawing the shapes that are inside it that need to be subtracted (or for us old-school designers: “knocked out.”) Be aware that the “lines” you’re creating will be comprised of the outline minus the interior shapes. So, in terms of giving your final lines varying weight, you will have to vary how close your interior shapes are to the outline.

Here is an example of how I will draw an outline, then subtract (or knock-out) the interior with a second shape:

One way to deal with this varying line weight issue is to deal with it in the sketching phase. This way – you don’t have to think about it while vectorizing. You can just follow your sketch lines.

While you are drawing these knock-out shapes you may want to ignore little detail lines that might be hard to draw. If for instance you have some cross-hatching lines that extend from a large black shape – I won’t try to draw them both at the same time. I will start by just drawing the black shape, then will go back and draw the hatch-lines. I can merge these shapes using the Pathfinder tool later if I want to. Here is a sample of that:

Once you have all of your interior shapes in place, you’ll now need to knock them out of your outline. You will do this by
1. Grouping all of the interior shapes.
2. Bringing these grouped interior shapes to the front: Object>Arrange>Bring To Front
3. Selecting both your grouped interior shapes and your outline
4. Clicking on the knock-out (or “subtract”) function of your pathfinder tool.
5. Fill with black! (or whatever color you want your lines.)

Another way to draw lines of varying weight without drawing the inside and then the outside of each line is to just draw a single vector line down the center of your intended line. Then you “stroke” this line with a brush. Specifically you might want to use one of the calligraphy brushes that Illustrator includes.

Here is how using one of these brushes looks when applied to a curving line:

This looks great and is a much easier way to make lines with character – but it is much harder to control where the line is thick and where it’s thin. This is determined by the shape of the brush and the angle of your line. If you have a set of brushes set up at various angles and experiment a bit, you can figure out how to control where the thick and thin parts of your line are, but it takes some work.

If you are using this technique to vectorize (digitally ink) your sketch there is one additional step you have to take. Once you get the line how you want it, you’ll have to: use the Object>Expand Appearance function. This will take your brush stroke and convert it into a solid shape.

You may also experiment making your own brushes in Illustrator. One very useful brush is a simple triangle.

Simply make this triangle shape, select it and then go to the drop-down menu in your brushes window and select “New Brush>New Art Brush. Then draw a curvy line and apply this brush. You will quickly see how useful it will be in inking. Here is a sample of what a triangular brush on your vector path looks like:

I suggest experimenting with brushes like this. I will not reveal all of Go Media’s secrets here – but this should get you started.

Now you have the meticulous job of “inking” your illustration. Depending on how complex your drawing is – this process may take an entire day or more, so settle in and try to enjoy yourself. After all – that’s why we’re here right?

Here is the finished inking I did on this sketch… Pretty sharp if I do say so myself!!

First the pencil sketch:

Now the final inked illustration:

Ok, now to the really fun part – coloring.

Step 5. Tips and Techniques to coloring your vector illustration.

This tutorial is going to cover coloring in Adobe Illustrator. At this point you could also export your line art to Photoshop and color your drawing in it. In fact, most professional coloring you’ll see of illustrations is done in either Photoshop or Painter. Making a vector coloring – as we are in this tutorial is a very different process with a different look and feel to it. In Photoshop for instance, you can much more easily make soft-edged transitions between your various colors. Here in Illustrator your color shapes will have sharp edges.

Now I will make a confession – I don’t think I have a very good sense of color. I think I am a bad colorist. So, hopefully I can give you some tips I use to “fake it.” Remember: “Fake it till you make it!”

Now, you’ll be coloring on your color layer, so lock your inking layer and unlock your color layer.

Usually I will try to pick the colors I’m going to use before I start coloring. I will start with 2-4 main color themes that work well together. For each of these colors I will try to get a range of color values from dark to light. Once I have this palette of colors I try very hard to stick with it. Since I don’t have a good sense of color, I’m afraid to stray too far from a nice color palette once I’ve made one. Here is an example of a color palette I put together:

I will usually assemble my color palettes by opening a Pantone Swatch Library (located in the Swatch window drop-down in the Swatch Libraries drop down). I’ll then see a color I like and grab the entire value range from dark to light of that color.

One “cheat” I use occasionally for finding a good color schemes– is the website: colourlovers.com. It doesn’t give a complete coloring palette and isn’t usually exactly what I’m looking for, but it’s a great resource for inspiration.

In the case of this illustration, he went with a fairly straight-forward coloring scheme. The girl’s skin is flesh color, the skull is grey and the devil-baby is red. For each of these object there is about 3-4 color values; a middle value, one dark color for shadows and one light color for highlights.

While going with a straight-forward coloring scheme is fine, I want to encourage you to really experiment with colors. Explore the space. I got a fever, and the only prescription – is MORE COW BELL… no wait – I mean – MORE COLORS. I think doing a good realistic coloring job is almost passÃƒÂ© these days. Using non-traditional colors is the current trend.

To start, lets use this little devil baby sketch that Dave did and start by filling each main shape with a middle value. Here is what the baby looks like with each of his primary shapes filled with the middle-value. You’ll notice the back of the tail is dark. We obviously decided that we were going to have a light source to the upper left. This would place the tail in a shadow.

When I say “We filled each main shape..” what I mean specifically is that we stole the line art and used the vector lines that were already drawn to fill the main shapes.

In order to do this you need to make sure you’ve used your Pathfinder tool to subtract (knock-out) and consolidate all your line art into one complete path, then you will:

1. Unlock your inking layer (if it isn’t already)
2. Select your Inks (lines)
3. Edit>Copy
4. Switch to your color layer (I’ll even re-lock my inking layer)
5. Edit>Paste In Front – this will drop a copy of the inks into the coloring layer in the exact same location that it was taken from – so it lines up perfectly.
6. Select the line art and then Object>Compound Path>Release. This will break all of these shapes back up into their own pieces of art. You can then delete the outline and simply deal with the fill shapes. By selecting them you can fill them with the appropriate color.

Using this technique will save you a lot of time. Here is the single-color initial fill of the devil-baby:

If you are not familiar with the Pathfinder tool in Illustrator, let me just say: please take the time to explore this tool. It is indispensable. I use it constantly.

Once the main color fill is in place, we can start adding shadows and highlights. Since your highlights and shadows will be contained within the area we’ve already established with our fill, you really only need to draw the line that will distinguish the barrier between your middle value and shadow.

In this first image you can see where I drew the dark red shape to define the shadow area. I only concerned myself with where my shape intersected with the red fill of the devil baby’s body.

I then need to make a copy of the devil-baby’s fill shape so I won’t lose it when I use the pathfinder tool. I use the Copy and Paste-In-Front function to create two duplicate shapes that are directly on top of one another. Then I select the main fill shape and the shadow shape as well.

Then, using the Pathfinder tool use the overlap Pathfinder tool. I’m not sure what the technical term is for this function, but it basically takes two shapes and removes any parts of them that do not over-lap. Here’s a pic:

I will go through and use this technique to define each of my shadows, bright spots and any other little details I would like to add.

So there you have it. An insight into my mind as I go from sketch to vector illustration. This is how I do it, but every illustrator has a different technique. So use this article/tutorial as a guide to help you establish your own technique. I hope you learned something useful!

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.