Easing/tweened Flex Scrolling Canvas

I was looking to add some acceleration/easing to the scrolling of a Flex container.

I used Tweener API and applied it to a Flex Canvas (the canvas has its scrolling policies turned off, and scrolling is provided with an external/floating scrollbar).

You can see the Tweener trainsitions on their online documentation here (click on ‘transition types’).

I have tweener.swc in my libs folder.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="init()">

	<mx:Script>
		<![CDATA[
			import mx.effects.Glow;
			import mx.controls.Button;
			import mx.events.IndexChangedEvent;
			import mx.controls.Label;
			import caurina.transitions.Tweener;
			import mx.effects.Tween;
			import mx.events.ScrollEvent;
			import mx.controls.scrollClasses.ScrollBar;
			import mx.graphics.GradientEntry;
			import mx.graphics.LinearGradient;

			private function init():void{

				addItemsToCanvas();
				scrollControlCanvas.addEventListener(ScrollEvent.SCROLL, onCanvasScroll);
			}

			private function onCanvasScroll(event:ScrollEvent):void{
				event.stopImmediatePropagation();

				switch (event.direction) {
					case "horizontal":
						Tweener.addTween(viewCanvas,
							{horizontalScrollPosition:scrollControlCanvas.horizontalScrollPosition,
											time:0.6, transition:"linear"});
						break;
					case "vertical":
						// If you need a vertical tween add it here
						break;
				}
			}

			public function addItemsToCanvas():void{

				gradientCanvas(contentCanvas, 0x55D4FF, 0xFFD400, 0); //FF00000

				var button:Button;
				var dividerWidth:Number = 100;
				var numDividers:int = Math.floor(contentCanvas.width/dividerWidth);

				for(var i:int = 0; i < numDividers; i++){
					button = new Button;
					button.width = 40;
					button.setStyle("fontSize", 10);
					button.label = i.toString();
					button.x = ((i+1)*dividerWidth) - (dividerWidth/2) - (button.width/2) ;
					button.y = contentCanvas.height/2 - 50;
					contentCanvas.addChild(button);

					contentCanvas.graphics.beginFill(0xFFFFFF, 0.5);
					contentCanvas.graphics.drawRect((i+1)*dividerWidth, 0,
											3, contentCanvas.height);
					contentCanvas.graphics.endFill();
				}
			}

			public function gradientCanvas (cnv:Canvas, color1:uint, color2:uint, angle:int):void
			{
				var w:Number = cnv.width;
				var h:Number = cnv.height;
				var g:Graphics = cnv.graphics;

				g.clear();

				var fill:LinearGradient = new LinearGradient();
				var g1:GradientEntry = new GradientEntry(color1,0,1);
				var g2:GradientEntry = new GradientEntry(color2,1,1);

				fill.entries = [g1,g2];
				fill.angle = angle;
				g.moveTo(0,0);
				fill.begin(g,new Rectangle(0,0,w,h));
				g.lineTo(w,0);
				g.lineTo(w,h);
				g.lineTo(0,h);
				g.lineTo(0,0);
				fill.end(g);
			}
		]]>
	</mx:Script>

	<!-- The canvas you actually see. NOTE: scroll is off-->
	<mx:Canvas x="74" y="69" width="441" height="203" id="viewCanvas"
		 horizontalScrollPolicy="off" verticalScrollPolicy="off">
		<mx:Canvas x="0" y="0" id="contentCanvas" height="100%" width="3000">
		</mx:Canvas>
	</mx:Canvas>

	<!-- This canvas acts only as the scrollBar - NOTE: the dummyCanvas is empty,
		 but is exactly the same dimensions as the viewCanvas -->
	<mx:Canvas x="74" y="280" width="441" height="30" id="scrollControlCanvas"
		 verticalScrollPolicy="off">
		<mx:Canvas x="0" y="0" id="dummyCanvas" height="{contentCanvas.height}"
			width="{contentCanvas.width}">
		</mx:Canvas>
	</mx:Canvas>

</mx:Application>

Inspired by a Flash solution from Soundstep, and a more complex (than my method) animated canvas by Vladimir Tsvetkov.

Advertisements

Tags: , , , , , , , , , ,

4 Responses to “Easing/tweened Flex Scrolling Canvas”

  1. Sankara narayanan Says:

    Hi bishop,
    I have set borders gor my grid items.
    But when i resize the application, the border also got resized.
    (in some cases the border disappears too ! I thought , the grid items got overlapped !! But it is not actually.)
    How can i avoid this ?
    My code goes like :

    <?xml version=”1.0″ encoding=”utf-8″?>
    <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
    layout=”vertical” xmlns:Test=”Test.*”
    xmlns:components=”components.*” backgroundColor=”#FFFFFF”>

    <mx:Style>

    .myGridItem
    {
    background-color : #F1F7F3;
    border-color: #70B794;
    border-sides : right,bottom;
    border-style :solid;
    border-thickness : 1;
    color: #000000;
    vertical-align : middle;
    }

    </mx:Style>

    <mx:Grid width=”100%” horizontalGap=”0″ verticalGap=”0″>
    <mx:GridRow width=”100%”>
    <mx:GridItem width=”14%” styleName=”myGridItem”>
    <mx:Text text=”DATE VALUE”/>
    </mx:GridItem>
    <mx:GridItem width=”36%” styleName=”myGridItem”>
    <mx:Text text=”DATE VALUE”/>
    </mx:GridItem>
    <mx:GridItem width=”14%” styleName=”myGridItem”>
    <mx:Text text=”AMOUNT VALUE”/>
    </mx:GridItem>
    <mx:GridItem width=”36%” styleName=”myGridItem”>
    <mx:Text text=”AMOUNT VALUE”/>
    </mx:GridItem>
    </mx:GridRow>
    <mx:GridRow width=”100%”>
    <mx:GridItem width=”14%” styleName=”myGridItem”>
    <mx:Text text=”DATE VALUE”/>
    </mx:GridItem>
    <mx:GridItem width=”36%” styleName=”myGridItem”>
    <mx:Text text=”DATE VALUE”/>
    </mx:GridItem>
    <mx:GridItem width=”14%” styleName=”myGridItem”>
    <mx:Text text=”AMOUNT VALUE”/>
    </mx:GridItem>
    <mx:GridItem width=”36%” styleName=”myGridItem”>
    <mx:Text text=”AMOUNT VALUE”/>
    </mx:GridItem>
    </mx:GridRow>
    <mx:GridRow width=”100%”>
    <mx:GridItem width=”14%” styleName=”myGridItem”>
    <mx:Text text=”DATE VALUE”/>
    </mx:GridItem>
    <mx:GridItem width=”36%” styleName=”myGridItem”>
    <mx:Text text=”DATE VALUE”/>
    </mx:GridItem>
    <mx:GridItem width=”14%” styleName=”myGridItem”>
    <mx:Text text=”AMOUNT VALUE”/>
    </mx:GridItem>
    <mx:GridItem width=”36%” styleName=”myGridItem”>
    <mx:Text text=”AMOUNT VALUE”/>
    </mx:GridItem>
    </mx:GridRow>
    <mx:GridRow width=”100%”>
    <mx:GridItem width=”14%” styleName=”myGridItem”>
    <mx:Text text=”DATE VALUE”/>
    </mx:GridItem>
    <mx:GridItem width=”36%” styleName=”myGridItem”>
    <mx:Text text=”DATE VALUE”/>
    </mx:GridItem>
    <mx:GridItem width=”14%” styleName=”myGridItem”>
    <mx:Text text=”AMOUNT VALUE”/>
    </mx:GridItem>
    <mx:GridItem width=”36%” styleName=”myGridItem”>
    <mx:Text text=”AMOUNT VALUE”/>
    </mx:GridItem>
    </mx:GridRow>
    </mx:Grid>

    </mx:Application>

    I have raised this same doubt in Perter’s blog too. 😉

    Thanks in advance.
    Reagrds,
    Sankara narayanan Ekambaranathan.

  2. Sankara narayanan Says:

    I think, It is a bug in flex.

    http://blog.flexexamples.com/2008/01/12/setting-the-border-thickness-in-a-flex-panel-container/comment-page-1/#comment-8268

    Reagrds,
    Sankara narayanan Ekambaranathan.

  3. Настя Says:

    Эффективная и БЕСПЛАТНАЯ реклама бизнеса, товаров и услуг – ССЫЛКИ на сайты, видео и картинки – разрешены! http://rekforum.forum2x2.ru ТИЦ 40, ресурс в Яндекс каталоге!

  4. AntonansCugh Says:

    Все Ваши клиенты и партнеры для Вашего бизнеса уже есть в наличии!

    Предлагаем базы данных фирм России, Украины, Белоруссии и Казахстана.

    Ждем заказов новых баз данных фирм сюда, старая почта тоже в работе: baza-gorodow(@)yandex.ru (уберите скобки!)

    Стоимость базы фирм 1 города — от 700 руб. По стране 1 категория — 2000 рублей!

    БАЗЫ СОБИРАЕМ СРАЗУ ПОСЛЕ ЗАКАЗА – БЕЗ ПРЕДОПЛАТЫ!
    ПРЕДОСТАВЛЯЕМ СКРИНЫ ДЛЯ ПРОСМОТРА И ДЕМО ВЕРСИИ БАЗ!

    где закупить опт дешевую одежду из турции

    Спектр применения баз фирм огромный:

    1. Вы можете использовать их для обзвона потенциальных клиентов
    2. Для рассылки писем по email
    3. Для смс – рассылки
    4. Для почтовой рассылки на юридические адреса фирм
    5. Для поиска партнеров и новых клиентов в социальных сетях на страничках фирм
    6. Для написания Вашего предложения на сайтах фирм и т.д.

    Принимаем заказы на новые базы данных на новую почту, на старую тоже можете писать: baza-gorodow”@”yandex.ru (уберите кавычки!)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: