添加 mouseOver/mouseDown/mouseUp/等。自定义 MXML 组件

发布于 2024-11-30 19:50:35 字数 2412 浏览 1 评论 0原文

我是 Flex 新手,正在将纯 Flash/AS3 应用程序移植到 Flex 4.5

我创建了一个基于 BorderContainer

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    width="160" height="140" >

    <s:Image id="_avatar" enableLoadingState="true" 
        x="0" y="0" width="160" height="120" />

    <s:Label id="_username" x="0" y="125" 
        fontSize="12" fontWeight="bold" /> 

</s:BorderContainer>

我试图在 mouseOver 上添加突出显示/增长效果

,并在 mouseDown 上添加“按下”效果组件:

<fx:Script>
    <![CDATA[
        import flash.filters.*;

        public static const SHADOW:Array = [ new DropShadowFilter(8, 
            80, 0x000000, 0.2, 32, 32, 1, 1, false, false, false) ];
        public static const GLOW:Array = [ new GlowFilter(0xFFFF00, 
            0.5, 36, 36, 1, 1, false, false) ];

        private var _oldScale:Number;

        private function mouseOver(event:MouseEvent):void {
            _oldScale = scaleX;
            filters = GLOW;
        }

        private function mouseDown(event:MouseEvent):void {
            _oldScale = scaleX;
            scaleX *= 0.95;
            scaleY *= 0.95;
            filters = null;
        }

        private function mouseUp(event:MouseEvent):void {
            scaleX = scaleY = _oldScale;
    filters = GLOW;
        }

        private function mouseOut(event:MouseEvent):void {
            scaleX = scaleY = _oldScale;
            filters = SHADOW;
        }

不幸的是,这些方法根本没有被调用。

在纯 Flash/AS3 应用程序中,我会调用它

        addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
        addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
        addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
        addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
        addEventListener(MouseEvent.CLICK, handleMouseClick);

,它会运行良好,但在 Flex 4.5 中,我不知道如何执行此操作。

我还注意到有一个 dropShadowVisible="true" 属性,但不确定它是否/如何用于我的目的。

我不确定 Flex 中是否允许放大/缩小自定义组件,或者我可能应该使用“Flex Effects”(但如何?)并设置 disableLayout="true"

I'm new to Flex and am porting a pure Flash/AS3 app to Flex 4.5

I've created a custom MXML component based on BorderContainer

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    width="160" height="140" >

    <s:Image id="_avatar" enableLoadingState="true" 
        x="0" y="0" width="160" height="120" />

    <s:Label id="_username" x="0" y="125" 
        fontSize="12" fontWeight="bold" /> 

</s:BorderContainer>

I'm trying to add highlighting/growing effect on mouseOver

and "pressed down" effect on mouseDown to that component:

<fx:Script>
    <![CDATA[
        import flash.filters.*;

        public static const SHADOW:Array = [ new DropShadowFilter(8, 
            80, 0x000000, 0.2, 32, 32, 1, 1, false, false, false) ];
        public static const GLOW:Array = [ new GlowFilter(0xFFFF00, 
            0.5, 36, 36, 1, 1, false, false) ];

        private var _oldScale:Number;

        private function mouseOver(event:MouseEvent):void {
            _oldScale = scaleX;
            filters = GLOW;
        }

        private function mouseDown(event:MouseEvent):void {
            _oldScale = scaleX;
            scaleX *= 0.95;
            scaleY *= 0.95;
            filters = null;
        }

        private function mouseUp(event:MouseEvent):void {
            scaleX = scaleY = _oldScale;
    filters = GLOW;
        }

        private function mouseOut(event:MouseEvent):void {
            scaleX = scaleY = _oldScale;
            filters = SHADOW;
        }

Unfortunately those methods aren't called at all.

In pure Flash/AS3 app I'd call

        addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
        addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
        addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
        addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
        addEventListener(MouseEvent.CLICK, handleMouseClick);

and it would work well, but here in Flex 4.5 I don't know how to do this.

Also I've noticed that there is a dropShadowVisible="true" attribute, but not sure if/how it can be used for my purposes.

And I'm not sure if scaling up/down a custom component is allowed in flex or I probably should use "Flex Effects" (but how?) and also set disableLayout="true"?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

随遇而安 2024-12-07 19:50:35

下面两种方法中的任何一种都适用于我在 Flex 4.5 中的情况:

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
width="160" height="140" 
mouseOut="handleMouseOut(event)"
mouseDown="handleMouseDown(event)"
mouseUp="handleMouseUp(event)"
mouseOver="handleMouseOver(event)"
creationComplete="init(event)">

<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        public function init(event:FlexEvent):void {
                /*
                addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
                addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
                addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
                addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
                addEventListener(MouseEvent.CLICK, handleMouseClick);
                */
         }

谢谢你,Mansuro,我无法给你答案,但我已经对你的评论投了赞成票。

Either of 2 methods below work for me in Flex 4.5:

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
width="160" height="140" 
mouseOut="handleMouseOut(event)"
mouseDown="handleMouseDown(event)"
mouseUp="handleMouseUp(event)"
mouseOver="handleMouseOver(event)"
creationComplete="init(event)">

<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        public function init(event:FlexEvent):void {
                /*
                addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
                addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
                addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
                addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
                addEventListener(MouseEvent.CLICK, handleMouseClick);
                */
         }

Thank you, Mansuro, I couldn't give you the answer, but I've upvoted yoyur comment.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文