Onscreen Keyboard Interactivity in Flash

Before we begin I indulge you to take a look at the sample.

Click here to view the sample


Step 1
Create a new flash document.

Then take the rectangle tool and draw a rectangle with this fill colour (#FF9900). After drawing it, select everything and give it the following properties.

Width- 44.0
Height- 27.0

X- -22.0
y- -13.5

Now make two (2) duplicates of it like shown in the screenshot

Step 2
Take the text tool and make a static text of this colour (#FFFF00) and type as shown in the screenshot below.

Then convert each of them starting from A, B and finally C to a button symbol. (Ctrl + F8).

After you are through with all these starting from the first button “A” give the instance name “a_btn” for button “B” instance name “b_btn” and finally for button “C” instance name “c_btn”.

Step 3
Now take the text tool and make a very wide input text as shown below.

Make sure you select show border around text.

Also type in “display’ as the variable “Var:”

Step 4
Now click on button “A” and then press f9 to open the action script window.

Type in this

on (release) {
display="A"
}


For button “B” type in

on (release) {
display="B"
}


Finally for button “C” type in

on (release) {
display="C"
}


Now test you movie.

Note: You can make all the characters you usually find on your keyboard if you wish to make a complete keyboard.



Download the source file here

Read More!

Power on and Power off Button

By: Otobong

This is a very interesting, rousing and thrilling tutorial; we are going to make a very simple on and off button in flash.

Just click the link below to look at what we are about to make.

Click here

Step 1
Create a new flash document Ctrl + N.

Then insert one layer ontop of the current layer 1. Then rename them as follows:

Click on the interface layer. Then take the rectangle tool, on the property bar set the stroke colour - #CCCCCC, stroke height-1, and the fill colour – white (#FFFFFFF).

Draw a rectangle on the stage as shown below.

Select it and give it the following properties.

Now duplicate it and align them as shown below.

Step 2
Save the image below to your computer and then import it unto the stage

after importing it to the stage align it as shown below.

Step 3
Now take the text tool (A) and make a static text with the label “on” and another static text with the label “off” set this colour –(#666666) then place them as shown below.

Select the first button (the on button) and then press F8 to convert it to a symbol.

Choose button as the behavior. And then name it “on button”

Repeat the same step to the “off” button” but change the name to “offbutton”.

Step 4
Double click on the on button to go inside the editing mode of the movie clip. Now on the timeline You will see this.

Click on the over frame and press f6.

Now you can change the gaze of your on button. For mine I drew a #FF9900 fill rectangle like shown in the image below.

After doing this go back to your main stage (scene 1) and do the same thing to the off button.

After you have finished doing these, click once on the onbutton and set the instance name of the onbutton to “on_btn”

and the off button “off_btn”.

Also select your image and convert it to a movie clip (not button) and then give the instance name - phone_mc.


Now click on the actions layer and press f9 to bring up the actions panel.


Type in this piece of code


phone_mc._visible = false;
on_btn.onPress = function() {
if (phone_mc._visible == false) {
phone_mc._visible = true;
}
}

off_btn.onPress = function() {
if (phone_mc._visible == true) {
phone_mc._visible = false;
}
}

that’s all! Now test your movie Ctrl + Enter.

Happy easter!

Download the full .fla here

Read More!

How to Make an Astonishing Magnifying Text Effect in Flash

Click here to view the swf sample

In this tutorial we will make a very simple but captivating magnifying text effect that will magnify each text as the magnifying glass moves closer to it.

Lets start by setting up the stage.

Step 1

Create a new flash document and give it the following properties.

Step 2

Then insert two extra layers ontop of the default layer one and name them as follows:

Click on the “txt1” layer and type “otodeluxe” that’s what I used for the sample.

After type the text select it and give it the following properties.

This is how your text should look like.

Now click on the “zoom” layer and take the oval tool (O) and draw a circle on the stage. Take the rectangle tool also and draw a slim rectangle then fix it together with the circle as shown in the screenshot below.

Give the circle (a wide fill colour) #FFFFFF

Now we have the magnifying glass. Select it and convert it to a movie clip.

Then place it in this position.

Step 3

Click on frame 25 of the “zoom” layer and press f6. With frame 25 still selected choose motion as the tween.

Then move your magnifying glass to the right side as shown in the screenshot below.

Now select the “zoom” layer and on the property bar tween choose motion.

Lock these two layers “zoom” and “txt1”.

Step4

On layer 3 click on frame 6 and press f6 then take the text tool and make a static text with the same font type on the txt1 text. But change the width and height to this.

Width- 23.9

Height-24.7

Make the label “O” and place it in this position.

Click on frame 7 and press f6. then edit the “O” to “T” and place it in this position.

Click on frame 8 and press f6. then move the “T” text as shown in the image.

Click on frame 9 and press f6. And move the “T” text again still inside the circle.

Click on frame 10 and press f6. Then change the text to “O” but make sure you align the text to fit inside the circle.

Keep repeating the same procedures for the remaining frames.

See the screenshot below

For frame 11.

For frame 12

For frame 13

For frame 14

For frame 15

For frame 16

For frame 17

For frame 18

For frame 19

For frame 20

For frame 22

For frame 23

For frame 24

finally or frame 25

Great!!! Now test you movie.

Ctrl + Enter.

The end.

Download the source here

Read More!

How to Make a Twinkling Star Effect In Flash

-Author: Otobong

Click here to view the swf sample

This is a very straightforward tutorial. You will be making a twinkling star effect in flash, what you usually find in the night. ‘lol’

Step 1

Create a new flash document and give it the following properties.

Step 2

Rename the current layer to “background” and create a new layer ontop of the background layer. Rename the new layer to “star”.

Now click on the background layer and draw a wide rectangle.

After drawing you rectangle, select it and give it the following properties.

Width-549.0

Height-200.6

x-0

y-0

Select your rectangle and then using the colour mixers (Shift + F9)

Choose Linear as the Type and then select the left key and give it (#0066CC) select the right key and give it (#003366).

On the toolbox panel choose Gradient Transform tool (F) and then click once on your rectangle, then turn your gradient this way

Now we are done with the sky its time to move to the star, lock the background layer to avoid any break off.

Step 3

Click on the star layer.

Using the rectangle tool draw a white rectangle and then using the Selection Tool (V) hold down ctrl and transform it step by step to become a full-grown star as shown in the screenshot below.

Now select your star and convert it to a movie clip

With your star movie clip still selected. Click on the filters tab on the property bar and then select the + sign and choose Gradient bevel.

Give it the following properties.

The left fill Gradient Colour-#0066CC

Now go back to the properties of your star and give it the following properties.

Width-22.2

Height-28.1

Step 4

Time for simulation.

Click on frame 100 of the background layer and press F6 to insert a keyframe.

Go back to your star.

Double your star movie clip to go inside of it.

Select it and convert it to another movie clip.

Then click on frame 5 of the star movie clip and press f6. select frame 5 and then on the property bar Tween Choose Motion.

Then increase the size of your star like this

Now select the current layer and then on the property bar, Tween choose motion.

Now click on Scene 1 on the timeline to go back to the main stage.

Step 5

Click on frame 5 of the star layer and press f6.

Click on frame 6 of the star layer and press f6 again but this time change the position of your star to this.

X-74.5

y-18.0

Click on frame 7 and press f6. Change the position of your star again to this.

x-292.9

y-95.4

Click on frame 10 and press f6.

Click on frame 11 and press f6. Click on your star and then press Ctrl + D to duplicate it, then set

the position of the duplicate to this:

x-405.9

y-18.0

Duplicate another one and set the position to this.

x-121.6

y-79.8

Now click on frame 11 holding down the shit key select frame 5.

Right click on frame 11 and select copy frames.

Now right click on frame 12 and select paste frames. Select from frame 12 to frame. Right click on frame 18 and select Reverse Frames.

Click on frame 9 and make a duplicate of the star. Then reduce the size and position to this.

x-164.9

y-140.0

width-10.2

height-12.9

Click on frame 18 holding down shift click on frame 1 then right click on frame 18 and choose copy frames. Now Right click frame 19 and select paste frames. Right click on frame 37 and select paste frames.

Repeat the same step until you reach frame 100.

Now test your movie.

Twinkling, twinkling little star

How I wonder what you are.

Download the full .fla here

Read More!