请打开pjblog 默认皮肤
固定宽度皮肤defaultFlash文件夹,我以这个皮肤举例教你怎么添加皮肤上的flash
第一步:上传皮肤flash
把顶部flash文件
head.swf放到皮肤文件夹里,例如pjblog默认皮肤defaultFlash 放到这个文件夹里
第二步:加载皮肤flash
找到skin.xml
<?xml version="1.0" encoding="UTF-8"?>
<SkinSet>
<SkinName>默认皮肤 - Flash导航条风格</SkinName>
<SkinDesigner>PuterJam</SkinDesigner>
<pubDate>2004-11-6</pubDate>
<DesignerURL>
http://puterjam.vipx.net</DesignerURL>
<DesignerMail>
puterjam@etang.com</DesignerMail>
<Flash>
<UseFlash>-1</UseFlash>
<FlashPath>head.swf</FlashPath>
<FlashWidth>748</FlashWidth>
<FlashHeight>80</FlashHeight>
<FlashAlign>center</FlashAlign>
<FlashTop>0</FlashTop>
<FlashTransparent>-1</FlashTransparent>
</Flash>
</SkinSet>
只要在皮肤的skin.xml文件</DesignerMail>后面,加上这段代码,
head.swf就能被载入到博客了
引用:
界面配置文件 skin.xml 字段分析
SkinName 界面名称
SkinDesigner 界面设计者
pubDate 发布时间
DesignerURL 设计者主页
DesignerMail 设计者电子邮件
Flash/UseFlash 是否使用Flash导航条 0=false -1=true
Flash/FlashPath Flash导航条路径名
Flash/FlashWidth Flash导航条宽度
Flash/FlashHeight Flash导航条高度
Flash/FlashAlign Flash导航条对齐方式 left | right | center
Flash/FlashTop Flash导航条距离页面顶部高度
Flash/FlashTransparent Flash导航条是否透明 0=false -1=true
<FlashWidth>748</FlashWidth>宽度可以取值为多少像素例如:748px,就表示flash有748像素宽,
你也可以定义成
<FlashWidth>100%</FlashWidth> 这样 flash就能伸缩自如,可以用于自适应皮肤。
第三步:CSS定位皮肤flash
上面的skin.xml虽然定位了flash的高与宽还有到顶部的距离,还定义了是否透明,但是不同的皮肤有不同的DIV结构,所以我们还要再二次定位,保证万无一失。
打开layout.css,在
/*---主体样式---*/
#container{width:760px;margin:0 auto;text-align:center;……省略}下面一排
添加
#FlashHead{position: absolute;width:100%;left:0px;}
这样就给flash层<div id="FlashHead" >定位了,
position: absolute;表示绝对定位,绝对定位有上top、下bottom,左left,右right,四种属性,因为skin.xml已经定意了top属性,所以我不必定义这个属性。上面css定义left左属性
left:0px,然而defaultFlash皮肤,是个固定宽度皮肤(#container{width:760px;margin:0 auto;text-align:center;……省略}) 宽度为760像素,比flash748像素宽一点,皮肤自动居中,flash层<div id="FlashHead" >是container层的一个子层,所以<div id="FlashHead" >也居中显示,因为flash比container层小12像素,所以定位
left:0px;表示左对齐。
width:100%; 是为了兼容FF游览器用的,如果不加<div id="FlashHead" >层就无法在FF居中显示,就会错位。
-------//
自适应皮肤flash定义-----------------------------------------------------------
如果你想给
自适应皮肤定位自动缩放flash,只用两步
第一步:打开skin.xml,在皮肤的skin.xml文件</DesignerMail>后面,加上下面的代码,
<Flash>
<UseFlash>-1</UseFlash>
<FlashPath>head.swf</FlashPath>
<FlashWidth>100%</FlashWidth>
<FlashHeight>80</FlashHeight>
<FlashAlign>center</FlashAlign>
<FlashTop>0</FlashTop>
<FlashTransparent>-1</FlashTransparent>
</Flash>
整个flash宽度为100%,高度为80px,位置center居中,这样就能收放自如了,
小技巧:因为Flash是基于矢量的软件,因此使用自适应皮肤时,如果缩放浏览览器,那百分比定义宽的Flash,也会跟着放大或缩小,也许会变形。
如果不希望这样,可以在flash AS脚本的第一帧写入以下脚本:fscommand("allowscale", "false");
此脚本会禁用自动缩放功能。但是对使用播放器的“放大”和“缩小”命令进行手动缩放没有影响。要取消禁用,只需要将第二个参数false改为true即可。
第二步:打开layout.css,在
/*---主体样式---*/
#container{width:100%;margin:0 auto;text-align:center;……省略}下面一排
添加
#FlashHead{position: absolute;width:100%;}
自适应皮肤flash就定义成功了
-----------------------------------------------------------------------------------------------------完成//---------
[
本帖最后由 ilank 于 2008-9-6 02:20 编辑 ]