<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/27/setting-effects-with-actionscript-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical"
		verticalAlign="middle"
		backgroundColor="white"
		creationComplete="init();" viewSourceURL="srcview/index.html">

	<mx:Script>
		<![CDATA[
			import mx.effects.easing.*;
			import mx.effects.Fade;
			import mx.effects.Rotate;

			private var fade:Fade;
			private var rotate:Rotate;

			private function init():void {
				// Fade effect
				fade = new Fade();
				// Rotate effect
				rotate = new Rotate();
				rotate.angleFrom = -180;
				rotate.angleTo = 0;
				rotate.easingFunction = Elastic.easeInOut;
				rotate.duration = 2000;

				img.setStyle("showEffect", rotate);
				img.setStyle("hideEffect", fade);
			}
		]]>
	</mx:Script>

	<mx:ApplicationControlBar dock="true">
		<mx:Form styleName="plain">
			<mx:FormItem label="visible:">
				<mx:ToggleButtonBar id="toggleButtonBar"
						itemClick="img.visible = event.item.data;">
					<mx:dataProvider>
						<mx:Array>
							<mx:Object label="Show" data="true" />
							<mx:Object label="Hide" data="false" />
						</mx:Array>
					</mx:dataProvider>
				</mx:ToggleButtonBar>
			</mx:FormItem>
		</mx:Form>
	</mx:ApplicationControlBar>

	<mx:Image id="img"
			source="@Embed('assets/flashplayer_icon.jpg')"
			width="100"
			height="100" />

</mx:Application>