The application of pixel in Flash

Objective

In our impression, Flash is based on a set of vector design software, bitmap is not conducive to scaling, and the location of each point of the bitmap and color must be stored, so the bitmap file will be relatively large. Therefore, the general flash used in almost all vector map resources.

So, the bitmap in Flash is really useless? You can take a look at the example I've done:

Click here to download the source file

Is the effect OK? This is the legendary pixel painting. Because pixel painting is a very special kind of bitmap form, it has its own advantages in flash, relative to the vector. The following to discuss with you is the combination of flash and pixel painting use.

About pixels

What is a pixel? A pixel is the smallest cell of a bitmap, and a pixel is a small square of color. Pixel design is in these small squares on the fuss, seemingly simple, in fact, it is difficult to draw. Domestic also has a lot of professional pixel designers, admire in.

However, the combination of flash and pixel, does not seem to be a lot. I tried to study it one day and found a bunch of problems, but basically it was a solution. Let's get down to business.

Preparation of pixel graphs

Pixel Drawing Tool I still recommend Photoshop, of course, some people insist on drawing directly with the artboard, I feel the operation is very inconvenient. As for how to draw, here is not to say, not do not want to say, but I am also a beginner, afraid to mistake everyone, of course, welcome to ask questions, discuss learning together. I try to build a website with flash and pixel, welcome to step,http://www.toorison.com

Of course, if you want to be professional, you can go to the domestic pixel forum (such as Pixel Forest, ourcall) learning, where there are detailed tutorials.

Import Flash

This step is a more problematic step, flash is too smart. In my sense, it has more N to help you optimize and smooth the function of the picture, import, export, generate animation will help you optimize. And for like Sotu, these are not needed, even counterproductive. The feature of the pixel is not smooth, it does not need Anti-alas (anti-aliasing) to play a function. The easy to go wrong step is to generate the component problem.

Let's look at these two pictures:

The one on the left is obviously dislocated a few pixels. A lot of people will ask, in flash processing is the same, and no dislocation, how some graphics in the export of animation will occur dislocation? The reason is this step:

If you create a motion tween on the timeline directly after you import a good pixel graph, you will find a tween graphic symbol in the library, or you can generate an animation. Seemingly no problem, but after the export of the film, often the above errors, such as Sotu is rigorous, do not allow the size of any stretching, I do not know what the process has been stretching, in short, we do not do better.

My approach is to import, right click on the picture, convert it to MC, take a good name, so everything is all right, this MC element no matter how you call, how to export, will not occur dislocation and deformation. Of course, you can also convert to a graphic component in the right click, but I feel that the graphics component this function mm sooner or later to remove him.

Making animations

This link is the key link in flash, you can make what kind of animation depends on your imagination. I initially tried the effect of driving the train, but also ideal, is the first example.

Before this example, to the pixel painting in a general use of the angle to introduce you, that is the legendary 22.6-degree two-point line combination, the following figure:

22.6-degree line smooth and tidy, this is magnified 800 times times the effect, reduced after the color is like this:

So I'm going to move in this form of pixel graph. At this time to create a visual sense of the three-dimensional, it can not be like a plan to move left and right, move up and down, more can not be disorderly move. In the picture magnified 800 times times, we see that, like Pixel is in the direction of 22.6 degrees 2 lattice 2, then for the yellow cuboid, to the direction of its coordinate extension, the change in the coordinates of the flash should be:

x Changes in the 2-y ratio of 1. So if we think of it as a train MC, it's named: Move_train.

The as on the frame should be:

This.onenterframe = function () {
Move_train._x + 2; Move_train._x increments 2
move_train._y++; Move_train._y increments 1
}

In this way, the train moves smoothly along the 22.6-degree line. Some friends want to ask, is not a moving effect, without as, directly in the animation can you?

I began to think so, from the principle, the start and end coordinates of the x,y increment set to 2:1, in the scene to adjust the key frame coordinates. But in practice this is not possible, because the smallest cell of the pixel graph is 1px, and Flash is 0.1px, when the number of frames for the movement through the pixel distance is not evenly, it will be very uneven. So it looks like a cross-country train.

Here, this train tutorial is over, the example of the train in the GIF image is less than 10k, in fact, because of pixel map with color specifications, files are very small, a great advantage ah; The disadvantage is that more memory. This is just a pixel in the flash of a small application, we can play the imagination, create more interesting animation. Flash also began to notice improvements in pixels, and in MX 2004, the ability to generate jagged text has been added, as shown in the figure:

Although there are a lot of precautions to use, but finally is an improvement. Finally, I hope that more friends will be interested in pixel creation ha.