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>