No less than a pixel--from PS to Flash to the front of the bitwise implementation

By: jingjing Small white

The first time to do the Web game UI, we found that the development of the visual norms basically in the output after the general deviation. Maybe 8630.html "> sometimes the position offset of a few pixels is not a concern for most users, but for us it is quite annoying that the visual specification will become the data of the designer's self reference rather than the end result of the actual online product.

Our design process, basically from PS start, in flash output, the last front-end directly extract the file information production online. Common sense, as long as the control to flash output and PS effect consistent, basic online can be fully realized.

Let's focus on checking the location of PS and Flash.
The basic principle of the Flash game UI to position:

Here take a recent game of the main interface as an example, explain our game of the position relationship. The front-end program is the top-left corner vertex of the entire main interface (0,0) coordinates. Directly in Flash to extract the interface of the upper left coordinates, to locate.
In other words, the key is "find the exact (x,y) coordinates."

The floating layer, ToolTip is located in a separate component in the upper left corner vertex (0,0) coordinates, looking for this coordinate relative (x,y)

Another: Because of flash, the coordinates are with a decimal point, and PS pixels do not have a decimal point, so the data to ensure that the whole number.

Normal Callout:

Visual manuscript &http://www.aliyun.com/zixun/aggregation/37954.html ">nbsp; Standard draft

According to the above labeling, direct Gaga reduction into flash, there are the following dislocation problems:

Red for PS Set the correct line spacing, compared to the deviation of 1-3 pixels, Cumulative deviation is great, the entire page a circle.

1. Flash text positioning Base:

Open Flash, enter a paragraph of text, you will find that the entire text box Flash is more than the actual visual font range in all directions to expand 2 pixels.

The starting point of the coordinate calculation, the coordinate of the original (X,y), becomes the coordinate of (x-2,y-2).

2.PS text: Take the PS14 number font as an example, after the input, the font itself is not 14PX high, only 13PX. (And so on, each font size-1 is its actual height), because there is an empty line of invisible pixels at the bottom: the Underline reserves the position.

Conclusion: When the interface in Flash, the size of the visual word after the import of Flash, the actual size is to the left and right to expand 2 pixels, 3 pixels down. In PS, when we measure the position of a word in the scene, the resulting x,y coordinates each minus 2 pixels, is the correct input flash coordinates. When you encounter the spacing between a text box and a text box, PS measured in the visual spacing, to reduce 2+2+1=5 pixels (not visible but exist), is the Flash text box and text box spacing (2 pixel is the Flash text box up and down each of the extended pixel, 1 pixel is because the PS text invisible underline)

3. Nine Sudoku/Adaptive

Solved 2 Software text difference problem, also may not all be able to target. This is because the interface elements in the bottom of the map is a bitmap, some of the direct production of flash components. One of the components of Flash made by the bottom of the map, must be scattered to ensure that each file (0,0) starting coordinates are indeed in the position it should be, otherwise the coordinates of the whole will appear deviation.

4.BUG

When the above conclusions are confirmed, we output the file and screenshots to compare, and found that in addition to the text box, the edges of the other pixels are a little fuzzy, carefully compared to find that the edge of the 1 pixel transparency blur, expand. This is not what is expected of an interface that requires sharp screen. The data itself is no problem, is the output after the automatic metamorphosis. Is this an irresistible factor of natural and man-made disasters? All our coordinates have no decimal point.

By friends of the predecessors, it is said that this is a bug in Flash, keep all the long width for the whole number, in addition to the text box, all x,y axis coordinates in the original figure plus 0.5. So, finally 100% to achieve from PS to flash output perfect implementation.

Modified before modification

5. Some feedback from the front end

To the above section, flash completes the output proofing. It should be said that the program that directly extracted files and data, there will be no problem. But uphold the spirit of ued, or let the front-end generated a set of test files to roughly encounter the various graphics text nine Sudoku of the arrangement of the final Test. I did find a little trouble.

1PX error occurs in interlaced text

This is because the line spacing in PS has 4 pixels, but according to the text difference adjustment, minus 5, in Flash, the line spacing is 1 pixels. And-1 at the end of the implementation, the default pressed line moves one pixel. If it is-2, the interlace moves 2 pixels. But only the text visual position is moved, not the text box. So there's no effect on the XY axis we're marking. And this problem, if encountered (only the line distance is negative), there is a front-end modification processing, we just need to mark the front end to adjust the requirements.

Summary

1. Annotations are annotated according to the conclusions of step 2.

2. The bottom picture is the AI Flash file, remember to scatter.

3. Except the text box, all component coordinates are mantissa +0.5.

4. There is a negative line leading to the front.

Text pair formula between PS visual dimension and Flash:

PS text (visible) +2px down +3px = Flash text calculation box

For example: PS text (panel) 12th Word 15 line = 3 pixel leading = flash-1 line spacing (flash panel for Line spacing:-1 points)

PS paragraph corresponds to the Flash text box:

Small Tip:ps 12th Word 12 spacing = 0 pixel interval =flash The number of leading points is 0 (but the actual visual two lines appear to have 1PX interval, which is the underlined position)

The above is the summary of the present, flash games just contact, there are not enough, sent up and everyone together to explore and progress together.

PARTNER: Jingjing

Source: http://uedc.163.com/3023.html