Flash and AS Tutorial - Love smiley drawing
6. September 2008
admin
Read this tutorial and see how to create love smiley in few steps on a simple way. This tutorial is also introduction for following tutorial in which I will show how to animate that smiley. Go!
Step 1
Create a new flash document, take the Oval Tool (O), under Stroke Color choose black and from Properties Panel (Ctrl+F3) under Stroke height choose 3 px. Under Fill Color choose red , hold down Shift key, and draw a “circle”. 
Step 2
While your Oval Tool (O) is still active, under Stroke Color choose black, under Fill Color white and draw the “eyes” like it is shown on the picture below. 
Step 3
Take the Line Tool (N), and in the “eyes” , draw a “heart”. Look at the picture below! 
Step 4
Now, it time for “mouth”. While your Line Tool is still active, draw this: 
Step 5
It”s time for type. Using Line Tool, draw “Love” type. Look at the picture below! 
Step 6
Take the Paint Bucket Tool (K), and paint your type in pink. See the picture below. 
Cool Information, Uncategorized | 0 Kommentare »
Flash Tutorial - Advanced full flash site - Part 1
5. September 2008
admin
Part 1
Preloader and preloader animation
Now, it”s came the day when I have decided to show you how to make in step by step advanced full flash site. After You have done this tutorial, you will be completely prepared to make any flash site for any requirements. This full flash site, in this tutorial, consists of the following:
1. Preloader - You will see how to design and how to apply action script code on preloader.
2. Preloader Animation - You will see how to animate preloader after you have done it.
Part 2
Flash site loading
1. Flash site loading - You will see how to load flash site after preloader animation. You will also learn how to load home page and how to aniamte it.
Part 3
Menu and menu animation
1.You will learn how to design a menu and how to animate it after that. You will also learn how to apply action script code on it.
Part 4
Navigation and Page animation
1. Flash site navigation - You will see how to create site navigation using the action script code and Frame Label.
2. Page animation - You will see how to create page loading animation after you have click on any button in navigation.
Using this tutorial, you will also learn:
a) How to use flash tools for drawing (Rectangle Tool, Line Tool),
b) How to use Color Mixer Panel to make a gradient,
c) How to create shape animation,
d) How to use Free Transform Tool (Q).
f) How to use some special flash tips and tricks
g) How to use Frame Label,and more.
Below is the example:
Part 1
Preloader and preloader animation
Step 1
Cretae a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 450 pixels and the height to 400 pixels. Select #EBFBDD as background color. Set your Flash movie”s frame rate to 24 and click ok. 
Step 2
Double click on layer 1 to rename its name in background. After that, create a new layer above the background layer and name it preloader.
Step 3
Lock backgroud layer, select the preloader layer and the the Rectangle Tool (R). Then, go to the Properties Panel (Ctrl+F3) below the stage and choose the following options:
1. Enter #BAF088 for the stroke color
2. Enter white for the fill color.
3. Select Solid as the type of outline, with the line thickness set to 2.
4. Turn on the Stroke hinting option to get rid of any blurry edges while drawing. 
Then, draw a rectangle about 128×8 pixels. See the picture below. 
Step 4
While the rectangle is still selected, go to the Align Panel (Ctrl+K) and set the following options:
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 just aligned the rectangle with the background.
Step 5
While the recatngle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Movie Clip Symbol. 
Step 6
Double-click on the movie clip on stage with the Selection tool (V). You should now be inside the movie clip. 
Step 7
Click on frame 100 and press F5 key. After that, create a new layer above the layer 1 and name it line.
Step 8
Go back on layer 1, take the Selection Tool (V) and select only the fill color of rectangle. See the picture below. 
Step 9
While the Fill color (Line) that you just cuted and pasted in layer line, is still selected, press Ctrl+C key (Copy). Then, create a new layer above the line layer and name it mask. Select it and press Ctrl+Shift+V key (Paste in Place).
Step 10
Click on frame 100 of layer mask and press F6 key. After that, go back on the first frame and place the line (Fill Color) on the position like it is shown on the picture below, using the Selection Tool or by arrows key. 
Step 11
Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears. 
Step 12
Select mask layer and convert it to a mask by right-clicking on the mask layer and selecting Mask. 
Step 13
Create a new layer above the mask layer and name it percent.
Step 14
Select perecent layer and Take the Text tool (T).Then, in the Properties Panel (Ctrl+F3) below the stage, select the following options:
a) Select a Dynamic Text field.
b) Select a Trebuchet MS font.
c) Choose 12as font size.
d) Select #38680D as color.
e) As the rendering option, select Anti - alias for readability.
f) For Var: type “perc1″
Then, type somewhere above the rectangle 99%. See the picture below. 
Step 15
Create a new layer above the percent layer and name it text. After that, take the Text Tool (T) and go to the Properties Panel below the stage. Then, set the following options:
1. Select a Static Text field.
2. Select a Trebuchet MS font and bold it.
3. Choose 9 as font size.
4. Select #38680D as color.
5. As the rendering option, select Anti - alias for readability. 
Type somewhere below the rectangle “Loading…”. See the picture below. 
Step 16
Go back on the main scene (Scene 1). Take the Selection Tool (V), click once on the “preloader” to select it and open the Action Script Panel (F9). Then, enter the following Action Script code:
onClipEvent (load) {
total = _root.getBytesTotal();
} onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
perc1 = “”+percent+”%”;
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}
with preloader and it is time for preloader animation. Let”s go!
Cool Information, Uncategorized | 0 Kommentare »