Introduction
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!
…
Read More Read More
