How do I create a custom list in Actionscript 3.0

I'm trying to build a chat application in Flash CS3.  I need to have user profile pics next to each message.  I've been trying to go about this by building a sprite for each message.  The message sprite has the picture and the message as children.  Then I add the sprite as a child to a list.  

The problem is, I can't get the sprites to show up.  I can access the children of the list after adding them, so they seem to actually be getting in there.  But nothing shows up on the screen.

I'm attaching my code. If anyone can tell me what I'm doing wrong, or give me a better way of doing this (source code please), I would greatly appreciate it.  

I'm also looking to add smileys to this at some point.  I would imagine it's a similar method, but if you have any info on that it would also be appreciated.


package{
	import fl.controls.List;
	import fl.controls.Label;
	import flash.display.*;
	import flash.events.Event;
	import flash.net.URLRequest;
	import flash.events.IOErrorEvent;
	
	public class ListTest extends MovieClip{
		public function ListTest(){
			//myList.focusEnabled = false;
			
			var imageHolder = new MovieClip();
			imageHolder.width = 140;
			imageHolder.height = 140;
			
			//imageHolder.x = 0;
			//imageHolder.y = 0;
			
			var theSprite = new Sprite();
			theSprite.height = 150;
			theSprite.width = 150;
			theSprite.x = 0;
			theSprite.y = 0;
			
			/*loadImage("http://url.to.image/image.png", imageHolder);
			theSprite.addChild(imageHolder);
			trace("Should have just added the image to the sprite");
			*/
			
			var theMsg = new Label();
			theMsg.text = "something";
			theSprite.addChild(theMsg);
			trace("text = " + theSprite.getChildAt(0).text);
			
                        //myList has been created in the .fla file.
			myList.addChild(theSprite);
			trace("list child = " + myList.getChildAt(3));
			trace("Should have just added the sprite to the list");
			
		}
		
		private function loadImage(url:String, container_mc:MovieClip):void  {
			var loader:Loader = new Loader(); 
			var url_request:URLRequest = new URLRequest(url); 
			loader.load(url_request);
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(event:Event){imageLoaded(event, container_mc)});
			loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
		}
		
		
		private function imageLoaded(event:Event, container_mc:MovieClip):void {
			trace("in image loaded");
			
			// remove previous image
			if(container_mc.numChildren > 0)
				container_mc.removeChildAt(0); 
		 	
			trace("children removed");
			
			//save image
			var image:Bitmap = (Bitmap)(event.target.content);
			var image_data:BitmapData = image.bitmapData;
	
			container_mc.addChild(image);
			container_mc.setChildIndex(image, 0);
			
			trace("added child");
		}
		
		//This handles IOErrors
		private function onIOError(e:IOErrorEvent):void{
			trace("There has been an IO Error");
		}
	}
}

Open in new window

LVL 1
AmeronixAsked:
Who is Participating?
 
moagriusConnect With a Mentor Commented:
here's a sample.  EE won't allow .as files, even in a zip, so they've been saved with .txt extension.  You'll need to remove that right away (ScrollPanel.as.txt should be just ScrollPanel.as).

the class is called ScrollPanel.  you instantiate it normally:

var whatever:ScrollPanel = new ScrollPanel();

you can add any DisplayObject using normal addChild or addChildAt methods.

the only two methods you really need to worry about are:

setSize(width, height);  // sets the size of the visible area.
update();  // recalculates scrollbars size and logic based on contents

so if you add children dynamically after it already exists, make sure you call update();

I've included a very basic sample FLA.

I didn't include any package names, so to use the .as files need to be in the same folder as the FLA, but no import statements are required.

remember, this was created for my needs and wasn't meant for public distribution, so it's not well commented and isn't obviously editable, but hopefully can give you the basic idea if you decide to make your own.

hth


scollpanel-sample.zip
0
 
moagriusCommented:
is myList added to the display list?  
0
 
AmeronixAuthor Commented:
What do you mean added to the display list?  I added it in the fla file so I kind of assumed I could access it.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
moagriusCommented:
is it on the stage, or just in the library?
0
 
AmeronixAuthor Commented:
On the stage.  And there is a List component in the library as well.
0
 
moagriusCommented:
If you want the List component to act like a list (have each item appear with borders and hovers effects, have the list scroll, mask content within it's borders, etc.), you need to use addItem and pass an object with label and data properties.  If you use addChild, the children will be added but won't look like list items, will not be positioned automatically, and will not scroll, or mask it's content, or any of that.  You won't be able to use include images with list items - it takes only label (the text) and data (a catch-all property).

you can extend the List component if you want (here's a brief blog post / tutorial : http://theflashblog.com/?p=11), or you could create a custom class (without messing with components at all), to do what you want.

0
 
AmeronixAuthor Commented:
Can I use a sprite as the data property?  I need to be able to position things in the message, which I was planning on using a sprite to do.  I will not need hover effects, etc with the items.  Just a simple list of chat messages with user profile pics.
0
 
moagriusCommented:
the data property is just an object (not a DisplayObject) of key=>value pairs so you can do stuff with each list item.  as far as i know, you can't just add images to a List component, you need to either extend it or create a custom class, but i don't use built-in components at all (and one of the main reasons is that they're not very flexible, and usually end up being more work to modify than it is to create your own custom class).

Flex does have components that'll easily do what you describe, but (again, AFAIK) I don't think Flash does.
0
 
AmeronixAuthor Commented:
I don't suppose you have a custom class lying around that does something like this.  I'm pretty new to flash.  
0
 
moagriusCommented:
i do, but it's pretty heavily dependent on other classes and pretty complicated.

you can use cellRenderers to create custom list items as well, but again it'd take a little customization.  check the AS3 livedocs on CellRenderers:

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/

(here's the direct link)

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/controls/listClasses/CellRenderer.html
0
 
AmeronixAuthor Commented:
I get the cellRenderers, but I'm having the same issue as with the sprites.  I've tried adding a label object with the text defined, and a movie clip with an image in it, same as in the sample code, to a cellRenderer.  When I add that to the List I still can't see anything.  I see the item there with the border, etc. But there's nothing in it.  

Also, can I get rid of that border, hover effect, etc.?
0
 
moagriusCommented:
sounds like you want a custom class.  give me a little while and i'll modify my scrollpanel class, and upload a zip later this afternoon.
0
 
AmeronixAuthor Commented:
I appreciate that beyond all conceivable reason.
0
 
AmeronixAuthor Commented:
I will dig through.  This should give me enough of a jump.  I really appreciate it.  
0
 
AmeronixAuthor Commented:
I accidentally put that in the knowledge base when I accepted the solution.  If you don't want your code up there, let me know how to take it off and I will.
0
 
moagriusCommented:
yes pls : )
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.