ActionScript
TypeScript
JavaScript

一、新建AS3项目,使用LayaAirIDE创建UI并显示

发布时间:2017-02-10

一:新建AS3项目,UI面板的制作与显示

《图文混排》顾名思义,就是把文字和图片混合排列在一起,让内容变得美观、有趣。本篇文章我们将演示如何使用LayaAir快速开发,重现传说中的聊天室-图文混排。先声明一下:所使用资源全部为原开发者所有,本例只做研究学习之用,源码和资源请勿商用。

最终效果:


image.png



新建LayaAir AS3项目

打开LayaAir IDE,新建一个空项目,项目名称为LayaAirChat,本例以ActionScript3.0为例,其他语言同理

如何用LayaAirIDE创建项目及环境配置,面前章节已经讲过,这里就不再絮讲。不了解的同学建议先看一下

image.png


制作UI面板

首先我们先把图文混排聊天室需要的UI素材,放置到LayaAir IDE的资源面板

步骤1:右击LayaAir IDE资源面板,打开所在目录

image.png 


步骤二:将图文混排聊天室需要的UI素材放置到该目录下(chat为聊天室资源;common为通用资源;


image.png

步骤三:返回LayaAir IDE设计模式界面,F5刷新资源及页面,即可在资源面板看到新放置的资源文件夹

image.png


然后开始拼接我们的UI面板,如下

ChatExpression.ui:表情UI面板

item0:存放表情的列表

image:图片  

image.png




步骤一:将一张图片转换为BOX容器

image.png

步骤二:将这个BOX的renderType设置成render

image.png

步骤三:将这个BOX转换为LIST

image.png


Chat.ui :聊天室面板


组件命名以及含义:

chatInfo:创建聊天内容,设置该文本的属性prompt(输入提示符)为:请输入聊天内容

chatPanel: 文本发送后的显示区域,panel区域之外的文本不可见

selectFaceClip: 表情面板显示/隐藏按钮

btn_send: 消息发送按钮


image.png


按下快捷键F12导出界面UI类与图集资源,代码编辑模式显示如下

image.png

image.png


image.png



显示聊天室UI面板

    这里我推荐使用Flash BuilderFlashDevelop进行书写代码,LayaAir IDE对于AS3的支持还不是很完善,代码提示功能较弱。

这里我们以Flash Develop为例,

image.png

如果已经配置好了Flash Develop就直接双击

image.png

创建ChatMain.as作为我们的文档类,设置文档类。

image.png

不建议开发者直接针对LayaAir发布的UI类做出修改,需要创建其子类,在子类中做相应的设置和拓展,方便管理。

    

 

image.png


image.png

在ChatMain.as中书写我们的代码

package 
{
 import laya.debug.DebugTool;
 import laya.display.Stage;
 import laya.net.Loader;
 import laya.utils.Handler;
 import laya.webgl.WebGL;
 import view.ChatView;

 public class ChatMain 
 {
  
  public function ChatMain() 
  {
   //引擎初始化
   Laya.init(1136, 640, WebGL);
   //屏幕适配
   Laya.stage.scaleMode = Stage.SCALE_FIXED_WIDTH;
   //强制横屏
   Laya.stage.screenMode = Stage.SCREEN_HORIZONTAL;
   //资源加载,不加载的话图集资源没办法使用
   var resArray:Array = [{url:"res/atlas/chat.json",type:Loader.ATLAS},{url:"res/atlas/common.json",type:Loader.ATLAS},]
   Laya.loader.load(resArray,Handler.create(this,this.onLoaded))
   //DebugTool.init(true,false,false);
  }
  
  private function onLoaded():void 
  {
   //显示chatUI
   var _chatView:ChatView = new ChatView();
   //页面居中
   _chatView.pos(Laya.stage.width - _chatView.width >>1, Laya.stage.height - _chatView.height>>1);
   //添加到舞台上
   Laya.stage.addChild(_chatView );
  }
  
 }
 
 }


执行结果:

image.png