The Effect and Comments

In this effect, we use families of planar curves to create and save interesting images. We show how to draw a DisplayObject to a BitmapData and how to save an image from SWF via FileReference.save method. Click the screen shot below to open the effect in a new window:

Download

  • Download 'as' and 'fla' source files corresponding to this effect: curves.zip

Comments

We hard-coded in our application several families of planar parametric curves of the form:

x = f(a,b,t), y = g(a,b,t).

For each curve in each family the parameter t changes in a fixed range but the values of the constants a and b depend on the positon of the sliders. At each given time, as the user moves the sliders, we plot only one curve in a Shape 'graph'. 'graph' is not on the Display List. Instead, 'graph' (or more precisely a Sprite that contains it) is drawn into a BitmapData object. This BitmapData object is assigned to a Bitmap that is on the Display List. This way, we can plot any number of curves without slowing down the application. In order not to clutter the drawing board, we apply a ColorTransform to our BitmapData that slowly fades out older curves. Color for each curve is chosen randomly from pastel colors. Once you download source files, you can easily experiment with different, perhaps more interesting, color schemes.

To save the image to the user's machine, we use a custom class BitmapSaver. The class uses new to Flash Player 10 method, FileReference.save to save images to the user's file system. Since we are saving image files, we use the JPGEncoder and PNGEncoder AS3 classes which are available as a part of the as3corelib project: as3corelib. In is self-explanatory from our source code how to use the BitmapSaver class.

We also use our custom VerticalSlider class which is light-weight and gives smoother performance than the slider component. You can find full description of the class in our earlier tutorial: A Custom HorizontalSlider AS3 Class in Action: Applying Color Tints to a Photo.

Another tutorial that is very relevant to what we do in this effect is: Fading Trail Effect for Flash AS3 Particle Animations - a Simple Example. The latter tutorial explains drawing a DisplayObject into a BitmapData object and the fading out effect.

In our previous work on parametric curves, we used a very different approach. We didn't draw curves to a bitmap, so the number of curves that could be displayed at one time was very limited and there was no saving capability. In that previous version, we provided a tool for finding interesting families of parametric curves. If you are mathematically inclined, you may want to check it out: Parametric Art Gallery - A Visual Experiment in AS3.

Back to Flash CS4 Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.