Archive for September, 2007

Auto-scrolling select box

Recently I worked on a project that required a very customized select box. Instead of a scrollbar the box would auto scroll depending on the mouse position. The items needed to be click-able and also have a rollover state. I came up with the MaskedSlider class to solve my sliding problems. Currently the function for the scrolling is hardcoded. I leave it as an exercise to the reader to implement whatever scrolling animation function the see fit.
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

download the source here slider demo

The class is fairly easy to use and can be instantiated as a UP_DOWN list or a LEFT_RIGHT list by setting the proper value in the constructor, as shown below in the simple example. Futhermore, you may set a background color, width, height, and the extra hit width and height you would like to allow. The hit length allows the movement to continue even when you have moused off the compnent.

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
package {
	import TopLevel;
	import hg.paginators.*;
	import flash.events.*;
	public class main extends TopLevel
	{
		private var slider1:MaskedSlider;
		private var slider2:MaskedSlider;
 
		public function main()
		{
			slider1 = new MaskedSlider(195,170,MaskedSlider.UP_DOWN,0xFFFFFF,10,10);
			slider2 = new MaskedSlider(460,42, MaskedSlider.LEFT_RIGHT, 0xFFFFFF,10,10);
 
			this.addChild(slider1);
			this.addChild(slider2);
 
			// add 15 items
			for(var i=0; i<15; i++){
				slider1.addItem( new item,rOver,rOut);
			}
 
			for(var j=0; j< 15; j++){
				slider2.addItem(new item,rOver,rOut);
			}
 
			slider1.x=30;
			slider1.y=30;
			slider2.y=220;
			slider2.x=30;
		}
 
		public function rOver(evt:Event){
			evt.target.alpha=0.7;
		}
 
		public function rOut(evt:Event){
			evt.target.alpha=1;
		}
	}
}

There are some interesting properties in this class as well as a changed event that you can subscribe to. Below are the relevent methods and properties from the class, a brief description of the functionality, and usage examples.

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
//three methods worth using
 
//change background
slider1.background(0xFF99FF);
 
//set speed
slider1.setSpeed(3);
 
//empty contents of the slider so that you can populate with new items
slider1.empty();
//set the default selected item useful for making sure there are no null values passed to other objects
// where 3 is the item number
slider1.setDefaultSelect(3);

So that block took you through some of the useful methods implemented for you. There is one piece of functionality I have left out. The slider is written so that you can select an item from a list of items. Below is a brief example of how you would accomplish this.

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
// you must subscribe to the change even
slider1.addEventListener(MaskedSlider.EVENT_ON_CHANGE, doSomething);
 
public function doSomething(evt:Event){
//to get the selected item
trace(evt.target.sItem);
//to get the index chosen
trace(evt.target.itemIndex);
}

That should get you started using this class. Although it is far from complete, I think the slider would make a great addition to many projects. Be creative with what you scroll. Remember an item can be any movie clip đŸ™‚

WiiSizing Text Class

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

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
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

?View Code ACTIONSCRIPT
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:

?View Code ACTIONSCRIPT
1
myResizer.resizeText(-6);

Accordion Component AS3 flash 9

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

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

How to instantiate and use the class

?View Code ACTIONSCRIPT
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.

?View Code ACTIONSCRIPT
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);
}