Question

I’ve been trying to build a very simple footer for a generic app that “grows” when the user hovers over it and adapts to the app’s width. This simple snippet seems to do the trick:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"
             currentState="normal">

    <fx:Script>
            <![CDATA[
                import mx.events.FlexEvent;
                private const _lipWidth:Number = 8.64;

            ]]>
        </fx:Script>

        <s:states>
            <s:State name="other"/>
            <s:State name="normal"/>
        </s:states>

    <s:Group width="100%" bottom="0" rollOut="currentState = 'normal'" rollOver="currentState = 'other'"> 
        <s:Path id="LargeRibbon" x="0" bottom="0" width="100%" includeIn="other"
                data="M {width - _lipWidth} 0 L {_lipWidth} 0 C 3.951 0 0.149 3.721 0 8.363 L 0 40 L {width} 40 L {width} 8.489 C {width - 0.08} 3.787 {width - 3.92} 0 {width - _lipWidth} 0 Z">
            <s:fill>
                <s:SolidColor color="blue"/>
            </s:fill>
        </s:Path>

        <s:Path  id="SmallRibbon" width="100%" x="0" y="0" includeIn="normal"
                 data="M {width - _lipWidth} 0 L 8.629 0 C 3.951 0 0.149 3.72 0 {_lipWidth} L 0 20 L {width} 20 L {width} 8.489 C {width - 0.08} 3.787 {width - 3.92} 0 {width - _lipWidth} 0 Z">
            <s:fill>
                <s:SolidColor color="gray"/>
            </s:fill>
        </s:Path>
    </s:Group>
</s:Application>

However, if I try to add a shadow to the LargeRibbon path

<s:filters>
    <s:DropShadowFilter alpha="0.15" angle="-90" blurX="2" blurY="2" distance="1" quality="2"/>
</s:filters>

things stop working – more specifically if you start the app, hover over the footer, enlarge the app, and then hover over the footer again LargeRibbon does not seem to properly resize. Would love to know why this is and more generally would love any advice you can spare on whether this group / path combination makes sense or not.

thank you

Answer 1

This code works fine:

<fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            private const _lipWidth:Number = 8.64;

        ]]>
    </fx:Script>

    <s:states>
        <s:State name="other"/>
        <s:State name="normal"/>
    </s:states>

<s:Group width="100%" bottom="0" rollOut="currentState = 'normal'" rollOver="currentState = 'other'"> 
    <s:filters.other>
        <s:DropShadowFilter alpha="0.15" angle="-90" blurX="2" blurY="2" distance="1" quality="2" />
    </s:filters.other>
    <s:Path id="LargeRibbon" x="0" bottom="0" width="100%" includeIn="other"
            data="M {width - _lipWidth} 0 L {_lipWidth} 0 C 3.951 0 0.149 3.721 0 8.363 L 0 40 L {width} 40 L {width} 8.489 C {width - 0.08} 3.787 {width - 3.92} 0 {width - _lipWidth} 0 Z">
        <s:fill>
            <s:SolidColor color="blue"/>
        </s:fill>
    </s:Path>

    <s:Path  id="SmallRibbon" width="100%" x="0" y="0" includeIn="normal"
             data="M {width - _lipWidth} 0 L 8.629 0 C 3.951 0 0.149 3.72 0 {_lipWidth} L 0 20 L {width} 20 L {width} 8.489 C {width - 0.08} 3.787 {width - 3.92} 0 {width - _lipWidth} 0 Z">
        <s:fill>
            <s:SolidColor color="gray"/>
        </s:fill>
    </s:Path>
</s:Group>

What about the reason why it is not working with placing filter in LargeRibbon directly I suggest it is some kind of bitmap caching issue.