Packagexp.controls
Classpublic class ImageBox
InheritanceImageBox Inheritance ContentLoader Inheritance mx.core.UIComponent

The ImageBox control lets you import JPEG, PNG, GIF, and SWF files with a transition effect between image changes and also set a background and border. You can also embed any of these files and SVG files at compile time by using @Embed(source='filename').

Note: Flex also includes the SWFLoader control for loading Flex applications. You typically use the Image control for loading static graphic files and SWF files, and use the SWFLoader control for loading Flex applications.

Embedded images load immediately, because they are already part of the Flex SWF file. However, they add to the size of your application and slow down the application initialization process. Embedded images also require you to recompile your applications whenever your image files change.

The alternative to embedding a resource is to load the resource at runtime. You can load a resource from the local file system in which the SWF file runs, or you can access a remote resource, typically though an HTTP request over a network. These images are independent of your Flex application, so you can change them without causing a recompile operation as long as the names of the modified images remain the same. The referenced images add no additional overhead to an application's initial loading time. However, you might experience a delay when you use the images and load them into Flash Player.

A SWF file can access one type of external resource only, either local or over a network; it cannot access both types. You determine the type of access allowed by the SWF file using the use-network flag when you compile your application. When the use-network flag is set to false, you can access resources in the local file system, but not over the network. The default value is true, which allows you to access resources over the network, but not in the local file system.

When you load images at runtime, you should be aware of the security restrictions of Flash Player. For example, you can load an image from any domain by using a URL, but the default security settings won't allow your code to access the bitmap data of the image unless it came from the same domain as the application. To access bitmap data from images on other servers, you must use a crossdomain.xml file.

The PNG and GIF formats also support the use of an alpha channel for creating transparent images.

MXML Syntaxexpanded Hide MXML Syntax

The <xp:ImagePlus> tag inherits the tag attributes of its superclass, and adds the following tag attribute:

  <xp:XPImagePlus
    Properties
    blockTillLoaded="true|false"
    newEffectTarget="null"
    oldEffectTarge="true|false"
  
    Styles
  
    Effects
    completeEffect="No default"
    
    Events
    ready="No default"
    targetChanged="No default"
  />
  

See also

xp.controls.ContentLoader


Public Properties
 PropertyDefined by
 InheritedautoLoad : Boolean
A flag that indictes whether content starts loading automatically or waits for a clal to the load() method.
ContentLoader
  blockTillLoaded : Boolean
A flag that indicates whether to block loading an image until the current image has completed loading and running its effect.
ImageBox
 InheritedbytesLoaded : Number
The number of bytes of the SWF or image file already loaded.
ContentLoader
 InheritedbytesTotal : Number
The total size of the SWF or image file.
ContentLoader
  completeEffect : Effect
The effect to be played when the image has been loaded
ImageBox
 Inheritedcontent : DisplayObject
This property contains the object that represents the content that was loaded in the ContentLoader control.
ContentLoader
 InheritedcontentHeight : Number
Height of the scaled content loaded by the control, in pixels.
ContentLoader
 InheritedcontentWidth : Number
Width of the scaled content loaded by the control, in pixels.
ContentLoader
 InheritedloaderContext : LoaderContext
A LoaderContext object to use to control loading of the content.
ContentLoader
 InheritedmaintainAspectRatio : Boolean
A flag that indicates whether to maintain the aspect ratio of the loaded content.
ContentLoader
  newEffectTarget : UIComponent
[write-only]
ImageBox
  oldEffectTarget : UIComponent
[write-only]
ImageBox
 InheritedpercentLoaded : Number
The percentage of the image or SWF file already loaded.
ContentLoader
 InheritedscaleContent : Boolean
A flag that indicates whether to scale the content to fit the size of the control or resize the control to the content's size.
ContentLoader
 InheritedshowBusyCursor : Boolean
A flag that indicates whether to show a busy cursor while the content loads.
ContentLoader
 Inheritedsource : Object
The URL, object, class or string name of a class to load as the content.
ContentLoader
 InheritedtrustContent : Boolean
If true, the content is loaded into your security domain.
ContentLoader
Protected Properties
 PropertyDefined by
  _completeEffect : Effect
ImageBox
Public Methods
 MethodDefined by
  
Constructor.
ImageBox
  
load(url:Object = null):void
Loads an image or SWF file.
ImageBox
Protected Methods
 MethodDefined by
  
getBorderMetrics():EdgeMetrics
Returns an EdgeMetrics object that has four properties: left, top, right, and bottom.
ImageBox
  
getLoader():Object
Creates a new loader
ImageBox
 Inherited
getLoaderContext():LoaderContext
Get the loader context
ContentLoader
 Inherited
loadClassObject(cls:Class):void
ContentLoader
 Inherited
loadDisplayObject(disp:DisplayObject):void
ContentLoader
 Inherited
ContentLoader
Events
 EventSummaryDefined by
 Inherited Dispatched when content loading is complete.ContentLoader
 Inherited Dispatched when a network request is made over HTTP and Flash Player can detect the HTTP status code.ContentLoader
 Inherited Dispatched when the properties and methods of a loaded SWF file are accessible.ContentLoader
 Inherited Dispatched when an input/output error occurs.ContentLoader
 Inherited Dispatched when a network operation starts.ContentLoader
 Inherited Dispatched when content is loading.ContentLoader
   Dispatched when content loading is complete and the image is ready.ImageBox
 Inherited Dispatched when a security error occurs while content is loading.ContentLoader
 Inherited Dispatched when a loaded object is removed, or when a second load is performed by the same ContentLoader control and the original content is removed prior to the new load beginning.ContentLoader
Styles
 StyleDescriptionDefined by
  
backgroundAlpha
Type: Number   CSS Inheritance: no
Alpha level of the color defined by the backgroundColor property, of the image or SWF file defined by the backgroundImage style. Valid values range from 0.0 to 1.0. The default value is 1.0.
ImageBox
  
backgroundColor
Type: uint   Format: Color   CSS Inheritance: no
Background color of a component. You can have both a backgroundColor and a backgroundImage set. Some components do not have a background. The DataGrid control ignores this style. The default value is undefined, which means it is not set. If both this style and the backgroundImage style are undefined, the component has a transparent background.

For the Application container, this style specifies the background color while the application loads, and a background gradient while it is running. Flex calculates the gradient pattern between a color slightly darker than the specified color, and a color slightly lighter than the specified color.

The default skins of most Flex controls are partially transparent. As a result, the background color of a container partially "bleeds through" to controls that are in that container. You can avoid this by setting the alpha values of the control's fillAlphas property to 1, as the following example shows:

  <mx:Container backgroundColor="0x66CC66"/>
      <mx:ControlName ... fillAlphas="[1,1]"/>
  </mx:Container>

ImageBox
  
backgroundDisabledColor
Type: uint   Format: Color   CSS Inheritance: yes
Background color of the component when it is disabled. The global default value is undefined. The default value for List controls is 0xDDDDDD (light gray). If a container is disabled, the background is dimmed, and the degree of dimming is controlled by the disabledOverlayAlpha style.
ImageBox
  
backgroundImage
Type: Object   Format: File   CSS Inheritance: no
Background image of a component. This can be an absolute or relative URL or class. You can either have both a backgroundColor and a backgroundImage set at the same time. The background image is displayed on top of the background color. The default value is undefined, meaning "not set". If this style and the backgroundColor style are undefined, the component has a transparent background.

The default skins of most Flex controls are partially transparent. As a result, the background image of a container partially "bleeds through" to controls that are in that container. You can avoid this by setting the alpha values of the control's fillAlphas property to 1, as the following example shows:

  <mx:Container backgroundColor="0x66CC66"/>
      <mx:ControlName ... fillAlphas="[1,1]"/>
  </mx:Container>

ImageBox
  
backgroundSize
Type: String   CSS Inheritance: no
Scales the image specified by backgroundImage to different percentage sizes. A value of "100%" stretches the image to fit the entire component. To specify a percentage value, you must include the percent sign (%). The default value is "auto", which maintains the original size of the image.
ImageBox
  
borderAlpha
Type: Number   CSS Inheritance: no
Alpha level of the color defined by the borderColor property. Valid values range from 0.0 to 1.0. The default value is 1.0.
ImageBox
  
borderColor
Type: uint   Format: Color   CSS Inheritance: no
Color of the border. The default value depends on the component class; if not overridden for the class, the default value is 0xB7BABC.
ImageBox
  
borderSides
Type: String   CSS Inheritance: no
Bounding box sides. A space-delimited String that specifies the sides of the border to show. The String can contain "left", "top", "right", and "bottom" in any order. The default value is "left top right bottom", which shows all four sides. This style is only used when borderStyle is "solid".
ImageBox
  
borderSkin
Type: Class   CSS Inheritance: no
The border skin of the component. The default value is mx.skins.halo.HaloBorder.
ImageBox
  
borderStyle
Type: String   CSS Inheritance: no
Bounding box style. The possible values are "none", "solid", "inset", and "outset". The default value depends on the component class; if not overridden for the class, the default value is "inset". The default value for most Containers is "none".
ImageBox
  
borderThickness
Type: Number   Format: Length   CSS Inheritance: no
Bounding box thickness. Only used when borderStyle is set to "solid". The default value is 1.
ImageBox
 Inherited Type: Class   CSS Inheritance: no
The name of class to use as the ContentLoader border skin if the control cannot load the content.
ContentLoader
 Inherited Type: Class   CSS Inheritance: no
The name of the class to use as the ContentLoader skin if the control cannot load the content.
ContentLoader
  
cornerRadius
Type: Number   Format: Length   CSS Inheritance: no
Radius of component corners. The default value depends on the component class; if not overriden for the class, the default value is 0. The default value for ApplicationControlBar is 5.
ImageBox
  
dropShadowColor
Type: uint   Format: Color   CSS Inheritance: yes
Color of the drop shadow. The default value is 0x000000.
ImageBox
  
dropShadowEnabled
Type: Boolean   CSS Inheritance: no
Boolean property that specifies whether the component has a visible drop shadow. This style is used with borderStyle="solid". The default value is false.

Note: For drop shadows to appear on containers, set backgroundColor or backgroundImage properties. Otherwise, the shadow appears behind the container because the default background of a container is transparent.

ImageBox
 Inherited Type: String   CSS Inheritance: no
The horizontal alignment of the content when it does not have a one-to-one aspect ratio.
ContentLoader
  
shadowDirection
Type: String   CSS Inheritance: no
Direction of the drop shadow. Possible values are "left", "center", and "right". The default value is "center".
ImageBox
  
shadowDistance
Type: Number   Format: Length   CSS Inheritance: no
Distance of the drop shadow. If the property is set to a negative value, the shadow appears above the component. The default value is 2.
ImageBox
 Inherited Type: String   CSS Inheritance: no
The vertical alignment of the content when it does not have a one-to-one aspect ratio.
ContentLoader
Effects
 EffectDescriptionDefined by
  
acompleteEffect
Triggering event: complete
An effect that is started when the complete event is dispatched.
ImageBox
 Inherited Triggering event: complete
An effect that is started when the complete event is dispatched.
ContentLoader
Property detail
blockTillLoadedproperty
blockTillLoaded:Boolean  [read-write]

A flag that indicates whether to block loading an image until the current image has completed loading and running its effect.

The default value is false.

Implementation
    public function get blockTillLoaded():Boolean
    public function set blockTillLoaded(value:Boolean):void
_completeEffectproperty 
protected var _completeEffect:Effect
completeEffectproperty 
completeEffect:Effect  [read-write]

The effect to be played when the image has been loaded

Implementation
    public function get completeEffect():Effect
    public function set completeEffect(value:Effect):void
newEffectTargetproperty 
newEffectTarget:UIComponent  [write-only]

This property can be used as the source for data binding.

Implementation
    public function set newEffectTarget(value:UIComponent):void
oldEffectTargetproperty 
oldEffectTarget:UIComponent  [write-only]

This property can be used as the source for data binding.

Implementation
    public function set oldEffectTarget(value:UIComponent):void
Constructor detail
ImageBox()constructor
public function ImageBox()

Constructor.

Method detail
getBorderMetrics()method
protected function getBorderMetrics():EdgeMetrics

Returns an EdgeMetrics object that has four properties: left, top, right, and bottom. The value of each property is equal to the thickness of one side of the border, expressed in pixels.

Unlike viewMetrics, this property is not overriden by subclasses of Container.

Returns
EdgeMetrics
getLoader()method 
protected override function getLoader():Object

Creates a new loader

Returns
Object
load()method 
public override function load(url:Object = null):void

Loads an image or SWF file. The url argument can reference a GIF, JPEG, PNG, or SWF file; you cannot use this method to load an SVG file. Instead, you must load it using an Embed statement with the source property.

Parameters
url:Object (default = null) — Absolute or relative URL of the GIF, JPEG, PNG, or SWF file to load.
Event detail
readyevent 
Event object type: flash.events.Event
Event.type property = xp.events.Events.READY

Dispatched when content loading is complete and the image is ready.

This event is dispatched regardless of whether the load was triggered by an autoload or an explicit call to the load() method.

The Events.READY constant defines the value of the type property of the event object for an ready event.

The properties of the event object have the following values:

PropertyValue
bubblesfalse
cancelablefalse
currentTargetThe Object that defines the event listener that handles the event. For example, if you use myButton.addEventListener() to register an event listener, myButton is the value of the currentTarget.
targetThe Object that dispatched the event; it is not always the Object listening for the event. Use the currentTarget property to always access the Object listening for the event.