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

Location-NEWS-128x128If 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:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="complete()" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            private function complete():void
            {
                move_up.yFrom = cs.height - 6;
                move_up.yTo = 0 - tt.height + 6;
                move_up.repeatCount = 0; //loop
                move_up.repeatDelay = 0; //loop time
                move_up.duration = 6000; //the time of scroll once
                move_up.play();
            }

            private function move_pause():void
            {
                move_up.pause();  //pause
            }

            private function move_resume():void
            {
                move_up.resume(); //start from the pause position
            }
        ]]>
    </mx:Script>
    <mx:Move id="move_up" target="{tt}" />
    <mx:Panel width="250" height="200" layout="absolute" title="Anouncement"
        fontSize="13" horizontalCenter="0" verticalCenter="0">
        <mx:Canvas id="cs" width="100%" height="100%" left="0" top="0"
            verticalScrollPolicy="off" mouseOver="move_pause()" mouseOut="move_resume()">
            <mx:Text id="tt" width="94%" horizontalCenter="0"
                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">
            </mx:Text>
        </mx:Canvas>
    </mx:Panel>
</mx:Application>
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can leave a response, or trackback from your own site.

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

  1. [...] Author and source « Installing Papervision3D on Flash and Flex [...]

  2. RE says:

    Thanks!
    That was just what I needed to move my project forward.

  3. Rafael Brazil says:

    first,i’m sorry but my english isnt very good ok?
    how can i to crontrol the velocity?

  4. Ntt.cc says:

    move_up.duration = 6000; //the time of scroll once

  5. saurabh says:

    thanks gr8 help..!!

  6. saurabh says:

    what about horizontal marquee?? plz throw some light.

  7. Anshul says:

    hi,
    how can we put more than one text control or say more than one “Anouncement” in the panel..

  8. coesum says:

    Have put together a custom swc for marquee which handles any component and is customizable. Check it out at http://flexmaverick.byethost9.com/marquee.php

  9. victor hugo says:

    Thanks for the code.

    But, have a error in line 8.

    Success!

Leave a Reply