About

<#TEMPLATE_INCLUDE_NINEPAGE_ABOUTME#>
  • Jan

    26

    Feathers3 ToggleSwitch 一些备注

    • 0 Comments
    • Flash Platform

    ToggleSwitch 在视觉上就是一个开关按钮,控制 on 和 off 的状态。可以当成是 Check 另一种风格的组件,滑块可以用手指滑动或点击切换状态。

    ToggleSwitch组件由on 和 off 文本、滑块、以及一个或两个轨道组成。

    1、on 和 off 文本:

    toggle.onLabelFontStyles = new TextFormat( "Helvetica"20, 0xcc0000 );
    toggle.offLabelFontStyles = new TextFormat( "Helvetica"20, 0x000000 );
    //如果禁用时的文本字体样式与普通常不一样,同样可以设置
    toggle.onLabelDisabledFontStyles = new TextFormat( "Helvetica"20, 0x9a9a9a );
    toggle.offLabelDisabledFontStyles = new TextFormat( "Helvetica"20, 0x9a9a9a );

    2、轨道与布局:轨道一般是一个或两个按钮组成的,trackLayoutMode 属性决定轨道由几个按钮组成(默认值是 TrackLayoutMode.SINGLE,单个轨道),如果想在按钮的两侧分别有两个不同的轨道按钮,可以将值设为 TrackLayoutMode.SPLIT。当值为 TrackLayoutMode.SINGLE 时,只有一个 on 状态的轨道会一直填充整个组件的区域,不会有 off 状态的轨道出现。

    3、滑块:它其实也是一个按钮……

    轨道与滑块都是按钮组件,所以普通的按钮组件常用的功能与外观设置的方法一般都适用于它们。

    Jan

    26

    Feathers3 PickerList 一些备注

    • 0 Comments
    • Flash Platform

    PickerList  组件显示一个按钮,在点击按钮后会弹出一个选择列表(pop-up List),通过修改 pop-up 的弹出内容,可以为不同的平台定制不同的弹出列表对象;弹出的列表对象可以通过 popUpContentManager 属性设置,用不同的方式显示,类似下拉的菜单、 Callout、或者是一个叠加的模态化窗口(列表与舞台宽度相同)等。

    基本使用流程, new 一个对象并添加到显示列表:

    var list:PickerList = new PickerList();
    this.addChild( list );

    然后通过 ListCollection 对象赋值给 dataProvider 属性,就可以通过弹出的 List 对象获取选择数据:

    var groceryList:ListCollection = new ListCollection(
    [
        { text: "Milk" },
        { text: "Eggs" },
        { text: "Bread" },
        { text: "Chicken" },
    ]);
    list.dataProvider = groceryList;

    设置弹出的 List 对象(创建项渲染器,并指定项渲染器的 labelField 属性需要使用的对应字段):

    function createItemRenderer():IListItemRenderer
    {
        var itemRenderer:DefaultListItemRenderer = new DefaultListItemRenderer();
        itemRenderer.labelField = "text";
        return itemRenderer;
    }
    function createPopUpList():List
    {
        var list:List = new List();
        list.itemRendererFactory = createItemRenderer;
        return list;
    }
    list.listFactory = createPopUpList;

    被选择对象的标签(label)也需要显示在按钮上,因为我们还需要将值传到 PickerList  对象的 labelField 属性上:

    list.labelField = "text";

    请注意上面的两次设置的 labelField ,前一次是在弹出的 List 组件对象上,后一次是在 PickerList  组件对象上(自定义项渲染器并不强制要 labelField 属性,所以 PickerList 对象并不能从弹出的 List 对象自动检测这个属性,所以需要手动分别指定两次)。

    默认情况下会选中第一项数据,PickerList  按钮上显示的是第一项数目,但也可以手动设置不选择任何项,只给出一些文字提示(prompt 属性),如:

    list.prompt = "Select an Item";
    //如果要使用 prompt 属性起作用,必须把 selectedIndex 设为 -1,表示不选择任何项
    list.selectedIndex = -1;

    通过 popUpContentManager 属性可以自定义弹出列表的行为,常用的三种对象:

    1、VerticalCenteredPopUpContentManager 类似一个安卓系统上的居中显示的选择 UI 界面。

    2、CalloutPopUpContentManager 类似一个 Callout 组件,并有一个箭头指向点击的按钮目标源。

    3、DropDownPopUpContentManager 类似一个下拉菜单。

    创建自定义的弹出列表的行为控件相关的类,需要实现 IPopUpContentManager 接口类。

    Jan

    26

    Feathers3 PageIndicator 一些备注

    • 0 Comments
    • Flash Platform

    PageIndicator 一般可滚动、却分页的组件一起使用,提供一系列的“符号(symbol)”,既在视觉上表示页面索引的位置,也可以直接用于点击导航页面。

    基本用法:

    var pages:PageIndicator = new PageIndicator();
    pages.pageCount = 5;
    this.addChild( pages );

    pageCount 表示页面数量,并且添加到显示列表后,如果没有进行任何设置,默认它的第一个符号是处于被选中状态。

    元素在进行排列的时候默认是水平布局的,也可以通过 direction 属性进行修改 Direction.HORIZONTAL 或 Direction.VERTICAL;还有其它一系列的布局相关的值可以提供简单的修改方式:

    pages.gap = 4;
    pages.paddingTop = 4;
    pages.paddingRight = 4;
    pages.paddingBottom = 4;
    pages.paddingLeft = 10;
    pages.horizontalAlign = HorizontalAlign.CENTER;
    pages.verticalAlign = VerticalAlign.MIDDLE;

    元素的普通状态与被选中的状态,分别可以使用 normalSymbolFactory 与 selectedSymbolFactory 样式属性进行设置,可以是任何 Starling 显示对象:

    pages.normalSymbolFactory = function():DisplayObject
    {
        return new Image( normalSymbolTexture );
    };

    pages.selectedSymbolFactory = function():DisplayObject
    {
        return new Image( selectedSymbolTexture );
    };

    当 PageIndicator 页面数量固定的情况下,被选择页面值更改时,这些元素对象是会被重复使用的(只是调整对象的位置,并不会从内存中销毁与重建)。

    Jan

    26

    Feathers3 NumericStepper 一些备注

    • 0 Comments
    • Flash Platform

    NumericStepper 组件通过加号或减号按钮修改数值,但如果 editing 被启用(比如在移动设备上 editing 是被禁用的)也可以通过文本框对象(text input)直接输入数值。

     基本用法样例代码:

    var stepper:NumericStepper = new NumericStepper();
    stepper.minimum = 0;
    stepper.maximum = 100;
    stepper.value = 50;
    this.addChild( stepper );

    最大值与最小值决定 NumericStepper 对鐌 的取值范围。但是请注意,此时没有设置 step 属性,点击加或减按钮并不会更改 NumericStepper 对象的值。所以同时需要设置一下 step 属性值:

    stepper.step = 1;

    还需要注意,如果 step 值被设为整数1,那么通过加减号按钮设置 NumericStepper 对象时 value 属性会变成整数。既似类似 value 值程序化的强制设为 4.5 ,当点击加号按钮时也会先被四舍五入到5,然再加 1,也就是变成 6;但如果将 step 的值设为浮点数,比如 0.1,那么 依旧还是会变成值 4.6。

    NumericStepper 组件的外面是由三部份组成的,分别是加、减号铵钮和一个文本对象(text input)。布局可以通过 buttonLayoutMode 属性值来调整;textInputGap 可以调整文本对象与按钮对象的间距;如果布局上两个按钮被放在文本框的同一侧,还可以通过 buttonGap 调整两个按钮之间的间距。

    Jan

    26

    Feathers3 DateTimeSpinner 一些备注

    • 0 Comments
    • Flash Platform

    DateTimeSpinner 是一组 SpinnerList 组成的组件,用来选择日期和时间。它支持多种编辑模式,允许用户只选择日期,只选择时间,或两者。

    var spinner:DateTimeSpinner = new DateTimeSpinner();
    spinner.editingMode = DateTimeMode.DATE;//设置显示日期、时间或同时显示
    spinner.minimum = new Date(197001);
    spinner.maximum = new Date(20501131);
    spinner.value = new Date(20151031);
    this.addChild( spinner );

    DateTimeSpinner 对象的 value 属性值代表当前选择的日期与时间值。minimum 与 maximum 属性值决定一个被选择日期与时间的范围(minimum 与 maximum 属性也可以省略设置,会自动选择一个合理的范围)。

    与其它大多数组件一样,设置皮肤外观两种方式,一种是通过主题文件(theme),另一种是没有主题文件(或不通过主题文件):

    通过主题文件设置样例代码: 

    getStyleProviderForClass( SpinnerList )
        .setFunctionForStyleName( DateTimeSpinner.DEFAULT_CHILD_STYLE_NAME_LIST, setDateTimeSpinnerListStyles );

    private function setDateTimeSpinnerListStyles( list:SpinnerList ):void
    {
        var skin:Image = new Image( texture );
        skin.scale9Grid = new Rectangle( 2316 );
        list.backgroundSkin = skin;
    }

    也可以在主题文件中自定义样式名称:

    spinner.customListStyleName = "custom-list";

    //通过 customListStyleName 样式属性名称设置
    getStyleProviderForClass( SpinnerList )
        .setFunctionForStyleName( "custom-list", setDateTimeSpinnerCustomListStyles );

    不通过主题文件设置皮肤外观,而是通过 listFactory 属性设置子组件的外观:

    spinner.listFactory = function():SpinnerList
    {
        var list:SpinnerList = new SpinnerList();

        //skin the lists here, if you're not using a theme
        var skin:Image = new Image( texture );
        skin.scale9Grid = new Rectangle( 2316 );
        list.backgroundSkin = skin;

        return list;
    }

    Jan

    25

    Feathers3 SpinnerList 一些备注

    • 0 Comments
    • Flash Platform

    SpinnerList 类是 List 类的子类,一个 SpinnerList 通常在用户进行滚动时会被设为无限循环,被选择项位于列表的中间,在视觉上用突出的颜色表示。

    SpinnerList 与常规的 List 类稍稍有些不同的地方,就是不能将 isSelectable 设为 false,否则就会抛出异常。因为 SpinnerList 使用的意图就是为了选择某一项。

    选择项在视觉上的高亮皮肤可以自定义,可以是任何 Starling 显示对象,如 starling.display.Image:

    list.selectionOverlaySkin = new Image( texture );

    皮肤是水平居中或垂直居中取决于滚动的方式。

    Jan

    25

    FlowLayout 用于显示从左向右的多行显示布局(如 List、LayoutGroup、ScrollContainer 等),支持水平或垂直分页,有许多简单的属性支持间距、对齐等设置。

    a、常用的简单属性如:padding、paddingTop、paddingRight、paddingBottom、paddingLeft、gap、horizontalGap、verticalGap、horizontalAlign、verticalAlign、 rowVerticalAlign 等等。

    b、支持虚拟化布局(关于虚拟化布局的备注资料参看《Feathers3 HorizontalLayout & VerticalLayout 一些备注》第3条)。

    WaterfallLayout 与上面的 FlowLayout 类似,但它是显示多个列的布局,每一项的宽度是相同的,高度可以不同。所有项会按顺序被添加到布局,但每一项可能会被添加到任何可用的一列中(布局标准为:在布局进行时被选择的列高度,再加上被添加项的高度产生的列高度尽可能的小)。

    a、常用的简单布局属性基本上与上面的 FlowLayout 类列举的类似。

    b、还可以通过 requestedColumnCount 属性指定请求布局的列数(容器的尺寸可能会比较小,请求的列数如果过多的话会无法按请求的列数布局,只会按最大可容纳的数量列数布局;但只要容器的尺寸足够大,就会按请求的列数进行布局)。如果容器没有手动指定容器的宽度,设置requestedColumnCount 属性值后,会按请求自动计算出容器的宽度。

    c、同样支持虚拟化布局。

    Jan

    25

    媒体播放器控件(Media player controls)用于控制媒体播放器,如播放、暂停、全屏、静音、播放头进度时间提示等等,在 Feathers 中的控件罗列:

    1、FullScreenToggleButton:用于控制切换视频播放器(VideoPlayer)全屏状态。

    2、MuteToggleButton:控制媒体播放器是否静音。

    3、PlayPauseToggleButton:控制播放与暂停。

    4、SeekSlider:控制播放头位置、进度提示。

    5、TimeLabel:显示当前时间、剩余时间或总时间。

    6、VolumeSlider:控制音量大小。

    Jan

    25

    Feathers3 VideoPlayer 一些备注

    • 0 Comments
    • Flash Platform

    VideoPlayer  通过 flash.net.NetStream 对象提供视频播放功能。视频文件可以是一个  URL 地址来源,并作为 Starling 纹理显示。媒体播放器控件(Media player controls)可以作为视觉元素 / 控件添加到 VideoPlayer 对象中,比如播放、暂停、当前的时间进度等元素。VideoPlayer 类是 LayoutGroup 类的子类,所以子元素可以通过布局对象进行布局。

    最基本的流程:

    var player:VideoPlayer = new VideoPlayer();
    player.setSize( 320300 );//设置尺寸
    this.addChild( player );//添加到显示列表
    player.videoSource = http://example.com/video.m4v;

    视频中的每一帧画面会成为 Starling 中的纹理对象,所以我们使用 ImageLoader 对象来显示纹理:

    //添加一个 ImageLoader 对象作为 VideoPlayer 的子对象用于显示视频纹理
    var loader:ImageLoader = new ImageLoader();
    player.addChild( loader );

    此时还没有设置 ImageLoader 的 source 属性。在 GPU 上需要一些时间初始化视频纹理用于 Starling 的渲染,一旦可以将纹理传递给 ImageLoader,VideoPlayer 对象就会调度 Event.READY 事件(在 Event.READY 事件派发之前,VideoPlayer 对象的 texture 属性值是 null)。

    function videoPlayer_readyHandler( event:Event ):void
    {
        loader.source = player.texture;//视频纹理可以通过 texture 属性访问
    }
    player.addEventListener( Event.READY, videoPlayer_readyHandler );

    同时还需要侦听 Event.CLEAR 事件,当视频纹理被销毁时将会派发此事件:

    function videoPlayer_clearHandler( event:Event ):void
    {
        loader.source = null;
    }
    player.addEventListener( Event.CLEAR, videoPlayer_clearHandler );

    添加一些视觉元件控件可以用于控制视频的播放:

    var controls:LayoutGroup = new LayoutGroup();
    controls.styleNameList.add( LayoutGroup.ALTERNATE_STYLE_NAME_TOOLBAR );//作为一个 toolbar 添加
    player.addChild(controls);

    var button:PlayPauseToggleButton = new PlayPauseToggleButton();
    controls.addChild( button );

    var slider:SeekSlider = new SeekSlider();
    controls.addChild( slider );

    这两个控件都是 Feathers 提供的内置的“媒体播放器控件”,不需要为它们编写任何业务逻辑代码就能控制视频的播放。

    视频加载的几种方式:

    a、如上面的网络 URL 地址:

    player.videoSource = http://example.com/video.mp4;

    b、本地文件地址(本质上它还是一个 URL 地址):

    var videoFile:File = File.applicationDirectory.resolvePath("video.mp4");
    player.videoSource = videoFile.url;//这里一定要记得使用 url 属性,如使用 nativePath 不会起作用的

    c、从流媒体服务器加载,类似商业的 Adobe Media Server 或开源的 Red5 Media Server ,通过 netConnectionFactory 属性连接服务器,然后在 videoSource 属性设置视频流的名称:

    player.netConnectionFactory = function():NetConnection
    {
        var nc:NetConnection = new NetConnection();
        nc.connect("rtmp://localhost/vod");
        return nc;
    };
    player.videoSource = "mp4:streams/myvideo";

    如果是同一个服务器上不同的视频流,只需要更改 videoSource 属性的视频流的名称就可以。

    Jan

    25

    Feathers3 SoundPlayer 一些备注

    • 0 Comments
    • Flash Platform

    SoundPlayer 支持 URL 加载或从一个 Sound 对象加载,媒体播放器控件(Media player controls)可以作为视觉元素 / 控件添加到 SoundPlayer 对象中,比如播放、暂停、当前的时间进度等元素。SoundPlayer 类是 LayoutGroup 类的子类,所以子元素可以通过布局对象进行布局。

    最基本用法的样例代码:

    var player:SoundPlayer = new SoundPlayer();
    this.addChild( player );//如果不想添加视觉元件,也可以不添加到显示列表
    player.soundSource = http://example.com/sound.mp3;

    比如,添加一些视觉元素控件可以用于控制音频的播放:

    var button:PlayPauseToggleButton = new PlayPauseToggleButton();//添加一个暂停按钮
    player.addChild( button );

    var slider:SeekSlider = new SeekSlider();//添加一个播放头控制控件
    player.addChild( slider );

    这两个控件都是 Feathers 提供的内置的“媒体播放器控件”,不需要为它们编写任何业务逻辑代码就能控制音频的播放。

    如上样例,SoundPlayer 类结合了媒体播放器控件后,无论是播放音频还是控制音频都变的十分方便。