7.6.使用项渲染器把SWF对象作为一个菜单项显示

2023-08-02 23:09:31

字体：大中小

来源：转载

供稿：网友

7.6.1.问题
用一个图片或SWF 做菜单。
7.6.2.解决办法
用itemRenderer 对象加载SWF 文件，并自定义菜单。
7.6.3.讨论
自定义菜单的第一步是把你想要用到的字体和图形存在一些SWF 文件里，并且把这些SWF 文件放在一文件夹下。在我们的例子中，这个文件夹命名为“swf”，你可以用任工具生成这些SWF 文件。

接下来，创建一个renderer 组件。在本例中我们使用Canvas，并在Canvas 里增加一个SWFLoader 组件。如果我们想用Canvas 做自定义菜单，还有一个条件，就是要让Canvas实现IMenuItemRenderer 接口，因为接口的需要，我们在Canvas 里实现了menu 的set get方法，但什么也没有做。SWFLoader 的source 属性我们赋值为data.swf_wp（因为这个Canvas 最终会用做renderer，所以用data.xxxx，原文是data.swf，太容易让人迷惑了，我改成了data.swf_wp，在原文和原文的例子中都只提到实现接口中的set menu 和getmenu 方法其实还有三个方法需要实现，下面是我改过的代码，如果对原文兴趣，请见本节结尾部分）。
文件名为: FontItemRenderer.mxml

-XML

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="100" height="25"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
xmlns:external="flash.external.*"
implements="mx.controls.menuClasses.IMenuItemRenderer">
<mx:Script>
<![CDATA[
import mx.controls.Menu;
public function get menu():Menu { return null ; }
public function set menu(value:Menu):void { }
public function get measuredIconWidth():Number{return 0;}
public function get measuredTypeIconWidth():Number{return 0;}
public function get measuredBranchIconWidth():Number{return 0;}

]]>
</mx:Script>
<mx:SWFLoader source="{data.swf_wp}" width="100" height="25"
horizontalCenter="0" verticalCenter="0"/>
<mx:Label x="0" y="0" text="{data.label}" width="100"
height="25"/>
</mx:Canvas>

接下来你要在application 里创建自定义的Menu。要创建一个数组用作Menus 的数据源（dataProvider），在这个数组中每个元素有的两个属性，label 和swf_wp 分别用于菜单项上的文字显示和SWF 显示，其中swf_wp 是SWF 文件的路径。关于ClassFactory 我们在第二章就有讲解。

-XML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="init();"
backgroundGradientColors="[#c0c0c0, #ffffff]">
<mx:Script>
<![CDATA[
import mx.events.MenuEvent;
import mx.controls.Menu;
import compent.FontItemRenderer;
private var menu:Menu; 
private function init():void {
var menuData:Array = [{label: "SubMenuItem A",swf_wp:'swf/a.swf', children: [
{label: "SubMenuItem A-1", swf_wp:'swf/a1.swf'},{label: "SubMenuItem A-2", swf_wp:'swf/a2.swf'}]},{label: "SubMenuItem B",swf_wp:'swf/b.swf', children: [{label: "SubMenuItem B-1", swf_wp:'swf/b1.swf'},{label: "SubMenuItem B-2",swf_wp:'swf/b2.swf'}]}];
menu = Menu.createMenu(this, menuData);
menu.itemRenderer = newClassFactory(compent.FontItemRenderer);
}

]]>
</mx:Script>
<mx:Button x="10" y="10" label="Show Menu" id="btnShowMenu"
click="menu.show(btnShowMenu.x,
btnShowMenu.y+btnShowMenu.height);"/>
</mx:Application>

原文中的代码:

-XML

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="25" verticalScrollPolicy="off" horizontalScrollPolicy="off" xmlns:external="flash.external.*"
implements="mx.controls.menuClasses.IMenuItemRenderer">
<mx:Script>
<![CDATA[
import mx.controls.Menu;
public function get menu():Menu { return null ; }
public function set menu(value:Menu):void { }

]]>
</mx:Script>
<mx:SWFLoader source="{data.swf}" width="100" height="25"
horizontalCenter="0" verticalCenter="0"/>
</mx:Canvas>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="init();"
backgroundGradientColors="[#c0c0c0, #ffffff]">
<mx:Script>
<![CDATA[
import mx.events.MenuEvent;
import mx.controls.Menu;
private var menu:Menu;
private function init():void {
var menuData:Array = [ {swf:'swf/coolfonts.swf', children: [{label: "SubMenuItem A-1", swf:'swf/meridiana.swf'},{label: "SubMenuItem A-2", swf:'swf/virinda.swf'}]},{swf:'swf/scriptfonts.swf', children: [{label: "SubMenuItem A-1", swf:'swf/monotypecorsiva.swf'},{label: "SubMenuItem A-2", swf:'swf/comicsansms.swf'}]}];
menu = Menu.createMenu(this, menuData);
menu.itemRenderer = new ClassFactory(FontItemRenderer);
}

]]>
</mx:Script>
<mx:Button x="10" y="10" label="Show Menu" id="btnShowMenu"
click="menu.show
(btnShowMenu.x, btnShowMenu.y+btnShowMenu.height);"/>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="init();"
backgroundGradientColors="[#c0c0c0, #ffffff]">
<mx:Script>
<![CDATA[
import mx.events.MenuEvent;
import mx.controls.Menu;
private var menu:Menu;
private function init():void {
var menuData:Array = [ {swf:'swf/coolfonts.swf', children: [{label: "SubMenuItem A-1", swf:'swf/meridiana.swf'},{label: "SubMenuItem A-2", swf:'swf/virinda.swf'}]},{swf:'swf/scriptfonts.swf', children: [{label: "SubMenuItem A-1", swf:'swf/monotypecorsiva.swf'},{label: "SubMenuItem A-2", swf:'swf/comicsansms.swf'}]}];
menu = Menu.createMenu(this, menuData);
menu.itemRenderer = new ClassFactory(FontItemRenderer);
}

]]>
</mx:Script>
<mx:Button x="10" y="10" label="Show Menu" id="btnShowMenu"
click="menu.show
(btnShowMenu.x, btnShowMenu.y+btnShowMenu.height);"/>
</mx:Application>