Missing borders in Flash
12 March, 2006 | Filed under “Flash”
Note: This tutorial was originally written for Macromedia Flash MX Professional 2004, v. 7.2 (4.0.0.032). It was last tested with Flash Player 6 in Safari 2.0.3 (417.8) on Mac OS X 10.4.4.
The problem
Did you ever wonder where the borders on the right hand side and on the bottom of your Flash movie did go? Figure 1 shows an example. Of course, what the eye does not see, the heart does not grieve over. But even if you have never experienced the scenario,
do read on. When it
does happen, you here have the means to battle it.
Fig. 1. Screendump showing missing borders in a Flash movie.
A prescribed solution
Initially, you will reproduce the problem to learn what not to do. Then you will find a foolproof method to avoid the problem.
1. Open Flash and create a new document, e.g., 160 pixels wide by 60 pixels tall.
2. With the rectangle tool draw a box on the stage using a solid 1 pixel border and no fill (Figure 2).
Fig. 2. Rectangle parameters.
3. Position the rectangle upper left – mimicking the dimensions of the stage (Figure 3).
Fig. 3. The rectangle describes the final movie dimensions.
4. Zooming in on the lower right corner of the stage, it becomes evident that the lines constituting the borders of the rectangle have rounded end points (Figure 4; the right hand side line is selected). Granted, this does not pose a (visual) problem with 1 pixel lines and borders (and as such, corners).
Fig. 4. Magnified view of a rectangle corner.
5. Now, publish the movie and view it in a browser. What do you see? If you use anything like my setup, Figure 1 repeats itself. And it is all in the rounded lines. Flash makes some weird calculations and throws the right and bottom lines to the winds (did you ever notice that Flash gives you the same width/height both with and without borders?). To circumvent this, do as follows:
6. Remove the existing rectangle.
7. With the rectangle tool draw a box on the stage using no border at all but with the fill colour you want the final border to have (Figure 5).
Fig. 5. Revised rectangle parameters.
8. As before, position the rectangle upper left – mimicking the dimensions of the stage (Figure 6).
Fig. 6. The rectangle again describes the final movie dimensions.
9. On the same layer and with the rectangle tool, draw a 2nd box on the stage using no border, only with a fill colour (any colour goes except the border colour).
Important: Draw the rectangle away from the stage where no part of it touches the 1st rectangle.
10. With the 2nd rectangle selected, position it one pixel in and down from the upper left hand corner and give it a width and a height both 2 pixels less than the stage dimensions (Figure 7). Said differently: Drop the 2nd rectangle on top of the 1st and contract 1 pixel on every side as compared to the rectangle underneath (Figure 8). Needless to say, for wider borders adjust the dimensions of the upper rectangle.
Fig. 7. Dimensions of the contracted topmost rectangle.
Fig. 8. Stage view of the sandwiched rectangles, the topmost selected.
11. Deselect everything by clicking outside the stage.
12. Reselect the upper rectangle by clicking on it.
13. Delete the upper rectangle. Flashwise this also removes the centre portion of the lower rectangle leaving a 1 pixel border around the stage (Figure 9).
Fig. 9. The stage with a 1 pixel border.
14. Comparing Figure 4 to Figure 10 it is evident that the round corners are now a thing of the past.
Fig. 10. A square corner does it! (Enlarged view)
15. Publish the movie.
16. Problem solved. Borders as ordered.
Fig. 11. Screendump showing a Flash movie with borders intact.
Update: Commencing with the 8th incarnation of Flash, it is possible to specify different geometries for lines (and as such, corners). At long last, lines with square/butt caps can replace the round caps (which are still the default setting, mind you).
