I wanted to find out how to tween style elements in my favorite tween engine, TweenMax and/or TweenLite.
It took me a little while to get it going and I figured someone else out there might be interested in how to do it another way than using AnimateProperty (thanks flexy).
My example is just a proof of concept and not intended to be amazing by any stretch of the imagination.
I have simply taken and edited up an rss feed from yahoo software to give me the needed xml to build out my example. I could have used a static set of textArea's but I wanted to test using something that was closer to my every day projects which tend to be very heavy in dynamically built data. It would be very easy to connect this to a real feed and limit the amount of results if desired.
Prerequisites for this are: downloading the tweening package from
greensock, installing it to your repository and importing it into your project.
There are most likely cleaner ways to do this but I wanted to get an example up for anyone who might want or need it.
I hope someone enjoys it or finds it useful. I know there isn't a lot of commenting or explaining going on in here but I will try to get more edited in as soon as possible. If there are questions, please don't hesitate to ask
<?xml version="1.0" encoding="utf-8"?>
<mx:Application applicationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
/* IMPORTS */
import com.greensock.TweenLite;
import com.greensock.plugins.HexColorsPlugin;
import com.greensock.plugins.TweenPlugin;
import flash.events.Event;
import flash.events.MouseEvent;
import mx.controls.TextArea;
/* VARIABLES */
private var tweenArray:Array = new Array();
private var over_color:Number = 0x000000;
private var normal_color:Number = 0xFFFFFF;
private var tween_time:Number = 0.15;
/* METHODS */
public function init():void
{
// very important to activate this plug in
// as without doing so you will get pretty
// frustrated when it doesn't do anything
TweenPlugin.activate([HexColorsPlugin]);
// looping through the lineup xml (see bottom)
// to create elements
for(var a:* in lineup.channel.item)
{
var title:TextArea = new TextArea();
title.name = "title" + a.toString();
title.horizontalScrollPolicy = "off";
title.verticalScrollPolicy = "off";
title.maxWidth = 110;
title.maxHeight = 44;
title.wordWrap = true;
title.x = int(a * (title.maxWidth + 1) + 10);
title.y = 20;
title.text = unescape(lineup.channel.item[a].title.toString());
title.selectable = false;
title.setStyle('backgroundColor', normal_color);
title.setStyle('backgroundAlpha', 0.5);
title.setStyle('borderThickness', 0);
title.setStyle('color', over_color);
title.setStyle('focusAlpha', 0);
title.setStyle('focusThickness', 1);
title.setStyle('fontSize', 9);
title.setStyle('letterSpacing', -1);
title.setStyle('kerning', true);
title.setStyle('fontSharpness', 400);
title.buttonMode = true;
title.useHandCursor = true;
title.mouseChildren = false;
title.addEventListener(MouseEvent.MOUSE_OVER, button_event);
title.addEventListener(MouseEvent.MOUSE_OUT, button_event);
title.addEventListener(MouseEvent.MOUSE_DOWN, button_event);
title.addEventListener(MouseEvent.MOUSE_UP, button_event);
this.addChild(title);
}
}
private function getStyleObject(_target:*):Object
{
var style_object:Object = new Object();
style_object.color = _target.getStyle('backgroundColor');
style_object.textColor = _target.getStyle('color');
style_object.bgAlpha = _target.getStyle('backgroundAlpha');
style_object.y = _target.y;
style_object.height = _target.height;
return style_object;
}
private function button_event(e:MouseEvent):void
{
var args:Array = new Array();
var name:String = e.target.name;
var myStyle:Object = getStyleObject(e.target);
args.push(name);
args.push(myStyle);
if(tweenArray[name])
tweenArray[name].kill();
switch(e.type.toLowerCase())
{
case 'mouseover': case 'mouseup':
tweenArray[name] = new TweenLite(args[1], tween_time, {hexColors:{color:over_color, textColor:normal_color, bgAlpha:0.9, y:10, height:54}, onUpdate:update_method, onUpdateParams:[args]});
break;
case 'mouseout':
tweenArray[name] = new TweenLite(args[1], tween_time, {hexColors:{color:normal_color, textColor:over_color, bgAlpha:0.5, y:20, height:44}, onUpdate:update_method, onUpdateParams:[args]});
break;
case 'mousedown':
trace(e.target.text);
trace();
e.target.setStyle('backgroundColor', 0xFF00FF);
e.target.setStyle('color', 0x000000);
e.target.y = 10;
e.target.height = 54;
break;
}
}
private function update_method(_args:*):void
{
var myObj:* = this.getChildByName(_args[0]);
myObj.setStyle('backgroundColor', _args[1].color);
myObj.setStyle('color', _args[1].textColor);
myObj.setStyle('backgroundAlpha', _args[1].bgAlpha);
myObj.y = _args[1].y;
myObj.height = _args[1].height;
}
public var lineup:XML = new XML(<rss>
<channel>
<item>
<title>Leadership changes continue at Germany's SAP</title>
<source>AP</source>
<category>business</category>
<description>AP - Less than a week after the surprise resignation of its CEO, German software maker SAP AG said board member John Schwarz had resigned.</description>
</item>
<item>
<title>Why Apple won't let the Mac and iPhone succeed in business</title>
<source>InfoWorld</source>
<category>technology</category>
<description>InfoWorld - Last summer, it looked like Apple was finally going to make its Macs and iPhones enterprise-capable, giving hope to those who wanted a more stable, less failure-prone option at the office. Soon, it appeared, Macs and iPhones would no longer need to come in through the back door, or be relegated to "special" departments such as software development or marketing.</description>
</item>
<item>
<title>Intel Ready to Show off Some Netbook Apps</title>
<source>PC World</source>
<category>technology</category>
<description>PC World - Intel will show off several applications designed for netbooks and mobile devices at the upcoming Mobile World Congress, where the chip maker plans to push a software development program designed to populate its AppUp Center application store with applications.</description>
</item>
<item>
<title>Droid Hack Lets You Plug Peripherals Into Your Phone</title>
<source>PC World</source>
<category>technology</category>
<description>PC World - Hacker Chris Paget figured out how to enable USB host mode on the Motorola Droid, a smartphone running the Google Android operating system.</description>
</item>
<item>
<title>Apache Beehive project retired</title>
<source>InfoWorld</source>
<category>technology</category>
<description>InfoWorld - Beehive, an Apache Software Foundation open source project providing a Java programming  model, has been retired due to inactivity, the foundation said on Wednesday.</description>
</item>
<item>
<title>Opera says to introduce faster browser for iPhone</title>
<source>Reuters</source>
<category>technology</category>
<description>Reuters - Norwegian browser company Opera Software said it would reveal a version of its Mini browser for Apple Inc's iPhone next week, offering faster download speeds.</description>
</item>
<item>
<title>HBGary Releases Aurora Detection Tool</title>
<source>PC World</source>
<category>technology</category>
<description>PC World - Security vendor HBGary has released a free software tool that can remove "Aurora" malware, linked to corporate espionage at more than 30 companies.</description>
</item>
</channel>
</rss>);
]]>
</mx:Script>
</mx:Application>
Author
