Home  | Login  | Register  | Help  | Play 

[Flash] The Complete Flash Guide

 
Logged in as: Guest
  Printable Version
All Forums >> [Gaming Community] >> [Legends and Lore] >> Artists of Legend >> Art Academy >> [Flash] The Complete Flash Guide
Forum Login
Message << Older Topic   Newer Topic >>
9/3/2012 13:15:32   
PyroPuppy
Adorable!


Index
Introduction
Flash Professional
  • About
  • Interface
  • Tools
  • Commands

The Library and Symbols
  • What Are Symbols?
  • Creating a Symbol
  • The Library Window
  • Editing a Symbol
  • Properties and Transformations
  • Buttons

Shading
  • Solid Colors VS Gradients
  • General Tips
  • Advanced Lining
  • Shading Ice
  • Shading Cloth
  • Rock Shading
  • Highlights

Animation
  • Frame by Frame
  • Shape Tween
  • Classic Tween
  • Motion Tween
  • Classic Motion Guide
  • Shape Hints

Others
  • Gradient / Alpha Masks
  • Tagging
  • Lightnings


Introduction
For those who don’t know me, I mostly do Flash art. Over the years I gathered a number of tips and tricks, that I’m really sorry I didn’t know before. Therefore, I decided to create a guide that will summarize all of my knowledge about Flash, and will include beginner tips. Hope you’ll find anything useful here, and learn something new!
This tutorial does require basic knowledge of Flash and the tools Flash provides. This tutorial is here not to teach you how to use Flash, but rather how to use Flash effectively and take your work to an upper level.
The tutorial will be divided into different sections, according to the art type the section focuses on.

If you have any comments about the guide, things that you want to add, things that you want to ask or anything similar, feel free to post!

Flash Professional

About
From Wikipedia: Adobe Flash (formerly Macromedia Flash) is a multimedia platform used to add animation, video, and interactivity to web pages. Flash is frequently used for advertisements, games and flash animations for broadcast. More recently, it has been positioned as a tool for "Rich Internet Applications" ("RIAs").
Flash uses a system of SVG (Scalable Vector Graphics) to represent the graphics. The most common system to represent graphical data is in Bitmap format, which uses small squares (pixels) to show an image. The variety of the colors of the pixels with the small size of them creates an illustration of an image. SVG, on the other hand, uses pure information to represent its art. A line from point A to point B won’t be a collection of small squares, but will be simply defined as a “Line from A to B”. This system offers a great advantage to SVG. When you scale a vector image, you don’t lose any data nor gain any unneeded data, the image stays as it was.

Interface
Once you open Flash, you are greeted with a window, offering you to create a new file, open an old one, and some more options. Yet, I would like to focus on everything else. One of the unique features in Flash is that the workspace is completely changeable to what you desire. You can add windows you need, remove windows you don’t, make some smaller, some bigger, and whatnot. One of the most important things you should do is to adjust the interface to your needs. Of course this might be obvious, since no reason to have windows you don’t need, but don’t forget that Flash is also capable of minimizing windows too. If there are windows you don’t use a lot, but still want to have them open, you should make them as small as possible in order to leave more room for other windows, especially the main one. If you don’t animate, no reason so have a huge Timeline, or the Motion Editor. If you don’t code, you don’t need the Actions panel. You can also check out the default workspaces that come with Flash, and adjust them to your preferences.

Tools
Flash offers a huge amount of tools. This section will cover the tools that you can find in the Tools panel, while adding some tips about each tool. One thing that I highly recommend is to learn the keyboard shortcuts for each tool. It will save a lot of time, and will make the process of creating art much easier. Also, most of the tools have extra options that you can get by holding Ctrl, Alt or Shift, check those out, these extra options can save you a lot of headaches. On top of this, at the end of the tools panel, each tool usually has even more options, for an example changing the type of transform in the Free Transform tool. Be sure to check out all of the options, because most of them are surprisingly helpful.
If you can’t find some of the tools that are mentioned here, it is because some tools are stacked. Just hold your mouse pressed on one of the tools with a little arrow on the bottom right corner, and you’ll see a list of more tools.

Selection Tool:
Double clicking a group of lines will select the entire group. A group of lines is a bunch of lines that are connected, and have the same color, stroke and style. If the lines are not touching, they won’t be selected. This can be used to check if the lines are connected or you have a hole somewhere.
Curve your lines smartly. You can’t curve one lines everywhere, so if needed, don’t be afraid to split the line into two separate lines.
If you hold Ctrl or Alt, you can create a new corner instead of curving the line.

Subselection Tool:
This tool highlights all of the anchors in your piece. A lot of times I had a “hole” between two lines, and using this tool made it easier to find it.

Free Transformation Tool:
The Envelope option changes the tool completely. It offers you the ability to “wrap around” the shape.
The white dot in the middle is draggable, and doing so will be very helpful. This dot is the reference dot for all of the transformations. For an example, if you rotate the shape, it will rotate around this point. If you drew a hand, you would want it to rotate around the shoulder. Just drag the point to the shoulder area, and that it.

Gradient Transform:
If you use gradients, use this tool. No questions, no further tips.

Pen Tool
I don’t have a lot of tips to provide you for this tool, but it is worth mentioning that mastering this tool will upgrade the level of your art. It takes a while to get used to this tool, but It is worth it.

Add / Delete Anchor Point Tool
Those tools are quite useful for managing your anchor points. If you want to add another point in a straight line, or need to remove some unwanted corners, those are the tools for the job.

Pencil Tool
Use the extra options to change the result line. If you prefer straighter lines, or smoother lines, just adjust the tool.

Brush Tool
Using the Brush Mode option, you can specify what will be overwritten. Using the Paint Fills option, for an example, will erase only fills and will keep your entire outline full.

Bone Tool
This is a useful tool for animating, but you can use it for everything that requires a bone structure. If you make a system that is made out of links of some kind, like bones, check out tutorials online on how to use this tool, since you might find it very useful.

Eyedropper Tool
When you’re hovering above a color, there is a little icon at the side of the courser that shows if you are above a fill or a line. It is quite useful when the fill is very thin.

Eraser Tool
Similar to the brush, the eraser got Eraser Modes. You can choose to erase only fills, only lines, and some other more complex options. All of the options can be quite useful

Zoom Tool
I mentioned at the beginning that if you press Alt, you can change a bit the function of the tool. In the zoom tool, the tool inverses the zooming direction (in or out). Having your hand on the Alt key will save you a lot of time with this tool, and therefore worth mentioning again.

Commands
On top of the tools you can find in the tools panel, Flash comes with a bunch of commands you can use.
Most of the commands are available in the different drop down menus, especially the Modify menu. You should check out all of the menus by yourself, in order to see if there is any command that catches your eye. Yet, I’ll list here a lot of function I found to be useful, and how to access them.

Find and Replace
Like most programs, Flash comes with a built-in Find and Replace command. Pressing Ctrl + F will open the window. But, unlike other programs, Flash can replace a lot more than just text. You can replace colors, symbols, and a lot of other things. Every type of replace also comes with a lot of more specific options, like limiting the color replacement only to stroke colors.

Export Image
If you created a piece, and you want it to be a .Png image, and not the regular .Swf file Flash publishes, use this option. You can find it in File -> Export.

Keyboard Shortcuts
In the bottom of the Edit menu, there is the wonderful option to change the keyboard shortcuts of Flash. For an example, I use the Ctrl + Shift + E to export a .Fla as an image, as mentioned above.

Convert Lines to Fill
Editing lines is much easier than editing fills, in my opinion. Using this option, you can create a thick line, edit it easily, and just convert it to a fill. You can find this command under Modify -> Shape.

Expand Fill
Under Modify -> Shape, you have the ability to expand a fill, and also to insert it (Same option, just pick the “insert” option). Not the most useful option on a first look, but you can use it to create a nice, thick glow for your art. Just pick the shape you want to add glow to, expend the fill by few pixels, and convert the fill to a transparent one.

Flip Horizontal / Vertical
If you wondered, Flash comes with a built-in command to those actions. Adding a quick keyboard shortcut to them, and you can easily flip your art in any direction. Find those under Modify -> Transform

Align
You can find all of the aligning actions in the Align panel, or under Modify -> Align. Those aligning actions can save you a lot of trouble. If you need to center everything in the middle, or align everything to the left for some reason, use the right option from the Align panel. One click and you are done.

Duplicate Selection and Transform
This command duplicates the current selected shape, and the transformation it has. You can find this option at the bottom right corner of the Transform panel. Basically, if you resized your shape to 80% width and 90% height, and clicked this, you will get a duplicated version of the shape, with 80% * 80% width and 90% * 90% height. Works the same on all of the transformations, including rotation and skew.

Copying and Pasting frames
If you right click on a bunch of selected frames on a timeline, you can choose to copy, cut or paste frames. Note that the regular Ctrl + C, Ctrl +V shortcut won’t work here, but using this options will save you a lot of time. This copying and cutting is global to the program between all of the opened .Fla files. For an example, you can use this option to copy an entire animation from one file to another.

The Library and Symbols

What Are Symbols?
Symbols exist in order to save the trouble of copying and pasting over and over one shape, and offering an easy way to move shapes between different .Fla files.
Also, symbols can save you quite a trouble when overlapping drawings. When you overlap regular shapes in the same layer, the top shape usually cut the one that bellow it. Yet, symbols are always on top the shapes, and don't affect them.

Symbols got few properties:

Name: The name of the symbol is unique and can be used only once per file. If you move a symbol from one file to another and the name is taken, Flash will ask you to replace the moved in symbol, or the symbol that is currently in the file.
Timeline and Canvas: Each symbol got its own timeline and canvas which are not connected to the main canvas and timeline in any way. When you have a symbol on the main canvas, it will start its animation which you can see while pressing Ctrl + Enter, but you won't see it if you press just Enter.
Registration Point: The registration point is the reference point of the symbol. It is used by transformations, and it is the default zero point for the symbol's canvas.
The Shapes: The real graphics that are inside the symbol.

Creating a Symbol
In order to convert a shape into a symbol, just select the shape and press F8. You will be able to choose a name for the symbol, choose a type (I recommend MovieClip. Button s will be convered next, and there is no reason to choose a Graphic type) and align the registration point in relation to the shape (On the middle of the shape, on the top left corner, etc.).
You can also create an empty symbol by pressing Ctrl + F8, and add art to it later.

The Library Window
After creating a symbol, it will appear in the library panel. If the library isn’t open, just go to Window -> Library or press Ctrl + L. In the library, you can find a list of all of your symbols, and a preview of them. If your symbol got more than one frame, its preview will have small play and stop buttons. On the top of the library window, you have a list of your open files and the selected option is your current file. Using this you can get symbols from other opened files easily.
In this opportunity, I will introduce you to a new term, instance.
An instance of a symbol is an appearance of the symbol inside the .Fla file. Even if there are no instances of the symbol, it can still exist inside the library. In order to create a new instance of a symbol, just drag it from the preview window into the canvas.
If you are experienced with an OOP programming language, you can think of instances as objects, and the symbol type as the class of the object.

Editing a Symbol
In order to edit a symbol, just double click an instance of it or double click the preview window of the symbol in the library.
The inside of a symbol (graphics, frames, etc.) are common between all of the instances of the symbol, unlike other properties that will be explained next. Therefore, when you edit a symbol, the edit will take effect instantly in all of the instances. One use for this is to create symmetrical objects. Just create a symbol of one side. Copy the symbol, flip it, and every time you edit one half you will instantly edit the other.
It is possible to put instances of symbols inside other symbols. Please note that putting an instance of a symbol inside the same symbol isn’t possible, and Flash won’t allow it.

Properties and Transformation
The properties panel and the transform panel offers you further edit to an instance of a symbol. Please note that those panels edit the instance, the single appearance of the symbol, and not the symbol itself. Therefore, if you transform a symbol the transformation is unique to the instance, and won’t affect in anyway other instances.
Also, if you transform a shape, after you will reselect it the transformation’s number will reset the default numbers. When you transform a symbol, the numbers stay even if you deselect the symbol and reselect it.
In the properties panel, you can find a lot of different effects you can add to your symbol.
Color Effect: You can add an alpha effect, change the color, or use the advance option. Check out the different options for their different effects.
Display: The blending option changes the blending of the symbol. The other option, which is “Cache as Bitmap” in Flash CS4, doesn’t need to be explained in this tutorial.
Filters: The real effects you can add to symbols. Click on the small button on the left bottom corner, you can add new filters. Using the button on the right of it, you can save filters for future use.

Buttons
In the Creating a Symbol section, I recommended on creating a MovieClip typed symbol in any case. Yet, if you want to create a button for some reason, of course the type of your symbol should be Button.
The special thing about Button typed symbols, is the adjusted timeline they have.
Instead of the regular numbered frames, Buttons got only 4, special frames:
Up: How the button will regularly look like.
Over: How the button will look like when the mouse is over it.
Down: The look of the button while the mouse is pressed on it.
Hit: The area of effect of the button. This area of effect will be used in the Over and Down states. When the mouse overs over the area in the Hit frame, the button will move to the Over mode. Similarly, when the moused is pressed on the Hit frame, the button will change to the Down mode. Note that this frame is never actually seen, so you can use a general fill for it.

Shading
When I first started as a Flash artist, I searched for a great shading tutorial that will explain the basics to me. I was referred to a tutorial that was made by a fellow forumite, which you can find here.
Shading hasn’t changed at all since then, and this tutorial is the tutorial I now refer other artists to.
Yet, I would like to touch few things that might enrich your knowledge.

Solid Colors VS Gradients
If you played different games from AE, and checked out different art from different AE artists, you can see the different artists and games use different levels of solid colors and gradients. Nulgath, for an example, barley use any gradients in his Flash art. On the other hand, some armors in Adventure Quest are made with a lot of gradients, and only few real solid colors.
The case is that there is no “right” option in this. I would say that most of the time lighting is gradiental, while shadows are usually solid, but in the 2D universe it is hard to mimic the 3D world perfectly.

That said, General Tips
Since there is no right option, combine. Nothing is bad in using both gradients and solid colors. Just find the right balance between the two, and go with it.

Look at real life objects. The best way to shade objects in order to make them look real is to use the real objects. Find a similar object to the one you are trying to shade, or look up online similar objects. Using those as a reference will definitely help.

If you feel your shading doesn’t mimic the real world at all, consider revising it completely.

Don’t use pillow shading. Pillow shading is the process of drawing a smaller shape in a brighter color right in the middle of a shape, and inside it drawing another smaller shape in an even brighter color, again, right in the middle, until the artist feel satisfied. As you can picture it, you don’t really get a 3D effect with this technique, and therefore it is at the lowest level of shading. Instead, check out this tutorial to learn about the general concept behind shading.

Before beginning to shade, pick the direction of the light source. Your shading will have to match that direction.

Use seperate layers for the outline and the shading lines. It will make your life much easier, and after you're done with the shading lines, just copy and paste them on the outline's layer.

Advanced Lining
If you made a piece and shaded it in Flash, you probably left some kind of an outline. Usually, the outline is a black Hairline without any special properties.
Yet, in order to advance, you should know to use your lines as an helpful resource that will help you to shade your piece.
First, you can color your lines in a darker color with the same hue of the filling. It will help to match the colors and will remove the usual harsh transition between the colored filling and the outline.
To upgrade the coloring, you can vary with alpha lines, gradiental lines, shaded lines, thicker lines, and much, much more.

Shading Ice
Reference
I once asked J6 for some help with this long time ago, and he provided me with a great amount of tips. I’ll change his message a bit to match my own words, while providing examples:

First thing is to have very straight lines. Ice breaks in a really sharp way, so you want to avoid making the lines too curvy (unless you want to do polished ice). If you think of it as a 3D object and you're looking at one side of it, usually you'll have 2 or 3 vertical divisions. This is just a way of making a simple but bulky looking piece of ice. So you'd have the left side, center and right side. In the example, you can see how to green lines divide the ice into those three sections. Each division should be broken with horizontal lines (red lines in the example), be creative in this part. Break up the vertical lines so that they aren’t all parallel. You want to break up the piece to have a lot of faces on it to give it some depth. Think of a diamond, on how you have a bunch of flat faces all going at different angles. So you can get pretty creative here and make it wild lines, but keep it very clean. It’s like an ordered chaos.

Once you have your lines plotted out how you like, you start shading. Pick a point where you want the light to come from, and then make that face of the ice the brightest. Then all the other faces touching that brightest one are a shade darker. All the faces touching those are darker and so on. When you get to the face that’s about 2/3 past the brightest one (Say your left face was the brightest, so 2/3 of the ice going right) that one should be the darkest. That’s because it’s the point of the ice that’s the thickest, least amount of light going through it. From that point, the other faces touching it start getting lighter. So the order should be brightest-darker-darkest-darker.

That’s pretty much all I can explain in words, it’s more of a trial and error thing, if it doesn’t look like ice just makes it look sharper. There’s a very distinct change from the shades on it. It doesn’t really blend smoothly.

Shading Cloth
Reference
When shading cloth, you must have in your mind the general 3D shape of the cloth, from the side.
Having this picture in your mind will help you turn the process of shading cloth into a much simpler task.

As you can see in the middle of reference picture (which shows the cloth from above, while having an exaggerated thickness), cloth usually have a general wavy 3D shape. You can treat each “wave” as a single unit unrelated to the others. The one that faces the light source is bright, and the other is dark.
The upper piece shows two styles of shading cloth. The right one is the simpler one, using only simple solid colors. The left style uses a lot of gradients. As you can see, the dark part of a wave is opposite to the bright part.
In the lower examples, I wanted to use a more specified form of cloth, in this example skirt. Notice that in this example in the waves of the cloth there are some “bumps”, which cast shadow on the next wave.

As I wrote in the first sentence, keep in your mind how the cloth should look like in real life, and you should be fine.

Shading Blades
If you read the Shading Ice section, shading blades shouldn’t be harder. Generally, it is the same. The blade got the two side division, left and right, and sometimes a flat area in the middle. Similarly, the face that is facing the light source should be the brightest, while the face on the opposite direction should be the darkest. The middle area’s color can vary, depends on your style. Some artists will make it colored somewhere in the middle between the lightest and the darkest, while others use a very dark color instead. Example for a "medium color" middle, example for a very dark middle. Both examples were made by MechQuest's artist Minar. Experiment with various colors and different weapons until you get the effect you want.

Yet, blades are different than chunks of ice. You can use a more interesting shape, and more curvy lines. Take an advantage from this option. If you take a comparison between one of my first weapons, and one of the latest blades I drew, you can see how just the shape of the blade changes everything. In this version of the latest reference, you can see the lighting on the blade. Notice that since the middle area of the blade is the highest point in this example, , it casts shadow on the blade, opposite from the light direction. When you shade a blade that doesn't have a regular, common shape, notice that some areas might require further work, for an example the areas the are circled in red.

Rock Shading
During my years as a Flash artist, I a single main ways of shading rocks.

It is very similar to the ice shading technique above. You create chunks of rock with straight lines, and shade them.
An example can be found here.
On the left, you can see an example of a rock. Red lines mimic the light, while the black lines mimic the shadow. The highlight is a very important part of the shading, and it is often use to emphasize the edges of the rocks. Without it, the rock doesn't look like it has a lot of depth.
At the right, I combined some rocks in a form of a blade, in order to showan example of what you can create with rocks. Another great example is the Vasalkar Lair location in Adventure Quest Worlds. As you can see, the artist who created the backgrounds for this location went on the straight rocks technique, while adding a lot of advanced details, such as shadow from bulkier rocks, gradients, and more.

Yet, you can find many other different shading techniques for rocks:
An example for one style by Dage The Evil. Example for other style, again, by Dage The Evil
In the first style, the rock isn't made with straight lines, but the general principle is kept. The areas that face the light are bright, those which don't are dark, and you can notice the highlight line easily.
As for the second, you can see how a use of gradients on the blade rocks can achieve a unique crystallized rock effect.

Following the common rock shading technique isn't bad. It can achieve the effect you are looking for, shading a rock, easily and greatly.
Yet, you can and should experiment with further techniques, like more shadowing, different highlights, gradients and more, until you are happy with the unique result and feel you got the effect you were looking for.

Highlights
Highlights are an important part of shading, and really help to achieve the depth effect that the artist was looking for.
Most of the time, you will find highlights very easy to make, while being very helpful.
This link shows two objects. On the left of each, the regular object, and on the right, the version with the highlights.
As you can see, the highlights help to improve the depth of the object, even if the object isn't very shiny in real life.
In the example, you can see two types of highlights.
The first, is the solid one. As you can see, it is a thin feel, around the edges. This highlights is often used to emphasize the edges of the object.
Second, is the highlight you can see on the flat area of the blade. It isn't very common, but I like to add it to flat, shiny surfaces. It is made of a gradient with one bright and one dark colors with the same hue, while the dark one is the same as the general color of the surface. A tip for making this kind of highlight: First, make a line in a different color of the outline. Select the line, and then use the selection tool while holding the Ctrl and Shift keys. You will be able to duplicate the line while keeping it aligned to the blade.

Also, while making highlights, there is one thing you have to keep in your mind. Usually, artist tend to make the highlight as bright as possible, because of the the word "highlight". Yet, in order to achieve a good highlight, the other areas also need to be dark. If you don't feel the bright feel you added works as an highlight, don't try to brighten it even more straight away, but check out the colors that surround it too.

Animation

Frame by Frame
Animating an animation frame by frame means you draw every frame separately. Drawing every frame by hand is hard, but the results of this techniques are far more beautiful than the next techniques. Flash provides you with the Onion Skin command in order to see the previous and the subsequent frames, while editing the current frame. In order to activate Onion Skin, just click on the button on the bottom left corner of the timeline (not the layers window, just timeline).
One thing that can make this process easier, is to have important frames drawn first, and after that filling in other frames slowly as you feel.
Some of the great effects achieved by Frame by Frame animation, by HeroSmash's artist, drDOT.

Shape Tween
Animating every single frame by hand is hard. Sometimes, you just want to move one square from one point to another, without anything else. Therefore, tweens were created. Tweeing is the process of taking two keyframes, and letting Flash create the animation between them. When the two keyframes change, the tween (the animation between them) changed accordingly. Just select two keyframes and all of the empty frames between them, right click, and select Create Shape Tween. In order for the shape tween to work, each of the keyframes should consist shapes and shapes only. Empty frames and symbols won't work. Then, if you will test the movie by pressing Ctrl + Enter or just press Enter, you can see Flash created a transition for you.
The shape tween can be quite annoying from time to time, but it lets Flash do the hardest work for you, converting one shape to another. Use it smartly, and it will be a great tool.

Classic Tween
Unlike shape tween, which uses on pure shapes, Classic Tween is used on symbol. In the two keyframes, there are two instances of the same symbol, and that it. Each instance can have a different location, different transformation and different properties than the other, and the classic tween will create the transition between them. Just like the Shape Tween, select the two keysframes and all of the frames between them, and click on Create Classic Tween.
This tween is one of the most used tweens, since it is so easy to use.

Motion Tween
This is an advanced, newer, more flexible version of the Classic Tween. After you create the tween, you will notice a that a line with dots on it appear, which shows the movement and the location of the symbol. You can change this line using the selection tool, making animating motion exactly the way you want it very easy.
Using the Motion Editor panel, you can edit your motion tween even more. As I wrote, Motion Tween is advanced, and will require a lot of experiencing in order to master it. Yet, mastering the usage of this tool will be very helpful for future animating. In general, since Motion Tween is more updated, using it is preferred.
An official tutorial about motion tween from Adobe you can find here. If you're familiar with Classic Tween, but want to move forward and advance, read the guide to migrating to Motion Tween.

Classic Motion Guide
If you want the movement of your symbol to follow a specific path, you can do two things. The first and the more preferred option, is to use the Motion Tween. As I wrote, you can change the movement line easily, and using it is more preferred. Yet, if you still need to use Classic Tween for some reason, you can also use Classic Motion Guide. The Classic Tween uses the Motion Guide, and makes the symbol follow the guide instead of going in a straight line.

Creating a Classic Motion Guide
The guide will be in a layer which has a single path of line.
In order to transform a layer to a guide, just select the layer which will become the guide, right click it, and select Guide. After that, make the layer with the symbol which
If you want to add a guide to an existing layer, you right click it and select Add Classic Motion Guide.

Using a Classic Motion Guide
First, don't forget that you still use the regular Classic Motion tween, the tweened layer must have two keyframes with two instances of the same symbol.
In the first frame, drag the symbol to the beginning location. When you drag a symbol with the Selection Tool, you will see a small circle, which is the registration point. You have to make sure the point is on the guide. After that, make drag the symbol to the ending location at the second keyframe. Again, make sure the registration point is on the guide. Last, just select the keyframes and all of the empty frames in between, and convert them to a Classic Tween.

Shape Hints
If you used the Shape Tween few times, you'll probably notice that sometimes the tweens just result a very strange and chaotic animation. In order to help Flash understand how the general animation should go, there are Shape Hints. In the first keyframe of the tween, just press Ctrl + Shift + H or go to Modify -> Shape -> Add Shape Hint. You'll notice a small circle with a letter on it appeared. Attach the circle to a side of a shape (a line, but empty lines will work too), and on the second keyframe attach the circle with the same letter to another side of the shape. Adding a shape hint tells flash that the location of the first circle, should become the location of the last circle. You can add as much shape hints as you need, but note that after few shape hints, the tween will become a very strange animation.
If for some reason, you can't the the shape hints, just press Ctrl + Alt + H.

Others

Gradient / Alpha Mask
From time to time, I wanted to use a mask that will slowly gradient from a filling with no 100% alpha to 0% alpha.
If you'll try to fill your mask with a gradient, you will see it doesn't have any effect.

This tutorial provides two solutions for the problem, and explains how they work.

Tagging
A while ago, my great friend Therries talked with some people about the usage of Flash. When people use Flash, they usually think it is only capable of making weapons and armors. In response, Therries made a great tutorial about tagging, which you can find here.
Remember, you can make art in Flash in many forms. The fact that your favorite game company uses it to create fantasy themes items, doesn't mean you can't come up with original uses for it.

Lightnings
Back in the days, I asked a fellow artist (sadly, I forgot who it was) how he drew great lightnings on his weapons, and he responded with an easy explanation:
First, draw your lightning in an empty symbol. Not much to do in this step, but make sure your lightning got a bit of width.
Second, make a keyframe, and begin erasing a bit of the lightning. Simply add keyframes while erasing more and more of the lightning.
Last, put the symbol in the stage, and add any effects you want, such as glow.
You can mess around with this, like adding a bit of animation, empty frames between the keyframes, and more.
Example. Left lightning was made in the process above, the right lightning also have empty frames in between the keyframes.

< Message edited by PyroPuppy -- 11/26/2016 9:57:05 >
AQ DF MQ AQW  Post #: 1
9/3/2012 13:23:35   
Mr Popcorn
Member

This guide really helped me :D Thanks!
AQW  Post #: 2
4/25/2013 15:13:40   
jooda
Banned


can I quote this please/
Post #: 3
Page:   [1]
All Forums >> [Gaming Community] >> [Legends and Lore] >> Artists of Legend >> Art Academy >> [Flash] The Complete Flash Guide
Jump to:






Icon Legend
New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts




Forum Content Copyright © 2018 Artix Entertainment, LLC.

"AdventureQuest", "DragonFable", "MechQuest", "EpicDuel", "BattleOn.com", "AdventureQuest Worlds", "Artix Entertainment"
and all game character names are either trademarks or registered trademarks of Artix Entertainment, LLC. All rights are reserved.
PRIVACY POLICY


Forum Software © ASPPlayground.NET Advanced Edition