[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How do I create a custom list in Actionscript 3.0

Posted on 2010-01-07
16
Medium Priority
?
289 Views
Last Modified: 2013-11-11
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

0
Comment
Question by:Ameronix
  • 8
  • 8
16 Comments
 
LVL 19

Expert Comment

by:moagrius
ID: 26202668
is myList added to the display list?  
0
 
LVL 1

Author Comment

by:Ameronix
ID: 26202902
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
 
LVL 19

Expert Comment

by:moagrius
ID: 26202911
is it on the stage, or just in the library?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:Ameronix
ID: 26202965
On the stage.  And there is a List component in the library as well.
0
 
LVL 19

Expert Comment

by:moagrius
ID: 26203172
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
 
LVL 1

Author Comment

by:Ameronix
ID: 26203205
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
 
LVL 19

Expert Comment

by:moagrius
ID: 26203323
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
 
LVL 1

Author Comment

by:Ameronix
ID: 26203355
I don't suppose you have a custom class lying around that does something like this.  I'm pretty new to flash.  
0
 
LVL 19

Expert Comment

by:moagrius
ID: 26203487
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
 
LVL 1

Author Comment

by:Ameronix
ID: 26203620
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
 
LVL 19

Expert Comment

by:moagrius
ID: 26203725
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
 
LVL 1

Author Comment

by:Ameronix
ID: 26203743
I appreciate that beyond all conceivable reason.
0
 
LVL 19

Accepted Solution

by:
moagrius earned 2000 total points
ID: 26204776
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
 
LVL 1

Author Comment

by:Ameronix
ID: 26205138
I will dig through.  This should give me enough of a jump.  I really appreciate it.  
0
 
LVL 1

Author Comment

by:Ameronix
ID: 26205172
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
 
LVL 19

Expert Comment

by:moagrius
ID: 26205181
yes pls : )
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Sometimes you know that one object has a specific child in it, but you can't find the child. This happened to me when I was trying to code some actionScript to make a toolbar work with its embedded buttons.  My partner had created the toolbar usi…
Here are some practices and techniques that can be adopted into your Flash/Flex application development process. Note: Not all "performance tips" provide an immediately-recognizable benefit.   This article does not include timing validation data,…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user how to how to record live broadcast.
Suggested Courses
Course of the Month18 days, 18 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question