Img

From Frontal Wiki

Introduction to the img tag

The "img" tag is used for pulling images, SWFs and Flash library symbols into the Frontal document. The basic format of this tag is:

<img src="" />

where src is set to the URL of the image or SWF to include. For example:

<img src="http://www.frontalcode.com/assets/images/image_1.jpg" />

We can also include a symbol using the symbol attribute like so:

<img symbol="MyMovieClip" />

Implementation

"img" is a visual element implemented by the ContainerImage class which extends the Container class described for the "div" tag.

Properties

In addition to the Container class's properties, ContainerImage adds these:

• image: The current DisplayObject being displayed be it a symbol pulled from a Flash library, an image or a SWF.
• imageIsSymbol: true if image refers to a symbol otherwise false for images and SWFs.
• imageSrc: The name or URL used to identify the image via the "src" attribute or the "symbol" attribute.
• loadingImage: The image being loaded for this object. It may be the initial load of the image or it may be an image being loaded to replace the currently loaded image. In any case, if non-null then an asset is being loaded.
• loadingImageIsSymbol: See imageIsSymbol.
• loadingImageSrc: See imageSrc.

Methods

It adds these methods:

• preloadImage: This method allows any number of images to be pre-loaded with this object. This is to support efficient JavaScript-like image swapping on rollover as we'll show in an example. Note that there is not a commensurate function to preload symbols. This is because they are either immediately available from the current Flash library or are dependent on loading an external asset library first. It takes the following parameter:
  • src: The URL of the image or SWF to pre-load.

These attributes are reserved for use by the img tag:

• src: The source URL for an image or SWF.
• symbol: The name of a symbol exported from the Flash library in the main SWF or in a SWF loaded with the include tag.

Styles

These styles are particular to the img tag:

• base-url: This style behaves in a cascading way and so need not be applied directly to the "img" tag but perhaps to the "document" tag.
• allow-smoothing: this style indicates that if the image is scaled then a smoothing operation should be applied to it. (See the Flash documentation for more information.) While this style can affect performance, the effect is so good that it's usually worth it. But see the discussion on permissions of external assets below.
• reset-go-to-label: If the img tag is showing a symbol or SWF and gets a reset event, then the playhead will be set at the label or frame index specified by this style.
• reset-go-to-and-play: See the "reset-go-to-label" style. This style determines if the after reset, the symbol or SWF will be played or stopped.
• go-to-label: Whenever this img tag is rendered (see the rendering process in the advanced topics), this style will cause the symbol's or SWF's playhead to be sent to this label.
• go-to-and-play: Used in conjunction with the "go-to-label" style, this determines if the movie will be played from the label or left stopped at the label.
• reset-go-to-label: Similar to the go-to-label style but used when the img is reset. (An img would be reset for example when it is beng managed by a manager tag.)
• reset-go-to-and-play: Used in conjunction with the "reset-go-to-label" style, this determines if the movie will be played from the label or left stopped at the label.
• resize-scale: One of either "none", "stretch", "showall" or "showmost." See the section "Resizing Images" below.
• resize-scale-origin: One of "left," "center" or "right" and "top," "middle" or "bottom."
• check-policy-file: This style is used for getting permissions for external assets. See the section below for more details.
• policy-file-url: This style is used for getting permissions for external assets. See the section below for more details.
• load-in-current-app-and-sec-domains: This style is used for getting permissions for external assets. See the section below for more details.
• progress-includes-all-assets: When a loader bar is applied to an img tag or to a parent of an img tag, then the img tag will need to report its progress. Since an image may have multiple assets (from changing the value of the "src" attribute or calling preloadImage) then its progress could either be considered the progress in loading the currently viewable image or SWF or the progress of loading all of the images and SWFs associated with it. This style determines that behaviors. By default it is false. For more information on loaders see the Advanced Topics section.

Resizing Images

Setting a width and height on an "img" tag will have different effects on the image depending on the value of the resize-scale style. By default the style is set to "none" which means the image will not be scaled based on the width and height styles. For layout purposes though, the width and height are important. For example, here we see how the image is not scaled but the placement of the following red div is based on the specified height.

<img src="http://www.frontalcode.com/assets/images/image_1.jpg" style="width: 100px; height: 100px;" />
<div style="width: 100px; height: 100px; background-color: red;" />

If we want the image to fit exactly into the dimensions we give to the img tag, then we want to set the resize-scale style to "stretch". Here's the same example but with that style set.

<img src="http://www.frontalcode.com/assets/images/image_1.jpg" style="width: 100px; height: 100px; resize-scale: stretch;" />
<div style="width: 100px; height: 100px; background-color: red;" />

Notice that the image is distorted because the image is not a square. This is probably not what you want. Frontal provides a few more values for the resize-scale style to help with this scenario. These are "showall" and "showmost" as in this example.

<img src="http://www.frontalcode.com/assets/images/image_1.jpg" style="width: 200px; height: 200px; resize-scale: showall;" />
<img src="http://www.frontalcode.com/assets/images/image_1.jpg" style="width: 200px; height: 200px; resize-scale: showmost;" />

Notice that the first image has been scaled down so that its longest side fits in the 200x200 pixel square while the second image has been scaled down so that its shortest side fits in the square.

For the second image in our example, we're seeing the whole image because we have not specified that overflow should be hidden. Let's add the style "overflow: hidden;" to the second image.

Now we're confronted with the issue of placing the scaled image inside of the 200x200 pixel square. We could use left and top styles to simply move the entire img tag around or we could use the resize-scale-origin to do some more rudimentary placement. With this style, we can position the image to the left, center or right as well as to the top, middle or bottom. For example, let's pin the first image to the bottom and the second image to the center middle:

<img src="http://www.frontalcode.com/assets/images/image_1.jpg" style="width: 200px; height: 200px; resize-scale: showall; resize-scale-origin: bottom;" />
<img src="http://www.frontalcode.com/assets/images/image_1.jpg" style="width: 200px; height: 200px; resize-scale: showmost; resize-scale-origin: center middle;" />

Of course this functionality is dependent on us being able to correctly determine the dimensions of the image, Flash SWF or Flash library symbol that we are displaying. By default, for an image we use its actual dimensions - pretty straightforward. For a Flash SWF, we use its published dimensions (which may vary from the actual display dimensions). And for a Flash library symbol, we use whatever the width and height are at the time we do the calculations. (This can be particularly problematic. Consider a movie clip of a rotating square - its dimensions are changing with every frame.)

To better control the calculation of these dimensions, Frontal supports an interaction named getImageDimensions. It has these pre-defined variables:

• image: An instance of the Flash DisplayObject class that represents the loaded image, Flash SWF or Flash library symbol.
• src: The string used to identify the image, i.e., the URL or library linkage.
• isSymbol: This is true if the image is a Flash library symbol (and so loaded with the "symbol" attribute on the 'img' tag) otherwise it is false.

This interaction should return an Object with "width" and "height" properties.

For example, the natural dimensions of the image in this example is 640 by 480 pixels. In our second 'img' tag, we have manually set it to be 320 by 240 pixels. Note how the display is affected.

<style><![CDATA[
	img
		{
			width: 160px; 
			height: 120px; 
			resize-scale: showmost; 
			overflow: hidden;
		}
]]></style>
<img src="http://www.frontalcode.com/assets/images/image_10.jpg" />
<img getImageDimensions="return { width: 320, height: 240 };" src="http://www.frontalcode.com/assets/images/image_10.jpg" />

JavaScript-Like Image Rollovers

It is very typical in JavaScript to build a rollover behavior by swapping out separate images on rollover. Frontal supports a similar mechanism. The basic idea is simply to change the values of the src or symbol attributes as needed. For example:

<img src="http://www.frontalcode.com/assets/images/image_1.jpg" onMouseOver="sA('src','http://www.frontalcode.com/assets/images/image_2.jpg');" onMouseOut="sA('src','http://www.frontalcode.com/assets/images/image_1.jpg');" />

The same thing may be done using the "symbol" attribute or even a combination of the "src" and "symbol" attributes. In that case, the unused attribute should be cleared when not needed using code like "sA('src',undefined);" and "sA('symbol',undefined);"

Permissions and External Assets

It is often the case that we want to work with symbols or images loaded from domains other than the one hosting the Frontal definition. For example, if the Frontal renderer is delivered from frontalcode.com, it is likely that we want to use images from another domain, let's say "loc.gov." This is normally fine for images and we can simply write something like this:

<img src="http://www.loc.gov/rr/scitech/SciRefGuides/images/einstein.jpg" />

A problem occurs though if we apply a style that requires doing more with the image than just viewing it. For example, the style "allow-smoothing" requires a deeper exploration of the image's contents and in such a case, Flash requires that the hosting domain grant permission to do this. If permission is not granted, then the style cannot be applied. To see the affect of this, paste this into the online workspace. Notice how pixelated the enlarged image is:

<img src="http://www.loc.gov/rr/scitech/SciRefGuides/images/einstein.jpg" style="allow-smoothing: true; width: 100%; height: 100%; resize-scale: showall; resize-scale-origin: center middle;" />

Permission is granted by the hosting domain via a crossdomain.xml file. It is typically placed at the root level of a website and has details about which domains have permissions to manipulate content being served. Here is one that grants access to everyone:

<?xml version="1.0" ?>
<cross-domain-policy>
    <allow-access-from domain="*"/>
</cross-domain-policy>

There are a few styles to help get permissions for external assets. The first is "check-policy-file." We apply this to the "img" tag and if it is true then once any progress is made in downloading an external asset, then we request the policy file from the domain that the asset is being taken from. (We wait till there is some progress to account for situations where the final URL of the asset may be transformed by any number of redirects first.) So for example, if we write this:

<img src="http://www.loc.gov/rr/scitech/SciRefGuides/images/einstein.jpg" style="check-policy-file: true;" />

then as soon as the JPG begins downloading, we will request a policy file from "http://www.loc.gov/crossdomain.xml."

This can be a problem though since the policy file does not always live at the top of the asset's domain. In this case, you can use the style "policy-file-url" to specify where to look for the policy file. Just be sure that it's at a level equal with or higher than the asset. (See the Flash documentation for more details.) For example:

<img src="http://www.loc.gov/rr/scitech/SciRefGuides/images/einstein.jpg" style="check-policy-file: true; policy-file-url: http://www.loc.gov/rr/scitech/SciRefGuides/crossdomain.xml;" />

When loading an external SWF, there are also namespace and security options that Flash provides for allowing the loaded and loading SWFs to share Actionscript namespaces and security contexts. To load an external SWF in the current application and security domains then add the style "load-in-current-app-and-sec-domains: true;" to the "img" tag. (We will see this again with the "include" tag.) See the Flash documentation for the LoaderContext class for more details.

Loading SWFs with the img tag also employs a different security mechanism. Please see the Flash documentation for the Security class to understand it.

Using an Img Tag as a Container

The img tag is a special kind of "div" tag and so inherits the behaviors of the div tag. This includes the ability to contain other tags. For example, here a text tag is inside of an img tag:

<img src="http://www.frontalcode.com/assets/images/image_1.jpg">
    <text style="color: white;">This text is inside the img tag.</text>
</img>

Using the Img Tag to Create Buttons

In our discussion on style sheets, we've seen how certain pseudo-class like :link, :visited, :disabled, :hover, :active, :selected and :focused can be used to style a link based on its current state. We can do something similar with images with the styles "go-to-label" and "go-to-and-play."

First we note that the img tag is what we use in Frontal to pull in movies from a Flash library or external SWFs and that both of these have main timelines. By adding frame labels to these main timelines then, we have a way to synchronize a movie with some events. In the section on scrollbars, we asked how we were able to make the scroll buttons interact with the rest of the scrollbar controls and this is how.

So let's dissect that example a bit but just focusing on a single button. Run the following code sample:

<include rel="assets" type="application/x-shockwave-flash" src="http://www.frontalcode.com/assets/swfs/assets.swf" />
<img symbol="MyButton" style="scale: 4;" />
<img symbol="MyButton" style="scale: 4; top: 40px; disabled: true;" />

In this case, the MyButton symbol is defined in the library of the external asset SWF loaded with the "include" tag. But what have we done to add the interactions? The answer is in the Frontal default style sheet:

img:link { go-to-label: link; }
img:visited { go-to-label: visited; }
img:selected { go-to-label: selected; }
img:focus { go-to-label: focus; }
img:hover { go-to-label: hover; }
img:active { go-to-label: active; }
img:disabled { go-to-label: disabled; }

Here we've mapped each of the pseudo-classes to same-named frame labels. If we were to look into the MyButton movie then on its timeline we'd see these labels and if we moved the play head to each one, we'd see the state of the button for that pseudo-class.

In this example, a change in the pseudo-class of an img results in a call to "gotoAndStop" on the movie. If we wanted it to play from that frame (and so to do an animation) then we'd set the style "go-to-and-play" to true. (For even more complex animations, we would probably use interactions.)