Blowing Through Lines

So any of you out there that have played with a Nintendo Wii yet—or more specifically run out of energy bowling all night and decided to look at the news reader built into it—will have probably been pretty impressed with the dynamic nature of the interface elements. This class allows users to resize text in a fun and smooth way, and does the text resizing on a string within the confines set by you. So there optionally is a max size set by a defined bounding box.

Example

It requires Tweener at the moment, but i plan on refactoring it to allow you to pass the tweening in your preferred class (though promoting the use of Tweener isn’t a bad thing in my opinion).

How to instantiate and use the class

1
2
3
4
5
6
7
8

// import the class
import com.paperclipped.text.TextResizer;
 
// make an new instance of it 'this' refers to the stage in this example, but could be any DisplayObject.
var myResizer:TextResizer = new TextResizer("all the words i really wanted to deal with at the moment", this, {t:0, r:stage.stageWidth, b:stage.stageHeight, l:0});
 
// to change the size of the text, +/- change in point size, easing style, speed, and optionally a delay for a ripple effect
myResizer.resizeText(6, 'easeoutquad' ,0.5, 0.08);

It’s pretty short and simple but a neat ‘discovery’ for your users when the need a closer look at some text that was spec’d a little too small for them Download the TextResizer Source. There are also settings for tracking [letterSpacing across the whole string] and wordspacing that can be optionally defined. And if you just need to resize the text and have it bounce down instantly you can leave out the time, or easing type parts and just use:

1

myResizer.resizeText(-6);

If you have been using flash 9 with as3 you have perhaps figured out that there is no accordion component. While what I have made is not a component, it is a rather easy to use lightweight class i’m sure you will find useful. Below is the most basic example and usage of the class. it automatically takes care of the masking and buttons required to achieve this simple effect.

Example Result

How to instantiate and use the class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

package {
	import TopLevel;
	import src.navigation.*;
	import src.utils.*;
	import caurina.transitions.Tweener;
 
	public class main extends TopLevel
	{
		var accord:accordion;
		public function main()
		{
			accord = new accordion(400, 300,4, 20);
			addChild(accord);
			accord.addPanel(new navpanel, new contents);
			accord.addPanel(new navpanel, new contents);
			accord.addPanel(new navpanel, new contents);
			accord.addPanel(new navpanel, new contents);
			accord.openPanel(1);
		}
	}
}

As you can see the code is quite simple. You create an instance and add content as necessary. For the moment I have only programmed a horizontal accordion. However it would not be difficult to create a vertical one if your project required it. If you would just like to use this example and start hacking around please Download the Source and mess around all you want. for a more in depth explanation of more advanced functionality keep reading.

To make a new accordion object, just instantiate the class as shown in the main class section. The openPanel function is self explanatory. enter a number from 1 to number of panels. You can access the internal movie clip of a panel by using getPanelContentsAt. Useful if you would like to change text within one of your panels or replace it with something else.

The last very useful piece of functionality worth mentioning is the event that is generated when you change panels. This is useful because if a button outside of the accordion changes the panel any other object can react accordingly (pun intended). This comes in handy for contextual navigation when a user has reached the end of the accordion. Below is a small code snippet of how you would subscribe to the event and do something with the info.

1
2
3
4
5
6

//add this to the main function or perhaps an init function
accord.addEventListener(accordion.EVENT_ON_CHANGE, somethingchanged);
public function somethingchanged(evt:Event):void
{
	trace("the panel changed to number "+accord.currpanel);
}