如何在顶部加个FLASH 如何定义自动缩放皮肤flash 如何在flash上显示图层★详解★

皮肤, flash, 缩放, 显示图, 详解

请打开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 编辑 ]

本主题由 anson 于 2008-2-25 00:46 推荐主题

收藏分享评分

　　　iLank 婚纱摄影

回复引用

订阅 TOP

ilank

｛PJFORUM版主｝

Rank: 32

积分: 8246
PJ币: 3161 元
注册时间: 2006-6-30

PJBLOG SKIN设计师 - 第二届PJBLOG2 SKIN设计大赛入围前十名颁发

2^#

发表于 2008-2-17 20:38 | 只看该作者

2010 PJHOME 文化衫设计大赛最终名次公布

----------------------------横向的菜单栏置于FLASH之上的修改方法说明---------------------------

方法简单：共四步
第一步：上传flash文件head.swf到皮肤目录下，设置好skin.xml文件，
<FlashTransparent>-1</FlashTransparent>定义flash透明显示

<Flash>
  <UseFlash>-1</UseFlash>
  <FlashPath>head.swf</FlashPath>
  <FlashWidth>748</FlashWidth>
  <FlashHeight>80</FlashHeight>
  <FlashAlign>center</FlashAlign>
  <FlashTop>0</FlashTop>
  <FlashTransparent>-1</FlashTransparent>
</Flash>

第二步，打开common/common.js

找到//写入顶部Flash文件
function WriteHeadFlash(Path,Width,Height,Transparent){
  var Temp,T=""
  Temp='<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="FlashH" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="'+Width+'" height="'+Height+'">'
  Temp+='<param name="movie" value="'+Path+'"/>'
  Temp+='<param name="quality" value="High"/>'
  Temp+='<param name="scale" value="ExactFit"/>'
  if (Transparent) {Temp+=' <param name="wmode" value="transparent"/>';T='wmode="transparent"'}
  Temp+='<embed src="'+Path+'" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="FlashH" width="'+Width+'" height="'+Height+'" quality="High"'+T+' scale="ExactFit"/>'
  Temp+='</object>'
  document.getElementById("FlashHead").innerHTML=Temp
}

把红色部分改成opaque属性

如下//写入顶部Flash文件
function WriteHeadFlash(Path,Width,Height,Transparent){
  var Temp,T=""
  Temp='<object classid="clsid27CDB6E-AE6D-11CF-96B8-444553540000" id="FlashH" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="'+Width+'" height="'+Height+'">'
  Temp+='<param name="movie" value="'+Path+'"/>'
  Temp+='<param name="quality" value="High"/>'
  Temp+='<param name="scale" value="ExactFit"/>'
  if (Transparent) {Temp+=' <param name="wmode" value="opaque"/>';T='wmode="opaque"'}
  Temp+='<embed src="'+Path+'" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="FlashH" width="'+Width+'" height="'+Height+'" quality="High"'+T+' scale="ExactFit"/>'
  Temp+='</object>'
  document.getElementById("FlashHead").innerHTML=Temp
}

第三步：定义导航菜单在flash之上的层的属性
打开皮肤文件layout.css
定义导航菜单 #header #menu{position: absolute; z-index:1000; top:10px;}
其导航菜单栏绝对定位，成为flash最上面的层，而不被flash遮挡。

打开layout.css,在
/*---主体样式---*/
#container{width:760px;margin:0 auto;text-align:center;……省略}下面一排
添加 #FlashHead{position: absolute;width:100%;left:0px;}
这样就给flash层<div id="FlashHead" >定位了，

原理：flash有一个不遮挡层的属性<param name="wmode" value="opaque"/>
红色就是其值。添加了此属性的flash就不会遮挡住层，

------------------------------------------------//解答完---------------

[ 本帖最后由 ilank 于 2008-2-17 20:44 编辑 ]