羔羊引擎之更换主题皮肤

qq229449388 · 发表于 2017-11-16 00:27:17

【游客模式】——注册会员，加入11RIA 闪客社区吧！一起见证Flash的再次辉煌……

您需要登录才可以下载或查看，没有帐号？立即注册

x

本帖最后由 qq229449388 于 2017-11-21 00:08 编辑

先看效果

羔羊引擎已经问世，现在大家来认识一下，羔羊引擎入门第一步，启动羔羊引擎，很简单，一句话看下面
首先新建一个as3工程，如下

package {

import GYLite.component.button.GYButton;

import GYLite.component.container.GYSprite;

import GYLite.component.scaleDisplay.ScaleMode;

import GYLite.component.text.GYText;

import GYLite.component.text.GYTextArea;

import flash.display.Sprite;

import flash.display.StageScaleMode;

import flash.events.Event;

import flash.events.MouseEvent;

import theme.Win7SkinTheme;

public class GYLiteAPI extends Sprite {

      public

      function GYLiteAPI() {

         this.addEventListener(Event.ADDED_TO_STAGE, addToStage);

      }

      private

      function addToStage(e: Event) : void {

         this.removeEventListener(Event.ADDED_TO_STAGE, addToStage);

         stage.scaleMode = StageScaleMode.NO_SCALE GYSprite.Init(stage, new Win7SkinTheme); // 启动羔羊引擎，只需一句话，问你怕不怕

      }

}

}
复制代码

可以看到上面，只需调用GYSprite的Init方法就可以启动，第一个参数很明显是stage舞台，第二个参数很明显主题，好吧，不是很明显，英语不好的人查一下，Theme是主题的意思。下面我们从主题开始说明一下，主题在羔羊引擎里面怎么用，首先主题类是通过实现接口ISkinTheme产生的，我们看看接口有哪些方法，打开ISkinTheme看看。

<blockquote>public interface ISkinTheme
{
function GetButtonSkin():IGYSkin;
function GetTabButtonSkin():IGYSkin;
function GetLinkButtonSkin():IGYSkin;
function GetScrollBarSkinV():IGYSkin;
function GetScrollBarSkinH():IGYSkin;
function GetListSkin():IGYSkin;
function GetTextInputSkin():IGYSkin;
function GetCheckBoxSkin():IGYSkin;
function GetRadioButtonSkin():IGYSkin;
function GetProgressBarSkin():IGYSkin;
function GetSliderSkin():IGYSkin;
function GetTextTextFormat():TextFormat;
function GetMenu():GYMenu;
function GetComboBox():GYComboBox;
function GetComboButtonSkin():IGYSkin;
function GetMenuSkin():IGYSkin;
function GetWindowSkin():IGYSkin;
function GetTextAreaSkin():IGYSkin;
function initRes():void;
function getBmp(n:String):BitmapData;

复制代码

可以看到基本上都是前面带Get的一些方法，这里所有的GetXXXXSkin，意思就是默认创建相应的组件时，内部会默认从这个方法里面提取皮肤，所以意味什么？没错了，就是换皮肤很简单啊，只需要实现这些接口，就可以换皮了。这些皮肤分别是哪些，我不多说了，查查字典，或者问问别人，其实GYSkinTheme主题类有注释，问我也可以。

注意里面有个initRes方法，就是初始化主题用的，当主题通过GYSprite.Init(stage, new Win7SkinTheme);方法传入，内部就会调用initRes方法初始化，想干些什么事情，随你便。getBmp方法没啥用，就是写给你玩玩的，你看着办吧。

可能光说接口，不明白具体怎么写，但是不要怕，羔羊引擎提供了一个GYSkinTheme的默认主题类，已经实现一遍这些接口，大家可以打开看看。因为代码比较长，我说明一下GetButtonSkin方法，其他大家举一反三。

/**获得默认的按钮皮肤*/
public function GetButtonSkin():IGYSkin
{
return new ButtonSkin(scaleBtnSkinVec,commonRect);
}

复制代码

如上，这个方法就是返回一个ButtonSkin类实例，什么是ButtonSkin类？打开看看就知道啊，这里告诉大家一个规则，所有皮肤都是最基本要实现IGYSkin接口，或者说继承GYSkin类，而ButtonSkin当然是GYSkin的子类，除此之外，其他皮肤如CheckBoxSkin，RadioButtonSkin等也一样。具体内容看内部基本差不多，易学易懂。

在GYSkinTheme，除了GetXXXXSkin等方法，还有要求的initRes方法，还有一个setRes方法，这个方法就是设置一些图片资源，大家可能一眼就可以看到里面有一堆BitmapData，如下

public var commonBtn_upBD:BitmapData;
public var commonBtn_overBD:BitmapData;
public var commonBtn_downBD:BitmapData;
public var commonBtn_disabledBD:BitmapData;
public var commonBtn_selUpBD:BitmapData;
public var commonBtn_selOverBD:BitmapData;
public var commonBtn_selDownBD:BitmapData;
public var commonBtn_selDisabledBD:BitmapData;
public var scaleBtn_upBD:BitmapData;
public var scaleBtn_overBD:BitmapData;
public var scaleBtn_downBD:BitmapData;
public var scaleBtn_disabledBD:BitmapData;

复制代码

可以看到，就是把Embed的图片，创建出BitmapData直接赋值，不要问我Embed是什么。

说到这里，大家应该大概了解启动羔羊引擎，以及使用主题给羔羊引擎换皮肤了，这里有一个win7的皮肤，供大家参考，我们使用上面的工程（使用的就是win7的皮肤），创建个按钮和文本来看看。

private function addToStage(e:Event):void
{
this.removeEventListener(Event.ADDED_TO_STAGE, addToStage);
stage.scaleMode = StageScaleMode.NO_SCALE
GYSprite.Init(stage, new Win7SkinTheme);
initUI();
}
private function initUI():void
{
var btn:GYButton;
btn = new GYButton;
btn.width = 150;
btn.height = 46;
btn.label = "创建一个按钮来玩玩\n点击我再创建一个文本";
btn.onClick = createText;
addChild(btn);
}
private function createText(e:MouseEvent):void
{
var t:GYTextArea = new GYTextArea;
t.setPadding(5);
t.vScroller.verticalPolicy = 1;
t.x = 200;
t.width = 200;
t.height = 200;
t.text = "这个是TextArea组件，羔羊引擎就是这么简单！仿照Win7SkinTheme类，自己可以更换更多主题。";
addChild(t);
}

复制代码

还是刚刚那个工程，我们添加initUI和createText方法，initUI里创建一个按钮，GYButton就是基本的按钮组件，这里要说明一下，onClk是一个点击事件的回调函数接口，给大家提供一个方便，没什么事大家就不要写什么addEventListener了。

可以看到，直接new出来的GYButton和GYTextArea已经是win7的皮肤了，只需要Win7Theme一个主题类文件和准备皮肤的文件夹，这个win7的皮肤文件夹在工程目录的toolImg文件夹里面，大家可以下附件去看，是不是感到换皮是多轻松的一件事。

下一个教程我会给出更多内容，有兴趣或者想知道更多内容的，请联系以下
qq：229449388(加我请写上，羔羊引擎) 或者邮件 229449388@qq.com
欢迎加群讨论 371259465

lesson0.rar (2.7 MB, 下载次数: 16)

yunjing · 发表于 2021-5-6 15:56:29

大佬牛B

[★ AS3 引擎] 羔羊引擎之更换主题皮肤

【游客模式】——注册会员，加入11RIA 闪客社区吧！一起见证Flash的再次辉煌……

站长推荐 /1