Creating Human Face Cuts

Posted by Design Instructor | Posted in Flash | Posted on 30-12-2009

0

Here you can see a basic and easy trick for drawing human faces. There are 3 points to be followed.
133
Example:
112
Step 1:
Before drawing the human face, you must learn the trick of smoothness, you can achieve it using bezier tool and by reshaping it using reshape tool. In bezier tool you will have two drawing points.
Rectangular  and
Ellipse Type
Usually the rectangular points are provided to fix the angle and the edges. The ellipse type points are provided to make it more smooth and soft, to clear the edges.
You can look at following picture and try to make a line like below using reshape tool:
39
Step 2:
As you know, bezier tool has a rule, if you will end the mouse point (while drawing) over where you started, it will give you a solid shape, you will be able to choose a color or gradients for that. Otherwise if you will end the mouse point on any other angle, it will be simply a line.
2. Also, the human face-cuts always have 3 points. 1st, 2nd & 3rd.
1st: Defines forehead.
2nd: Defines Cheeks.
3rd Defines the angle of lips between the lips and chin.
Follow the 1st line to 2nd and similarly to 3rd like you can see it below:
426
Step 3:
Now you should draw the face using the above trick, you can see it at the following picture:
56
Step 4:
If you want to draw a human face, you will need a light color for the base and a bit dark version of that color for the outline and curves. You also can apply the above trick on any face, using this trick:
64
Usage:
If there is any mistake that you can’t handle on the face, it can be simply covered with eyes, lips and hair. Blow you can see the example of human face:
74
And enjoy the result!

Creating Human Eyelashes

Posted by Design Instructor | Posted in Flash | Posted on 29-12-2009

0

Now you can see the trick of drawing eyes & eyelashes. If you follow 3 steps the eyelashes will be completed.
eyelashes
Drawing Eyelashes
Step 1:
At first you should draw a shape using bezier tool. Its alpha must be 100%.
132
Click to enlarge
Step 2:
Now you should draw one shape like the shape on the left side of the image below, apply copy & paste method, and simply arrange them according to your required eye design just like below:
227
Click to enlarge
Step 3:
Combine the above 2 steps and arrange them together, but the 2nd step will be on the eye’s ending point, so it will have an eyelash curl. You can see it at the following picture:
326
Click to enlarge
Final:
Just to clear above steps, you should look at the following image:
45
Smoothness:
For giving the design a blended look with picture, you can copy the eyelash made above and after that paste it in the scene, under the real one. Fix its alpha “50%” and then you should move it to a bit left or right side. You can see it at the following image:
55
Real group’s: Alpha 100%
Pasted group under: Alpha 50%
The result of eyelash’s usage you can see below:
63
Enjoy the result.

Creating Human Eyebrow

Posted by Design Instructor | Posted in Flash | Posted on 28-12-2009

0

Now you have a chance to know more about the trick to draw an eyebrow of human face which is the common problem in vectors, some people use solid one shape, some use shades but even then the eyebrow does not look realistic, after making hundreds of human faces.
eyebrow
You can download source files here.
Step 1:  At first you should select the bezier tool, draw a shape just like below, its up to you what color you select:
eye_1
Step 2:
Now you should arrange the bezier shape you made above, the copy, paste method but like one shape small and another large. It will look realistic. Take a look at following picture:
eye_2
Step 3:
Now you should copy the above group of shapes, and after that you need to paste it in the scene two times, each group’s alpha value is as following:
1st group: 100% alpha
2nd group: 50% alpha
3rd group: 30% alpha
Place these 3 groups over each other but on a little distance so it will give it a blended look. You can see it below:
eye_3
Arranged Result:
eye_4
The three groups arranged in above steps are placed over each other..
Usage:
eye_5
At last suggestion:
You can place or arrange these shapes according to your desired picture, but in all groups the shapes’ color must be same, because it will be light and dark according to their alpha values.

Creating Health Indicator

Posted by Design Instructor | Posted in Flash | Posted on 27-12-2009

0

Step. 1
At first you should create you base shape for the indicator.
After that you need to name this display, now you can copy and paste this in place, to copy select the rectangle
Then you should press Ctrl+C to paste in place press Ctrl+Shift+V,
Now you need to rename the new shape mask and place underneath display
Step. 2
Now you should press Ctrl+Shift+V to paste the shape in place again, this time name it remover and now you can give it a solid white color. You can see it Fig.2
130
Fig.2
Step. 3
After that you should group the three shapes together as a sprite and name Health_Indicator
Select use bottom object as mask see Fig.3
226
Fig.3
Then you should select the remover shape from within the sprite, and after that you can add a move action to the timeline for this shape.
Now you can drag the move shape out to cover 200 frames, and place a stop action on frame 1, see Fig.4
325
Fig.4
Hint
If you want to get a move action you should double click on the first frame
After that you should wait until the blue box appears in the frame then click and drag it to the right.
Step. 4
Highlight the remove shape until you get red anchor points displaying, see Fig.5
425
Fig.5
Now you can press the left arrow key to move the remover shape until it is covering the shape beneath see Fig.6
523
Also you can add a border to the indicator bar, you should close the sprite up, select scene_1 choose the rectangle tool
Then you need to select the line and set color to none. Now you should drag out the rectangle around the indicator see Fig.7

615
Fig.7
Health indicator is finished! You can see the result.
Step. 8
Now you should create a button to test the function of the bar. You can name it Test
After that you should give it the following code
on (release) {
health_indicator.nextFrameAndStop();
}
Now if you press Ctrl+T to test the indicator works.

Creating Flash Taking the Size of Browser

Posted by Design Instructor | Posted in Flash | Posted on 26-12-2009

0

At first you should make some preparations:
You need to create a new flash file (ActionScript 2.0) and save it as test.fla in this case.
129
Step 1:
After that you should proceed on to File > Publish Settings. Make sure the HTML type is checked.
225
Step 2:
Now you can select Dimensions > Percent and enter 100 for both Width and Height.
324
Step 3:
After that you should select Scale > No Scale
424
Step 4:
Click on Publish and you can generate 2 files, test.swf and test.html.
522
Step 5:
And at last you should open up test.html with any text editor and include supplied CSS codes within head tag. Enjoy the result!
<style type=”text/css”>
body {
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
</style>

Creating Falling Star Field

Posted by Design Instructor | Posted in Flash | Posted on 25-12-2009

0

Example:
falling-stars-tut
At first you should open swishmax and after that you may add the following code to Scene_1.
onFrame (1) {
for (k=0; k<50; k++) {
fall.duplicateSprite(”fall”+k,k);
}
}
Now you need to create 4 seperate squares 4 x 4 pixels, and then you should align them the width of the movie
After that you should group together as a sprite, name the sprite fall and place at the top of the movie outside the work area. After that you should add the following code to the sprite.
onLoad () {
movieWidth = 200;
movieHeight = 250;
i = 1+Math.random()*7;
this._x = Math.random()*movieWidth;
this._y = -5;
}
onEnterFrame() {
this._y += i;
if (this._y>=movieHeight) {
this._y = -5;
}
if ((this._x>=movieWidth) || (this._x<=0)) {
this._y = -5;
}
}
Now you can press Ctrl+T to test your movie in player and enjoy the result!

Create Human Lips

Posted by Design Instructor | Posted in Flash | Posted on 24-12-2009

0

Here you can see contains the tips and the swi file of vector human lips.Yyou can make realistic and easy vector lips.
Design:
111
Step 1:
At first you should select the bezier tool, and start drawing lips in the area you need, firstly you should start from upper lip, then complete its edges then move to lower lip. The upper lip’s and lower lip’s edges should be equal to each other. You can see it at the following picture:
26
Step 2:
You should look at the following picture and move your mouse point from 1st to 2nd point with covering full area and similarly 3rd to 4rth point:
38
Step 3:
Now you should select any light color for the lip-gloss and a dark color for the lip-liner. After that you should draw little lines/shapes and fix them in a sequence as you can see below:
423
Click to enlarge
Base Colour’s = Alpha Value 100%
Lip-Gloss Colour’s = Alpha Value 50%
Lip-Liner Colour’s = Alpha Vaue 50%
Usage:
Also you can apply the above trick on any type of face design, and you can see that this method takes less time and provides both (light and dark) impression.
54
Enjoy the result!

Cool Stunning Effect

Posted by Design Instructor | Posted in Flash | Posted on 23-12-2009

0

stunning
1. The main ellipse.
Step a. Af the beginning you should create an Ellipse, (hold down Shift-key while sizing the ellipse. The size could be =155 H=155) and after that you need to make it gradiental gradient.
Step b. Here we can change gradient colors. You should make 3 Color-slider to the gradient.
The “sliders” on both sides are totally Transparent (0%) black.
And the one in the middle is 30% transparent Green. You should make it a bit to the right.
Step c. Now, you should group the Ellipse as Sprite and after that you can name the sprite as “ellipse_1″.
Step d. Then you should move the ellipse inside the sprite so that the position of the ellipse is X= 0 and Y= -55
128
Click to enlarge
2. The Sprites.
Part 1
Step a. Go to group the “ellipse_1″.
Step b. Then you should place the sprite “ellipse_1″ so that the X= -77 and the Y = 54-
Step c. Now you should add an 100 Frames long Move-effect in the Sprite you just maked.
Step d. From the Move Settings, you need to press the “X angle” and “Rotate CW by” and after that you can add the value 360 to the Text-field.
Part 2
Step a. Again, you should go to group the sprite.
Step b. Now you should make an 150 frames long Move effect.
Step c. After that from the move settings: press “X angle” and then “Rotate CCW by” 360°
224
Click to enlarge
3. Colors
Step a. Now you need to make Four 60 frames long Move effects.
Step b. In the first Move -> Move Settings -> press “Color” -> “Fade to color” -> Make the color 100% Red.
Step c. Now you should repeat actions how you do this in previous task, but now you should set the color 100% Blue
Step d. Now you should repeat actions how you do this in previous task, but now you should set the color 100% Orange
Step f. Now you should repeat actions how you do this in previous task,  but this time set the color 0% Black
Step g. Now you should group this sprite Thing as one Sprite.
4. The place.
Step a. Now you should copy the sprite. You should do it for 4 Times So you get 5 sprites
Step b. Now as you copy, you should make them a little smaller than the previous one
Step c. Then we add some “place” effects. This creates the “wormy” look to it. You should add the “place” so that it’s every 5 frames. The picture shows it more clearly.
Step d. Now you should group all the sprites as one big sprite. then add “end” effect to the end.
323
5. Finished!

Making Custom Context Menu With Actions

Posted by Design Instructor | Posted in Flash | Posted on 22-12-2009

0

Example:
context-actions
Controls
Right click on the movie and you can select one of the options from the context menu.
Preparation.
At first you should open SwishMax and after that you need to set the stage size
Step 1. At first you should create a sprite and call it one, inside the sprite, you need to create your content.
I have just selected the text tool and wrote sprite 1 loaded, just for a visual representation.
Step. 2
Now you should follow step 1 but this time call the sprite two and add your content for the sprite again.  Once you have created you two sprites add the following script to Scene_1
onLoad () {
var rootMenu = new ContextMenu();
//code for sprite 1
rootMenu.hideBuiltInItems();
_root.menu = rootMenu;
var testFunction1 = function () {
one.gotoAndPlay(2);
};
var newItem01 = new ContextMenuItem(”Load Sprite 1″, testFunction1);
rootMenu.customItems.push(newItem01);
_root.menu = rootMenu;
//code for sprite 2
rootMenu.hideBuiltInItems();
_root.menu = rootMenu;
var testFunction2 = function () {
two.gotoAndPlay(2);
};
var newItem02 = new ContextMenuItem(”Load Sprite 2″, testFunction2);
rootMenu.customItems.push(newItem02);
_root.menu = rootMenu;
}
onFrame (1) {
stop();
}
If you want to test it working you should press Ctrl+T. And enjoy the result!

Making Button Disable/Enable

Posted by Design Instructor | Posted in Flash | Posted on 21-12-2009

0

At the example you can click on the buttons to disable and enable buttons when clicked.
button-disable

At the beginning you should open SwishMax, set you movie size for your buttons.
Step 1. At first you should select the Rectangle tool and after that you can create a button shape. Also you need to select the color of the rectangle. Now you should select the Text tool and after that type what you wish your button to say, example “HOME”. Once you have the rectangle and the text placed over the top of the rectangle, you should select both items and after that you need to group together as a sprite, then you need to group the sprite as a button. After that you need to select the button and then you may give it a separate over and down state. Now you should change the rectangle and text color in the over and down state the same color but different from the up state.
Step 2.
Now you should add the following code to the button.
on (release) {
home.enabled = false;
}
If you want to enable the button again you should add the following code to another button.
on (release) {
home.enabled = true;
}