Effects

Flex provides the opportunity to enrich applications by introducing visual effects with ease.

The html2flex Frontal library joins this opportunity by declaring an own tag to be inserted in the html content; this tag is called effect and its main attribute is the type attribute; this attribute specifies the type of effect to be delivered.

Here is the list of the possible effects to introduce coded by the attribute type:

wipeLeft : WipeLeft
wipeRight : WipeRight
wipeDown : WipeDown
wipeUp : WipeUp
resize : Resize
move : Move
zoom : Zoom
blur : Blur
fade : Fade
glow : Glow
iris : Iris
rotate : Rotate
tween : Tween
dissolve : Dissolve

In the effect tag it is possible to insert all the attributes which can be assigned to the particular effect created; the effect created can be accessed also with the AS code using the ApplicationContext or the ModuleContext with the getComp method and then applying the methods play, playAll, stop, or directly accessing to the Flex effect instance with the property effect.

<html style="height:100%">

    <body style="height:100%">

        <div style="height:100%;width:100%">

            <effect id="eff" type="resize" duration="2000" />

            <effect id="eff2" type="resize" widthTo="100" duration="2000" targets="inp1,inp2"/>

            <script>

                    function warn(idInp:String) {

                        var inp : Object = ctx.getComp(idInp);

                        if(inp.width > 30) inp.width = 30;

                        else inp.width = 300;

                    }

            </script>

            <input id="inp1" type="submit" value="Click Me" onClick="warn('inp1')" effect="resizeEffect:eff"/>

            <input id="inp2" type="submit" value="Click Me" onClick="warn('inp2')" effect="resizeEffect:eff"/><br/>

            <input id="inp3" type="submit" value="Resize All" onClick="ctx.getComp('eff2').play()"/>

        </div>

    </body>

</html>