每天学一点flash（68） 新闻列表制作

 

 

 

 无聊中，玩一下这个东西。感觉制作起来也不是十分复杂。于是就动手写了一下。采用的flash cs3的软件进行制作。

 

 制作过程：准备一个xm文件，把新闻标题，新闻链接，日期，内容可以恰当记录在这里文档里面。

                采用flash 制作界面，把首页 上一页，下一页 末页 都设计成按钮。

                新闻标题元件，可以制作为MovieClip，在元件里面添加动态文本，并设置字体和颜色等(也可以采用纯编码方式对标题描述)

 

 

 

    分页的制作：采用求余的方式进行，当page%row==0的则total=page/row 为总共页码，当page%row !=0 则total=       page/row +1;

 

 

制作新闻标题和日期显示：

 

  创建一个MC，添加库连接。名为NewItem，然后在空白的元件当中，创建两个动态文本（用于显示标题和日期），分别为title 和dataMsg。设置为白色字体。

 

 

 

 

 

 

 

 

 

创建按钮：

 

在界面上，创建的 首页 上一页，下一页 ，末页按钮。并对按钮的属性添加名称。

StartBtn  首页按钮

EndBtn    末页按钮

PreViewBtn  上一页按钮

NextBtn    下一页按钮

 

这些按钮用来处理交互的情况。

 

 

 

XML测试数据：这样xml 数据可以自己随意定义，主要是符合自己的习惯就行。 

<?xml version="1.0" encoding="UTF-8"?><news> <content> <time>2010-1-1 </time> <title>幸福的时光</title> </content> <content> <time>2010-1-2 </time> <title>快看，那是美丽的天堂</title> </content> <content> <time>2010-1-3</time> <title>人们的生活指数不断下降</title> </content> <content> <time>2010-1-4 </time> <title>在水一方，我们想起那个童年的快乐时光</title> </content> <content> <time>2010-1-5</time> <title>是吗？那是谁的人</title> </content> <content> <time>2010-1-6 </time> <title>对不起，我爱你</title> </content> <content> <time>2010-1-7 </time> <title>天气真好</title> </content> <content> <time>2010-1-8 </time> <title>怀念他的故乡</title> </content> <content> <time>2010-1-9 </time> <title>一把米的味道</title> </content> <content> <time>2010-1-10 </time> <title>谢谢你的爱1999</title> </content> <content> <time>2010-1-11 </time> <title>2012年世界末日</title> </content> <content> <time>2010-1-12 </time> <title>他介绍女朋友我认识</title> </content> <content> <time>2010-1-13 </time> <title>哈哈剧场小白的口水之谜</title> </content> <content> <time>2010-1-14 </time> <title>选好码</title> </content> <content> <time>2010-1-15 </time> <title>我无意喜欢</title> </content> <content> <time>2010-1-16 </time> <title>刹那间的动态</title> </content> <content> <time>2010-1-17 </time> <title>闪光的暗道</title> </content> <content> <time>2010-1-18 </time> <title>大家快乐好不好</title> </content> <content> <time>2010-1-19 </time> <title>虚度</title> </content> <content> <time>2010-1-20 </time> <title>是一种风的味道</title> </content> <content> <time>2010-1-21 </time> <title>想又想</title> </content> <content> <time>2010-1-22 </time> <title>动画介绍海贼王的新大陆</title> </content></news>

 

 

 

分页工具类。用来处理一些分页的情况。

package {import flash.display.DisplayObjectContainer;//分页public class Page{public static var len:int=15;//默认长度public static var currentPage:int=0;//当前页public static var totalPage:int=0;//一共的页面 public static var maxRow:int=12;//最大项目数public function Page(){}//分页的最大值public static function getMaxPage(size:int):int {if(size<0) return -1; var len:int;if(size%maxRow==0){len=size/maxRow;}else{len=int(size/maxRow)+1;}return len;}//清除页面public static function clearPage(container:DisplayObjectContainer):void{while(container.numChildren>0){container.removeChildAt(0);}}//获取长度public static function getLength(n:int):int{ var temp:int=Page.maxRow*(Page.currentPage+1)>n ? n :Page.maxRow*(Page.currentPage+1); return temp;}//获取页面信息public static function getPageInfo():String{return String(currentPage+1)+"/"+String(totalPage);}}}

 

 

    

 主要程序

package {import flash.display.Sprite;import flash.display.SimpleButton;import flash.text.*;import flash.events.*;import flash.net.*;public class Main extends Sprite{private var list:Array=[];private var totalPage:uint;//页数private var len:int=12;//默认是12private var contain:Sprite=new Sprite();public function Main(){init();}//监听按钮private function init():void{addChild(contain);contain.x=contain.y=20;StartBtn.addEventListener(MouseEvent.CLICK,onStartBtnHandler);EndBtn.addEventListener(MouseEvent.CLICK,onEndBtnHandler);PreViewBtn.addEventListener(MouseEvent.CLICK,onPreViewBtnHandler);NextBtn.addEventListener(MouseEvent.CLICK,onNextBtnHandler);loadXML("NewList.xml");//加载xml}private function loadXML(path:String):void{var loader:URLLoader=new URLLoader();loader.addEventListener(Event.COMPLETE,onLoadComplete);loader.load(new URLRequest(path));}private function onLoadComplete(event:Event):void{event.currentTarget.removeEventListener(Event.COMPLETE,onLoadComplete);var xml:XML=XML(event.currentTarget.data);for (var i:int=0; i<xml.content.length(); i++){list.push(xml.content[i]);}Page.totalPage=Page.getMaxPage(list.length);//获取分页trace(Page.totalPage);showText(list);}//显示文本private function showText(msg_array:Array):void{var temp:int=Page.getLength(msg_array.length);trace(Page.maxRow*Page.currentPage);var k:int=0;for (var i:int=Page.maxRow*Page.currentPage; i<temp; i++){var item:NewItem=new NewItem();item.buttonMode=true;item.title.mouseEnabled=false;item.dataMsg.mouseEnabled=false;item.addEventListener(MouseEvent.ROLL_OVER,item_MouseOverHandler);item.addEventListener(MouseEvent.ROLL_OUT,item_MouseOutHandler);item.addEventListener(MouseEvent.MOUSE_DOWN,item_MouseDownHandler);item.title.text=msg_array[i].title.toString();item.dataMsg.text="["+msg_array[i].time.toString()+"]";item.x=0;item.y=k*item.height;contain.addChild(item);k++;}PageMsg.text="页码"+Page.getPageInfo()+"页";}private function item_MouseOverHandler(event:MouseEvent):void{event.currentTarget.title.textColor =0xff0000;event.currentTarget.dataMsg.textColor =0xff0000;}private function item_MouseOutHandler(event:MouseEvent):void{event.currentTarget.title.textColor =0xffffff;event.currentTarget.dataMsg.textColor =0xffffff;}//鼠标点击private function item_MouseDownHandler(event:MouseEvent):void{trace("鼠标点击了"); }//不显示显示文本private function unShowText():void{Page.clearPage(contain);}private function onStartBtnHandler(event:MouseEvent):void{Page.currentPage=0;unShowText();showText(list);}private function onEndBtnHandler(event:MouseEvent):void{Page.currentPage=Page.totalPage-1;unShowText();showText(list); }private function onPreViewBtnHandler(event:MouseEvent):void{if (Page.currentPage>0){Page.currentPage--;unShowText();showText(list);} }private function onNextBtnHandler(event:MouseEvent):void{if (Page.currentPage<Page.totalPage-1){Page.currentPage++;unShowText();showText(list);}}}}

 

 

 

由于这个只是一个小制作，主要涉及到符合我们习惯就行，flash 设计讲求是自由，这样玩起来才够有趣。

 

最后，采用这种方式生成swf 大概为7k，不知道有无大了点？换另外一种做法，也可以尝试一下。         

 

 

修改界面也可以变成这样。      

 

 

 

          

 单独抽出一个类来，可以变成如下情况，而不是通过库链接的方式来实现。单独写一个出来实现这种菜单效果。

 

//新闻列表条package {import flash.display.Sprite;import flash.events.*;import flash.text.*;import flash.text.TextFieldAutoSize;public class NewItem extends Sprite{public var url:String;//链接private var _title:TextField=new TextField();private var _dataMsg:TextField=new TextField(); private var over_color:uint=0xff0000;//文字鼠标经过的颜色private var out_color:uint=0xffffff;//鼠标移开后的颜色public static const ITEM_CLICK:String="item_click";public function NewItem(){_title.mouseEnabled=false;_dataMsg.mouseEnabled=false;addChild(_title);addChild(_dataMsg);this.buttonMode=true;this.addEventListener(MouseEvent.ROLL_OVER,item_MouseOverHandler);this.addEventListener(MouseEvent.ROLL_OUT,item_MouseOutHandler);this.addEventListener(MouseEvent.MOUSE_DOWN,item_MouseDownHandler);}//设置初始化值public function setInitValue(title_Width:Number,title_Height:Number,title_x:Number,data_x:Number,isDrawline:Boolean=true,lineColor:uint=0xffffff):void{_title.width=title_Width;_title.height=title_Height;_dataMsg.autoSize=TextFieldAutoSize.RIGHT;_title.x=title_x;_dataMsg.x=data_x;_title.y=0;_dataMsg.y=0;if(isDrawline){this.graphics.lineStyle(0,lineColor);this.graphics.moveTo(0,title_Height+5);this.graphics.lineTo(data_x,title_Height+5);}}//设置鼠标经过和经过后的颜色public function setCurColor(over_color:uint,out_color:uint):void{this.over_color=over_color;this.out_color=out_color;}private function item_MouseOverHandler(event:MouseEvent):void{_title.textColor=over_color;_dataMsg.textColor=over_color;}private function item_MouseOutHandler(event:MouseEvent):void{_title.textColor=out_color;_dataMsg.textColor=out_color;}//鼠标点击private function item_MouseDownHandler(event:MouseEvent):void{ this.dispatchEvent(new Event(NewItem.ITEM_CLICK));}//新闻标题public function set title(str:String):void{_title.text=str;}public function get title():String{return _title.text;}//日期信息public function set dataMsg(str:String):void{_dataMsg.text=str;}public function get dataMsg():String{return _dataMsg.text;}//设置文本信息public function setTextFormat(format:TextFormat):void{_title.setTextFormat(format);_dataMsg.setTextFormat(format);}}}

 

 修改之后的类变成这样

package {import flash.display.Sprite;import flash.display.SimpleButton;import flash.text.*;import flash.events.*;import flash.net.*;public class Main extends Sprite{private var list:Array=[];private var totalPage:uint;//页数private var len:int=12;//默认是12private var contain:Sprite=new Sprite();public function Main(){init();}//监听按钮private function init():void{addChild(contain);contain.x=contain.y=20;StartBtn.addEventListener(MouseEvent.CLICK,onStartBtnHandler);EndBtn.addEventListener(MouseEvent.CLICK,onEndBtnHandler);PreViewBtn.addEventListener(MouseEvent.CLICK,onPreViewBtnHandler);NextBtn.addEventListener(MouseEvent.CLICK,onNextBtnHandler);loadXML("NewList.xml");//加载xml}private function loadXML(path:String):void{var loader:URLLoader=new URLLoader();loader.addEventListener(Event.COMPLETE,onLoadComplete);loader.load(new URLRequest(path));}private function onLoadComplete(event:Event):void{event.currentTarget.removeEventListener(Event.COMPLETE,onLoadComplete);var xml:XML=XML(event.currentTarget.data);for (var i:int=0; i<xml.content.length(); i++){list.push(xml.content[i]);}Page.totalPage=Page.getMaxPage(list.length);//获取分页trace(Page.totalPage);showText(list);}//显示文本private function showText(msg_array:Array):void{var temp:int=Page.getLength(msg_array.length);trace(Page.maxRow*Page.currentPage);var k:int=0;for (var i:int=Page.maxRow*Page.currentPage; i<temp; i++){var item:NewItem=new NewItem();item.setInitValue(261,20,0,360,true,0x333333);item.addEventListener(NewItem.ITEM_CLICK,item_MouseDownHandler);item.title=msg_array[i].title.toString();item.dataMsg="["+msg_array[i].time.toString()+"]";item.setTextFormat(new TextFormat("Times New Roman",15,0xffffff,"true"));item.x=0;item.y=k*item.height;contain.addChild(item);k++;}PageMsg.text="页码"+Page.getPageInfo()+"页";}//鼠标点击private function item_MouseDownHandler(event:Event):void{trace("鼠标点击了"); }//不显示显示文本private function unShowText():void{Page.clearPage(contain);}private function onStartBtnHandler(event:MouseEvent):void{Page.currentPage=0;unShowText();showText(list);}private function onEndBtnHandler(event:MouseEvent):void{Page.currentPage=Page.totalPage-1;unShowText();showText(list); }private function onPreViewBtnHandler(event:MouseEvent):void{if (Page.currentPage>0){Page.currentPage--;unShowText();showText(list);} }private function onNextBtnHandler(event:MouseEvent):void{if (Page.currentPage<Page.totalPage-1){Page.currentPage++;unShowText();showText(list);}}}}