The Artima Developer Community
Sponsored Link

Java Community News
Image Manipulation in Flex

1 reply on 1 page. Most recent reply: Mar 14, 2008 9:22 AM by James Ward

Welcome Guest
  Sign In

Go back to the topic listing  Back to Topic List Click to reply to this topic  Reply to this Topic Click to search messages in this forum  Search Forum Click for a threaded view of the topic  Threaded View   
Previous Topic   Next Topic
Flat View: This topic has 1 reply on 1 page
Frank Sommers

Posts: 2642
Nickname: fsommers
Registered: Jan, 2002

Image Manipulation in Flex Posted: Mar 13, 2008 6:00 PM
Reply to this message Reply
Summary
A frequently called-upon task of rich-client applications is image manipulation. Flex, Adobe's open-source UI framework that targets the Flash runtime, provides a large set of classes for image manipulation. Andrew Alderson reviews the most important ones in a recent article.
Advertisement

Providing the user with some form of image editing capability is a frequent requirement of Web applications. For example, a user may wish to resize or crop an uploaded image, or change an image's color composition.

Traditional Web applications could only provide that capability via a server-side imaging toolkit, such as ImageMagick, increasing a server's compute load and also requiring the user to wait for a round-trip of the image data to see the effects of each edit gesture. Rich-clients UIs, by contrast, can often perform image editing operations entirely in the client's address space, relieving the server as well as providing a more responsive user experience.

Adobe's recently-open sourced Flex toolkit provides an extensive API for image manipulation, written in the ActionScript 3 language. Andrew Alderson reviews the most popular ActionScript 3 imaging classes in a recent article, Image Manipulation in Flex.

Alderson first describes the basic operations of loading and storing an image's data in memory. Having a single variable refer to the image's pixel data, for instance, allows for multiple image representations to exist in limited memory.

Following a description of the basic image loading techniques, Alderson demonstrates a number of useful image manipulation API elements. For example, Flex makes it easy to adjust an image's color composition:

One of the things that you are probably going to want to do when manipulating an image is adjust its color. Within the Flash Player API’s there are a number of ways to do this but no matter which you choose what you are basically doing is changing the red, green and blue (and possibly alpha) values of the image. The two main ways to change the values is to either use a ColorTransform or a ColorMatrixFilter...

You adjust brightness by either scaling or offsetting the color values. You change contrast by changing both with all the values being equal and all of the offsets being equal.

Alderson then describes how to change an image's color saturation, how to convert an image to gray-scale, and how to obtain an image's negative.

Next, Alderson discusses image effects:

There is really only one way to apply effects to your images, a ConvolutionFilter. Like the ColorMatrixFilter, the ConvolutionFilter also uses a matrix to change the image but in this case the matrix can be any size. There are a number of factors that affect performance... The most common matrix you will use is a 3x3 matrix.

Applying effects is basically the same as applying color effects - you create a filter and add it to the filters array of the display object. Here are some common filters (the first two parameters are the dimensions of the matrix and the third is the matrix).

In the article, Alderson shows three effects: embossing, edge detection, and sharpening.

The remainder of the article discusses how to rotate and crop an image, and how to print and save an image's bitmap data.What do you think of Flex's image manipulation capabilities?


James Ward

Posts: 42
Nickname: jlward4th
Registered: Jun, 2006

Re: Image Manipulation in Flex Posted: Mar 14, 2008 9:22 AM
Reply to this message Reply
http://picnik.com is a great example of the kind of image manipulation you can do with a Flex application.

-James

Flat View: This topic has 1 reply on 1 page
Topic: Damien Katz Critiques Erlang Previous Topic   Next Topic Topic: Brian Goetz Introduces Java 7's ParallelArray Class

Sponsored Links



Google
  Web Artima.com   

Copyright © 1996-2019 Artima, Inc. All Rights Reserved. - Privacy Policy - Terms of Use