Pixel2Life

Welcome to my first tutorial in quite awhile!  Today I'm going to crack open something I haven't used in a VERY long time, and that's Flash.  For those of you unfamiliar with my design background, I was a very heavy Flash designer and used to be quite specialized in ActionScript and coding massive desktop emulation style web layouts entirely in Flash.  I've also put together many presentations and movies with Flash, and sometimes it's fun to crack it open for a few minutes and mess around before I'm reminded how tedious working in Flash is and I close it for another year or two.  In fact, when I stopped developing in Flash as a primary focus, it was back when Flash 5 was just being launched, so that gives you an idea of how long it's been.

But with that said, it's very much like riding a bike... you still remember how to do it even if you haven't touched it for years.  I have to admit the advanced ActionScript I once lived and breathed like a religion has complete slipped my memory beyond the Geturl and Stop commands, so luckily today I am going with a strictly animation style tutorial.

The first thing I want to mention is that my programmers love to giggle at my complete ignorance when it comes to PHP and other joys of website coding, and I'm fairly sure they do it on purpose to give me cryptic and code filled answers when I ask why something is broken and see if I pretend to understand.  They might as well be clicking it out in Dolphin speak, as I'd have equal chances of understanding anyhow.  So you can imagine the satisfaction when one of my friendly programmers asked if I still did Flash and if I knew how to re-create an effect he had seen on another website.  It was a fairly simple transition effect and I knew instantly how to go about it. which I started hammering out in MSN.  This was met with a confused mutter by the programmer who was clearly getting a taste of his own medicine.  So without much nose rubbing, I quickly made him an example and thought I'd share this with everyone in the form of a tutorial.

What we are going to do is create an animated transition effect where it looks like a diagonal row of blinds is opening to reveal an image below.  This can be used when loading a site banner, for buttons or as a photo gallery transition effect.  Granted I'm going to be a tad sloppy about this, but you can create some very clean versions of this by using more masks to control the overflowing lines and such.  I'll also show you a couple of variants on this effect by adding a fade out as the blinds open.

Tools:

For this tutorial, I will be using Adobe Flash CS3, but this technique can be used in any version of Flash, it's all the same.

I would also like to give a shout-out to my friends at GoMedia.com, which is where I got the wallpaper I am using for this tutorial.  Check out their stuff, they've got some WICKED artwork in their portfolio and some gorgeous Vector Packs, Texture Packs and more you can purchase, as well as some free goodies.

We'll also have some project files for this tutorial, which are demo packs that include the .FLA, .SWF, and .HTML files needed to view each step.  To use these packs, simply unzip the contents to a temp folder and you can either open the HTML file or the SWF file directly.  Here are the files, which I will repeat when they become relevant to the tutorial:

File Download: Project Files 1
File Download: Project Files 2

Experience Required:

Since this is my first Flash tutorial, I'm going to make it very basic and assume you can barely navigate Flash.  Each step and each click will be documented, but any future tutorials will assume you know how to perform simple tasks like creating new layers, converting items, working with frame functions etc.

All set?  Just strike a pose, there's nothing to it, VOGUE!


The first part of this tutorial will be to lay down the ground-work needed to create this effect.  I'd also like to mention that we are going to use a pure animation based method of creating this effect and we'll be manually duplicating movie clips for a tiling effect.  As you advance your skills (or perhaps you already know how), you can achieve this  via ActionScript, rather than manually tiling things out.  You'll see what I mean later on...

Step 1:  First thing we need to do is create a new document.  So pop open Adobe Flash CS3 or whatever version you work in and create a new blank FLA document:



Step 2: Next I'll adjust the document settings to a smaller size that will make it easier to screenshot and I'll adjust the FPS settings from the default 12 to 20.  By doing this, the animation will be smoother and it won't really increase the file size THAT much.  If you're looking to save space though, keep the rate low, but remember that the lower you set the FPS to, the more choppy your animations could appear.



Step 3: Now we'll add a background image to our main stage.  I didn't even bother doing an import, I just pasted a section of my XP wallpaper directly in to Flash.  It's a bit bigger than my specified stage size, but that doesn't matter as the excess won't show on the final product.  While we're at it, let's name our current layer 'Background' to keep things organized.  You should try and make it a habit to properly label your layers as you work.  Right now you might know where everything is, but try opening a complex FLA file a year later and it's time for Aspirin!



This layer is now done, so let's go ahead and lock it before we move on to the next step:



Step 4: Next up, we'll create a second layer above our Background layer, and we'll name it 'bars'.  This is the layer that will hold the diagonal bars that create the opening blind effect.



Ok, we're done this part of the tutorial, our scene is ready for the next step, which is to create the animated bar that will produce the blind effect.  Please click on Page 2 below to continue!