SWF自适应布局技巧 (Rapid Flash Development)快速Flash开发

铺满浏览器屏幕的Flash可以通过设置引用Flash参数中的width和height为100%来实现.但是,光做这点是不够的,原因是Flash的内部的界面部局,尚没有如此智能(指的是非FLEX PROJECT,如ActionScript Project或用Flash IDE编译的项目等). 今天,用户的浏览器分辨率主要为1024*768和1280*1024,还有一些老外用那种非常宽大的浏览器:


想让你的Flash应用在诸多用户面前都有一个比较好的页面展现,就需要一些代码来辅助了.

注意到AS3中有一个Event.RESIZE事件,此事件当Flash的大小发生改变时激发...AHA,找到答案了;)

看一下实现的代码,以下代码写在主类中:

//4.init screen size adjust
private function initScreenAdjust():void
{
    //Set Scale Mode,设定缩放模式为无缩放
    stage.scaleMode=StageScaleMode.NO_SCALE;

//Set Screen adjust event,设置屏幕缩放
    stage.addEventListener(Event.RESIZE,screenAdjust);

//在程序初始时就调用一下界面调整

screenAdjust(null);
}

//4.1Adjust Sample实例
private function screenAdjust(evt:Event):void
{

//UIData.SCREEN_WIDTH和UIData.SCREEN_HEIGHT指的是编译出的Flash宽高值.

//可通过[SWF(width="1024",height="768"]的形式进行设定(FLEX),或在FLASH IDE中直接设定
        var offX:int=Math.floor((UIData.SCREEN_WIDTH -stage.stageWidth)/2); 
        var offY:int=Math.floor((UIData.SCREEN_HEIGHT-stage.stageHeight)/2);

//this指的是主类,这样做的原因请参考图2
        this.x=offX;
        this.y=offY;

//内部UI调整,这里调整的是下部工具栏的一个Y值.
        mDownToolBar.y =stage.stageHeight-UIData.DOWN_BAR_OFF_Y;

}

图2展示的是Flash主类的坐标值与stage宽高的关系,这里的调整是将Flash主类的左上角始终贴齐当前Flash Player的左上角,无论尺寸如何变化.

图2

其实,我这里只是给出一种界面调整方案而已,有时,你可能希望主类局中,一切就看你的需要喽.

一个简单的示例程序地址,可以通过调整浏览器的大小来观察界面的布局改变:Video始终居中;上,下工具栏分别位于上下两边,(代码很容易,主要的上面都已经贴了,就不附代码了)

http://www.xia108.com/labs/rapidFlashDev/chp2.solution/2.2.1FullScreen/index.htm

贴一个实际的应用吧,我的六度拓扑在不同浏览器下的表现,广告广告;)

1024*768

1280*1024

赞 (0)

相关推荐

  • jquery自适应布局的简单实例

    代码整理 - uix.layout.js /** * Grace [jQuery.js] * * UIX页面布局 * 290353142@qq.com * exp: * $.uix.layout();//执行布局 * class="uix-layout-container";//标识布局容器 * class="uix_box";//用于调整 布局时将此元素高度铺满父容器(支持设置padding\margin\border) * 例: html1:div中 <d

  • 自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

    一.先明白几个概念 phys.width: device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width. 其中我们可以获取phys.width即width通过document.documentElement.clientWidth;而获取css-width通过 window.screen.width获取.如iphone6的phys.width为750px,而css-width为375px. 二.明白一个浏览器默认行为. 试

  • 关于图片按比例自适应缩放的js代码

    关于图片按比例自适应缩放的js代码

    如下图. 瞄了一下,居中可以用 text-align:center; 来实现.而按比例缩放,利用预设 <img /> 的 width .height 属性解决不了.因为用户图片可能是很长的,也可能是很宽的.在线上想了一下他们的关系,按条件来判断是这样的: 复制代码 代码如下: if(实际宽度 > 预览最大宽度) { 缩放宽度 = 预览最大宽度 } if(实际高度 > 预览最大高度) { 缩放高度 = 预览最大高度 } 但是这样会有问题,比如当宽度和高度都被缩放,如果缩放比较不同,图

  • 典型的三行二列居中高度自适应布局

    典型的三行二列居中高度自适应布局

    如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) 首先先按这里看实际运行效果,这个页面在mozilla.opera和IE浏览器中均可以实现居中和高度自适应.我们来分析代码: 完整代码<html><head><style type="text/css">body{background:#999;text

  • CSS百分比padding制作图片自适应布局

    CSS百分比padding制作图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比值不一样. 这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明,这里不展开. 对于padding属性而言,任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块级容器,举个例子,假设现在有个<div>元素: div { padding: 50%; } 或者: di

  • JS制作手机端自适应缩放显示

    JS制作手机端自适应缩放显示 示例一: <script> var _width = parseInt(window.screen.width); var scale = _width/640; var ua = navigator.userAgent.toLowerCase(); var result = /android (\d+\.\d+)/.exec(ua); if (result){ var version = parseFloat(result[1]); if(version>

  • SWF自适应布局技巧 (Rapid Flash Development)快速Flash开发

    SWF自适应布局技巧 (Rapid Flash Development)快速Flash开发

    铺满浏览器屏幕的Flash可以通过设置引用Flash参数中的width和height为100%来实现.但是,光做这点是不够的,原因是Flash的内部的界面部局,尚没有如此智能(指的是非FLEX PROJECT,如ActionScript Project或用Flash IDE编译的项目等). 今天,用户的浏览器分辨率主要为1024*768和1280*1024,还有一些老外用那种非常宽大的浏览器: 想让你的Flash应用在诸多用户面前都有一个比较好的页面展现,就需要一些代码来辅助了. 注意到AS3中

  • Android布局技巧之使用ViewStub

    Android布局技巧之使用ViewStub

    多亏了<include />标签,在Android里,很容易就能做到共享和重用UI组件.在Android开发中,很容易就能创建出复杂的UI结构,结果呢,用了很多的View,且其中的一些很少使用.针对这种情况,谢天谢地,Android还为我们提供了一个特别的构件--ViewStub,它可以使你充分享受<include />的好处而不会造成无用View的浪费. ViewStub是一个看不见的,轻量级的View.它没有尺寸,也不会绘制以及以某种形式参与到布局中来.这意味着ViewStub

  • Android布局技巧之创建可重用的UI组件

    Android平台提供了大量的UI构件,你可以将这些小的视觉块(构件)搭建在一起,呈现给用户复杂且有用的画面.然而,应用程序有时需要一些高级的视觉组件.为了满足这一需求,并且能高效的实现,你可以把多个标准的构件结合起来成为一个单独的.可重用的组件. 例如,你可以创建一个可重用的组件包含一个进度条和一个取消按钮,一个Panel包含两个按钮(确定和取消动作),一个Panel包含图标.标题和描述等等.简单的,你可以通过书写一个自定义的View来创建一个UI组件,但更简单的方式是仅使用XML来实现. 在

  • Pyqt5自适应布局实例

    在pyqt5中要做到自适应布局,必须应用Layout类 下面列出类似于 html 中 float 功能的布局方法: 实现原理: PyQt5中的布局中,stretch 属性类似于一个可自适应的空白布局.会尽可能将周围的组件布局向外挤压 from PyQt5.QtWidgets import QVBoxLayout, QHBoxLayout # 垂直居中 def vcenter_layout(*widgets): vbox = QVBoxLayout() vbox.addStretch() for

  • vue自适应布局postcss-px2rem详解

    vue自适应布局postcss-px2rem详解

    首先,我们来了解一下lib-flexible和amfe-flexible:lib-flexible是淘宝项目组开发出来的一个开源插件,会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size.而amfe-flexible是lib-flexible的升级版,所以现在我就只使用amfe-flexible了.与其搭配的postcss-px2rem(px

  • Vue前端项目自适应布局的简单方法

    Vue前端项目自适应布局的简单方法

    目录 一.单位尺寸 二.基于rem实现自适应布局 附:html5页面 的rem 布局适配方法 总结 一.单位尺寸 px % vw.vh: 窗口 em: 针对父元素的font-size rem:“root em”的缩写,是一个相对长度单位:rem单位作用于非根元素时,相对于根元素(html)字体大小,rem单位作用于根元素字体大小时,相对于其出初始字体大小. 说明: 谷歌浏览器,字体的默认大小是16px; 如果父元素item1的font-size=50px,那么子元素item2的1em=50px.

  • 教你一招解决vue页面自适应布局

    教你一招解决vue页面自适应布局

    目录 安装依赖 可配置项参数 重启项目 总结 兼容vue2.vue3项目,将vue文件中style里单位为px,编译时自动转换为vw.vh等单位 安装依赖 npm install postcss-px-to-viewport --save-dev vue.config.js 常规配置 module.exports = { //module.exports暴露的最外层添加以下代码 css: { requireModuleExtension: true, sourceMap: true, // 全局

  • 关于vue自适应布局(各种浏览器,分辨率)的示例代码

    关于vue自适应布局(各种浏览器,分辨率)的示例代码

    目录 1.前言 2.vue的布局风格 2.1vue3需要配合element plus进行布局 2.2src下面创建layout文件夹 3.测试效果 4.总结 1.前言 spa页面的layout布局对于前端项目的影响至关重要,在我们进行web端开发的时候,前端的各种大小屏幕,各种内核的浏览器不同,会导致我们的页面呈现出不一样的效果,如何进行更好的取舍,怎么能够达到产品对于系统展示效果的满意度,其实我们要前端有一套布局理念,这种理念指导我们如何进行优雅布局,怎么才能不被不合理的需求左右.理念分为以下

随机推荐