Create a flash movie like Linkin Park one

When I was looking at Linkin Park homepage, I was impressed by the intro. It’s very simple but very nice.

Linkin Park

To do something similar, we need four elements:

1) A b/w photo with an high contrast
2) PhotoShop
3) Flash
4) An awesome music track

Finding the photo

It’s quite easy to find (or shot) a photo… just remember it should have an high contrast between the white background and the black foreground.

I browsed some photos at flickr and found this one.

Very nice.

Now it’s time to open…

PhotoShop

What we need is a cloudy seamless semi-transparent background.

Let’s begin with the “cloudy seamless”.

To have a cloudy samless background, we need to create a document whose x and y sizes are divisible by 256.

Since we need to remove the seam only to the horizontal size, let’s create a 1024*800 document. Then press “D” to restore default foreground and background colors (or have them to black and white in any ohter way) and apply a Filter -> Clouds filter.

You should have something like this

Then, create a new layer and fill it with white. Add a layer mask to it and with the gradient tool make it transparent about in the vertical middle of the image. Then press Ctrl-E to merge layers.

Now you should have something like this:

Now, create a new layer and paint it black. Add a layer mask and do the same thing as before, but make it transparent in the last upper quarter ot the image. Then press Crtl-E to merge layers.

This is what I have now:

Now Ctrl-I to invert the image, Ctrl-A to select the entire image, Ctrl-C to copy it, then select the Channels palette and click on “Create new channel”.
A new channel named “Alpha 1” should be created. Select it and Ctrl-V to paste the image.

Return to the Layer palette, create a new layer and fill it with white. Then on Photoshop menu go to Select -> Load Selection and in the dialog box under “Channel:” choose “Alpha 1” then press “OK”.

Then press “Del” on your keyboard to delete the selection. Make this layer the only layer visibie in the document.

You should have something like that:
(note: the red/green squares means the document transparenct)

Save this image as PNG-24 with transparency and close Photoshop.

Flash

Create a new document with the same size of the “flickr” image and import the image on stage.

Then create a new movieclip and import the “fog” image you created. Duplicate the movieclip to have 2 “fogs” and from now on it’s just motion tweening with a initial tween to lower the fog and then a loop to cycle between the first moving for and the second one.

Basically, when a fog starts leaving the main scene, because it is moving to the left, the second one comes from the right. When the second is leaving to the left, the first comes back from the right… and so on, in this way

Now you only need an awesome music like the one Linkin Park can play… but I am not sure I will be able to write a tutorial about it… so download the source code (with the png file) and give me feedback.

  • The demo was decent. Alerting me to the new Linkin Park album was awesome .

  • You could also use a Perlin noise filter on a bitmap for the cloud effect.

  • That’s tidy! :)

    (Linkn Park’s new album is long overdue, i can only listen to remixs of hybrid theory for only so much longer..)…


    Scott Barnes
    Developer Evangelist
    Microsoft.

  • atr_lp

    Now you’rw trying to copy LP’s stuffs?
    Ah, well, they won’t notice that, do they?

    And, finally, Linkin Park rocks!!!
    So vote him on http://www.battleofthevideos.com

  • Firos

    Why do you have to bash the guy for making a tutorial that -helps- other people? Anyway, great tut. Thanks.

  • great

    For me this tutorials is great. It helped me to learn new things which are vary much useful.

  • Marius

    This tutorial owned. Thank you so much.

  • Juan David

    Muchas gracias, el tutorial es perfecto, me salvó la vida. Lo hubiera visto antes no habría trasnochado pero encontrarlo me permitió dormir al menos un poco.

    Gracias nuevamente y nos vemos luego.

  • Albert

    loved the tutorial man thanx

  • Pranjit

    Best Work done by u

  • I really appreciate the work, as someone said above u could use Perlin Noise filter, but I must say this one is Best, cause it’s without Perlin. :D

    This Tut Rocks.
    check out some of my webDesigns at http://www.SteeL-it.co.nr

  • zeuss

    Great..next time try to solve the copyright thing…it’s just a suggestion ;)

  • I’m having trouble finding pictures suitable for this. Could you let me know what specific keywords might help me a bit? Thanks.

  • Also… a bit more information about the tweening stuff in Flash? You just sorta dump us off into Flash… It’d be helpful.

  • behzad

    This was one of the greatest tutorials ever, but i have sum questions. ok… i understand the photoshop part and all but i don’t know how to make the actual animation in flash cuz i’m just a beginner.

  • Powr

    Yeh dude, i’m having a hell of a lot of trouble pulling this linkin park one off. I’m a big fan of em and i love the intro effect. I get past the first few steps, past the alpha part but can’t seem to get the same fog effect at all like you are. If you or anyone else can explain this stuff in alot of detail just drop me a line. I’m a beginner, complete beginner in photoshop and flash so ya.

  • jackie

    how do i import it into the flash program.. i cant find it

  • i like it.

  • SAL

    Superb buddy ! Amazing work… just that i was too l8 to see this… very informative… i suppose of you could come up with more of something like this… Gr8 Job dude !

  • Pingback: Create a flash movie like Linkin Park one | Tutorial Collection()