Flash组件开发思考：简单的新闻列表

虽然是一种不成熟的思想，但是目前来讲感觉还是很兴奋。今天做了一个新闻列表，看看下面的图

d

 

制作的原理：动态复制我们所要的的列表，该组件是MovieClip的制作的，采用了两个TextField。

如：写一个类继承 MovieClip类。在这里类里面添加两个TextField 文本。如图：

的

 

把这个类封装成为NewList 类，这个类当中定义两个基本信息如title新闻的标题。date新闻的日期。如果希望增加的属性，可以通过扩展这个NewList类。

如：public class NewListA extends NewList 。。。。。。

     public class NewListB extends NewList 。。。。。。

 可以增加几个文本对象，但是下面的类，当中还是有一些小限制。如文本的颜色，鼠标经过文本的颜色限制。可以修改下面的类扩展我们所希望的功能。

 

二.制作的过程：

制作的过程：新建一个名为NewList的类，通过继承MovieClip类，实现一些效果。

public class NewList extends MovieClip

{

  public function NewList（）

{

 

}

 

}

 

第二步：创建三个文本对象：如title 和date对象和content对象。创建后，指定他们的格式，包括字体的大小，颜色格式等等的方式。为了效果 还有可以增加一个下划线。

    解决的问题：1.文本如何填充问题

                     2.文本的超链接问题 

                     3.文本内容显示问题

view plaincopy to clipboardprint?
  1. package    
  2. {   
  3.     import flash.display.MovieClip;   
  4.     import flash.events.*;   
  5.     import flash.text.*;   
  6.     import flash.display.Shape;   
  7.   
  8.     public class NewList extends MovieClip   
  9.     {   
  10.         public var title:TextField;//标题   
  11.         public var date:TextField;//日期   
  12.         public var content:TextField;   
  13.         public var dataprovider:XML;//指定数据源   
  14.         private var format:TextFormat;   
  15.         private var shape:Shape;   
  16.         public function NewList()   
  17.         {   
  18.   
  19.             format=new TextFormat();   
  20.             format.color=0x000000;   
  21.             format.size=15;   
  22.                
  23.             content=new TextField();   
  24.             content.setTextFormat(format);   
  25.   
  26.             title=new TextField();   
  27.             title.x=0;   
  28.             title.y=0;   
  29.             title.width=270;   
  30.             title.height=20;   
  31.             title.setTextFormat(format);   
  32.             title.addEventListener(MouseEvent.MOUSE_DOWN,onDown);   
  33.             title.addEventListener(MouseEvent.MOUSE_OVER,onOver);   
  34.             title.addEventListener(MouseEvent.MOUSE_OUT,onOut);   
  35.   
  36.             date=new TextField();   
  37.             date.x=319;   
  38.             date.y=0;   
  39.             date.width=107;   
  40.             date.height=20;   
  41.             date.setTextFormat(format);   
  42.             addChild(title);   
  43.             addChild(date);   
  44.             DrawLine();//画下滑线   
  45.         }   
  46.         private function DrawLine():void  
  47.         {   
  48.             var shape:Shape=new Shape();   
  49.             shape.graphics.lineStyle(0.5,0,1);   
  50.             shape.graphics.moveTo(0,21);   
  51.             shape.graphics.lineTo(400,21);   
  52.             addChild(shape);   
  53.         }   
  54.         private function onDown(event:MouseEvent):void  
  55.         {   
  56.              var evt:TextEvent=new TextEvent(TextEvent.LINK);   
  57.              evt.text=content.text;   
  58.             this.dispatchEvent(evt);   
  59.   
  60.   
  61.         }   
  62.         private function onOver(event:MouseEvent):void  
  63.         {   
  64.   
  65.             title.textColor=0xFF0000;   
  66.   
  67.         }   
  68.         private function onOut(event:MouseEvent):void  
  69.         {   
  70.             title.textColor=0x000000;   
  71.   
  72.         }   
  73.     }   
  74. }  

第一考虑的问题：新闻标题如何去解决点击事件？恰好Adobe为我们提供了一个TextEvent事件，这个事件当中有一个可以实现超链接的方式。

 

 

测试数据：

 

测试文档：

 

view plaincopy to clipboardprint?
  1. var xmlManager:XMLManager=new XMLManager();   
  2. xmlManager.LoadXML("New.XML");   
  3. xmlManager.addEventListener(LoadEvent.LOADXML,completehandler);   
  4.   
  5. function completehandler(event:LoadEvent):void  
  6. {   
  7.     var xml:XML=event.result;   
  8.     var xmllist:XMLList=xml.item;   
  9.     for (var i:uint=0; i<xmllist.length(); i++)   
  10.     {   
  11.         var news:NewList=new NewList();   
  12.         news.addEventListener(TextEvent.LINK,clickhandler);   
  13.         news.x=100;   
  14.         news.y=130+25*i;   
  15.         news.title.text=xmllist.title[i];   
  16.         news.date.text=xmllist.date[i];   
  17.         news.content.text=xmllist.contect[i];   
  18.         addChild(news);   
  19.     }   
  20.         
  21. }   
  22. function clickhandler(event:TextEvent):void  
  23. {    var str:String=event.text;   
  24.     trace(str);   
  25.        
  26.        
  27.   
  28. }  

 

外部加载xml返回xml信息：

view plaincopy to clipboardprint?
  1. package    
  2. {   
  3.   
  4.     import flash.net.*;   
  5.     import flash.events.*;   
  6.     public class XMLManager extends  EventDispatcher   
  7.     {      
  8.         public function XMLManager()   
  9.         {   
  10.                   
  11.         }          
  12.         public function LoadXML(pach:String):void  
  13.         {   
  14.             var ld:URLLoader=new URLLoader();   
  15.             ld.load(new URLRequest(pach));   
  16.             ld.addEventListener(Event.COMPLETE,resultHandle);   
  17.             ld.addEventListener(IOErrorEvent .IO_ERROR,errorhandle);   
  18.         }   
  19.            
  20.         private function resultHandle(e:Event):void  
  21.         {   
  22.             var myxml:XML=XML(e.target.data );   
  23.             var sendevent:LoadEvent=new LoadEvent(LoadEvent.LOADXML);   
  24.             sendevent.result=myxml;   
  25.             this.dispatchEvent(sendevent);   
  26.                 
  27.         }   
  28.         private function errorhandle(e:Event):void  
  29.         {   
  30.             throw new Error("加载失败");   
  31.                
  32.         }   
  33.            
  34.     }   
  35. }  

 自定义事件类：为LoadEvent，通过这个事件顺便带一个参数result

view plaincopy to clipboardprint?
  1. package    
  2. {   
  3.     import flash.events.Event;   
  4.     public class LoadEvent extends Event   
  5.     {   
  6.         public static  const LOADXML:String="loadxml";   
  7.         public var result:XML;   
  8.         public function LoadEvent(type:String,bubbles:Boolean=false,cancelable:Boolean=false)   
  9.         {   
  10.             super(type,false,false);   
  11.         }   
  12.         override public  function clone():Event   
  13.         {   
  14.             return new LoadEvent(LoadEvent.LOADXML);   
  15.         }   
  16.     }   
  17. }  

 

 

  测试时候的XML文件。为new.xml

view plaincopy to clipboardprint?
  1. <?xml version="1.0" encoding="gb2312"?>   
  2. <menu>   
  3. <item type="news">   
  4.      <title>Adobe 开发技术日</title>   
  5.      <contect>   
  6.           <!--[CDATA[可以方便快捷的找到您需要的工具.播放按钮放在窗口的上方中部,清晰可见方便你播放,测试和优化你的工程.当你按下按钮时,编辑器将高亮你的游戏窗口而减暗其余的东西,让你更专心的创建发挥你的灵感.可设定位置,缩放和旋转的定制递增量捕捉.在一定范围内拖拽物体将自动吸附任何物体表面.用我们说的重新设计的旋转工具可以非常方便的在局部坐标系或世界坐标系操作物体. ]]>   
  7.      </contect>   
  8.      <date>2009-4-15</date>   
  9. </item>   
  10. <item type="news">   
  11.      <title>Flash的未来</title>   
  12.      <contect>   
  13.           <![CDATA[欢迎参与这一次的活动日 adobe公司举办的技术开发日 ]]>   
  14.      </contect>   
  15.      <date>2009-4-16</date>   
  16. </item>   
  17. <item type="news">   
  18.      <title>提倡环保</title>   
  19.      <contect>   
  20.           <![CDATA[欢迎参与这一次的活动日 adobe公司举办的技术开发日 ]]>   
  21.      </contect>   
  22.      <date>2009-4-17</date>   
  23. </item>   
  24. <item type="news">   
  25.      <title>高兴的闪吧</title>   
  26.      <contect>   
  27.           <![CDATA[欢迎参与这一次的活动日 adobe公司举办的技术开发日 ]]>   
  28.      </contect>   
  29.      <date>2009-4-18</date>   
  30. </item>   
  31. <item type="news">   
  32.      <title>传教的灵魂</title>   
  33.      <contect>   
  34.           <![CDATA[欢迎参与这一次的活动日 adobe公司举办的技术开发日 ]]>   
  35.      </contect>   
  36.      <date>2009-4-18</date>   
  37. </item>   
  38. <item type="news">   
  39.      <title>心情之窗</title>   
  40.      <contect>   
  41.           <![CDATA[欢迎参与这一次的活动日 adobe公司举办的技术开发日 ]]>   
  42.      </contect>   
  43.      <date>2009-4-18</date>   
  44. </item>   
  45. <item type="news">   
  46.      <title>真实故事</title>   
  47.      <contect>   
  48.           <![CDATA[欢迎参与这一次的活动日 adobe公司举办的技术开发日 ]]>   
  49.      </contect>   
  50.      <date>2009-4-18</date>   
  51. </item>   
  52. <item type="news">   
  53.      <title>难记的命运</title>   
  54.      <contect>   
  55.           <![CDATA[欢迎参与这一次的活动日 adobe公司举办的技术开发日 ]]>   
  56.      </contect>   
  57.      <date>2009-4-18</date>   
  58. </item>   
  59. <item type="news">   
  60.      <title>窗口故事</title>   
  61.      <contect>   
  62.           <![CDATA[欢迎参与这一次的活动日 adobe公司举办的技术开发日 ]]-->   
  63.      </contect>   
  64.      <date>2009-4-18</date>   
  65. </item>   
  66.   
  67.   
  68.   
  69.   
  70.   
  71.   
  72.   
  73.   
  74.   
  75. </menu>  
posted on 2009-04-18 08:45  夏天的树人  阅读(1066)  评论(2)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 夏天的树人
Powered by .NET 8.0 on Kubernetes