Shiny Orbs

Shiny Orbs

Nothing says "This person knows their gradient fills" like shiny orbs.
You've created them in Photoshop now create nice shiny (vector based) glass orbs in Flash!

[here is (roughly) what you'll end up with]

Enough Chit Chat show me how.

1. The most important stage! Choose a nice bright primary colour or use grey for plain glass. Then set your fill colour to your desired shade. Set your line colour to a slightly darker version of your fill colour.

[ The colours I used ]

2. Create a new Movie Clip symbol (Insert > New Symbol). Name it something relevant ("Orb","Shiny" etc) and click OK.
   
   Select the Oval tool and create a circle (hold down Shift) approximately 200 pixels wide.
   
3. Now select the filled area of the circle and bring up the Colour Mixer window.
   On the Colour Mixer window click on the paint bucket to make sure the fill is selected.
   
4. Now in the drop down menu select 'Linear Fill'. Your circle will have a gradient fill fading from black on the left to white on the right! Change the fill so that it starts with a dark shade of your colour and ends with a light shade.

[ use the colour mixer to perfect your fill ]

5. Now select the "Fill Transform Tool" and click on your lovely gradient fill.
   Use the rotate fill handle to rotate the gradient fill until the dark shade is at the top and the light shade is at the bottom.

[ rotate the fill until it looks something like this ]

6. Select the first filled circle and copy it (Ctrl+C), create a new layer and "Paste it in Place" onto the new layer (Ctrl+Shift+V).
   
7. Select the filled circle you have just made and go back over to our old friend the Colour Mixer window.
   
   This time select Radial Fill in the drop down box.
   Set up the fill so that the outside of your circle is a dark shade of your colour with an Alpha value of 70%.
   
   Then set the inner colour's Alpha value to 0%.

[ set up your second gradient fill ]

This should create the shadow around the edge of your Orb.

[ hopefully you'll have something like this! ]

8. Make another copy of the circle by selecting the second filled circle and copying it (Ctrl+C). Then create a new layer and "Paste it in Place" onto the new layer (Ctrl+Shift+V).

9. Select this new fill, go to the Colour Mixer window and select radial fill from the drop down menu. Set up the fill so that it blends from white with 100% Alpha value in the centre to white at 0% Alpha at the edges.

[ the final gradient fill part I! ]

10. Select the "Fill Transform Tool" and move the fill vertically upwards so that it's centre touches the top of the circle.

[ the final gradient fill part II! ]

11. Select this fill and use the Transform window to shrink the fill horizontally by about 6%. Now use the cursor keys to move the fill down a few pixels.
    And hey presto a shiny orb to impress your friends and family with!

[ the end result! ]

Logo Replication

Logo Replication

Have you ever wanted to use a band or company's logo in a flash animation? The problem with that is, you'd have to import an image of the logo, which wouldn't move smoothly and would lose quality. This tutorial will show you how to replicate the logo of your choice. We're going to be using Limp Bizkit's logo, here's how it will look when finished:

1. Open a new file in flash, the window size doesn't matter.
   

2. Download this file and import it into the movie.
   

3. Lock the layer and create a new layer above it.

[ lock the layer ]

4. Now choose the Line Tool.

---

You'll notice that the top of the left box of the logo and all the letter heights match. So first thing's first, draw three lines, one at the top of the logo, one at the bottom and one at the top of the smaller letters (All lines should go on Layer 2).

Now, I'm going to take a wild guess and bet that you don't have the font that Limp Bizkit is written in. Ah, well in that case you can't continue with this...Just kidding, shall we continue?

---

5. Draw a vertical line and move it into position to the left of the "L", then another and move that into the position to the right of the "L".

Congratulations! You now have your very first letter! I know you're thinking I'm not congratulating much, but by doing the "L" first, it means you can get the other letter's sizes correct.

6. Left click once on the left line of the "L", then hold down the shift key and left click once on the right line of the "L".
   
7. Press Ctrl-D and the lines will duplicate. Now hold down the shift key and press the up arrow once. Now shimmy the two selected lines right a bit until they line up with the "i".

[ I made the lines blue just to show you where to put them. ]

8. Add the rest of the lines to finish off the "i".
   
9. If you left click once on a small section of line that is no longer needed, you can select it and press delete. Be careful though, because if you double click, it'll select all the lines touching it and you will delete them all.
   
   So now you pretty much know how to complete the rest of the letters, you duplicate the lines and put them wherever you see similar looking sizes. But I hear you asking "How do I do the curves?!", this is the fun bit!
   
10. We'll use the letter "p" as our example. As we said in Step 7, duplicate the two lines and bring them over. Now duplicate just one of them and move it to the right of "p".

[ Again, I made the lines blue just to show you where to put them. ]

11. Now make a line from the start of the "p" curve to the bottom of it (as shown).

12. As said in Step IX, you can now delete some lines. Look at the right of the screenshot to see which lines I deleted.
    
13. Now if you move your cursor to the middle of that new diagonal line and just above you will see a little curve simple appear under it. Click and hold, then move your mouse up a bit and you'll see the line start to curve (Note: Don't click the line).

Congratulations! You now know how to curve! Curving can be a little tricky at first, but that's what the Undo option is there for. If it isn't perfect, just undo it and try again.

Going through the whole logo would mean a lot of writing for me and a lot of reading for you. If you've read through this tutorial, you now have the skills to complete the rest of the logo. After you've finished the lines, you can then fill the logo and it'll look great.

Thanks for reading and good luck!

Bevel in Flash

Bevel in Flash

Ever wished you could use Photoshop's bevel effect in Flash? That's right; Flash isn't known for easy style effects, but with my simple beveling technique, you can work around Flash's rather bland palette.

[ an example of what you will create ]

Here is How

1. Create a new document around 400 high by 200 wide.

2. Rename the default layer "dark" because you'll be using a dark green on this layer.

3. Type in "Mo Money" with the text tool and draw in any squigqly line with the brush tool. The text must be broken up for the beveling to work, so just select it and hit Ctrl+B twice.

[ what broken text looks like ]

4. Select everything on layer "dark" and copy it by hitting Ctrl+C

5. Create two new layers. Name the top "mask" and the middle "light." On both, paste your design in the exact place as the original by hitting Ctrl + Shift + V.

6. Of course, you should right click your mask layer and check "mask" to turn it into a mask.

[ correct layer set-up]

7. Now you want to lock everything but the light layer. Select it and change its color to a lighter green. Before deselecting, nudge the light design up one and left one with the arrow keys.

[ light graphic shifted up and left ]

8. We want this to be a smooth bevel, so choose modify > shape > soften fill edges from the main menus. Change the settings like such...

[ here are some suggested settings ]

9. Lock all layers to make the masking go into effect. And voila! You have your bevel.

[ final layers set-up ]

Flash Vector Illustration

Flash Vector Illustration

Vector Illustration is often quite hard to wrap ye old noggin around sometimes - especially for beginners. While most Illustrators tend to use the larger more orthodox illustration applications such as Adobe Illustrator and Freehand , I choose to use Flash because of its simple, and animation friendly drawing tools. I plan to write a few of these, but first I want to lay down the basics before I even write about shading and tone, so yeaaaaaaaah!

In this walkthrough, I will explain how to create the following image:

Of course, everything that appears within this tutorial can easily be accomplished using alternative packages - I will walk through my general work flow for the sake of the tutorial, and be covering the process used to create the illustration above.

Tools Used
Ok enough jibber jabbering. For this tutorial, all you will need is Flash, and a drawing to work from. I recommend a scanned rough, or something sketched up in Photoshop or Alias Sketchbook (what I usually use). I will mention that a drawing tablet is definitely desirable in order to achieve accurate line work, and also make the process quicker (tablets are ninja quick):

Planning it Out
Before you even pop open Flash you should always rough out the concept first. Even if it is simple blocks and elements to establish the composition. The more messing around you do at the start determines how much tweaking and tedious refinements you will need to apply to your final product:

Often, I will really loosely draw elements a few times until I get the general feel of them, and start layering the roughs on top of each other until I have a nice and balanced form. In the octopus sketch above, it is a little more detailed than I usually would attack a drawing, because it was being used for a project. Nevertheless, if you detail your image in the beginning, it means you will not have to worry about adding and touching your vectored line work when colouring and shading.

Lining it Up
Ok, now you can pop open Flash!

• Create a new document and set it to something nice and big (1280×1024 pixels is a good start).
• Create a new layer and add your rough sketch to it. Scale it so it fits the size of the stage fairly well. Set the layer to guide mode, and lock it.
• Again, create a layer, but this time add it above the first and create a blank keyframe.

You should now have a layer configuration which looks something like the below picture:

Sweet. Now that you are all setup, grab the line tool ( Shortcut is “N”) and set it to a colour that is completely different to the original line. I usually sketch in blue animator’s pencil, so I use red to make it easy to distinguish the vector lines from the rough. A line stroke of 1 pixel works great - so stick to that width.

As far as the lining technique goes, it is fairly straight forward. Grab the line tool, and create a chord across a small span on the curve (if you aim for something too big you will miss the contour):

After the chord is established, grab the arrow tool (or hit “V”), and bend the chord until it matches the shape of the curve. It takes a lot of practice to get the knack of it, but once you do, you will be able to vectorize almost anything:

Now that you have a segment of a curve, all you have to do is keep adding more segments onto the end until you have a nice sweeping line. You might also notice that if you drag the vertex of the line around, there will be a snapping point. That is the point of infliction between two curves, and in doing so, it removes any sharp connections between segments:

This is what I ended up with after vectoring my original line work:

Colouring it Up
This bit is really for you to get experimental with. I often just choose whatever “feels” right and tweak and adjust from there:

Fill in your main colours with the fill tool, and work out something that compliments the group of colours in the scene. With my vector style, I usually shade on a layer above and then merge it back down, then erase all line work.

Shading is simply a matter of sampling the base colour and moving above and below the midtones. The harsher the lighting, the further the way you should deviate from the tones. To avoid major stepping, two tone shadowing and highlighting is a great way to break the harsh tonal divisions up. Consider the direction of the light source, and project the shadows in the opposite direction, whilst keeping the closet face to the source highlighted. The easiest method to select tonal values is to move the brightness slider up and down whilst the relevant midtone is selected. This will prevent any wacky tinting going on with shading:

After the colouring is sorted out, detail can be added. I added in suckers to the octopus and a few bubbles and and things to make the composition more diverse. I added some foreground and background elements into the composition by duplicating some bubbles and varying the sizes to balance the frame.

Everyone has their own unique style, so keep playing around with ideas until you hit something nice. A vector piece is only as strong as the concept behind it, and your own boundaries. Pretty much anything is possible with vector art, you just have to have the patience and skill (after practice) to be able to translate thoughts into “art”.

Here is a bunch of illustrations I have done using the above approach (click on the following image to see them in detail):

Well I guess that concludes the first of many guides I guess I will pop out of me from time to time. I hope it gives you a general insight into the work flow that I follow.

A Guide to Shading in Flash

A Guide to Shading in Flash

A big bunch of requests came in after my first asking how I went about shading my stuff. In this guide, I’ll go through shading with simple 3 tone shading, using solid colour. I’ll assume that you have already read my first tutorial about the basics of flash vectoring. If not, give it a read!

Again, the methods used can be carried over to any other vector package. I prefer to use a combination of Flash and Illustrator, but do the bulk of the vectoring using Flash’s “organic” tools. Alright. Now that that is out of the way, let’s have some fun!

Setting it Up
The first thing you’ll want to do, is to make sure that you use a strong contrasting line colour, to easily distinguish it from your already coloured piece:

I usually go for something ridiculously bold like orange when I’m working with dark colour, and dark purple or red, when working with naturally bright colours (read up on Brightness vs. Whiteness if you have no idea what I’m on about). Simply put, if you use colours which match too closely with the existing base colour, it’s going to suck to pick out.

Light it Up!
Before you start shading, determine where your light source will come from, and how intense you want it to be:

As a general rule, the more intense the source, the more contrast you will have in your light tones. Just don’t overdo it! Highlights will sit on the edges closest toward the light source, whereas shadows do the opposite and try to ‘hide’ from it. Don’t forget cast shadows as well! When something blocks the light, behind it will be a shadow.

Get in Nice and Close
It’s vector, so take advantage of it! Using either the line, pen or pencil tool, draw the line of the shadow/highlight around the form on the same layer. Remember to think in 3 dimensions. Shadow lines are almost never straight, unless the object’s contour is:

Imagine you are running a Spiderman style web around whatever you are shading, and as you will see, your shadow will turn out more volumetric.

Tinting
Here comes the fun bit. Using the eyedropper tool, grab the colour of the base:

Now that you have the colour selected, you can open the colour mixer (Shift + F9). Drag the slider according to how much you think the form needs to be lit/shadowed (remember, more on each extreme or harsher light sources) Now fill in the area you divided off in the previous step with the new colour.

Clean It!
Alright! Now that you have highlighted and shadowed your stuff, it’s time to delete the heck out of your lines (if you vector like me, you’ll delete them all), and see what it looks like:

If you find that it looks too beveled, you can either reduce the amount of contrast between the two, or split the shadows and highlights into two toned shadows (similar to stepping with pixel art). To do this, simply resample the shadow or highlight colour, and pick a value that sits between it and the base colour. Draw a flowing line that divides the shadow in half, and then fill in the secondary shadow.

Oh great! Gradients!
Well sweet! You have something coloured up and dandy, but you want to give it even more volume? Lets get crafty with some gradients! Create a gradient in the fill panel, and sample each slider to be that of the base colour. Now slightly increase the brightness of one, and decrease the brightness of the other.

Now just click into the area you want to apply the fill to and see how it looks. Obviously, it is not going to line up to your light source right away, so you now grab our fun little friend- the fill transform tool. Use the stretch, scale and rotate handles to align the gradient according to your light source:

After you have done the base, go through and work on all of the highlights and shadows, and you will immediately see the difference!

Well gosh! I think I’ve given you enough information to start experimenting! Try messing with shadow overlaps, and even layering shadows to see what you get. I’ll sometimes export my vectors into a raster program and smudge tones into each other and layer textures to get some groovy effects. It’s all about experimentation. Go nuts and have fun with it.

Frame Jumping

Steps to Create Animation:
If you follow these steps carefully you shouldn't get too confused.

1. Ok let's start by opening up Flash and making a new document. I made mine 250 by 200.
2. 2. Go to the time line and name the current layer "buttons".

[ your layer should look something like this ]

3. Make a new button by clicking on the create symbol button (below) and make a button of your choice, and ok it.

[ I have drawn a line to the create new symbol button ]

4. Now place your button where you want in your movie. Well, it's been easy so far so let's get some coding done. First go to the first frame in your timeline and open the actions panel and enter this code

stop();

This just stops the movie from playing, now keep your actions panel open and select your button and paste in this code.

on (release) {

gotoAndPlay();

}

Where it says gotoandplay() you must put the number of the frame you want between the () characters. if you want to go to frame six it would be gotoAndplay(6), it's very important you get this right or it will not work.

5. Well now you just have to put the content in the frame you wish to link to. If you still don't understand download the zip file.

Download ZIP

Creating a Motion Tween

Creating a Motion Tween

What exactly is a motion tween? First, let's imagine that you place a box on the table. Now, imagine, that after 10 seconds, the box suddenly disappears and magically appears again a few inches to the right of where it had been originally. Pretty strange isn't it?

Well, if you could rewind your past minute and watch it again, what will you see? You will see the box suddenly disappear and appear again in a different position with no cohesion or "animation" in the 10 seconds that elapsed. Here is where motion tweening comes in. With motion tweening, instead of the square disappearing and reappearing, you will instead see the square slowly moving itself to its new position - no disappearing acts at all! A motion tween, simply put, fills in the missing sequences between a starting position and the ending positions to create a full animation.

This tutorial will explain how to create a motion tween in Flash MX 2004, and hopefully you will understand more about motion tweens. Your animation, toward the end, will look a tad bit similar to the following animation:

for example the right of the list of examples of animation -->

[ create a simple animation ]

Learn How to Tween:

1. First, launch Flash MX 2004. Once the program loads, you should see a new, blank area called your workspace. If you do not see anything resembling a white box, create a new animation by going to File | Flash Document. There, you should be all set!
   
2. Now, click on the Rectangle tool from the set of icons on the left. The Rectangle tool icon looks like the following image:

[ click the rectangle tool icon ]

3. Once you have clicked the Rectangle tool icon, go to your drawing area, and draw a square by clicking your mouse and dragging - then releasing once you have a square. Try to ensure that your square is close to or hugging the left edge of your white drawing area:

[ draw a square - make sure it is aligned toward the left ]

4. After the square has been drawn, take a peek at your timeline. Your timeline is the large area toward the top with numbers and small, vertical boxes. Notice, that at Frame 1, there appears a solid dot:

[ notice the solid dot in your timeline ]

5. The solid dot signifies that something substantial exists on that frame - Frame 1. In our case, the "something substantial" is the square you created! Now, look a little to your right and find the number 20. Right click directly at the box under the number label 20 and select "Insert Keyframe":

[ select Insert Keyframe on Frame 20 ]

6. Once you select Insert Keyframe, you will see another black dot appear in Frame 20. Don't worry - that's a good thing! Now, make sure you select the keyframe on Frame 20 by clicking it with your mouse pointer.
   
7. With the keyframe selected, go down to your square again. Notice that your entire square is also selected. Now, press your Right arrow (on the keyboard) a few times to make it move a few centimeters from the right-most edge of your movie area:

[ square moved to the right of the movie ]

8. Now, with your mouse pointer, click on Frame 1 of your movie in the timeline. Notice where the square is! It is on the left. Without hesitation, now click on Frame 20. Notice that the square is to the right. Click anywhere else on Frame 10, and notice the square finds its way back to its original, left position.
   
9. Enough of me chattering, It's time to motion tween! Click on Frame 1 and highlight all the frames between Frame 1 and Frame 20. While all the frames are highlighted, right click and select "Create Motion Tween:"

highlight all the frames and select "Create Motion Tween" ]

10. If everything worked out well, your highlighted frames will take on a purplish color with a large arrow leading from Frame 1 to Frame 20. Click anywhere on the timeline, and notice that you can "track" the square's position through its 20 frame journey.
    
11. Go to File | Save to save the animation. From there, go to File | Publish Preview | HTML. You should see your square gradually moving from the left toward the right.

---

I hope this tutorial helped you to understand what a motion tween is. Think back toward the box example I used earlier. Notice that before the motion tween, the box just vanished and appeared in a new position. Similarly, remember that the square between Frame 1 and Frame 20 just abruptly appeared at Frame 20 prior to the motion tween. With the motion tween applied though, notice that the abruptness was gone.

The motion tween approximated the position the square or box would be during their quest, and made it more realistic - more animated. No more random disappearing and appearing acts.

I have provided my source code that shows you how I created the example shown in the screenshots in the tutorial. Click the following link to download the FLA file:

download fla