WEB 前端设计者的日志

flash生成swc和flex相互问题.

今天一朋友问我flash生成的UI怎么放到flex里,我告诉他生成SWC.一个小时后他说生成了SWC,但是在flex看不到.通过远程操作终于把他遇到的问题解决了.现在说下遇到的几点误区.
在生成SWC前,先看下一个类(UIComponent),flash和flex都能使用这个UIComponent,但flex里是不能用MovieClip类的,这是最容易产生误区的地方.
UIComponent类的继承关系:
flex中的架构，（举例UIComponent类的继承关系）
UIComponent > FlexSprite> Sprite >DisplayObjectContainer>InteractiveObject >Displayobject
flash中的架构(Sprite类的继承关系)
Sprite >DisplayObjectContainer>InteractiveObject >Displayobject

所以可以看得出,movieclip并不在继承关系里.那么生成SWC时基类就不能写:flash.display.MovieClip,而是mx.flash.UIMovieClip.

1.我们先打开flash CS3,版本需要profressional.才能生成SWC,还有下载一个小插件flexcomponentkit,这里不多说明.

2.生成一个mc,然后在库面板里右键->属性.如图:

这里要注意,选择”为ActionScript导出”,时默认的基类是flash.display.MovClip,这里需要改为mx.flash.UIMovieClip,否则在flex中使用是看不见此MC的
3.选择此MC，然后选择命令->convert symbol to flex component,再在库面板中选择MC,点击右键,如果是profressional,会出现一个导出SWC文件,点击后保存一个名字,如MC.swc

4.打开flex,选择一个建立好的flex项目.打开项目属性面板->flex build path->Library path,然后点击 Add SWC,选择刚才生成的MC.swc,点击确定

5.如果一切正常,在application中输入<local:就是出现刚才Circle5的类.完整代码local<local:Circle buttonMode=”true”/>运行,OK

新游戏”三国无敌”的界面确定了

新游戏”三国无敌”的界面确定了，建筑采用了和三国志10类似的风格。

为了保护建筑风格，界面也用了很多透明效果，相信游戏出来一定会受大众喜欢。

游戏主界面

3D角色选择

3D角色选择

源文件

新做的initial2 的后台管理页面

新做的initial2 的后台管理页面,

准备用flex+php做此系统,先做一个界面风格给客户,

因为想到客户是一家产品设计公司,于是加重了底色。

等待客户的回复，希望能一次通过，^.^!

用AS做一个鼠标跟随的信息提示框

如上例子所示，有很多实现的方法，以前我也在场景中画好一个黑色的背景然后在上面加文字来实现，现在自己想用纯AS来写。

流程是用AS写好一个类实现画背景图、文字、鼠标跟随、隐藏的方法，然后在其他地方写事件触发它。请看tips.as代码：

package {
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.text.TextField;
import flash.text.TextFormat;

public class tips extends MovieClip {
private var tx:Number = 0;
private var ty:Number = 0;
private var myText:TextField = new TextField();
private var box:Sprite = new Sprite();
public function tips() {
//trace(”构造”);
init();
out();
}
//不显示
public function out():void {
this.visible = false;
}
//显示
public function show():void {
this.visible = true;
}
private function init():void {
//this.alpha = 0.8;
drawBox(200,50);
addChild(myText);
myText.x = 5;
myText.y = 5;
myText.wordWrap = true;
myText.textColor = 0xffffff;
addEventListener(Event.ENTER_FRAME , onFrameHand);
}
public function setWidth(w:int , h:int):void {
box.width = w;
box.height = h;
myText.width = w – 10;
myText.height = h – 10;
}
//画一个文字的底图
private function drawBox(vWidth:int = 100 , vHeight:int = 100) {
box.graphics.beginFill(0×000000,0.8);
box.graphics.lineStyle(1, 0xffffaa,0.8);
box.graphics.drawRect(0,0,vWidth,vHeight);
box.graphics.endFill();
this.addChildAt(box,0);
}
//写text的文字
public function setText(str:String):void {
myText.htmlText = str;
}
private function onFrameHand(e:Event):void {
tx = stage.mouseX+10;
ty = stage.mouseY+10;
//trace(mouseX);
if ((tx + this.width)>stage.stageWidth) {
tx =  stage.mouseX – this.width – 10;
}
if ((ty + this.height)>400) {
ty =  stage.mouseY – this.height – 10;
}
this. x = tx;
this. y = ty;
}
}
}

然后新建一个clew_info.fla ，建立两个元件：hitObj和hitObj2，在帧上写代码：

import tips;
var box:tips = new tips();
addChild(box);

hitObj.addEventListener(MouseEvent.MOUSE_OVER , onOverHand);
hitObj.addEventListener(MouseEvent.MOUSE_OUT , onOutHand);
function onOverHand(e:MouseEvent):void{
box.setText(”你好呀,我也是现在才进来<b>玩这个游</b>戏的<br/><br/>你喜欢吗?”);
box.setWidth(150,60);
box.show();
}
function onOutHand(e:MouseEvent):void{
box.out();
}

hitObj2.addEventListener(MouseEvent.MOUSE_OVER , onOverHand2);
hitObj2.addEventListener(MouseEvent.MOUSE_OUT , onOutHand2);
function onOverHand2(e:MouseEvent):void{
box.setText(”第二个提示内容\n第二个提示内容消息”);
box.setWidth(100,60);
box.show();
}
function onOutHand2(e:MouseEvent):void{
box.out();
}

就OK了。

box.setText(”");    box.setWidth(100,60);    box.show(); box.out(); 都是tips这个类写好的方法。通过这样的方法，实现了逻辑与具体实现分开，传统OOP的做法。

下面是源文件：
提示框源文件

解决菜鸟遇到的textField文本,用textFormat改变不了的问题

今天遇到了一个TextFiled文本改变字体颜色与大小时的可笑问题.

1.我创建一个TextField文本,代码如下:
import flash.text.TextField;
var label:TextField = new TextField();
label.htmlText = “Hello World…\nHellow”;

2.我想用一个TextFormat使文本的颜色改变,代码如下:
 import flash.text.TextFormat;
var labelCss:TextFormat = new TextFormat();
   labelCss.color = 0xff0000;
   labelCss.leading = 5;
   labelCss.font = “Verdana”;

3.最后我把TextFormat赋给TextField，但我看开发文档时直接使用了Textfield的setTextFormat方法,代码如下：
label.setTextFormat(labelCss);

结果label一点反应都没有，后来再看flash手册，看到其中的”defaultTextFormat”属性，原来这个属性才是使用TextFormat的正确方法，
于是把代码修改成：
label.defaultTextFormat = labelCss;
若在使用setTextFormat方法，必须放在label.htmlText=”XXXXXXXX”这句的后面。

就ＯＫ了．这种错误在写AS代码时经常范，flash在这方面也没有一个统一的规范，觉得有点凌乱．最后给出全部代码．

package {
    import flash.display.Sprite;
    import flash.text.TextField;
 import flash.text.TextFormat;

    public class styleSheet extends Sprite {

        public function styleSheet() {
            var labelCss:TextFormat = new TextFormat();
   labelCss.color = 0xff0000;
   labelCss.leading = 5;
   labelCss.font = “Verdana”;
   
            var label:TextField = new TextField();
            label.defaultTextFormat = labelCss;
            label.htmlText = “<body><span class=’heading’>Hello </span>World…\nHellow</body>”;
            addChild(label);
        }
    }
}

试做flash游戏中的格子地图

今天做了一个flash格子地图的测试，要求是像游戏“三国志”一样在格子上建筑房子，每个格子是由棱形组成的。所以先建一个棱形的mc，然后用循环输出棱形，最后合成了格子地图。

测试中点击并没有房子，只是简单地输出了文字。下面是swf文件：

总结：做这种地图最难的是算法，研究这算法就花了我几页纸。数学不好还是不行。

源文件下载：map

试用EXT JS框架

一直都有听说EXT框架,采用它做的界面效果非常的棒,而你只需要简单地几个脚本代码就可以使用了。一样简化了前端的大量工作，对于一些要求项目快速开发的工作来说，Ext的出现帮设计师完成了大量的工作。现在我们先来使用它。

第一步下载Ext框架，这个不用我说在官方网站上有的，我下的是Ext2.02的版本，大约有6M，里面包括了脚本与图片、文档与实例。

第二：做一个例子，一般把自己测试的例子放在example目录下比较合理，进入example目录，新建一个目录，如：hello 在这目录下新一个index.htm。

第三：导入Ext的包与CSS。
<link href=”../../resources/css/ext-all.css” rel=”stylesheet” type=”text/css” />
<script src=”../../adapter/ext/ext-base.js” type=”text/javascript”></script>
<script src=”../../ext-all.js” type=”text/javascript”></script>
这里要特别的注意是这里包是有顺序的，如果顺序错误那么在后面将导致错误。

第四：自己写一个代码，最简单的：
<script>
 Ext.onReady(function(){
  Ext.MessageBox.alert(”窗口”, “Hello World!!!”);
 });
</script>
说明一下Ext.onReady可以理解为加载前面的Ext包成功的情况下。function 指执行一个方法，这个方法是Ext.MessageBox.alert，用Ext弹出一个对话框。标题为“窗口”，内容为“Hello World!!!”。

这样就完成一个Ext的调用了，Ext的精彩要等自己更多的发掘。

flash 的p2p功能

flash的新协议:RTMFP , 服务允许Flash Player 10和AIR 1.5开发的客户端以P2P的形式交换数据。这里的P2P采用的是UDP协议，这项新的UDP协议被Adobe赋予一个新的名字：RTMFP(real time flow protocol)，底层用UDP协议具有稳定、彻底减缓延迟，并且可以大大节省带宽，请看图示。 详细技术要等官方出文档。

自己用flash 做的接金币小游戏.

自己用flash 做的接金币小游戏.
键盘的左右键控制小企鹅的方向.

还是个半成品,刚才测试了一下,发现还有很多问题.日后改进下.