Tikier Hosting » click

10 Ways To Increase Your Blog’s Pageviews

admin — Mon, 10 May 2010 20:45:50 +0000

With Google Adsense or Yahoo Publisher, having people click onto more pages helps your revenue immensely, but how do you get them to read more than one page when they visit your website? Here are a few tips.

1. Create pages within the blog that contain reference material you refer to often in your posts. These static pages will also get crawled and indexed by the search engines and as you write posts about your topics you can refer people to these static pages as references to what you are posting about.

2. Use articles as static pages. You can reprint articles on any topic for free by visiting one of the many article directories. Then refer people to read the articles that relate to the post you are making. You could even add one article as a new page every time you make a post.

3. Refer to other posts you have made on your blog or on another one of your blogs while posting. This gets the reader to click over to previous posts. You can even decide your posts by browsing previous posts and deciding which one to follow up on. Those archives are not to be lost and forgotten. Its great material, (you wrote it right?), so use it.

4. Create a page that links to your favorite posts that are timeless. You browse your old posts, find posts that you want readers to find easily, then build a links page with those posts directly linked. Then add a link to that page from your front page. Call it favorite posts or whatever and you will benefit by those that click through and follow those links.

5. I've posted here before about the "more" tag. You write your post as normal, then decide where you want to break the post up onto a new page. You put the more tag in and readers have to click to a new page to read the rest of the story.

6. Write once per week special projects. These are a series of articles on a particular topic. You will be offering it once per week giving readers a week to comment on it, then have them hanging on for next weeks special post in the series. Each time add links to previous posts in that series.

7. Using your content from your other websites or blogs is also a great way to get more pageviews for all of them. Use the target new tag and refer to material on your other blogs and websites. It will open a new window leaving the current blog open while they visit your other website or blog. You can quickly double up your pageviews while also introducing your readers to your other websites and blogs.

8. Make a list of 10 previous posts and the links to those posts. Make a post in your blog about 10 things you want your readers to know and read in case they have not done so before. At your suggestion they will at least go see if they have read those posts before, increasing your pageviews once again plus bringing old material to new readers. That also lets them know they should browse the archives for things they have missed.

9. Using that same list of 10 posts or a new one, visit other blogs on your topic. Find posts that talk about something similar to one of those 10 posts, then instead of adding a link in your signature to the home page, make a comment there and refer to the post that is similar and that contains helpful information to that blogger and their readers. You will also be increasing your link popularity while doing this. Do not spam the link. Make sure it actually contains useful information. Don’t be trolls or spammers and you will end up with new readers and more page views for your blog.

10. Do not stop being creative. Use the tips in this article, plus invent some of your own ways to interlink your blogposts together. Create pages. Don't just post and forget. That content is valuable, use it. Do not make people search your blog. They are lazy and busy. Bring it to them. That is just good customer service.

I hope this article helps you learn there is more to blogging than just writing a post once in awhile or even daily. If you employ the tips I just gave you into your blog I guarantee you will increase your pageviews which in turn will increase your revenue if using an ad program in your blog.

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

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.

Glowing neon playback control buttons

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

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

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

You can see the example of the sleek buttons below.

Preliminary steps — setting the background

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

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

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

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

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

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

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

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

Top of page

Creating the glowing outer ring

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

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

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

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

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

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

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

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

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

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

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

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

Making the main button circle

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

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

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

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

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

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

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

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

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

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

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

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

Creating the play icon

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

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

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

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

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

29 Center the triangle inside the button.

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

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

32 Press Ctrl+X to cut the outline.

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

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

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

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

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

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

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

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

Creating the glowing stop button from the play button

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

39 Open the Library by selecting Window > Library.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Hope you liked this tutorial.

Download the source file for this lesson

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

Making an interactive country map

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

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

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

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

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

Setting up the map’s sections

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

Download the starting source FLA with maps for this tutorial.

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

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

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

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

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

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

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

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

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

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

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

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

Lock this layer.

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

Creating the animation for the population density section of the map

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

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

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

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

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

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

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

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

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

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

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

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

Select the Alpha option and bring it down to zero.

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

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

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

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

stop();

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

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

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

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

stop();

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

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

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

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

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

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

Creating the invisible buttons for the map’s user interface

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Before continuing, lock the buttons layer.

Designing the map’s sections and graphs visibility icons

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

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

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

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

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

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

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

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

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

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

Lock the displayed layer.

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

Entering the ActionScript that powers the map’s interface

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

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

49 Enter the following ActionScript code inside:

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

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

The ActionScript code explained

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

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

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

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

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

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

cities_btn.onPress = function() {

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

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

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

if (cities._visible == false) {

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

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

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

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

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

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

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

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

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

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

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

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

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

popDensity.play();

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

popDensity.gotoAndStop(1);

Some points to keep in mind when creating an interactive map

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

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

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

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

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

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

Download this lesson’s zipped source FLA file.

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

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

Technical Bulletin for cPanel 11.25.0

admin — Mon, 22 Mar 2010 00:44:24 +0000

As you know, 11.25 has added a host of new features and functionality to cPanel & WHM. Tonight, 11.25 makes it to our STABLE builds. We will have additional technical staff on hand for the next few days to ensure the transition goes as smoothly as possible.

As always, should you need anything, the entire cPanel staff is here to help!

There have been some enhancements to the methods that cPanel uses to process log files that may result in undesired behavior with some system configurations.

Graceful Restarts:

If you are experiencing a high volume of graceful restarts in Apache due to log file rotation you may want to enable the Piped Log feature as follows:

* You must have root access to enable this feature.

* You must be running Apache 2.0 or later to enable this feature (not supported for Apache 1.x)

* Only available on 11.25.0 and later.

1. Login to WHM

2. Click /Service Configuration/

3. Click /Apache Configuration/

4. Click /Piped Log Configuration/

5. Check the box labeled /Enable piped Apache logs/

6. Click the Save button

This will cause your Apache configuration file to be rebuilt and Apache to be restarted.

More complete information about Piped Log can be viewed here:

http://forums.cpanel.net/f5/cpanel-11-25-log-processing-145417.html

An additional requirement for our enhanced log file processing is a larger disk space requirement inside of the /var partition. Upon upgrading to 11.25.0 if cPanel detects that your /var partition is too small it will disable bandwidth stats processing until the space requirement is remedied. If there is inadequate space in /var, notification is set to the level 1 notification targets as specified in WHM's Contact Manager.

To re-enable:

1. Symlink /var/cpanel/bandwidth to a partition with sufficient space

2. Remove the file /etc/rrdtooldisable

3. Re-run upcp

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.

3 Benefits Of Pay Per Click Advertising

admin — Sat, 13 Mar 2010 14:41:44 +0000

Over the past few years, pay per click advertising has become an extremely popular option for online marketers. Whether you are working for a large corporation or just have your own web site, PPC advertising can help you achieve your online marketing goals. Thanks to the diversity of companies offering pay per click advertising (from the major search engines of Google, Yahoo and MSN to smaller players like Search Feed and 7Search), you can use PPC advertising to benefit your web site, regardless of your budget. In order to help you understand the true potential of pay per click advertising, here are three benefits that it can provide:
Traffic-Obviously, this is the number one benefit of PPC advertising. Because of the low costs of bidding on keywords, pay per click advertising can help you drive a large amount of traffic for a relatively low price. The other major advantage of PPC traffic is the fact that it is instant. Unlike organic traffic (which can many months or even a year to start coming for new web sites), you can start driving pay per click traffic to your web site right now.

Branding-Many online marketers are working under the misconception that once they have achieved strong organic search engine rankings, running a PPC campaign is worthless. On the contrary, setting up and running a pay per click campaign is quite valuable, even if your web site is drawing in quality traffic organically. The reason that a PPC campaign can compliment organic rankings is that it can help improve your web site’s branding. When potential visitors see your web site listed twice in a search engine’s results, their trust for you will increase immensely. This will translate into more leads and/or sales from your web site, along with more return visitors.

Easy Conversion Tracking-The reason I am adding this as a benefit is because it shows how much easier it is to control and manage your PPC budget versus an SEO or similar budget. When it comes to PPC, you not only know exactly how much money your web site is generating, but you also know exactly how much you had to spend to make it. This will help you carefully plan your budget and get the most results for the money you have.

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

1-Click Webhosters – Rapidshare

admin — Sat, 13 Mar 2010 14:37:20 +0000

Before I introduce you to Rapidshare, here is a short summary of the history of 1-Click webhosters.
Back in 2006 there was a sudden flood of what are popularly know as 1-Click File Hosting websites. The term comes from the simplicity of the upload process offered by the respected sites. As opposed to using complicated FTP software users are able to easily locate files from their HDD or simply drag-and-drop them directly into their favorite browser. After that with a mere click of a button their files begin uploading without further interaction. After the files have been uploaded the user is provided with a download link which they can share with their friends.

Since then a lot of 1-Click webhosters have emerged but for one reason or another failed and eventually were put out of business. One of the few successors in the business is Rapidshare©

Rapidshare© is a premium 1-Click webhosting solution based in Germany. Over time they have increased the hard disk and internet bandwidth capacities of their datacenters to eventually reached, as of today, 140 Gigabit/s internet connectivity and the whooping 3.5 Petabytes (1 petabyte = 1000 terabytes = 1 000 000 gigabytes) of storage space. The fact that Rapidshare© is number 11 according to the Alexa traffic monitoring and ranking website speaks for itself of how popular and widely-used Rapidshare©'s service is.

This concludes the article on Rapidshare - one of the biggest players in the highly competitive file sharing business.

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

Creating a 3D Model in Illustrator

admin — Mon, 08 Mar 2010 15:53:47 +0000

This tutorial will teach you how to make 3D glasses on a carpet using Adobe Illustrator. You will learn here how easily it is to create a simple 3d model using Adobe Illustrator rather than using any 3D program such as 3D Studio Max. The technique that we will use in this tutorial will involve creating a single slice of the object that we want to create and then using the "Revolve" effect to convert our slice into a 3D object. Read on to learn the exact steps on how to do this.

Create a new Illustrator file using the default settings. We will start by creating our single slice of the object. Use the pen tool to create the object you see in the image below. Use a white stroke colour and a blank fill.

Once you have this object ready select it and use the Revolve effect that is found under Effect>3D>Revolve. Configure the settings as shown in the image above and make sure to set the Surface effect to "Defuse Shading". Click on OK to see the instant result of our work!

It is now time to create the second glass in the scene. First of all, duplicate the glass that we already made, you can simple press and hold ALT while dragging the image using your mouse to get a duplicate copy of it. Open the Appearance Palette from the Window menu above, in the Appearance Palette find the 3D Revolve Effect and double click it. Change the rotation around the x, y, and z axis to -44°, 0° and 100°. Once you click on OK you should see the second glass created.

It is now time to make our carpets. You can use any design you wish for the carpets, I personally created these using the library Decorative Brushes ( Window>Brush Library>Decorative Brush>Celtic - 0.5pt stroke weight ). You can copy and paste the image that I supplied here to use for your own project.

After aligning both carpets at the centre vertically and horizontally, now using the perspective view skew the carpets to get a similar scene to that shown in the image below

Adding the Shadow of the Glasses

Create an ellipse shape in a size similar to the glass. Use a blank stroke and a 25% gray colour for the fill. Using the "Effect Menu" apply the Gaussian Blur to the shape. Once done arrange the shadow to the back of the glasses.

To add a shadow for the second glass lied down. Copy the actual glass and change its 3D Revolve Effect from the Appearance Palette. Here you will have to click on the "More Options" button to make the Light Intensity to Zero. After that you will have to apply the Gaussian Blur effect and arrange it to the back in the same way you did to the first glass.

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.

5 Quick and Easy Steps On HOW-TO Send Your Website A SURGE Of Amazon’s Traffic For FREE!

admin — Sun, 07 Mar 2010 20:51:07 +0000

What I'm about to reveal to you in this article will literally change the way you look at 'Amazon' forever.

As you know, Amazon is a buyers market place and is a VERY powerful search engine for products of all sorts, especially Books.
Now, you're probably saying to yourself, "yeah, I already know that about Amazon, but how do I get my share of Amazon's traffic?".

Well, I'm going to answer that question in just a few moments, but first, here's just some of the benefits you'll receive once you've 'Set-Up' what I'm about to show you:

- you'll position yourself as an Expert within your Niche

- you'll receive Highly Targeted traffic to your website

- you'll be able to build a HIGHLY targeted 'Opt-In' list

Those are some pretty Powerful benefits wouldn't you say?

And who would of ever guessed that Amazon could deliver this to you.

I only recently learned of this tactic myself from a Very well known Internet marketer who was kind enough to share it with me.

So now, I'm going to do the same for you.

Are you ready to see what Amazon can do for your Business and Credibility?

Enough said, lets get started.

Step #1. Set up a account with Amazon.

This is the easiest part of the whole task. Simply go to http://www.amazon.com and set up an account for yourself.

This should only take a few minutes and is very straight forward.

Step #2. Click on your "Your Name" Store tab.

Once you've set up your account you should have been given a password in order to login to your account.

If you're not logged in already, login now.

Now, from within the members area there should be a row of tabs at the top of the members area, click on the one that says "Your Name" Store(ex. 'Corys Store' tab).

This will take you to a different area with a different sub-menu.

Click on the tab in the sub-menu that says "About You Area".

Step #3. Setting up your "About You Area".

Now this is where you have to pay 'Special Attention' because this is what people will see when they click on your 'About You' tab.

Assuming you are at the 'About You Area' you'll notice that you have spots available to put your Picture, Name, Nickname, eMail Address, Real Name and About Me.

Go ahead and fill out all the area's accept your 'About Me'.

The 'About Me' spot is what I'll talk about in the next step, but for now, just fill out all the other area's and if you want to put up a picture of yourself, you can, it's up to you.

Step #4. Setting up the 'About Me' section.

This is probably the single most important part of this whole process because this is where your potential customer will read about who you are and what you and your business is all about, so do take this seriously.

Now, you have about 4,000 characters of space to write up a description about who you are and what your business is about, so its up to you on how long you want your description to be.

Before you start writing your description this is what You have to do First within the first 70 to 80 characters of your 'About Me' description and I'll show you an example of how mine looks so you'll be able to see this in action.

(ex. About me: Hi, I'm Cory Threlfall and I'm the Editor/Publisher of 'www.internetwondersezine.com' which is a ...)

Do you see what I've done?

I've incorporated my 'Domain Name' in quotes into my First 70 to 80 characters of my description so when they click on my 'About Me' and read my profile they'll also see my Domain Name, and if they wish to find out more about me they can either 'Copy and Paste or Type' my domain into there browser which will then bring them to my website where they can either 'Subscribe' to my newsletter or read my sale copy which will then get them to Opt-In to my newsletter.

This is where the 'List Building' starts to take place from the traffic sent through Amazon.

Now, we've already established that Amazon is a High Traffic website and now that you've set up your 'About Me Area' the way I've outlined it above I'm now going to show you how to direct Amazon's traffic to your website.

Step #5. Directing Amazon's traffic to your website.

This is where the fun starts. And once you see How its done you'll probably kick yourself in the butt like I did when I was shown How-To do this.

What we need to do now is a little exercise so you'll see for yourself how you'll tap into Amazon's traffic.

So, we know that Amazon is best known for Books, so click on the 'Books' tab within Amazon's members area. This will take you to a different page.

In the upper left corner you'll see a 'Search Books' search box.

Now, for the purpose of this exercise, just so that we're on the same page, lets use 'internet marketing' as the search term.

So, go ahead and type that in and press GO!.

You should now see a bunch of listings on books related to 'internet marketing'.

Scroll down and select the "33 Days To Online Profits" link. This will bring you to its Product Description page.

Within this Product Description page you'll find Product Details, Editorial Reviews and most important of all, All Customer Reviews.

Notice I said "and most important of all, All Customer Reviews".

Thats right, all you need to do is 'Write Reviews' on books within your particular Niche and when potential customers are reviewing the book you wrote the review on and they scroll down and happen to read your review and click on Your Name to see what you're all about, guess what they'll see?

They'll see your profile with your Name, Nick Name, eMail Address and your 'About Me' description with your Domain Name screaming out at them which can easily be typed into there browser.

There you have it, "5 Quick and Easy Steps On HOW-TO Send Your Website A SURGE Of Amazon's Traffic For FREE!"

I truly hope you see the benefits of writing reviews and how it will make you look in the eyes of your potential customer.

This is a great tactic to use if you're looking to establish yourself as an Expert within your Niche and at the same time, build a HIGHLY targeted 'Opt-In' list that you can market to for years to come.

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

Photoshop CS4: Intelligent extensions with panels

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

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

Installation

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

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

Avoiding problems

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

Lorem Ipsum

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

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

Gridmaker

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

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

The Emailer

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

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

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

Sharpening

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

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

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

The Watermark Creator

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

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

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

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

Adobe Configurator

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

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

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

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

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

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

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

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

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

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

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

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

Preparing the workspace

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

1 Open a new Flash document.

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

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

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

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

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

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

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

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

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

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

9 Lock the background layer.

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

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

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

Top of page

Using the Pen tool to create a precise outline

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Top of page

Completing the mask outline

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

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

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

Hit Delete to remove this part of the line.

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

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

Fine! The form of the mask is now completed.

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

Top of page

Creating the mask and seeing it in action

25 Lock the car mask layer.

26 Hide the background layer.

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

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

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

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

Top of page

Creating the invisible button for the car

28 Unlock the car mask layer.

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

30 Press Ctrl+C to copy the shape.

31 Lock the car mask layer.

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

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

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

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

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

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

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

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

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

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

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

Top of page

Making the invisible button symbol for the background

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Lock this layer.

Top of page

Creating the background fade in – fade out animation

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

55 Make only the background layer visible and unlock it.

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

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

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

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

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

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

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

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

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

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

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

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

Top of page

Creating the sharp/blur animation for the car

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Top of page

Adding interactivity with ActionScript

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

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

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

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

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

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

stop();
carIsFocused = false;

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

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

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

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

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

stop();

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

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

var carIsFocused:Boolean = true;

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

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

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

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

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

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

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

So, the line

background_btn.onRollOver = function():Void {

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

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

if (carIsFocused) {
play();
}

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

The first line of this simple if conditional statement says

if (carIsFocused) {

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

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

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

play();

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

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

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

stop();
carIsFocused = false;

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

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

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

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

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

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

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

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

carIsFocused = false;

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

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

if (!carIsFocused) {

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

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

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

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

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

What else do we want from the search engines? Paid Traffic

admin — Wed, 03 Mar 2010 16:00:42 +0000

Perhaps we want ‘Pay Per Click Search Traffic’. This refers to the visitors that we can receive by placing paid search ads with a search engine.

Go to any of the big search engines and search for just about anything and you’ll see ‘sponsored links’ either at the top or at the side of your results. These are the paid search ads.

With Paid Search Marketing you can buy a top ranking in the search engines for any of the keyword phrases that you would like to – if you have deep enough pockets. Some keywords and phrases become so highly competitive that the cost per click can exceed $10.00.

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

Using Flash – Advantages and Disadvantages

admin — Wed, 03 Mar 2010 13:19:04 +0000

Advantages

* basic animations for your website
* interactive "games" can be created using flash
* often used in banner design to improve click through rate and grab attention
* attracts the attention of the eye
* can incorporate a mini presentation into your website

Disadvantages

* increase in file size of the page
* can cause slow loading times on your website (slow connection user won't hang around and wait)
* some users may not wish to install Flash onto their computer
* more difficult to optimize flash pages for search engines
* not as easy to edit as other more commonly used formats like HTML

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