Using this tutorial, you have a chance to learn how to make 3D title in flash using some special flash tips and tricks.You can use this tutorial when you have to create some 3D logo, text in flash. You don't have to use action script code to make this tutorial. You will also learn:
1. How to use Free Transform Tool to make a 3D effect
2. How to apply a drop shadow effect to the title and much more!
Example:
Step 1
Open a new flash document.
Step 2
Take the Text Tool (A) and type something. You can alos if you like draw some object,logo, on which you want to apply this 3D effect. For this example, I have drawn this:
Step 3
If you have typed some text, press twice time Ctrl+B key on the keyboard (Break apart) to break apart that text. Now, you have to get this:
Step 4
While the text, object, logo... is still selected, take the Free Transform Tool (Q) and select Distort icon. See the picture below.
Then, Hold down Shift on your keyboard, click and start dragging your mouse to the right. See the picture below and everything will be clear.
Now, you have this:
Step 5
While the text, logo, object... is still selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.
Step 6
Take the Selection Tool (V) and click once on the text, object, logo... (new made Movie Clip) to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage and click on Filters tab. Then, click on the plus icon and select Drop Shadow filter. After that, make the adjustements as follows:
Blur XY: 6
Strenght: 80
Quality:High
Color: black
Now, you have this:
Step 7
Take again the Selection Tool (V) and select again the text, logo, object, and go again to the Properties Panel.Then, click again click on Filters tab, click on the plus icon and select Glow filter. After that, make the adjustements as follows:
Blur XY: 8
Strenght: 100
Quality:low
Color: #252525
Now, you have this:
We're done!
Bye!
Saturday, January 5, 2008
3D Title in Flash
Posted by
bokismoki
at
1/05/2008 04:14:00 PM
4
comments
Labels: Tutorials
Modeling a Minaret in Swift3D
This tutorial will teach how to model a minaret, which is one of the most distinctive features of Islamic architecture and an important element in the structure of a mosque. Fans of of Prince of Persia shall instantly recognise its shape.
This is a beginner tutorial, you will not be required to have extensive knowledge on how to use Swift3D to be able to follow this tutorial.
Quick UI highlight
Here is a screenshot of the user interface with the main parts of it highlighted for beginner users. If I mention a certain toolbar, you can look it up in this image if you do not know where it is.
Modeling the dome of the Minaret
We are going to use the Lathe Editor to model our minaret, click on the Lathe Editor tab on the Main Toolbar.
We are going to draw a path in the Lathe Editor to create the dome of our minaret. You will need to click on the Add Point Tool to start drawing.
The Lathe Editor will create the 3D dome when we supply a path that illustrates half the dome only. Draw a shape similar to the one below by making left-button clicks in the appropriate places.
I am sure that you noticed that the line we drew is not smooth at all. We are going to fix that now. I recommend that you zoom in at this stage using the Magnifying Glass icon located on the Main Toolbar, select that tool and then click on the scene. We'll now go back to our job, select the Shape Tool and then select the second point from the top of our path.
We will make this point part of a curve to make the path smoother, click on the Curve Point button in the Main Toolbar. This should make two more anchor points appear.
While the Shape Tool is still selected, click on one of the anchor points and drag it, you will notice that the path changes its shape. Try moving the anchor point around to get a smooth line that goes along the shape of the minaret. Do the same thing to the other points in our path.
Once you are satisfied with the smoothness of your path, you can click on the Scene Editor tab to view the 3D dome of your minaret.
Our dome is a little bit too big, we are going to scale it down. To do this, you will have to select the dome, and then click on the Scale Mode button located on the Main Toolbar.
When scaling objects in Swift3D it is good to hold the object from its boundaries. As you move the cursor towards the center of the object the object's size decreases and as you move the cursor further from the center of the object the size increases. Scale the dome down to the half its original size.
We will now move the dome to the upper part of the Front Viewport. To do this, you will have to click on the dome, and then when the axis sign appears, hold Shift on your keyboard to lock-on a single axis and then use the y-axis to move it upwards.
That should give us some space in the viewport to work on the shaft of our minaret. You should have the following in your viewports now.
The second part will be added tomorrow !!!!
Posted by
bokismoki
at
1/05/2008 04:07:00 PM
0
comments
Labels: Tutorials
Tears
This tutorial will teach you how to create a tear using Color Mixer Panel. This tutorial is also introduction for following tutorial, in which I will show you how to create a Human cry animation. Let's go!
Step 1
Create a new flash document, press Ctrl+J (Document Properties) and set Width to 200 and Height to 150px.
Step 2
Double click on Layer1 to rename its name into a background.
Step 3
Insert a new layer and name it tears.
Step 4
Take the Oval Tool (O), Stroke Color must be switched off, under Fill Color choose any Color, hold down Shift key and draw a "Circle". Look at the picture below.
Step 5
While your "Circle" is still selected, open the Color Mixer Panel (Shift+F9), and set the options from the picture below.
Step 6
Take the Gradient Transform Tool (F), and set your gradient in the "Circle" like it is shown on the picture below.
We're done!
Have a nice day!
Posted by
bokismoki
at
1/05/2008 04:06:00 PM
0
comments
Labels: Tutorials
Tuesday, December 11, 2007
Flash Text Rollovers
f you have used Fireworks before you must be knowing what are text link rollovers. You can create these rollovers even in Dreamweaver! Follow these steps.
Step 1 : Place the cursor where you want the rollover text to be positioned. Click on Insert>Media>Flash Text. The following window will be displayed.
Step 2 : Select a font and size. Click on color option and select a color for the text and next select a rollover color. Type your text in the text box. If your text has a link browse the page. Select a target. If you wish you can give a background color for your text. Lastly save it with an extension .swf and click OK.
Step 3: To preview the flash text select the image, you will see a play button in the properties window. Click on the play button and move your mouse over the text to view the rollover effect after which you can click on stop to end the preview.
Step 4 : Below is my result. Move your mouse over the text for the rollover effect. You can also edit the font type, color and size by clicking on the edit button.
Posted by
bokismoki
at
12/11/2007 11:50:00 AM
0
comments
Labels: Tutorials
Basic Flash Password Protection Parts 9,10
Part 9
Now we’ll need to write the actual script that compares the value of the input, but first we’ll need something to attach it to. Create a button near to your password input field; you can add the text “Submit” to let the user know that it’s clickable, or hide it by making it the same color as your background or turning it into an invisible hotspot button.Right-click on the button and open the Actions panel.
Part 10
on (release, keyPress “
if (password eq “aikotoba”) {
gotoAndPlay(2) ;
password = “”;
} else {
gotoAndPlay (3) ;
password = “”;
}
}
That looks like a lot, but it’s not. It’s an function that tells Flash to use an if statement when the mouse clicks the Enter key is pressed.
The if statement checks to see what the characters entered for “password” are, and compares them to a value set by you: the actual correct password, inside the quotes. If the two are the same, then Flash will go to the “access granted” frame/scene (frame two, for me).
Posted by
bokismoki
at
12/11/2007 11:31:00 AM
0
comments
Labels: Tutorials
Basic Flash Password Protection Parts 7,8
Part 7
On your timeline, right-click on the frame containing your password entry screen, and select Actions to open the Actions pane.Part 8
Switch to Expert Mode so that you can type freely, and then below your stop, enter password = “”; (with the name of your variable in your input field substituted out for “password”).This makes sure that when the movie loads at frame one, the value of password is set to nothing, and thus isn’t retaining anything from past attempts.
Posted by
bokismoki
at
12/11/2007 11:30:00 AM
0
comments
Labels: Tutorials
Basic Flash Password Protection parts 5,6
Part 5
Now, if you’re working on a real application/movie/game/website/etc., then you’ll have another scene that contains all of your actual content, and you’d normally direct the user there if they’re successful in entering the password. In this case, however, I’ve created just a simple (if snarky) “correct” screen on another keyframe, just displaying a message to tell the user that they’ve entered the correct password.Part 6
Because each frame is a static screen and it should remain visible until the user takes some direct action, make sure to insert a stop on each of your keyframes.
Posted by
bokismoki
at
12/11/2007 11:29:00 AM
0
comments
Labels: Tutorials
Basic Flash Password Protection part 3,4
Part 3
Once you have the password input screen, you’ll need another screen to display if they enter the incorrect password. On a separate frame from your password input screen, copy all of your graphics, etc. and then add text telling the user (in whatever words you choose, but let’s try to behave here) that they’ve entered the wrong password. Then create a “Try Again” button; this can be a graphic or text, whatever you choose.Part 4
Right-click the Try Again button, select Actions, and then assign the following script to the button:on (release, keyPress “
gotoAndStop(1) ;
password = “”; }
What this does is tell Flash that when the user clicks on the Try Again button or presses the Enter key, the movie should go back to frame one (the password input screen) and stop. It should also reset the value of “password” to nothing, so that it doesn’t auto-populate mistakenly with the incorrect password (or the correct one).
Posted by
bokismoki
at
12/11/2007 11:28:00 AM
0
comments
Labels: Tutorials
Basic Flash Password Protection
Here in this tutorial I show you how to protect you password in flash. My final impression was amazing. I really liked this thing.
Part 1
In order to use password protection, you’ll need first a scene, then an input field. Once you’ve set your scene, then draw a new text field with the Text Tool. Set the type to Input Text, using the dropdown in the Properties pane.An Input Text field isn’t like a normal text field; instead of displaying text we specify as part of the movie, it exists so that the user can enter text. In this case, they’re going to enter password text so that our Flash movie can check to see if it’s the correct value.
Part 2
With the Input Text field selected, select Password from the display type dropdown (usual options are Single Line, Multiline, and Multiline no wrap). This is an added security option that causes all characters entered to be displayed as asterisks (*) instead of as alpha characters.Click the icon to display the bounding box (the little box with horizontal lines), and then in the Var field, type the name of a variable by which you’ll reference the value of your password.
Don’t confuse this with an instance name; the instance name would be referring to the actual text box itself, but the variable is used to refer to the text entered into the input field. So if I typed “purple monkeys” into the input field, then password=”purple monkeys”.
This tutorial is in 10 parts. I'll post new two part tomorrow, and it will be going like that until the end of the tutorial. I hope you will be satisfied with thi tutorial.
See yaaa :)
Posted by
bokismoki
at
12/11/2007 11:21:00 AM
0
comments
Labels: Tutorials
Wednesday, December 5, 2007
LifeBook Presentation
Read this tutorial and learn how to make Lifebook presentation in flash 8 with no Action Script. You can use this animation for any business presentation, any flash site.... You will also learn how to create fade in fade out effect and more....
Step 1
First off all, create a new Flash document, set its width to 450 and height 450. The fps should be >28 for this time. Also, set the background color to white. See the picture below.
Step 2
Download my picture.
Step 3
Go back in flash, choose File > Import > Import to Stage (shortcut key: Ctrl+R) and import that picture into the Flash.
Step 4
While the picture is still selected, go to the Align Panel (shortcut key:Ctrl+K) and do the following in the Align panel:
1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.
Now, you have aligned the picture with the background.Doble click on layer 1 to rename its name in Lifebook.
Step 5
Take the Selection Tool (V), click once on the picture to select it and press once Ctrl+B key (Break Apart) to break apart it.
Step 6
Now, we will use some flash tricks to remove the existing picture from the LifeBook. So, lock the Lifebook layer and create a new layer above the LifeBook layer (layer 2).
Step 7
Using the Rectangle Tool (R) and Selection Tool (V), draw a shape over the picture in Lifebook. See the picture below.
Step 8
Select the shape that you just created and press Ctrl+X key (Cut). Then, unlock Lifebook layer, select it and press Ctrl+Shift+V key (Paste in Place). While the "shape" that we have created in layer 2 is still selected, press Delete key on the keyboard to delete it. Now you have the blank area on the place where the picture of Lifebook was.
Step 9
Find somewhere a few picture (any picture - nature, peopel....) that will be represent our presentation. After that, Import all that picture into the flash Library (File > Import > Import to Library).
Step 10
Lock again layer LifeBook, Select layer 2 and using the "drag and drop" technique, move the first picture from the Library on the stage. See the picture below.
While the picture is still selected, press once Ctrl+B key (Break apart) to break apart it.
Step 11
Using the Selection Tool (V) and Free Transform Tool (Q), place the picture on the blank area position on the Lifebook (in an equivalent way like we have created the shape in step 6). See the picture below.
Step 12
While the picture is still selected, press F8 key (Convert to Symbol ) to convert this picture into a Movie Clip Symbol. See the picture below.
Step 13
Click on frame 15, 40 and 55 of layer 2 and press F6 key.
Step 14
Go back on frame 1, take the Selection Tool (V), click once on the new made Movie Clip (picture) to select it and go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.
Repeat this step, but for this time, do that for frame 55.
Step 15
Right-click anywhere on the gray area between frame 1 and 15 and frame 40 and 55 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below.
Step 16
Double click on layer 2 to rename its name in picture1.
Step 17
Click on frame 150 of Lifebook layer and press F5 key. After that, create a new layer above picture1 layer and name it picture2.
Step 18
Click on frame 50 and press F6 key. Then, using the "drag and drop" technique, move the second picture from the Library on the stage.Now, in an equivalent way like we have created, converted to Movie Clip....make this and every other picture.
Good luck!
Posted by
bokismoki
at
12/05/2007 02:27:00 PM
0
comments
Labels: Tutorials