A Flash Developer Resource Site

Results 1 to 3 of 3

Thread: <Image> Child for a <button>

  1. #1
    Member
    Join Date
    Sep 2007
    Posts
    31

    <Image> Child for a <button>

    I am building a photographic portfolio for a friend, and I am looking at methods of creating the menu system. I think I have a pretty good design down, but I need to be able to add an image as a child to a custom button component; so that it renders as part of the button component.

    Is this even possible?

    I am reasonably sure that I am going to have to override the updateDisplayList, and/or createChildren methods, any other suggestions would be welcomed.

    The icon function does not work quite like I want. I am considering just creating a custom Canvas component that registers mouseEvents just like a button would. The only problem with this that I see is that the button component is inside the menu component, which is in the root flex file. Is there an easy way to get those mouse events out so the root file can act on them? Would event bubbling work in this case?

    I guess I never understood bubbling, would I do something similar to.

    menuComponent.buttonComponent.addEventListener(Mou seEvent.CLICK, handleClick) ?
    in the root app?

    Thanks for any help, I know it's sort of a long winded rambling question.
    Last edited by EchoFive; 08-07-2008 at 12:33 PM.

  2. #2
    OOP is one letter from OOPS kortex's Avatar
    Join Date
    Aug 2005
    Location
    New Hope, PA
    Posts
    2,668
    Not entire sure if I am understanding what you are trying to do or the resulsts ts you are looking for, but have you looked at things like http://livedocs.adobe.com/flex/2/doc...=00000532.html
    Jeremy Wischusen
    Flash - Flex - LAMP - Web Developer Purple Inc
    AS OOP FAQ-Best Practices Thread | Flashkit OOP Tutorials | Purple Inc (day job) | Blog


  3. #3
    Member
    Join Date
    Sep 2007
    Posts
    31
    Well, to be honest I think I figured out a method to do what I described above, however I am having alot of trouble with getting the layout to work with this.

    Here is the code I am working with:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="0" height="0" xmlns:Components="Components.*"
    creationComplete="init()" horizontalScrollPolicy="off" verticalScrollPolicy="off">
    <mx:Script>
    <![CDATA[

    [Bindable]
    private var mainButtonSize:Number;
    [Bindable]
    private var secondRowSize:Number;
    [Bindable]
    private var thirdRowSize:Number;
    [Bindable]
    private var buttonSpacing:Number;

    //this function takes the size of the component and figures out what size every image in it needs
    //to be to fill the component properly.
    private function init():void {

    buttonSpacing = this.height * .01;

    mainButtonSize = (this.height - (buttonSpacing * 6))/3.88;
    secondRowSize = mainButtonSize * .80;
    thirdRowSize = secondRowSize * .80;

    trace(Math.floor(mainButtonSize + (secondRowSize * 2) + (thirdRowSize * 2) + (buttonSpacing * 6)));

    this.width = mainButtonSize + (buttonSpacing * 2);
    }

    ]]>
    </mx:Script>
    <mx:VBox backgroundColor="0xFFFFFF" height="100%" width="100%">
    <mx:Image source="Valley.jpg" height="{thirdRowSize}" width="{thirdRowSize}" horizontalAlign="center" />
    <mx:Image source="Valley.jpg" height="{secondRowSize}" width="{secondRowSize}" />
    <mx:Image source="Valley.jpg" height="{mainButtonSize}" width="{mainButtonSize}" />
    <mx:Image source="Valley.jpg" height="{secondRowSize}" width="{secondRowSize}" />
    <mx:Image source="Valley.jpg" height="{thirdRowSize}" width="{thirdRowSize}" />
    </mx:VBox>

    </mx:Canvas>
    A few things, I can't get any kind of centering to work with the Images, I would like them to look like this:



    Another problem I encountered was I want spacers that are the height of the buttonSpacing variable between each button. However it seems like spacers have a default minimum height and they are almost always to big. On top of that even though the trace in the init function returns the proper value for the height, the images still run outside the bounds of the component, again it might have to do with the phantom padding.

    Final wierdness is the images in the vbox have some kind of padding around them, I would have expected them to be butted up against each other. That might be the problem I am having with the spacer as well, it could be adding whatever padding I am seeing in with the height of the spacer.

    I don't know if this problem is related, but I did not want to start another thread so I figured it could go here, any help would be very appreciated.
    Last edited by EchoFive; 08-08-2008 at 05:15 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center