Showing posts with label image. Show all posts
Showing posts with label image. Show all posts

Tuesday, 24 May 2011

flex4, how to make an image brighter, i.e. for focus purposes, without modify it


situation

how to make easy(!) modifications in Image components with out modifying their data. The data modification (image modification) requires a lot cpu resources as result low performance.
problem

adobe flex4 AS3.0
how to make an image brighter, i.e. for focus purposes, without modify it

> page: dn
difficulty level

2/10 :)
compatibility

flex4, as3
solution

- drop a Label on the Image component to cover it, clear text property
- on this Label... set as background color the white color
- also set as blendmode the "overlay" value
- also set as backgroundAlpha the value 0.5
- now... on runtime play with "alpha" property of the Label with values 0..400




Sunday, 8 May 2011

Flex: how to make a image cache? (easier way) - REFdn4007673813


situation

how to make a image cache?
problem

adobe flex4 AS3.0 the image component
how to load images save them to cache…
and how apply them to Image components
---
> page by dn
difficulty level

9/10 :(
solution

In order to make a cashe of the photos/images, I do the follow simple way:
- With URLLoader I download the data… the "Complete" event gives me the "data" property… in this property the data of the image is in binary format (don't be afraid). I save this "data" to another variable (or array) of Object type. For this example, I named this variable "downloadData" you will see bellow.
- In order to load the data on a visual component Image, I do the follow code:
myImage.data=downloadData;
attention

no attentions!

How to Cache Images in Your Flex Application - REFdn5077575832

Caching images in your Flex application can greatly improve performance and reduce the overhead of loading external resources.
And I’m not simply talking about using the cacheAsBitmap property to improve rendering performance or the cachePolicy property to speed up animations. I’m talking about caching the actual bitmap data of an image.
To get started, you’ll need a hash map to store the image data. A Dictionary or an associative array will also work just fine.
Loading an image for the first time is the same as usual. You create a new Image object and add a listener for the COMPLETE event:
var image : Image = new Image ();
image.addEventListener (Event.COMPLETE, onImageComplete);

Once the image has finished loading, you add a copy of the bitmap data to the hash map using the image URL as the hash key:
private function onImageComplete (event : Event) : void
{
    var image : Image = event.target as Image;

    if (! imageCache.containsKey (image.source))
    {
        var bitmapData : BitmapData = new BitmapData
            (image.content.width, image.content.height, true);

        bitmapData.draw (image.content);

        imageCache.put (image.source, bitmapData);
    }
}

Now we can use the image as many times as we want without ever having to load it again!
To take advantage of this, you’ll need to check the hash map every time you create a new image (or change the source property) to see if you’ve already cached it:
var image : Image = new Image ();
image.addEventListener (Event.COMPLETE, onImageComplete);

if (imageCache.containsKey (imageURL))
{
    image.source = new Bitmap (imageCache.getValue (imageURL));
}
else
{
    image.source = imageURL;
}

And that’s it!
If you have an application that loads a large number of images you may want to limit the number of cached images to prevent the Flash player memory usage from getting out of hand, but in general caching even several dozen large images only results in a slightly increased footprint.

Sunday, 20 February 2011

Flex4, image component, how to get dimensions of a Image... actual size, applied size etc


problem:
Searching at internet I didn’t find a correct distinction about the available values about the dimensions that Image component gives. Adobe's reference help of course has complete definition of these propoerties... but lets summarize them.

solution definition:
--- Image.width, Image.height
this is the width and height of the component that shows the image
--- Image.measuredWidth, Image.measuredHeight 
these are the actual dimensions of the Image, irregardless the previous dimensions and if the image is scaled
--- Image.contentWidth, Image.contentHeight
these are the dimensions that image have now at the Image component, dimensions as scaled image

Further problem… Many values are returned as 0 zero or NaN
When you assign data to “data” property… the Image component doesn’t do all the do job it must do… you have to give it some time to complete all it's the pending issues… 

Solution... 
EVENT!!! Wait for the event Image’s event “updateComplete” and there… check again if the width property (you want) is NaN or not, using the isNaN function.

The event handler will look like this:

  internal function Handel_imPhoto_updateCompleted(e:Event):void{
                  if (!isNaN(im_photo.measuredHeight))
                          height= im_photo.measuredHeight;
           }

Sunday, 6 February 2011

How to embed images in Actionscript 3 / Flex 3 / Flex 4 in the right way?

situation: 
It is useful to embed images especially for banners. But Flex 4 doesn't provide Library to import your stuff!

problem:
How to embed the images in the swf?!?

solution:
The embed process is very simple, just follow to follow steps:
1. copy your image files where the "src" folder is of your application. the Flex 4 will get these files from there. Of course you may define sub folders to do not mess up.
2. In your class define like the example bellow
    [Embed (source="728x90a.jpg" )] 
    public static const imgData1:Class;
                The 728x90a.jpg is the file name of the image (I didn't use sub folders here)
                The imgData1 is the object where contains the data of the embedded image!
3. Somewhere in your code, load the data into a visual component, like the example bellow
    img1.source=imgData1;
                The img1 is an Image component.
4. That's all... now read my recommendation bellow

!attention!
1. You should compress the images downgrading their quality in order to be small in file size! swf files with huge images are huge for downloading and launching by flash's player!
2. This technique is for small photos, banners and so on. You may use it but it is not recommended at all for application with interfaces and so on, it is not professional solution. The reason is that the application is heavy for launch. Use the Image.source property defining the full url address of the files image instead to embed it.

Tuesday, 1 February 2011

Flex4, I can't get the size (width, height) of the Image component, when it is loaded

problem:
Flex4, I can't get the size (width, height) of a loaded pisture in Image component, when it is loaded from internet (and not only).

situation, what is really happening:
the event for complete download on the Image component is the "complete" event. This event is comming from the SWFLoader ! and because if that you might be can't get the width and the height of the loaded image; because it is not processed yet from the Image component.

solution:
the solution is simple, listen to "resize" event instead of "complete".
For professional handle you should listen both events.

read more about the Image's events (and not only)