Simple tips to realize the marquee effect in flex(with source code)

April 14th, 2008 Ntt.cc

If you’ve considered the marquee effect when you built a news board in your web application? The Simple tips show how to realize the marquee effect in flex. Because it based on Canvas and Text component, you could change the font size, color, background and scroll speed freely. If you put mouse on frame, the marquee effect will be paused.  
View source is enabled in the following example

Full source code:

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
3.     creationComplete="complete()" viewSourceURL="srcview/index.html">
4.     <mx:Script>
5.         <![CDATA[
6.             private function complete():void
7.             {
8.                 move_up.yFrom = cs.height - 6;  
9.                 move_up.yTo = 0 - tt.height + 6;
10.                 move_up.repeatCount = 0; //loop
11.                 move_up.repeatDelay = 0; //loop time
12.                 move_up.duration = 6000; //the time of scroll once
13.                 move_up.play();
14.             }
15.            
16.             private function move_pause():void
17.             {
18.                 move_up.pause();  //pause
19.             }
20.            
21.             private function move_resume():void
22.             {
23.                 move_up.resume(); //start from the pause position
24.             }
25.         ]]>
26.     </mx:Script>
27.     <mx:Move id="move_up" target="{tt}" />
28.     <mx:Panel width="250" height="200" layout="absolute" title="Anouncement" 
29.         fontSize="13" horizontalCenter="0" verticalCenter="0">
30.         <mx:Canvas id="cs" width="100%" height="100%" left="0" top="0" 
31.             verticalScrollPolicy="off" mouseOver="move_pause()" mouseOut="move_resume()">
32.             <mx:Text id="tt" width="94%" horizontalCenter="0"
33.                 text="Ntt.cc was created br Minidxer in January of 2008 as a site dedicated to the prolification of Macromedia/Adobe Flex and JavaScript/Ajax." verticalCenter="0">
34.             </mx:Text>
35.         </mx:Canvas>
36.     </mx:Panel>
37. </mx:Application>

Share and Enjoy:

• 
• 
• 
• 
• 
• 
• 
• 
• 

Posted in Flex Tags: complete, effect, flex, marquee, move 4,880 views

Enjoy this Post? Subscribe to Ntt.cc   RSS Feed      Email Feed

Related Post

• 6 ways/effects that response to user’s event in Flex (0)
• 12 Very Useful Applications Based on Flex/Flash (0)
• 9 Excellent 3D Engine For Flash/Flex/AS (10)
• How to Upload Files in Flex FTP (40)
• 25+ Very Cool Adobe AIR/Flex Applications for Images & Photos (9)

« Create your interesting Air desktop application using ActionScript

5 advice for developing RIA and WEB application in Flex »

You can leave a response, or trackback from your own site.

6 Responses to “Simple tips to realize the marquee effect in flex(with source code)”

1. Simple tips to realize the marquee effect in flex(with source code) « Flex coding says:

   April 24, 2008 at 10:48 pm

   [...] Author and source « Installing Papervision3D on Flash and Flex [...]
2. RE says:

   November 24, 2008 at 5:57 pm

   Thanks!
   That was just what I needed to move my project forward.
3. Rafael Brazil says:

   November 5, 2009 at 10:37 pm

   first,i’m sorry but my english isnt very good ok?
   how can i to crontrol the velocity?
4. Ntt.cc says:

   November 5, 2009 at 10:39 pm

   move_up.duration = 6000; //the time of scroll once
5. saurabh says:

   December 1, 2009 at 4:16 pm

   thanks gr8 help..!!
6. saurabh says:

   December 1, 2009 at 4:19 pm

   what about horizontal marquee?? plz throw some light.