Flex 4 Effect Example: Sliding text using the Move Effect
Line Break
Author: Arjan (47 Articles) - Author Website
Arjan is a SAP Consultant specialized in ABAP and Front End development techniques like Web Dynpro, Adobe Interactive Forms, Flex and AIR. In his free time he likes to create examples for Flex-Blog and other applications using Flex, AIR and PHP. Other hobbies are movies and music. He is also the co-owner of Flex-Blog.com.
Flex 4 comes with a bunch of standard effects you can use to create some cool animations in your application. In this example, I wanted to slide a text in and out again.
Here’s a preview of what we are going to create:
First of all, we are going to use 2 different instances of the Move effect to get the bahaviour we want. The first one is going to take care of sliding the text in, the second one is going to slide the text out:
1 2 3 4 5 6 | <fx:Declarations> <s:Move id="moveIn" duration="1000" xFrom="500" xTo="90" effectEnd="moveInEnd(event)"/> <s:Move id="moveOut" duration="1000" xFrom="90" xTo="-500" effectEnd="moveOutEnd(event)"/> </fx:Declarations> |
As you can see, both instances have event listeners on the effectEnd event, lets create those:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | /** * Triggered when moveIn effect finishes * */ private function moveInEnd(event:EffectEvent):void { // Create new timer with showingTime duration (2000ms / 2sec) timer = new Timer(showingTime); // Add event listener to the TimerEvent.TIMER event timer.addEventListener(TimerEvent.TIMER, handleTimerTick); // Start the timer timer.start(); } /** * Triggered when moveOut effect finished * */ private function moveOutEnd(event:EffectEvent):void{ // Create new timer with notShowingTime duration (10ms) timer = new Timer(notShowingTime); // Add event listener to the TimerEvent.TIMER event timer.addEventListener(TimerEvent.TIMER, handleTimerTick); // Start the timer timer.start(); } |
Some global variables and the initialize function:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | import mx.events.EffectEvent; // Timer variable private var timer:Timer; // Time to show the text private var showingTime:Number = 2000; // Time to wait until the text is shown again private var notShowingTime:Number = 10; /** * Initialize app. * */ private function init():void { // Set message visible myMessage.visible = true; // Create first timer timer = new Timer(showingTime); // Add event listener timer.addEventListener(TimerEvent.TIMER, handleTimerTick); // Start timer timer.start(); } |
The event listener for the timer variable, triggered when the timer “ticks”:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /** * Triggered when the timer ticks * */ private function handleTimerTick(event:TimerEvent):void { // Remove event listener, will be added again // (we don't need more than one, will cause strange behaviour) timer.removeEventListener(TimerEvent.TIMER, handleTimerTick); // Toggle message visibilty based on current visibility // (visible == true becomes visible is false and // visible = false becomes visible is true) myMessage.visible = !myMessage.visible; } |
The layour for this example, just a bordercontainer with rounded corners with a Label inside it. Notice that the label has the showEffect and hideEffect declared, they’re pointing at the Move effect instances we declared in the beginning. By toggling the visibility of the label, these effects are being triggered. Furthermore, the label is clickable and opens a URL when the user clicks on it.
1 2 3 4 5 6 7 8 | <s:BorderContainer cornerRadius="5" width="450" height="30"> <s:Label x="90" id="myMessage" text="Hello from www.Flex-Blog.com! I'm Clickable!" fontWeight="bold" width="100%" height="100%" verticalAlign="middle" buttonMode="true" useHandCursor="true" visible="false" maxDisplayedLines="1" click="navigateToURL(new URLRequest('http://www.flex-blog.com'), '_blank')" showEffect="{moveIn}" hideEffect="{moveOut}"/> </s:BorderContainer> |
Here’s the result again, view source is enabled.
Here’s the complete source code for this example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | <?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" initialize="init()" width="450" height="50" xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html"> <fx:Declarations> <s:Move id="moveIn" duration="1000" xFrom="500" xTo="90" effectEnd="moveInEnd(event)"/> <s:Move id="moveOut" duration="1000" xFrom="90" xTo="-500" effectEnd="moveOutEnd(event)"/> </fx:Declarations> <s:layout> <s:VerticalLayout paddingLeft="0" paddingTop="5" paddingBottom="5"/> </s:layout> <fx:Script> <![CDATA[ import mx.events.EffectEvent; // Timer variable private var timer:Timer; // Time to show the text private var showingTime:Number = 2000; // Time to wait until the text is shown again private var notShowingTime:Number = 10; /** * Initialize app. * */ private function init():void { // Set message visible myMessage.visible = true; // Create first timer timer = new Timer(showingTime); // Add event listener timer.addEventListener(TimerEvent.TIMER, handleTimerTick); // Start timer timer.start(); } /** * Triggered when the timer ticks * */ private function handleTimerTick(event:TimerEvent):void { // Remove event listener, will be added again // (we don't need more than one, will cause strange behaviour) timer.removeEventListener(TimerEvent.TIMER, handleTimerTick); // Toggle message visibilty based on current visibility // (visible == true becomes visible is false and // visible = false becomes visible is true) myMessage.visible = !myMessage.visible; } /** * Triggered when moveIn effect finishes * */ private function moveInEnd(event:EffectEvent):void { // Create new timer with showingTime duration (2000ms / 2sec) timer = new Timer(showingTime); // Add event listener to the TimerEvent.TIMER event timer.addEventListener(TimerEvent.TIMER, handleTimerTick); // Start the timer timer.start(); } /** * Triggered when moveOut effect finished * */ private function moveOutEnd(event:EffectEvent):void{ // Create new timer with notShowingTime duration (10ms) timer = new Timer(notShowingTime); // Add event listener to the TimerEvent.TIMER event timer.addEventListener(TimerEvent.TIMER, handleTimerTick); // Start the timer timer.start(); } ]]> </fx:Script> <s:BorderContainer cornerRadius="5" width="450" height="30"> <s:Label x="90" id="myMessage" text="Hello from www.Flex-Blog.com! I'm Clickable!" fontWeight="bold" width="100%" height="100%" verticalAlign="middle" buttonMode="true" useHandCursor="true" visible="false" maxDisplayedLines="1" click="navigateToURL(new URLRequest('http://www.flex-blog.com'), '_blank')" showEffect="{moveIn}" hideEffect="{moveOut}"/> </s:BorderContainer> </s:Application> |
Related posts:
Written by · Filed Under Examples
Was this post useful to you?
Please rate this post, follow us @ twitter, or link to this page from your website!
(4 votes, average: 5.00 out of 5)
Loading ...Comments
One Response to “Flex 4 Effect Example: Sliding text using the Move Effect”
Nice example Arjan
!