Flash8平铺网页背景图文教程
早在之前写过在
[url=http://www.webstudio.com.cn/tutorial/show.php?id=30]
[color="#636194"]flashmx2004中平铺背景[/color]
[/url]
的方法,虽然它也是有效果的,但相对使用flash8时还是显得有些复杂.这次介绍的是flash8中的MovieClip的新方法MovieClip.beginBitmapFill()法.使用这种方式来平铺背景会非常的简单.下面开始.
[1b]演示文件:[/1b]
1. 我们需要先准备一张小图.当前我们使用的是一张小的gif图像如下图所示:
[img]http://www.5uflash.com/Files/BeyondPic/2007-2/10/pattern_149.gif[/img]
如果你想测试可以直接下载些图像来测试.
2. 新建一个flash文档,大小随意,将我们选定的这张图像导入到库中,并在库中直接为此图像设置链接.当前我们设置为pattern1,基本方法是选中库中刚导入的图像,右击选择链接,如下图所示:
[img]http://www.5uflash.com/Files/BeyondPic/2007-2/10/tile1_ws.jpg[/img]
3. 完成这一步操作之后,按下来我们准备使用代码来平铺背景.在前面我们提到过我们将使用MoiveClip.beginBitmapFill()方法.我们先看一下beginBitmapFill()方法:
public beginBitmapFill(bmp:BitmapData, [matrix:Matrix], [repeat:Boolean], [smoothing:Boolean]) : Void
beginBitmapFill方法是用位图来添充绘画区域,也就是说它需要先有一个绘画区域,它有四个参数,bmp参数可以是一张透明或不透时的图像,matrix参数主要用来用bmp进行变换操作,包括旋转,缩放和移动,后面两个参数repeat是设定是否重复, smoothing参数是设计是否平滑,默认为false即不平滑.针对于beginBitmapFill()最基本的应用是你可以只使用bmp参数.ok.下面我们准备编码.
4. 选中场景中的第一帧,在其中加入如下代码:
[1b]代码:[/1b]
//导入flash8 bitmapData类
import flash.display.BitmapData;
//创建bitmapData实例,这里使用的是flash8的loadBitmap.如不清楚可以//参看本站的flash8 bitmapData教程
var tile:BitmapData = BitmapData.loadBitmap("pattern1");
//使用beginBitmapFill()方法开始添充.
this.beginBitmapFill(tile);
//下面一段是根据屏幕的大小来绘制绘画区域,用以beginBitmapFill来添充.
this.lineTo(Stage.width, 0);
this.lineTo(Stage.width, Stage.height);
this.lineTo(0, Stage.height);
this.lineTo(0, 0);
this.endFill();
5. 现在测试你的影片,你就可以看到如下图所示的效果了.
[img]http://www.5uflash.com/Files/BeyondPic/2007-2/10/tile2_ws.jpg[/img]
6. 呵呵,看上去的确很简单,只需要几行代码即可,相对于flashmx2004的平铺效果来说,现在你不在需要计算屏幕的宽高能容纳多少张小图了.ok.现在点击右上角的窗口放大按钮,我们发现只有中心区域有添充,四周并没有,也就是说它没随屏幕的变化而进行重绘,这并不是我们想要的,对于背景来说,需要让它随着屏幕大小的变化而变化. 接下来我们继续添加代码.
7. 要想让它随着屏幕的大小变小,我们需要使用flash8中的Stage类来处理.如下代码:
[1b]代码:[/1b]
Stage.scaleMode = "noScale";
Stage.align = "TL";
var stageListener:Object = new Object();
stageListener.onResize = function() {
trace("w:"+Stage.width+", h:"+Stage.height);
tilebg();
};
Stage.addListener(stageListener);
//调用tilebg()函数第一次绘制
tilebg();
*******************************************
import flash.display.BitmapData;
function tilebg(){
var tile:BitmapData = BitmapData.loadBitmap("pattern1");
this.beginBitmapFill(tile);
this.lineTo(Stage.width, 0);
this.lineTo(Stage.width, Stage.height);
this.lineTo(0, Stage.height);
this.lineTo(0, 0);
this.endFill();
}
我们在我们原有的代码之上加入了一段Stage大小变化的侦听,这一段应当说是我非常常用的代码,为了方便起见,我们把原来的代码定义成一个函数即tilebg(),这样当屏幕大小发生变化时,就会执行onResize()方法,就会调用定义好的tilebg()函数.ok.现在在测试你的影片,刚才的问题已经解决了,你可以点击swf窗口的放大按钮来查看效果
8. 接下来我们深入研究一下beginBitmapFill()其它的几个参数.假设我们希望我们平铺完的效果始终是光滑的.那么我们就设定smoothing始终为true; 我们来看Matrix和repeat两个参数.选中第一帧,打开actionscript面板.我们做如下的简单的修改.
[1b]代码:[/1b]
function tilebg(){
var tile:BitmapData = BitmapData.loadBitmap("pattern1");
var matrix = new flash.geom.Matrix();
repeat = false;
smoothing = true;
this.beginBitmapFill(tile,matrix,repeat,smoothing);
this.lineTo(Stage.width, 0);
this.lineTo(Stage.width, Stage.height);
this.lineTo(0, Stage.height);
this.lineTo(0, 0);
this.endFill();
}
我们只需要在tilebg()函数中做一点修改, 分别定义了matrix, repeat,和smoothing三个参数,还有一处不要忘记了,this.beginBitmapFill(tile,matrix,repeat,smoothing)把其它三个参数加入进去.默认状态下repeat为true;现在我们改成false.测试我们可以观看到这样的效果.
[img]/uploads/allimg/080324/1726484.jpg[/img]
看上去也是不错的效果. 当然此时它仍会随屏幕的大小发生变,接下来我们看Matirx,flash8中Matrix变换矩阵相对比较复杂.但flash8提供了几种关于matrix的简单方法,比如旋转,缩放,位移等,这里我们示范一下旋转.
9. 再次修改上面的tilebg()函数.加入matrix变换.如下:
[1b]代码:[/1b]
function tilebg(){
var tile:BitmapData = BitmapData.loadBitmap("pattern1");
var matrix = new flash.geom.Matrix();
matrix.rotate(Math.PI/4);
repeat = false;
smoothing = true;
this.beginBitmapFill(tile,matrix,repeat,smoothing);
this.lineTo(Stage.width, 0);
this.lineTo(Stage.width, Stage.height);
this.lineTo(0, Stage.height);
this.lineTo(0, 0);
this.endFill();
}
我们在其中加入了一行matrix.rotate(Math.PI/4)即转动45度.
测试效果如下所示:
[1b]演示文件[/1b]
如果你对matrix的其它方法感兴趣,你可以继续试试看.可以根据你的需要求来进行定制.ok.
本文转自:http://www.5uflash.com/flashjiaocheng/Flashaschengxu/95.html
Flash8平铺网页背景图文教程相关推荐
- 黑马程序员前端-CSS背景:颜色、图片、平铺、背景图片位置、背景图像
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结 黑马程序员前端-CSS之emmet语法 黑马程序员前端-CSS的 ...
- Web前端,CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言 持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
- Edge浏览器网页怎么收藏 Edge浏览器网页收藏图文教程
Edge浏览器是微软最新推出的网页浏览工具.而现在有很多Edge浏览器新用户可能对它不是很了解,在使用过程中会出现小问题.今天小编就为大家解答Edge浏览器网页怎么收藏,一起来看教程吧! Edge浏览 ...
- Java 设置PDF平铺图片背景(水印)
一.概述及环境准备 本文介绍使用免费版PDF库-Free Spire.PDF for Java加载图片来设置成PDF平铺图片背景的效果,也可以作为平铺图片水印来使用:编辑代码前,需要先导入jar文件, ...
- Css的背景(背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定)
通过css背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色: Background-color:#******: < ...
- CSS的背景属性设置(背景颜色、背景图片、背景平铺、背景附着、背景复合写法)
文章目录 1 背景颜色 2 背景图片 3 背景平铺 4 背景图片位置 5 背景图像固定(背景附着) 6 背景复合写法 7 背景色半透明 8 背景总结 案例:五彩导航 通过CSS背景属性,可以给页面元素 ...
- html图片代码DWCS5,dreamweaver cs5网页制作图文教程
网页设计需要使用可视化与源代码编辑相结合布局,对初学者建议使用表格布局,此方法最便于掌握,操作起来速度快. 插入表格:直接点击快速工具中表格命令:按快捷键Ctrl+Alt+T插入:点击 插入-表格 插 ...
- CSS常用背景属性(背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、背景属性复合写法)
本博文记录CSS中比较常用的背景属性,包括背景颜色:background-color.背景图片:background-image.背景平铺:background-repeat.背景位置:backgro ...
- flex 平铺布局_Flex 布局教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
最新文章
- win下手动编译狂魔的必备C/C++编译环境
- 解决 Iframe跨域session 丢失问题
- gis影像格式img转为ecw_微图影像地图导出拼接大图的参数说明
- Delphi用ini文档实现界面无闪烁多语言转换
- axios从入门到源码分析 -http-xhr
- 使用macOS自带convert,sips命令快速处理图片及转换图片格式
- php的数组key删除,php删除数组的key
- Domino服务器以及Notes客户端重新配置的方法
- AndroidStudio_在android中使用定时器_异步定时实现心跳保活功能---Android原生开发工作笔记231
- 浏览器插件----神奇的鼠标
- Style主题Theme风格Android
- 江西省建设工程安全质量监督管理局全省工程安全质量信息数据维护升级存储及异地备份项目中标公告...
- [转]Java实现的求解经典罗马数字和阿拉伯数字相互转换问题示例
- 网络编程中常用的fd是什么
- 网络实名认证接口认证形式有哪些?
- 微服务资源库太强了,学习手册限时开源
- python中使用python-dotenv管理环境变量
- 频谱细化matlab程序,频谱细化-----Zoom-FFT算法介绍及MATLAB实现
- Java数据结构--Linkedlist
- Centos7离线安装autoconf