Flash Introduction/Effect

[JSeverson]

Hi,
I'm pretty much a novice at Flash but I came across a Flash introduction that I liked and I was hoping that someone could tell me how I could accomplish a similar effect.

The introduction can be found at http://www.charliepalmer.com/.

Basically, and it may better to actually view the introduction rather then reading my explanation, it starts out as a bunch of blurred streaks and an opague box passes over it to reveal the image. Another opague box passes over the image and blurs it again but the blurred streaks then morph to the colors of a new image which then has an opague box pass over it to reveal the new image, etc.

Any guidance would be appreciated.

[poab]

Hi,

It's a nice effect, but happily it's not too complicated. First off flash doesn't have the same kind of image editing capabilities that graphics packages do, so you're going to need one of those.

If you take a photograph, that you want to use open it in photoshop (or whatever). Save it as a .jpg. Then apply your blur, in photoshop use guasian blur (I don't know what it woul dbe in other bitmap editors, but illustrator can also do it). Save that as a .jpg too.

Open flash and import both .jpgs to your library (file > import to library). Place them on the stage, in exactly the same position, on seperate layers, with the blurred jpg on the layer above the standard. Then create another layer above the blur. On the new layer draw a square, the same height as, but thinner than your images, convert it to a symbol, (graphic or movie clip).

If you extend the frames along the time line to give enough room for a tween (100 frames or so), then place a keyframe on the last frame of the timeline on the layer that has the square you converted to a symbol. Place the square so it covers the left side of the blurred image. Then on the latter keyframe move the square so it covers the right hand side of the blurred image.

Now if you click the first frame, and in the contextual panel, and select 'motion' from the 'tween' drop down and test your movie you'll see the square move from the left to the right.

Finally right click (pc) or control click (mac) the layer holding the square and select 'mask'. The layer immediatly underneath should now be masked by the square.

All you need to do is repeat tht process until you've got the design you want, then use alpha tweens to fade one image into the next.

It's acheivable in script, and would be much more efficient, but it's harder to explain.

cheers.

[jilly]

Just curious...sorry to get off topic but...

"Jeff.Severson@NOSPAMjtsdesign.com - Please remove NOSPAM before e-mailing"

how's that workin' out for ya?
Jilly

[JSeverson]

poab,
Thanks for this information. I've been playing with the Flash intro for part of the day and I was able to make it work, sort of.

What I'd like to do is have it so that the image starts out blurred and then the opague box passes over it to reveal the clear image followed by a less opague box which blurs the image again. I've been trying to do that but I can't seem to figure it out. Any thoughts?

Once I have the first image set up, I can have the final blurred image morph into a new blurred image and repeat the process.

Any help would be greatly appreciated.

Thanks!

[macandmurray]

Interesting site, but even why .... after following your e-mail address to a design site heavy in Flash... you are pretending to be a novice. Yes.... the Flash into was very impressive.... and if you waited for the rest of the site to load past buzz word teasers, then the message that this was a chain of resturants that charged for the privilage of being seen by other customers who could afford the menu prices came through lound and clear.
The idea that this was gourmet... did not.
Please remember that the point to 85% of your unique visitors (unless responding to an addrress made famous by print advertising, that the point of a web presentation is to satisfy an enquiry typed into Google.
If I wanted to make reservations ... where would I go?

[JSeverson]

Jilly,
I'm not sure. I've seen other people use it so I figured I'd give it a shot. I can't think it'd be any worse then posting my actual e-mail address.

[JSeverson]

I did not design the site that you are referring to. In fact, I've done no sites in Flash, whether they be introductions or full Flash sites. I found it while surfing the Web and I liked the intro. I've only dabbled in Flash and I wanted to know how to go about creating a similar effect for a Flash intro.

[poab]

Hi,


Please remember that the point to 85% of your unique visitors (unless responding to an addrress made famous by print advertising, that the point of a web presentation is to satisfy an enquiry typed into Google.

Eh? Let's try this as an exercise...create a website for a design company/freelancer or a restaurant, or anything big, in xhtml, with perfect (as if there issuch a thing) SEO, submit it perfectly (as if you can) and pay for indexing on every search engine you can find...you're still not going to make the top 10, probably not the top 50, because the competition is too high.

The point of a web site is not to get hits from google. The point is to provide information or services that your users require. 10 satisfied users is better than 10000 who have no interest.

RE: NOSPAM

Bots can crawl forums looking for email addresses, so entering a real one into a thread could attract spam. Another technique that seems to work is the mynameATmyurl.com because it's not an email address. (I'm ot offering any garuntees though, personally I never enter my meial address in anything.)

Regarding the effect. It's the same technique, just with another image. To make them partially opaque, put the image inside it's own movie clip and mask the movie clip, then alter the transparency of the movie clip. Just keep laying different images with different transparencies over each other until it's looking how you want it.

cheers.

[JSeverson]

Hi,
Thanks for the advice. I was working on it last night and was able to figure it out partially. It's definately a good learning experience.

[roguenroll]

check out http://www.flashkit.com/index.shtml
to learn about flash its where I got started.
Also there are many flash projects and files
that you can download and check out.

thats a cool effect, probably called frosted glass
or something similar, I didnt see the blur, but thats usually two separate pics one, blurred, and one, not, then those shapes are acting as maskes to reveal and unreveal each one.

good luck.