We’re going to make it a little more interesting and have a picture of a reindeer in the animation as well, instead of just-some-lights.

The reindeer image was obtained from Stock.xchng.

Before we start in on anything, create a new document and change the dimensions to whatever you like, and change the FPS to 30.

Tracing the Reindeer and Making a Light

Open the reindeer in Fireworks and use the Pen Tool to trace around it. If you haven’t used the pen tool before, it may take a little practice to get used to it, but I swear it’s one of your best tools once you familiarize yourself with it.

Once you’ve traced your reindeer (I do it in pieces, i.e. antlers, body, legs, etc.), turn him into a silhouette by removing the stroke around the reindeer, and filling it in with a color of your choice (charcoal grey in my example).

Now, we’re going to make a Christmas light. I recommend doing this in a different file, it’ll just be easier later when you get into Flash. Three simple shapes, and the light bulb is done! We don’t want any major details in it yet, we will do that in Flash to keep the file size down. ***Note: I used the pen tool to draw the shape of the light bulb.

Importing it into Flash

This is the easiest part. Open Flash, go to File>Import to Library, then locate the files you just created of your reindeer and your lights, confirm, and they’re in your Library! You have to import one at a time, depending on your version of Flash.

If you’re wondering why we did the designs outside of Flash in Fireworks, it’s because the tools in Flash (at least this version) are far inferior to those in Fireworks and other programs. Fireworks is directly compatible with Flash, so as long as files are created in Fireworks and saved as Fireworks PNG files, they will import to Flash flawlessly.

Editing the Now Symbols

Double-click on the light bulb in your Library – this will enter editing mode for that symbol.

We are going to separate the two pieces of this file. When importing, so long as you kept the layers separate, this will be easy. Click on the green base, both pieces if you have to, and copy them, then delete them. Create a new Symbol. Insert>New Symbol… or CTRL+F8. Make it a movie clip, name it something awesome like “base”, then paste your green base in there. There you go!

Now, go back into your light bulb symbol.

We don’t really want a stroke around the outside of it, so we’re going to delete that. Double click on the shape, which will take you into where the shape can be edited, then click on the black line so it is highlighted, hit the Delete key and it’s gone. Magic.

The orange we have for the inside of the light is all well and good, but we want it to be a little more interesting when it’s animated later, so we’re going to do a couple things to the light now.

Click on the orange so it is highlighted. Go to your color palette, and where it says “Solid” change that to “Radial”. Two colors will appear. The one on the right side is the color on the outside of the gradient, and you’ll want this one a little darker, and at 100% alpha. The one on the left is of course the inside color and want that one lighter than the outside, and at 80% alpha.

You have officially created your first light (bulb).

Make It Glow

This is a simple step. We’re going to make a new symbol F8, and name it something like “orange-glow” or whatever color you’re using. Use the Oval Tool and draw a circle by holding down shift. Don’t make it huge, but don’t make it too small, you want to see what you’re doing. Once you have your circle, click on the border and delete it, if you didn’t change it to no Stroke before you drew it. Click on the colored space, and up in your color Palette, change the gradient to Radial. Select an orange that’s a little brighter than the ones you used for the light bulb in the previous step. You can make one or both of these colors that orange, either way, you want the center color to be a solid 100% color, and the outside will be 0% alpha. Changing the outside to 0% alpha will make it look more like it’s glowing.

And now, we have all the pieces we need to make a glowing light! We’re not finished with this step just yet.

Open the light bulb symbol we made earlier and create a new layer in the timeline. On the top layer, drag the circular orange gradient we just made on top of the light bulb. Resize it to fit inside of the light (either make it very small or just inside the edges). Go out to about frame 60 in the timeline or further, and select the frame by clicking on it. Hit F6 to insert a new keyframe. Now, at the halfway point, click and add another keyframe with F6. On this one in the middle, we’re going to scale it up, as big as you want it to glow. Once you’ve done this, click anywhere in between the first and the middle frame, right click and Create Motion Tween. Do the same on the other side of the halfway point. Hit the Enter key on the keyboard and watch it glow!

***Note: Make sure the timeline extends all of the way out for both layers. To do this, click on the empty frame in the layer below the glow, and hit F5 to add a blank frame, thus extending the images the full length of the animation.

Put the Pieces Together

Create a new symbol F8, name it “light-orange-complete” or something that makes sense to you.

You want to have 2 layers in your timeline. The bottom layer will be called “lightbulb” and the top called “base”.

From your Library, drag your little symbols of the appropriate names onto the layers and line them up so they look like a Christmas light bulb.

You officially have your functioning light!

Try It Out

Go back to your Stage, which will probably be called Scene 1. Drag your symbol that you created with the completed, glowing, colored light, onto the stage. Now view a preview of the animation! Shift+Enter keys will open a little test of the movie, and you can see the light in action.

Duplicate It and Change the Color

So, you want more than just one color of a light? Duplicate what you’ve done!

Go to your Library, right-click on the light bulb, and duplicate it. Name it something different, then go in to edit it by double-clicking on the little preview of it. Change the colors and prest-o-change-o, you’ve got it!

Don’t forget to duplicate and change the color of the glowing circle too, it would look awfully strange with a blue bulb and an orange light coming off of it. To do this: duplicate as we did with the other symbol and change the color of the center of the glow. And now, for a trick! Open up that light bulb you just changed the color of, which still has the wrong color of glow in it – go to each of the keyframes (the three we created) and right click on the glowing dot, and choose Swap Symbol. A little window will open up and you can choose which symbol to put in its place! This really helps to make things less complicated.

Oh! And as a side note, you do not need to duplicate the green base we made. You’re not changing it any, so there’s no reason to make multiples of them.

Keep It Going!

Make as many colored lights as you want.

Decorate the Reindeer

Clear off your stage by deleting anything excess. Now, create your background and everything how you want it to look. Remember, layers are your friend.

So, I’ve got some layers of snow here. One of the layers is in front of the reindeer so his feet are buried, and the others are all behind him.

On a new layer above the deer, use your pen or paint brush, whatever you’re comfortable with and draw some winding Christmas light cord. Do not strangle the reindeer with the cord, that’s not very Christmasy.

Once you’ve completed the cord, add a new layer above the cord, and then one below your reindeer. Start out on the new layer that is above your cord, and start dragging and resizing your lights.

Decorate the whole length of the cord. Why did we make that layer below the deer? For lights that wrap around him and you want to still be able to see them, but don’t want them on top of his body.

You’re Done! Hope you enjoyed!

To practice this, start with a fairly simple piece of art. My animation in here has a little more detail with it, but you’ll honestly pick this up so fast that you’ll be doing more complex things than this one here. But, for the purpose of this tutorial, I will be working with this self-portrait I created.

Step 1: Importing/Creating Your Image

Open Flash and resize your canvas to whatever size you end up wanting it to be. It is automatically set to 550×400, so this you might just keep this the same while you’re learning. You can play around with the canvas size later, anyway. And don’t forget to set your frame rate to 30fps, not the 12fps it defaults to. If you haven’t read my previous tutorials, setting it to 30fps keeps it a much smoother animation, as it plays a little slower and you can get more detail into every second of animation. Oh, and don’t forget to save—do that now before you forget later. You’ll kick yourself if your computer decides to melt down (not due to this fine program) and you lose all of your work.

Now, either draw something in your new animation, or Import (File>Import to Library) a drawing you have created outside of Flash. If you import, then drag it out onto your Stage from your Library (Window>Library), select it and Trace Bitmap (Modify>Trace Bitmap). Play with settings in it until you get it just like you want (best through trial and error—gotta love Edit>Undo). Delete what parts of the image you don’t need, like white space or whatever that may be.

Now, we’re in business.

Step 2: Now We Erase Everything! What?

Now that we have our fabulous whatever on our stage, we begin the deletion or animation part. One particular hotkey will come in very handy here – F6. F6 adds a new keyframe to your animation. If you hit F7 it will add a blank keyframe, but we don’t want to do this in this tutorial… that was just for your future information, you can thank me later.

So, for most of this animating process you’ll have you less dominant hand resting gently on your keyboard, with one of your fingers in the F6-pressing position, and your other hand on the mouse, armed with your Eraser tool. Yes, we are going to be erasing everything you want animated. Sounds crazy? I promise I am not THAT crazy.

Before we begin deleting everything, decide where it is you want you lines to stop animating. Think backwards. The picture on the stage right now is what it will look like in the end, so you want to start at the end and work your way backwards.

Once you figure out where you want it stop, take your little eraser, and give it whatever size of a brush you want on it, and click to erase the last piece. We are NOT erasing the entire line, we are only clicking and releasing. You’ll get into a rhythm with this in a little bit once you get going with it. Now that you have deleted one single click of the picture, hit the F6 button. When you hit this it automatically selects that new keyframe, so you can keep going with it!

Click, F6, click F6, click F6… you get the idea.

You will have many, many frames in your animation. This one I have here has 609 frames to make it draw, but it only took me about 20-30 minutes to do max. I’ve done it a few times, so it’ll take you a little longer at first, but it really goes fast (depending upon detail of course).

Continue this process until you’ve deleted everything.

Step 3: Now, Reverse Everything!

So, now that you have your 700 frames of animation, you want it to actually work. This is the best part of it really!

Go to your Timeline, select every frame you just created. Right click on the selected frames, and choose “Reverse Frames”.

You’re done! Well, unless you want to do other things to it too of course… but as for this tutorial, you’re done! This is a super-simple and easy way to animate some line drawing action.

**Fun Fact: Have you ever wondered why animation works when it’s not actually alive/moving? Animation works because our eyes fill in the gaps with motion. Granted, you have to have the gaps in the motion small enough for it to appear smooth, but that is the very basic nature of why animation works. This applies to your TV as well! TV is also broadcast in frames per second – and wouldn’t you know we watch it here in the U.S. at 30 frames per second.

I’m taking this tutorial from the point of where you have a character or object and would like it to move along a designated path, drawn on the Stage.

*NOTE: For a higher quality animation and maintaining a small file size, make it 30fps. If you have already made your character at a different frame rate, it may be best to leave it at that, or go back in and adjust it now before you get too far into your project. Trust me, it is much smoother at 30fps versus the default 12fps.

In this instance, I have a penguin I have created, and would like it to “slide” across the stage. I’ve created a little semi-ice-like texture so it’s a little more interesting to look at. You can certainly have it as simple or as detailed as you’d like.

It is probably best practice to lock your background layer. If you do this now, it will save you some headaches later, with continuously accidentally selecting the wrong items. This way, the only “active” item is the penguin.

Now, make sure the layer with your object is selected up in the Timeline. Below the names of the layers is a button that adds a Guide layer. When you click this, a layer will appear above your object’s layer.

Select the Pencil in your Tools. Make sure you have the new Guide layer selected, and drawn a line (which will be your object’s path) across the stage. Make sure the lines are flowing and don’t cross over in loops or bunch up while you’re drawing it. It doesn’t matter what color or how thick your line is, it will move just the same.

Go out to however long you want your object to take to travel along the line you’ve drawn and add a keyframe there (Insert>Keyframe or F6). Make sure your “Snap to Objects” button is activated in your Tools, and drag your object in the keyframe you just created, to the end of the line you drew for its path. You want to make sure the object is “snapped” onto both ends of the path you drew, otherwise this won’t work.

*NOTE: Make sure that your background layer and your guide layer are the same length as your object’s layer in the timeline. If you don’t extend these layers out with the object’s layer, then the background will disappear and it could inhibit the functionality of the motion along the path.

In the Timeline, select a frame anywhere between your two keyframes for your object’s layer, and create a Motion Tween. If done right, you should see your little object suddenly pop out into the middle of the path you drew.

Now, you can go up and make your Guide layer invisible, so your object isn’t actually moving along the visible line anymore, and it looks more like it’s moving around on its own. If your object is moving too slow or too quick, just adjust the length of the timeline.

There are several steps involved in a simple walking process in flash, and by the end of this tutorial you will hopefully better understand how to put a character together.

Open a New project, and immediately Save it. It’s best to keep this file in its own folder. Change your canvas size and fps to match my example. This will be more important at the end of this project. Oh, and Save frequently! You never know when your computer is going to explode.

Open your Library and drag it to a location that is comfortable for you to work with (mine is usually bottom right of my Stage).

Window>Library or F11

Take either a hand or computer drawn character into Flash. If you “clean it up” before you bring it into flash it will be easier to work with once it’s in there. I tend to import line drawings, instead of “sketches”.

File>Import to Library>Find your image

Your file will show up in your Library. When you select the image in the Library, it will show a preview up above it in a little viewing window. Drag that preview onto the Stage.

Select the image that is on your Stage, do not rescale. We’re now going to convert this file into something we can use in Flash. This is where having a “clean” image is going to pay off. In the box that pops up, you’ll have a few choices. Play around with the top two numbers so you can see what they do. Increase and decrease the number sizes.

Modify>Trace Bitmap

While your entire image is still selected (if you have clicked off of it, you can Edit>Undo or CTRL+Z, or you can Edit>Select All or CTRL+A). Make this into a Symbol. Name it something descriptive (I called mine “girl”) and select its Behavior as Movie Clip.

Insert>Convert to Symbol

It is now in your Library. Select the now Symbol that is on your Stage, and hit Delete. Don’t worry, it’s saved in your Library and will remain there until you Delete it from the Library itself.

Select your new Symbol in your Library, then double-click on its little image/preview. This will take you to a screen where you don’t see the Stage anymore, but just a solid white background (unless you defined that differently earlier). Now, we can edit this Symbol!

Click on the white space around your character and delete it, along with any other places you want to be transparent.

We’re wanting her to eventually walk, so as silly as it sounds I am going to remove her legs now. They are going to move independently from the torso, so I need to take them off of her so I can manipulate them separately.

The easiest way to do this is to zoom in to where her legs meet her skirt, and very carefully sever the lines of connection to the rest of her body. I select the Erase tool, and simply blot out the black lines that connect to her skirt. Then, I can select the white and black area easily and drag her legs from her body.

While the legs are still selected, make them into a Symbol, Movie Clip. Name it “leg”. Once you’ve made it a Symbol you can delete it from the Stage. We can now color our characte. Be sure to select the Paint Bucket Tool and not the Ink Bottle Tool. The ink bottle fills in “line” colors, like outlines, and the paint bucket does spots of colors, like what we’re doing here.

Once you’ve got it all colored (or not, you can always do that later too), go to your Library, select the Symbol called “leg,” double-click on its little image like we did the other one, and now we are editing the legs.

For the leg, we are only going to need one leg. From the thigh portion down to the ankle, and that’s all. So, we are going to erase the second leg that you see in the background here, being mindful of the shoe. With the shoe, we are going to do basically what we did to detach the legs from the torso, only we’re detaching the shoe from the leg instead. (For my tutorial detaching the shoe isn’t necessary, I am only doing this if you want to move the shoe independently later on.)

After you’ve disconnected the shoe from the leg, make into a Symbol, and name it something fancy like “shoe”. Delete it from the Stage once you’ve made it a Symbol, and we’ll edit that in a moment.

Back to the leg: complete the lines on the leg by using the Brush Tool. You can adjust its thickness further down on the toolbar so you can more carefully complete lines.

Here are some steps the leg went through.

Open up your Symbol called “shoe,” and edit and clean that up as well.

So, the Symbols we have created are: girl (which is the torso), leg and shoe.

We are now going to create a New Symbol and call it “legshoe,” for lack of imagination, and give it a behavior of Movie Clip.

Insert>New Symbol

When you create a New Symbol it takes you directly into that Symbol, so you don’t need to do any double-clicking to get into it. Drag the leg and shoe symbols we created earlier out onto the Stage, then fit them together. If your layering is off and your shoe is behind your leg, select the shoe on your Stage, then…

Modify>Arrange>Bring to Front

After you’ve finished the legshoe Symbol, create a New Symbol, call it walking with a Behavior of Movie Clip.

You’re going to start using Layers in your timeline now. You are going to need a total of 4 Layers.

Insert>Layer or (see image below)

Name them starting from the top: Torso, Leg 1, Leg 2, Shadow

This is pretty self-explanatory. Select each layer individually to add the items. Put the torso on Torso layer (drag it from the Library), put a legshoe on the Leg 1 layer, and then another legshoe on Leg 2, and don’t worry about the Shadow layer. We will lock the Shadow layer so we don’t accidentally do anything to it.

Select one of the legshoes. There is a point of rotation you are going to move on the leg. When we rotate this leg in a minute, we want it to rotate from the top of the leg, not the middle. To change this, we need the Free Transform Tool, then while you have the symbol selected, drag the little tiny circle to the top of the leg. Do this to both of the legs.

Using the same Free Transform Tool, on Leg 2 layer, ever so slightly scale the leg down. This one is behind the other leg, and should be a tiny bit smaller than the one up front.

***Be sure to scale from the corner, holding the Shift button on the keyboard to maintain proportionate shape. It may look squished or stretched if you don’t do this.

Line up the legs with the torso.

In the Timeline, on our top three layers, go out to 10, select the little space below it, and add a Keyframe. Do this at a total of 4 spots. 10, 20, 30, 40.

Insert>Keyframe or F6

Go to the first Keyframe on Leg 1 layer. Using the Free Transform Tool, rotate the leg forward like she is taking a step. Then, on Leg 2 layer, rotate that leg back a little.

Go to Keyframe 30 on both of the Leg layers and rotate the legs in the opposite direction.

In the Timeline, click once the first Keyframe of the Torso layer, hold down shift and click once on the last Keyframe of the Leg 2 layer. Doing this will select all of the frames in between. Go to the Properties window (Window>Properties), and in the Tween menu, select Motion.

At this point we are almost done. You can hit your Enter key on the keyboard to see a little preview of your character walking. Her legs are moving, but we’re going to add a little bounce to her step.

Using the same method we did to select multiple Keyframes before, select all the Keyframes on the three layers at 10 in the Timeline. After you’ve done that, hold down shift and hit the UP arrow key on the keyboard once. This will move your symbols on the stage up slightly. Do this again at Keyframe 30. Now, when her legs move, so will her body in a little bouncing step.

Finally, Unlock the Shadow layer. Go to 40 in the Timeline on that Layer, and add frame. This will extend that layer all the way across beneath the other layers.

Insert>Frame or F5

Select the first Keyframe in the Shadow Layer, grab your Paint Brush Tool and draw a shape where a “shadow” would be. Fill it black, so it is solid. Click on it so it is selected, go to the Color Mixer window (Window>Color Mixer), and change the Alpha to 20%. This makes this shape transparent. You could make this into a symbol also, but it’s not necessary.

Now, go to Scene 1.

Drag your walking symbol onto the Stage, and resize it so it fits. Now, if you want to, add a little background by adding another layer. Make sure your symbol is on the top layer and the background on the bottom.

Now you can Publish it and use it wherever! A long process, I know, for such a simple animation.

	Step 1.   Opet a new document: File-New
	Step 2.   Pick Text tool and use some “bold” font for this. I’m use Cancun there. You can use Arial Black or Impact.
	Step 3. When you type something you must rasterize that text, go to Layer-Rasterize-Type, now we can use one filter. Go to FIlter-Distort-Glass and when you get new windows just set up amounts like on image. In Texture menu pick Frosted.
	Step 4. Press Shift+Ctrl+E on keyboard. Now pick Magic Wand Tool and click somewhere on black surface, after that go to Select-Inverse
	Step 5. Go to Select-Save selection, and when you got new windows in name just write something, im use “selekcija”. Now you had save that selection on different layer. Click ok, and pres Ctrl+D
	Step 6. Now go to Image-Rotate Canvas-90 CCW, after that Filter-Stylize-Wind, method is wind, direction is from the right and click OK. After that just press Ctrl+F two-three times.
	Step 7.   Image-Rotate Canvas-90 CW, and after that Filter-Distort-Ripple and just click OK in new window.
	Step 8. Now make one empty layer.
	Step 9.   Now we must load our selection, go to Selection-Load selection and when you get new window in Channel section pick your selection name, my is “selekcija”, and then click OK!
	Step 10. Now go to Edit-Stroke, and on new window just use amount like on picture, and click OK Press Shift+Ctrl+E and after that Ctrl+D
	Step 11.   Go to Image-Mode-Indexed Color and set up amount like on my picture. We will mage a .gif pic
	Step 12. Image-Mode-Color Table and in Table menu just pick Black Body, and click OK
	Step 13. Now if you want .jpg format go to Image-Mode-RGP and save it like .jpg

]]> http://www.tutorialsportal.com/photoshop-tutorials/how-to-make-a-text-on-fire.html/feed http://www.tutorialsportal.com/photoshop-tutorials/how-to-make-a-black-white-picture.html http://www.tutorialsportal.com/photoshop-tutorials/how-to-make-a-black-white-picture.html#comments Mon, 12 Nov 2007 08:42:17 +0000 admin http://www.tutorialsportal.com/photoshop-tutorials/how-to-make-a-black-white-picture.html How to make a Black & White Picture

In these 9 easy steps you will learn how to create your black and white picture from a colored one!

	Step 1.   Open your photo -> File- Open. Press D key to choose white/black color mode for brush.
	Step 2. On Layers click on Create new fill or adjustment layer icon and on drop menu click Gradient Map.
	Step 3.   In new window just click OK
	Step 4.   After these steps you photo must be like this picture.
	Step 5.   On Layers click on Background to activate them.
	Step 6.   Now go to Image - Adjustments- Brightness/Contrast and in window set amount and click OK.
	Step 7.   Now you have a great white/black photo
	Step 8.   Now click on Gradient map and reduce opacitu.
	Step 9.   Now you have a new effect on your photo

]]> http://www.tutorialsportal.com/photoshop-tutorials/how-to-make-a-black-white-picture.html/feed http://www.tutorialsportal.com/seo/using-keywords-in-page-titles.html http://www.tutorialsportal.com/seo/using-keywords-in-page-titles.html#comments Thu, 25 Oct 2007 14:46:30 +0000 admin http://www.tutorialsportal.com/seo/using-keywords-in-page-titles.html and < /title > (with no spaces) will appear in the title bar of the browser when that page is showing. [...]]]> Its really important use keywords in page titles. The “titles tag” is not the same of the “Meta tag”, and both have an important function. The text you will place between < title > and < /title > (with no spaces) will appear in the title bar of the browser when that page is showing. In some browsers will appear also the own name of it, like Mozilla Firefox, but it doesnt matter.
The text you insert in the title tag is an important factor in how the search engine can decide to classify your page. Also all major web crawlers will use your title tag as the title of your page in your listings, and you can see it when you use Stumble, which use as Title, the text you placed in the title tag.
If your website include more than one page, remember that each page need to be optimized, and is reccoment to use different titles for each page, all with at least one important keyword related to the page.

The words or phrases included in the title tag will let increase traffic via search engines, so be sure to insert prominent keywords and phrases.
One of the most common mistake is to place your business name or website name or product name in every title of every page. This is a for sure a waste of space, infact you could insert valuable keywords instead of your name that wont really bring you traffic(or probably it do just if your name is Bill Gates! j/k).