deluxeflash

Mock Up Your Designs with Google Fonts

2011-05-28T09:55:00.000+01:00

Looking for fonts that will spice up your website or design? Have you tried Google Web Fonts? Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API. All fonts in the directory are available for use on your website or designs under an open source license.

Here is a snappy guide to using Google Web Fonts either for your website or for corporate designs.

USING GOOGLE WEB FONTS FOR YOUR WEBSITE
Goto Google Web Fonts and select the font you like. For example I want to use this font "Pacifico by Vernon Adams" on my website. Click on the font this will open the specimen of the font (see screenshot below)

click on Use this font.

Now follow the instruction given below to embed the font on your website.

1. Copy the first snippet and paste it below the tag on your webpage using your favourite webpage editor, or you can even use notepad to do this if you are an advanced web designer.

2. Paste the code below under the tag

<title>Mock Up Your Website  with GOogle Fonts</title>
<style  type="text/css">
<!--
body,td,th {
font-size:  36px;
}
.myfonttext { font-family: 'Pacifico', arial, serif;
}
-->
</style></head>

Make sure you change the .myfonttext to your new css class name or better still you can leave it that way if you don't know how to manipulate it.

3. Select any text in your webpage and reference the CSS class to .myfonttext. Below is the code for that

<div class="myfonttext">How to Use Google Fonts</div>

save your web page and preview it.

HOW TO USE GOOGLE FONTS FOR YOUR DESIGNS
This part covers the process of downloading and installing Google Fonts on your Computer.

First of all, you need to goto Google Fonts and Download the Font of your choice. After downloading it in the zip format. Extract it and then copy the font itself to your clipboard >> then goto Control Panel >> Open Fonts and finally paste it. Then font will now be visible for you to use when designing.

See screenshots

Remember! Good design conveys information and communicates ideas. Poor design impairs this communication by getting

Classic Style Navigation

2011-03-30T12:31:00.011+01:00

Within 15minutes or so, depending on your reading speed you will be able to make classic style navigation using Flash Professional.

Preview the sample here

Let’s start by designing our page. Now Open Flash » Create a new document Ctrl + N.

Click on the properties bar and set the dimension of the page to 380x250.

After setting the dimension click on add new layer and insert two more layers to the default layer 1. Making it three layers, layer 1, layer 2 and layer 3.

I think we should start with the buttons! So click on the buttons layer and select the rectangle tool (R), change the fill color to white (#ffffff) and line color blue (#0000FF). Now inscribe a 12x12 rectangle at the top left of your page.

Again, select the Line Tool (N) and draw a less than shape inside the rectangle you’ve just drawn.

Like this

Make sure you use Cap (square) and Joint (Milter).

Select everything you have on the stage and convert to a button symbol by pressing F8. Name you symbol nav_button and registration point center then click ok

After creating your button double click on it to enter the editing mode. On the time line click on over and press f6 to insert a keyframe

The black shade should be visible on the over

Now go back to your button on the stage and change the fill colour to this (#00CCFF) by select it once and changing the fill colour from the properties bar or by using the paint bucket tool (K).

After you are through with all this. Just go back to the main Scene by clicking on Scene 1 on the timeline to return to the main scene

Duplicate your button by press Ctrl + D. Or from edit choose Duplicate

Furthermore, place the duplicated symbol by the right just after the first symbol. Then from Modify Select Transform Flip Horizontal

You should have this now

Goto the content layer, take the text tool and type in your content. Or you can even insert an image. In my own case I used a text to illustrate it. See screenshot below

Now click on frame 2 on the timeline of the content layer and press f6 to insert a new keyframe.

Download the source code here

Deluxe Iphone Buttons

2010-05-26T17:30:00.035+01:00

-BY OTO

In this tutorial I will show you how to make some eye catching Iphone like buttons in flash. With this technique you will be able to apply same to your flash games, websites etc.

Click here to view the final swf

SETTING UP YOUR LAYOUT

Open flash and create a new flash document Ctrl + N.

After creating a new document press Ctrl + J to set your page properties.

Use the same properties as shown in the screenshot above.

Background color: 100% Black.

Rename the current layer to (buttons).

MAKING YOUR BUTTONS

Double click on the rectangle tool and type in 9 for the corner radius value and press ok or enter.

Now draw a medium size rectangle on the stage.

Now take the selection tool (v), click and drag to select the top half of the rectangle as shown in the screenshot below.

make a duplicate of it by pressing ctrl + d on your keyboard. Now this is what you should have.

While the half top is still selected open the color mixers tab (shift + f9)

Type choose, linear.

While your rectangle is still selected, click on the first key fill on the color mixers panel and type in these (#0000FF), click on the right key and type in the same thing.

Now double click on the middle but type in #000000 as the fill color.

Now on the toolbar, take the Gradient Transform Tool.

Click only once on your top half rectangle.

Now rotate the right top white circle until you have this.

Finally move the white circle in the center down, you now have this.

Good.

Let’s move over to the remaining half rectangle (the bottom one)

Click on the bottom rectangle and then on the color mixers tab choose linear. Now following the same procedure with the top half rectangle set the linear to this.

If you notice we have only two keys. With the fill colors

Left Key-#0000FF

Right Key-#000000

Now take the Gradient Transform Tool and rotate the white circle from

To this

Now remember the other top half rectangle we duplicated.

Click on it and convert it to a movie clip symbol.

After converting it to a movie clip symbol, on the properties tab, color, choose alpha and type in 35% for the alpha value.

Now drag it to where it was.

(see screenshot below)

Finally you have this.

isn’t it cute?.

Take the text tool and make a static text with the label Op. give the text the following properties.

Fill Color-#0066FF

Font-Segoe Script

Font Size-45

Bold.

Then drag the text and place in the center of the rectangle

Now let’s get started by duplicating our rectangles and changing the colors.

DUPLICATING THE RECTANGLE

Click on the selection tool (v), click and drag across the rectangle to select it.

Press Ctrl + D to duplicate it.

Make 8 duplicates and then arrange them as shown in the screenshot below.

now use the zoom tool (z) to zoom inside the 2nd op.

a. Click on the bottom rectangle of the 2nd op and change the left fill key on the color mixers panel to – #FF0000

b. Click on the text also and change it to #FF0000.

c. Right click on the top half rectangle that was converted into a movie clip and select duplicate movie clip. After duplicating it double click on it to go inside of it. Change the fill color to this - #FF0000.

Now click on scene 1 to go back to the main stage.

d. Click on the other top half rectangle that wasn’t converted into to a movie clip and on the color mixers tab. Change the properties as follows;

Left Key-#FF0000

Center Key-#000000

Right Key-#FF0000

Now you should have this.

What am going to do now is to give you the values for the rest of the buttons.

VALUES

FOR THE 3rd OP BUTTON

Step a-#00FF00

Step b-#00FF00

Step c-#00FF00

Step d- left key-#00FF00 center key-#000000 right key-#00FF00

FOR THE 4th OP BUTTON

Step a-#FF00FF

Step b- #FF00FF

Step c- #FF00FF

Step d- left key- #FF00FFcenter key-#000000 right key- #FF00FF

FOR THE 5th OP BUTTON

Step a- #FFFF00

Step b- #FFFF00

Step c- #FFFF00

Step d- left key- #FFFF00 center key-#000000 right key- #FFFF00

FOR THE 6th OP BUTTON

Step a- #00FFFF

Step b- #00FFFF

Step c- #00FFFF

Step d- left key- #00FFFFcenter key-#000000 right key- #00FFFF

FOR THE 7th OP BUTTON

Step a- #666600

Step b- #666600

Step c- #666600

Step d- left key- #666600 center key-#000000 right key- #666600

FOR THE 8th OP BUTTON

Step a- #CCFF66

Step b- #CCFF66

Step c- #CCFF66

Step d- left key- #CCFF66 center key-#000000 right key- #CCFF66

FOR THE 9th OP BUTTON

Step a- #993300

Step b- #993300

Step c- #993300

Step d- left key- #993300 center key-#000000 right key- #993300

You will finally have this.

CONVERTING THEM INTO BUTTONS

A1. Using the selection tool (V) drag and select the 1st op, after select it press f8 to convert it to a symbol. Select button as the behavior and registration point center, change the name to op1, finally click ok.

now double click on your button to go inside the editing mode.

A2. On the timeline click the over frame and press f6 to insert a keyframe.

with the over frame still selected, press ctrl + a to select every thing on the stage.

Convert everything to a movie clip symbol with the name op1_over, click ok.

now select your movie clip and on the properties bar, select the filters tab

after selecting the filters tab. Click on the plus icon and choose adjust color.

A3. set the properties as shown in the screenshot below.

Finally click on scene 1 to go back to the main stage.

Now repeat step A1, A2, and A3 to the rest of the buttons.

Test your movie!!!

If you have any difficulty doing this, you can download the full .fla below or post your comments and remarks.

Download source file

360degrees Character Movement with Hittest

2010-04-28T08:46:00.000+01:00

In this tutorial you will learn how to make a complete character movement which will include rotation and hit test for your flash games characters. You will also learn how to put scoring.

Click here to view the sample.

Just take the few steps below.

Step 1

Save the images below into your computer because we will make use of it, as the example.

image 1

image 2

image 3

Create a new flash document and then insert two more layers then rename them as follows:

car1 layer being the first followed by car2 layer finally actions layer.

Step 3

Import your image 1 to the car1 layer. Then set the position to this:

x-65.2

y-201.1

Click on it and Press F8 to convert it to a symbol. Select Movie Clip as the behavior, registration point center and then click ok.

Give the instance name “car_mc”. (this can be found on the property bar of the movie clip).

Now select your car_mc, press F9 and add this script to it.

//(c) otodeluxe 2010

onClipEvent(load){

speed=0;

}

onClipEvent(enterFrame){

if(Key.isDown(Key.UP)){

speed += 0.2;

}

//this is where the car will bounce back when it hits car2

if(this.hitTest(_root.car2_mc)){

this._x=0;

}

if(Key.isDown(Key.DOWN))

{

speed += -0.2;

}

if (Math.abs(speed)>10){

speed *= .7;

}

if(Key.isDown(Key.LEFT)){

_rotation -= 12;

}

if(Key.isDown(Key.RIGHT)){

_rotation += 12;

}

speed *= .98;

x = Math.sin(_rotation*

(Math.PI/180))*speed;

y = Math.cos(_rotation*

(Math.PI/180))*speed*-1;

if(!_root.land.hitTest(_x+x,_y+y,true)){

_x += x;

_y += y;

}else{

speed *= -.6;

}

Step 4

Import “image2” into the car 2 layer and set it to this position.

x- 336.7

y-89.5

Convert it to a movie clip symbol with registration point center and then click ok.

Give it the instance name of “car2_mc”.

Open the action script panel of the movie clip and copy in these

onClipEvent (enterFrame) {

if (this.hitTest(_root.car_mc)){

//the below code will go and stop at the frame 2 of the car 2 layer when the other car hits it

_root.car2_mc.gotoAndStop(2);

//this will increase the value of the hits dynamic text by 1

_root.hits++;

//this is very useful, it will return to frame 1 when nothing happens

}else{

_root.car2_mc.gotoAndStop(1);

}

Don’t worry about the grey text it is the explanation I made.

After typing in this codes.

Double click on your car2 movie clip and then press F6 on frame 2 and then import “image3” into frame 2 of the car2 movie clip and place it in this position.

Click on frame 1 of the car2 movie clip and type in the stop action to it, so that it won’t play all the frames.

Stop();

Step 5

After you might have completed all these. Lets make the scoring!

Take the Text tool (A) and draw a dynamic text area and give it the following properties.

Make the label “0” and Note the var (variable) “hits”.

Make another text but choose static text instead of dynamic text.

Then make the label Hits.

See final screenshot below.

Now that’s all about the tutorial.

Test your movie by pressing Ctrl + Enter.

Remember to drop your comments if you have any difficulty in doing this.

Dazzling Glow Menu

2010-04-24T17:01:00.011+01:00

BY: OTOBONG

In this detailed tutorial, I will solve the convoluted issues you have been having when making a flash menu for your website. Am going to explain to you how to make a complete working glowing menu for your website.

You can click on the link below to view the finished sample.

Click here to view the sample.

Step 1

SETTING UP YOUR DOCUMENT

Create a new flash document. Ctrl + N.

Then press Ctrl + J to set the document properties.

Background color: #003366

STEP 2

SETTING UP THE RECTANGLE

After setting up your stage, double click on the rectangle tool (R). This will open the rectangle settings. Type in 20 as the corner radius value.

Then click ok.

Now on the property bar select the fill colour and enter - #00FFFF. Make sure you disable the stroke colour.

Finally draw a 206.8 x 42.6 rectangle on the stage. After drawing it select and give it the following properties.

X: -103.3

Y: -21.3

Let’s add a text to the rectangle so that it would be factual.

Take the text tool (A) and then on the property bar Select Static text and then change the font to Impact Size – 23, Bold. Fill colour – Black.

Click on your rectangle and type this :: HOME ::

See screenshot below.

STEP 3

CONVERTING YOUR RECTANGLE INTO A BUTTON

Select the entire thing and then press F8 to convert it to a symbol.

Type in home as the name.

For the behavior choose – Button, registration point – center and finally click ok.

Now you have a button!

Click once on your button and then on the property bar click on the Filter tab.

Click the plus sign, and select glow.

Now set the properties as follows.

Blur X: 40

Blur Y: 40

Strength: 100%

Quality: Medium

Color: #00FFFF

Now double click on your button, this will take you inside the button’s editing mode.

Click on the over frame of the buttons and press f6.

While the over frame is still selected. Click on the Selection Tool (V) and then select everything on the stage.

Press f8 to convert them into a symbol. But this time choose the movie clip the symbol’s behavior.

Click ok.

Now select your newly created movie clip and then select the Filters tabs do the same thing we did to the button (glow) but you will only change the Glow color to this - #66FF00.

And that’s all about that. Just keep repeating the same step and make extra buttons for your website.

STEP 4

LINKING THE MENU

What most people don’t know about using flash menus for their website is the ignorance of linking the menu to their WebPages / web host.

You can have view of a website I used flash to make the menus.

(www.otodeluxeportfolio.tk)

Now if you are using dream weaver to design your website you are normally going to use the “import flash alternative”. So here is how you are going to link your WebPages.

For example let’s take the “home”.

Click the home menu and then press f9 to open the action script menu.

Type in this.

on (release){

getURL("home.html");

}

Now when hosting your website this command will link to the webpage title “home.html”

As simple as ABC.

Download the sample .fla here

How to Make a Sumptuous Numbering Navigation

2010-04-12T17:54:00.023+01:00

By OTOBONG INI ARCHIBONG

This tutorial will guide you to making a numbering navigation in flash.

Click here to view the sample

SETTING UP YOUR STAGE

Create a new flash document. Ctrl + N then press Ctrl + J to set the document properties.

Background color: #003399

SETTING UP THE LAYERS

Rename the current layer 1 to buttons. Then insert a new layer ontop of it, and then rename it to contents.

MAKING THE BUTTONS

Click on the buttons layer and then draw a wide rectangle then select it and give it the following properties.

Width-48

Height-36.0

Stroke colour-#00CCFF

Stroke height-2

Fill colour-#0066FF

This is how your rectangle should look similar to-

a.DUPLICATING THE RECTANGLE

Double click on the rectangle and duplicate it into four (4) places then increase the width of the last one. (See the screenshot below)

b.ADDING LABELS TO THE RECTANGLE

Let’s add some text to the rectangle before we convert it to a button. Take the text tool (A) and select static text from the property bar. The first rectangle will have the label of 1, the second 2 and so on, but the last one should be “next”. (See screenshot below)

c. CONVERTING THE RECTANGLES TO BUTTONS

Now we are through with the rectangles lets convert each of them into a button. Select the first rectangle with the label “1” and then press F8. This opens the dialog box Convert to Symbol.

Choose button as the behaviour, you can change the name to 1 and then with registration point center. Press ok. (See screenshot below).

You have successfully converted the first rectangle into a button. If you check the property bar it will should button as the symbol type.

Repeat the same steps to the remaining rectangles.

After you are done with these.

Let’s add some interactivity to the buttons.

d. ADDING INTERACTIVITY TO THE BUTTONS

Double click on the first button with the label 1. And then on the timeline select the OVER FRAME and press f6.

With your OVER frame still selected, click once on your rectangle and then change the fill colour to this -#0033FF.

Click on Scene 1 to go back to the main stage.

Now, repeat STEP D to all other buttons. We now have our buttons working let’s make the contents.

MAKING THE NAVIGATION

While you’re on scene 1 click on frame 5 of the buttons layer and press f6, click again on frame 10 of the buttons layer and press f6 do the same thing to frame 15 and then on frame 20 press F5.

Your timeline should look similar to this

SETTING UP THE CONTENT LAYER

Before we make the contents let’s add stop action to all the key frames to avoid auto play all.

Click on the first frame of the contents layer and press f9 to open the actions panel.

Type in this

Stop();

Do the same thing to frame 5,10,15 and 19.

ADDING THE CONTENTS

Click on frame one of the contents layer and then take the text tool (A) and make a static text as shown below.

This is just an illustration you can change the label to whatever you like or you can even import an image there. Click on the text and convert it to a movie clip symbol.

After converting it to a movie clip symbol click on frame 4 of the contents layer and press f6.

With frame 4 still selected. Click on the text and on the property bar Color- Choose – Alpha.

Enter the alpha value as – 0%.

Click on frame 5 and make a static text of this.

Convert it to a movie clip symbol as we did to the other one.

And then press F6 at frame 9.

Also set the alpha color of the one at frame 9 to 0%, just as the other text.

Keep repeating the same procedure. This is what you should have at frame 10 and frame 15.

FRAME 10

FRAME 15

Finally click on the content layer and on the property bar

Tween – Choose Motion.

Your timeline should now look like this.

NAMING THE FRAMES TO EASE NAVIGATION

Lets name the frames so that when we are adding navigation to buttons it will be easier for us.

Click on frame 1 and then on your property bar.

You will see something like this.

Change it to “name”.

On frame 5 change the label to “sex” on frame 10 change it to “country’ then finally on frame 15 change it to “age”.

CODING THE BUTTONS

Now return to the first frame (frame 1) and click on the first button, the one with the label one. Then press f9 to open the action script panel of the first button.

Type in this.

on (release)

{

gotoAndStop("name");

}

Button with the label 2

on (release)

{

gotoAndStop("sex");

}

Button with the label 3 add

on (release)

{

gotoAndStop("country");

}

Button with the label 4 add

on (release)

{

gotoAndStop("age");

}

Button with the label next add

on (release)

{

gotoAndPlay("name");

}

NOW THAT’S FOR THE FIRST FRAME

Do the same thing to frames 5, 10, 15 and 19 but for the next button. On frame 5 the next button should be

on (release)

{

gotoAndPlay("sex");

}

On frame 10

on (release)

{

gotoAndPlay("country");

}

on frame 15

on (release)

{

gotoAndPlay("age");

}

Now that’s all. I hope you followed the tutorial?

If not just leave your comments or download the full .fla below.

Download the .fla here