tutZ plaZa

How to MASK in Flash

2010-05-19T18:59:00.000-07:00

NOTE: you must have installed latest version of flash player to view the flash animation.

STEP 1:
Open Flash CS4 or Macromedia Flash MX (the Older version)
File -> New -> Flash Document.
you will see somethin like this.

Go to Property Window and chage the Width and Height of Work area
(Accordingly as required).

STEP 2:
File -> Import -> Import to Stage -> Browse your First Image.

STEP 3:
Now insert new layer just by pressing this icon in the timeline window.
Layer2 is created
Now import the another image
File -> Import -> Import to Stage -> Browse your second Image.

yes, second image is the grayscale of first image.

STEP 4:
Now add a new layer, Layer3 by pressing .
Choose Rectangle Tool(R)
Draw vertical rectangle
width = 50px
height = 300px.

STEP 5:
Now go to frame 35,40,75,80 of Layer3 and press F6 (Inserting Keyframe)
Go to frame 80 of Layer 1 and Layer2 and press F5 (Inserting Frame)

STEP 6:
Now go to frame 35 of Layer3, move the Rectangle to the right end of the image.

STEP 7:
Now select any frame between 2-34
select Shape tween from dropdown list.

you will see something like this.

STEP 8:
Now select frame 40
Again move the rectangle to the right end of the image.
Now select any frame between 41-74
select Shape tween from dropdown list.

STEP 9:
NOw comes the MASKING part.
Right click on Layer3 -> select MASK.

thats it.. yoy're done!!
now save your work.
Go to file -> Export -> Export to Movie -> ok.

You also can use multiple mask layers.

STEP 10:
Just add 1 more layer, Layer4.
{Do the same for adding Keyframes and Shape Tween as done earlier}
Select Rectangle Tool (R)
make Horizontal rectangle.

STEP 11:
Now Copy Layer 2.
Add New Layer, Layer5
Paste.
Ensure that Layer5 comes below Layer4.
Now Right Click on Layer4
Select MASK.

you're Done.

Flash Fade-in Fade-out Slideshow

2010-05-16T18:50:00.000-07:00

NOTE: you must have installed latest version of flash player to view the flash animation.

STEP 1:
Open Flash CS4 or Macromedia Flash MX (the Older version)
File -> New -> Flash Document.
you will see somethin like this.

Go to Property Window and chage the Width and Height according to your need.

STEP 2:
File -> Import -> Import to Stage -> Select your First Image.

STEP 3:
Right Click on Image -> Convert to Symbol
OR
press F8.
Set Name = Pic1
Behavior = Movie Clip

STEP 4:
Right Click on Frame 10 -> Insert Keyframe.
OR
Select Frame 10 and Press F6.

STEP 5:
Right Click in-between Frame 1-10 -> Create Motion Tween.

STEP 6:
Goto Frame 1 -> Click on Image -> select Alpha in Color Tab
Set Alpha Value = 0%.

You have just created a Fade In Effect.
Press [CTRL + Enter] to see the Effect.

STEP 7:
Select Frame 15 press F6.
Again, Select Frame 25 press F6.
Right Click between 15-25 frame -> Create Motion Tween.

STEP 8:
Select Frame 25 -> Click on Image -> select Alpha on Color Tab.
Set Alpha = 0%.

You have just created Fade Out Effect.
In all you have created a Fade-in Fade-out Effect.
to see the Effect Press [CTRL + Enter].

STEP 9:
Now we insert our 2nd Image.
Click on New Layer Image as shown in Image below.

STEP 10:
Selct Frame 26 on layer 2 -> press F6
Selct Frame 36 on layer 2 -> press F6
Selct Frame 26 -> File -> import -> import to Stage -> Browse Image 2.

STEP 11:
Now Click on Image2 -> Press F8.
Set Name = Pic2
Behaviour = Movie Clip.

STEP 12:
Right Click between Frame 26-36 -> Create Motion Tween.
Select Frame 26 -> click On Image2 -> Select Alpha on Color Tab
Set Alpha = 0%.

STEP 13:
Select Frame 41 -> Press F6
Select Frame 51 -> Press F6
Right Click between Frame 41-51 -> Create Motion Tween.
Select Frame 51 -> Click on Image2 -> Select Alpha on Color Tab.
set Alpha = 0%.

STEP 14:
Similearly repeat the above steps for as many images you would like to.
and you end up with the Fade-in Fade-out Slide Show, as shown below

To see your work before saving just Press [CTRL + Enter].
To get the SWF file
GO TO file -> Export -> Export Image/Movie -> ok.

15+ Best Photo Editing Websites, totally Free.

2010-05-04T05:07:00.000-07:00

If you are bored of looking at your same old pics, make them funny, interactive and much more. Check Out the following collection of best Photo Editing Websites.

1. Pixlr

2. Pizap

3. Be Funky

4. Dumpr

5. Picnik

6. Splashup

7. Mag My Pic

8. Funny Photo

9. Face in Hole

10. Hair Mixer

11. Pixisnap

12. Pixenate

13. Photo visi

14. Blingee

15. Personalize

16. Dr. pic

How to Embed Flash to your Blogger/Wordpress or Website

2010-05-02T05:08:00.000-07:00

I was tired of searching how to Embed Flash into Blogger, since the Google page creator has shutdown their service. I just got to know the alternative so sharing it with you all.

STEP 1:
You mush have a Flash File with .SWF format.
If you don't have one, then can create using Adobe Flash CS4 Professional.

STEP 2:
Now you have to upload your Flash.
As Google page creator has been shut down so Google Sites is the new Option.
Create an address over there with your gmail account.

STEP 3:
While you are at your Site at http://sites.google.com/site/YourSiteName
you find a "Files" option on Left Sidebar as shown in image.
Click on that.

STEP 4:
Now you see "Add Files" tab.
Click on that -> browse the .SWF file -> Upload it.

STEP 5:
Now Click on View to get the URL address.
or
Right Click on "View" -> Copy URL address/Copy Link address.

STEP 6:
Your URL address looks something like this.
http://sites.google.com/site/deepakdhim88/file-cabinet/pic1.swf?attredirects=0
Remove the "?attredirects=0" or anything after .SWF
So your Link address looks Something like this
http://sites.google.com/site/deepakdhim88/file-cabinet/pic1.swf

.SWF at the end.

Save this Link Address.

STEP 7:
Now Copy the following code.

STEP 8:
Paste the above coding in your HTML.
Change "yourSWFfileAddress" with your saved Link Address.
Set Width and Height according to your need.

STEP 9:
Thats it. You just done with Embedding flash into your Blogger/Website.

How to Zoom-in and Zoom-out in Flash

2010-05-02T04:32:00.000-07:00

Note:
1.You must have installed Macromedia or Adobe Flash.
2.Flash ActiveX and Flash Player.

STEP 1:
Open Flash MX
File -> New -> Flash Document.
Set the Size of the image from Property Window.

STER 2:
Select First Frame in Timeline Window.
Now Insert your Image.
File -> Import -> Import to Stage or Press (CTRL + R).

STEP 3:
Now Convert Image to a Symbol.
Click on Image.
Modify -> Convert to Symbol(or Press F8) -> Give Name = Pic1
Set Behaviour to Graphic -> ok.

STEP 4:
Now goto 20th Frame in the timeline -> Right Click -> Insert Keyframe.

STEP 5:
Now make sure 20th frame is selected.
Click on the image.
Go to the Property window,
set Width = 1000 px
and Height = 600 px
Right Click in between 1-20th frame -> Create Motion Tween.

Press Enter to see Zoom-in Effect.

STEP 6:
Now Right Click on Frame 30 -> Insert Keyframe.
Again Right Click on 50th Frame -> Insert Keyframe.
Right Click in between Frame 30-50 -> create Motion Tween.
Click on 50th frame -> set image Width = 500 px, height = 300 px.
right click on 60th frame -> Insert Keyframe.

Thats it, Now save your work.
File -> Export -> Export Movie -> ok.

How to Make Animated Logo for your Website

2010-04-08T11:19:00.000-07:00

STEP 1:
Create a new file. Go to Menu Bar.
File -> New -> Set image size(425 X 150 px) -> Transparent Background.

You will see something like this.

STEP 2:
Set Foreground color to Black or Just Press "D".
Select PAINT BUCKET -> click on the layer.
It will become something as shown below.

STEP 3:
Select TYPE TOOL -> Change color to WHITE -> Add your Text
(like "DROOL HERE").
Set Properties as:

Text Size 48 -> Select OO and change Size to 72.

Select "HERE" text and change color to Blue by just clicking the color option below Menu Bar.

STEP 4:
Select Text Layer -> Copy layer (CTRL + J) -> Right Click on Copied Layer -> Resterize.

STEP 5:
Select BRUSH TOOL -> Fill the "OO" from middle with WHITE color.
Again Copy the Layer (CTRL + J) -> Transform it (CTRL + T) -> Right Click -> Flip Vertical.
Now Drag this Layer to the bottom of another layer. Just as shown in Image below.

STEP 6:
Now Select SELECTION TOOL Select bottom half of the current layer.

Right Click -> feather -> put value = 10
Now cut the Selection (CTRL + X)
Set opticity to 50%

You will see something like this.

STEP 7:
Now add New Layer (CTRL + SHIFT + N)
Name the layer "eyes".

Select ELLIPS TOOL -> Draw Small Ellips in between "OO" with BLACK color.
Select BRUSH TOOL -> Add WHITE shine between the EYES.

STEP 8:
Now Copy(CTRL + J) "eyes" layer -> Transform it from top to bottom.
Name the layer as "close".

Again Copy(CTRL + J) "eyes" layer -> Slightly drag the layer to the left.
Name the layer "L1"

STEP 9:
Now Copy(CTRL + J) "L1" layer -> Drag the layer more towards left -> Name it "L2"
Repeat this step 3-4 times.

STEP 10:
Just like dragging layers to left side do the same and drag layer to the right side.
Name the layers as R1,R2, ... ,R5.

STEP 11:
Now go to WINDOWS(in Menu Bar) -> Animation.
You will see an Animation window as depicted in the image below.

STEP 12:
In frame1 -> Make "close" layer Visible -> Make the rest Layers Invisible -> Set time to 0.2Sec
In frame2 -> Make "eyes" layer Visible -> Make the rest Layers Invisible -> Set time to 0.5Sec
In frame3 -> Make "Close" layer Visible -> Make the rest Layers Invisible -> Set time to 0.2Sec
In frame4 -> Make "eyes" layer Visible -> Make the rest Layers Invisible -> Set time to 0.5Sec
In frame5 -> Make "L1" layer Visible -> Make the rest Layers Invisible -> Set time to NO DELAY
In frame6 -> Make "L2" layer Visible -> Make the rest Layers Invisible -> Set time to NO DELAY
In frame7 -> Make "L3" layer Visible -> Make the rest Layers Invisible -> Set time to NO DELAY
In frame8 -> Make "L4" layer Visible -> Make the rest Layers Invisible -> Set time to NO DELAY
In frame9 -> Make "L5" layer Visible -> Make the rest Layers Invisible -> Set time to 0.5sec
In frame10 -> Make "L4" layer Visible -> Make the rest Layers Invisible -> Set time to NO DELAY
In frame11 -> Make "L3" layer Visible -> Make the rest Layers Invisible -> Set time to NO DELAY
In frame12 -> Make "L2" layer Visible -> Make the rest Layers Invisible -> Set time to NO DELAY
In frame13 -> Make "L1" layer Visible -> Make the rest Layers Invisible -> Set time to NO DELAY
In frame14 -> Make "eyes" layer Visible -> Make the rest Layers Invisible -> Set time to 0.5sec
In frame15 -> Make "close" layer Visible -> Make the rest Layers Invisible -> Set time to 0.2sec
In frame16 -> Make "eyes" layer Visible -> Make the rest Layers Invisible -> Set time to 0.5sec
In frame17 -> Make "R1" layer Visible -> Make the rest Layers Invisible -> Set time to NO DELAY
In frame18 -> Make "R2" layer Visible-> Make the rest Layers Invisible -> Set time to NO DELAY
In frame19 -> Make "R3" layer Visible -> Make the rest Layers Invisible -> Set time to NO DELAY
In frame20 -> Make "R4" layer Visible -> Make the rest Layers Invisible -> Set time to NO DELAY
In frame21 -> Make "R5" layer Visible -> Make the rest Layers Invisible -> Set time to 0.5sec
In frame22 -> Make "R4" layer Visible -> Make the rest Layers Invisible -> Set time to NO DELAY
In frame23 -> Make "R3" layer Visible -> Make the rest Layers Invisible -> Set time to NO DELAY
In frame24 -> Make "R2" layer Visible -> Make the rest Layers Invisible -> Set time to NO DELAY
In frame25 -> Make "R1" layer Visible -> Make the rest Layers Invisible -> Set time to NO DELAY
In frame25 -> Make "R1" layer Visible -> Make the rest Layers Invisible -> Set time to NO DELAY
In frame26 -> Make "eyes" layer Visible -> Make the rest Layers Invisible -> Set time to 0.5sec

Thats it.Now it is the time to save your image.
Go to File -> Save for Web and Devices... -> Save.

Zoom(in)-Diffuse Animation in Photoshop

2010-04-01T12:26:00.000-07:00

STEP 1:
Open photoshop, go to FILE in menu bar and select NEW. I'm using 320 X 240 px size image. You can select size according to your need.

STEP 2:
Now Select the PAINT BUCKET TOOL from toolbox and give background color. I choose #3840dc (blueish) color.

Step 3:
Now i'll give background a little gradient effect using blending options. Right click on the layer and select BLENDING OPTION or you can double click on the layer. Now tick GRADIENT OVERLAY, Set opticity to 40%, set STYLE to RADIAL and tick REVERSE. Now you'll see something like image below.

STEP 4:
NOw time to add some text inside your layer. Select TYPE tool from toolbox (the "T" icon) and click anywhere on the blue area and add your text. you can set any color or size. I am using text "SALE SALE SALE", Size = 24, and font is "Blackoak Std".

STEP 5:
Now add some blending options to the text. Select text layer and double click. Now set properties of the text as shown in the image below. Tick GRADIENT OVERLAY select the gradient style.Now tick BEVEL AND EMBOSS and change size to 2. You will see the something like top-right of the image below.

STEP 6:
Here comes the interesting section of the tutorial. The ANIMATION part.
Go to WINDOWS in menu bar and select ANIMATION. If it is not coming by default then click on "SHOW ALL MENU ITEMS" in the same and then select ANIMATION.

STEP 7:
Now you see an animation Window below your workspace. If you see the Timeline Animation then convert it into the Frame Animation by just clicking the small icon on the bottom-right corner of the animation window.

STEP 8:
Now we do frame-by-frame editing i.e. we will make different image for different frame. Select TEXT LAYER and copy it (CTRL + J). Resize it to little smaller than before. You can resize by transforming the image just by clicking CTRL + T. Now Repeat same steps till the image becomes very samller.

STEP 9:
you must see a image like above. For ease give name to the each text layer from 1 to so on as shown in image below. Now come to frame 1 make visible only image name 1 and rest invisile just by clicking on the EYE icon in each layer. Do same for each frame.

STEP 10:
For Diffuse effect Select last frame in animation wondow and click on "TWEENS ANIMATION FRAME" and press ok.

STEP 11:
Now select all frames in animation window -> right click -> set time to "NO DELAY".

THATS IT !!

Now go to FILE -> SAVE FOR WEB AND DEVICES -> OK

Your image will be saved and you can see the final result as below.