Recently, I have got a very strange bug with the radial gradient. Unfortunately, I could not find a solution. I built a project to demonstrate the problem (you can download it below). The code is from another large project that used to work correctly in Flash Professional CS6 in August 2013. I now use Flash Professional CC. The version does not matter. I tried with both versions and I still have the same problem. Meanwhile, I updated the AIR and I was wondering if updating it could have been a problem. The demo project is only in ActionScript 3.0. The target Flash Player version does not seem to have an influence on the results. I decided to build a demo project in the simplest form to demonstrate the problem and also make sure that I isolate the precise variables that influence the result.
The bug and symptoms:
Although it seems to have been working correctly in last August, drawing radial gradient circles with transparency now creates patterns mathematically defined. The radial gradient is created on a movie clip circle with alpha 100% at the center and alpha 0% on the edge.
The results are variable. They generally make patterns of rectangle areas with the dots visible and inversed circles' areas with visible dots. See picture below for a preview. Sometimes, there are only rectangles of visible dots.
Sometimes, the dots are drawn only on the left part of the screen (about 75% of the screen width). In addition, there are dots randomly drawn on the remaining 25% of the screen at the right). It looks like, the size of the dot influences whether or not they will appear). The bigger the dot, the more chances it could be drawn. As if there were a threshold. However, what I find very weird is the fact that dots with the same size are drawn in some areas and not in others. And the areas seem mathematically defined as you can see on the picture below.
On the edge of the visible and invisible areas, the dots with many pixels (if you increase the scale of the movie clip) could be cut in the middle. They are partly displayed.
Another issue I noted about the display problem does not seem related to the drawing method. Whatever the method, the problem is the same. Formerly, I used addChild() to add the movie clips (the dot clip) to a parent clip. Then, I converted the parent clip to a bitmap. Because I thought this method could cause a problem with the children, I decided to use the BitmapData.draw() function to draw each movie clip. In both cases, the result is exactly the same. That made me think the problem could be closer to the bitmap memory surface.
Picture a typical result with the radial gradients.
The solution:
At the moment, I cannot see any solutions. After several attempts and variations of the code, I came to the conclusion that the source of the problem is not related to my code, but might be related to the Adobe software.
Below, you will find the demo project to download as a ".fla" file and a preview of the code on the forum for your convenience. At the moment, I believe the source of the problem is out of my control. Try the code and let me know what kind of results you get and if you see a problem with the code and please share your results.
Specs:
Windows 7, 64 bits
Flash Professional CC et CS6
ActionScript 3.0
Target Flash Version 11.4, but any version caused the problem
Flash Player Version: 11.7.700.169
Hardware accelleration (Publish Settings): The three options gives the same result.
To download the demo project (contains the dot movie clips)
https://www.dropbox.com/s/glf81vvr8i2lowe/RadialGradientBug_v1_00.fla
Here is the project's code embedded in the .fla
/*
Test application to debug a problem with the display of radial gradients Flash, ActionScript 3.0.
This application displays a series of dots on the screen and produces two different results.
The dots are MovieClip objects.
1. If we use the clip with the solid fill, the dots are displayed correctly.
2. If we use the clip with the radial gradient fill, some dots are not displayed. the
dots displayed make a mathematic pattern on the screen. Different patterns have
been produced depending of the parameters.
Originally, the Dot movie clips were added with addChild() to a parent movie clip. The parent
movie clip was then converted to bitmap after. This new method below for drawing each Dot
individually produced the same results as originally.
In another test, it has been noted that dots scaled to many pixels in diameter could be cut in the
middle. They were partially drawn on the edge of the pattern (visible / not visible). The problem
could be more related to the bitmap then the movie clip itself.
Other shapes with radial gradient were tested and they also caused the same problem.
*/
import flash.display.MovieClip;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.geom.Matrix;
var screen_width:int = stage.stageWidth;
var screen_height:int = stage.stageHeight;
var ClipBitmapData:BitmapData = new BitmapData(screen_width, screen_height, true, 0x000000);
/*
DEBUGGING NOTE:
"ClipDot_Gradient" is the clip that causes the bug. It has a radial gradient.
"ClipDot_Solid" works correctly and has no gradient. Just a solid color.
To test, comment and uncomment the line below.
*/
var clipdot:MovieClip = new ClipDot_Gradient(); // Buggy. 1 pixel gradient circle (alpha 1.0 at center and alpha 0.0 outside).
// var clipdot:MovieClip = new ClipDot_Solid(); // Correct. 1 pixel solid color circle.
var dot_distance:int = 6;
for ( var pos_y:int = 0; pos_y < screen_height; pos_y += dot_distance )
{
for ( var pos_x:int = 0; pos_x < screen_width; pos_x += dot_distance )
{
clipdot.x = pos_x;
clipdot.y = pos_y;
// Scenario 1.
// Produces a circle alike pattern.
clipdot.scaleX = clipdot.scaleY = 1.0;
// Scenario 2.
// Produces other patterns depending of the parameters.
//const alpha_scale:Number = pos_y; // Buggy. Alway return 1 for clipdot.scaleX. Don't know why. Use "var" instead of "const".
var alpha_scale:Number = pos_y;
var scale_factor:Number = 1.0;
// clipdot.scaleX = clipdot.scaleY = (1.0 + alpha_scale / 100.0) * scale_factor;
var draw_matrix:Matrix = new Matrix();
// Position the clip on the bitmap.
draw_matrix.translate(clipdot.x, clipdot.y);
// Scale the clip. The scale influences how the clip is shown.
draw_matrix.scale(clipdot.scaleX, clipdot.scaleY);
// Draw the clip to the bitmap. So far, no errors have been displayed in the console. We assume
// the "draw" function works correctly, but the image does not display at some positions
// based on a pattern that seems to be created by the Flash software.
try
{
ClipBitmapData.draw(clipdot, draw_matrix, null, null, null, true);
}
catch(e:Error)
{
trace("ERROR: draw bitmap: " + e.toString());
}
}
}
// Create the bitmap and add it to the stage to show the result.
var FinalBitmap:Bitmap = new Bitmap(ClipBitmapData, "auto", false);
addChild(FinalBitmap);
Regards,
Sebastien
4
Replies
AdChoices