Fx{r} is trying to start the Fx{r} Community! Please join our group on Adobe Groups following this link: http://groups.adobe.com/groups/ab29539ab9.
Fx{r} is now on Twitter too. Follow us @ twitter.com/fx_r!
«
»

ActionScript, Components, How to, MXML

Importing Image With Border in a Panel

Andrei Ionescu | 12.01.09 | Comment?

Table of contents

  1. How To Make an Image With Border
  2. Continuing Image With Border
  3. Importing Image With Border in a Panel
Google Buzz

This article is a follow-up of this two: How To Make an Image With Border and Continuing Image With Border. I’m writing it in order to show you that you can import Image With Border component in a Panel. Mike had some problems using the component so here it is.

To use Image With Border just place the <flexer:ImageBorder> in your panel. This article will show how to use it in MXML. To use it in Actionscript just importing, creating a new object and adding it with addChild method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" width="600" height="570" 
    xmlns:flexer="com.flexer.*">
    <mx:Panel x="10" y="10" width="580" height="550" 
        layout="absolute" title="Image with border">
        <flexer:ImageBorder
            source="http://www.flexer.info/wp-content/uploads/2008/05/imgs/fxr-4_1280x1024.png"
            maxWidth="200" maxHeight="200"
            borderAlpha="0.4"
            borderColor="#FF0000"
            borderThickness="{borderWidth.value}"
            x="10" y="40"
            />
        <flexer:ImageBorder
            source="http://www.flexer.info/wp-content/uploads/2008/05/imgs/fxr-4_1280x1024.png"
            maxWidth="200" maxHeight="200"
            borderAlpha="0.4"
            borderColor="#FF0000"
            borderThickness="{borderWidth.value}"
            x="50" y="250"
            verticalCenter="0"
            horizontalCenter="0"
            />
        <mx:NumericStepper x="114" y="10" width="80" minimum="0" maximum="100" 
            value="10" stepSize="5" id="borderWidth"/>
        <mx:Label x="10" y="12" text="borderThickness"/>
    </mx:Panel>
</mx:Application>

Simple!

The working example is following…

This is it!

Share and Enjoy:
  • Twitter
  • Google Buzz
  • LinkedIn
  • Google Bookmarks
  • del.icio.us
  • Digg
  • Sphinn
  • blogmarks
  • Reddit
  • StumbleUpon
  • Facebook
  • DZone
  • FriendFeed
  • Yahoo! Buzz
  • Yahoo! Bookmarks
  • Slashdot
  • MySpace
  • Add to favorites
ImportImageWithBorder_source
ImportImageWithBorder




Tags: , ,

This post was written by Andrei Ionescu

Views: 5893

related

have your say

Add your comment below, or trackback from your own site. Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

:

:


«
»