Home | Help Forums | Web Design Tutorials | Free Swishmax Downloads | All Downloads

 

 

Company

Home

Nework Details

Tutorials

SWiSH 2

SWiSHMax

Flash MX

PHP & MySQL

HTML / JScript

Adobe Photoshop

Corel Draw

Gimp

Miscellaneous

Downloads

Templates

Plugins

Fonts

Wallpapers

Free Images

Scripts and Codes

Products

E-Books

SWiSH BB

SWiSH Templates

SWiSH-DB Newsletter
Subscribe to our newsletter : GO
  Partners / Affiliates

   Swish Templates
   SWiSH Climax
   GimpTalk
   Idea Designs
   Sposatoettore
   Try Acai Berry Diet
   Download Free Ringtones
   Swishzone

Manage your site with Flax Article Content Management System
Fire effect - Image Mask, Masking
Category : SWiSHMax | Level : Beginner | Language : English
Ask Question | Read Comments | Post tutorial | Previous | Next

Web www.swish-db.com

Cheers to all!

I don’t know if there is a tutorial on this one (though I tried searching – don’t know if I did search enough :huh: ).

This tutorial is on how to give a Fire image “life.” A very simple masking tutorial.

First, open your Fire image (I named it fire image.jpg) in Photoshop. I’ve used PS7 for this. The object of this part is to make a copy of the fire.

[1] Use Lasso Tool to select the boundaries of the fire.

[2] When done, press Ctrl+C to copy the bounded fire image. Ctrl+N to open a new window, make the background transparent. Then, Ctrl+V to paste the image in the new window.

user posted image

[3] Save as PNG (I saved it as fire.png)

Now, we go to Swishmax :D
[1] Insert the fire image.jpg and over that, insert fire.png and try to estimate the original position so that it will look like one image.

user posted image

[2] Using the Ellipse tool, create vertical, overlapping oblongs. Group them into shape. A window pops-out asking: “Make the overlapped regions of objects with the same fill style empty?”, click on Yes and the result is shown below:

user posted image

Repeat [2] until you get a “curtain” of overlapped oblongs (Grouped as a single shape), as shown in second, smaller window, as shown in the above image.

[3] Place the curtain a little below 3/4's of the movie. Place a Move effect on the curtain. Now click the last frame of the move effect and click on the curtain. Press “up” directional key so the curtain will move up without changing the horizontal position (well, it doesn’t matter really. Not a big issue if it does change ;) ).

The Move effect does not need to be long in duration. Let’s say 10 frames would be enough for 30fps. I think it depends on the quality and size of the image.

[4] Move the curtain object BELOW the fire.png in the outline window. Group the Shape (curtain of oblongs) and fire.png into a Sprite. Make sure there is a check on “Use bottom object as mask.”

user posted image

There you have it. The fire is alive! :D

PREVIEW

Hope this is useful.

Though I kind of minimized the image and everything because the preview’s swi is 540kb (because of the image inside), so the attached SWI is 174kb (zipped to 133kb). Sorry, didn't have time to optimize images :lol:

:: Cheers! ::


Fred


All rights reserved - swish-db.com