.

日志

关于我

琴棋书画

.

文章分类

【转载】跟朋友一起学做透明素材动画(2)【原创】

2012-12-27 20:42:38| 分类：【网络课堂】 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

本文转载自杨东《跟朋友一起学做透明素材动画(2)【原创】》

跟朋友一起学做FASH透明素材动画

跟朋友一起学做透明素材动画(2)

杨东/原创

选材说明

以下动态画的背景图片是博友(快乐在心)于2009年7月18日拍摄,为了做实验借鉴,此背景图尺寸为(宽700高529),在这动画中可调节控制,透明图片其实只有四张,但加入了八次,其中同一张金鱼插入了三次,由于插入控制的尺寸不同,起到了不同层次的效果,原来一次是三条,三次就能显现出九条金鱼,彩扁鱼插入了二次,层次也不相同,如果不控制层次,用相同的尺寸加插,是只能显现同一个目标,加插的所有画片详见实详下边的图片网络地址,实样的全代码也符在下边,复制可有效应用.

朋友们请注意:
这张图片的左上角,有一条鱼,你只要把鼠标移到左上角
就能把这条鱼引导出来
以下是这个动态画面的全代码

以下符图片地址及图片来源的说明
背景图片:(大连虎滩极地馆-海洋世界)
摄影作者(快乐在心)
(主图片尺寸-宽度700高度530)

http://img6.ph.126.net/QoOLBr-lvT5pcdoNTPChqQ==/2552133613853323406.jpg

透明图片来源于网络

http://imgfree.21cn.com/free/flash/115.swf 跟你鼠标游的鱼,隐藏在图片左上角,等候你去引导

http://imgfree.21cn.com/free/flash/57.swf 彩扁鱼(加插二次不同的宽度和高度加于控制)

http://imgfree.21cn.com/free/flash/17.swf 金鱼(加插三次, 不同的宽度和高度加于控制 )

http://imgfree.21cn.com/free/flash/8.swf 二只青蛙和小水滴

http://imgfree.21cn.com/free/flash/22.swf 三个水圈子

跟朋友一起学做透明素材动画(2) - 杨东 - 杨东小园

以下是已把背景主图片改为(412X310)
透明图片同时相应改小了详见面下列全代码.

跟朋友一起学做透明素材动画(2) - 杨东 - 杨东小园

以上代码复制可应用到主页模块中去

详见下列实样

跟朋友一起学做透明素材动画(2) - 杨东 - 杨东小园

从以上的代码中进一步实验还可加上框边

实样如下

※★※

跟朋友一起学做透明素材动画(2) - 杨东 - 杨东小園hu320521 本模块代码复制处

请点击手指处可直接取得代码应用

以上实样的代码如下

<TABLE style="BORDER-RIGHT: #ee00ee 15px ridge; BORDER-TOP: #ee00ee 15px ridge; BORDER-LEFT: #ee00ee 15px ridge; BORDER-BOTTOM: #ee00ee 15px ridge; BACKGROUND-COLOR: #bbffff" cellSpacing=0 align=center>
<P>
<TBODY>
<TR>
<TD></TD>
<TD width=412>
<P align=center><FONT color=#ff0000><STRONG><FONT face=楷体_GB2312 size=6>※★※</FONT></STRONG></FONT></P>
<P align=center><FONT color=#ff0000><STRONG><FONT face=楷体_GB2312 size=4>★请用鼠标指向此图的左上角★</FONT></STRONG></FONT></P>
<P align=center MARQUEE><FONT color=#ff0000><STRONG><FONT face=楷体_GB2312 size=4>此图的左上角有一条大鱼等着你引领导到池中去</FONT></STRONG></FONT></P>
<P align=center><FONT face=楷体_GB2312 color=#ee0000><IMG src=http://img.blog.163.com/photo/UEK_F1MrFzbF5SHvzxZ9kA==/339458821913404769.jpg border=0></FONT><A href="http://hu320521.blog.163.com/blog/static/888720252009627113045463/edit/?mode=prev" target=_blank><FONT face=楷体_GB2312 color=#ee0000 size=5><STRONG>本模块代码复制处</STRONG></FONT></A><STRONG><FONT color=#00ff00></FONT></STRONG></P>
<P align=center><STRONG><FONT face=楷体_GB2312 color=#030303 size=5>请点击手指处可直接取得代码应用 </P>
<P align=center>
<TABLE style="WIDTH: 412px; HEIGHT: 310px" height=310 cellPadding=0 width=412 align=center background=http://img6.ph.126.net/LY6bJzpoA58sK3djIbnjeg==/6597747065818777926.jpg border=0>
<TBODY>
<TR>
<TD><EMBED align=right src=http://imgfree.21cn.com/free/flash/115.swf width=410 height=309 type=application/x-shockwave-flash wmode="transparent" quality="high" allowNetworking="internal" allowScriptAccess="never"> <EMBED align=right src=http://imgfree.21cn.com/free/flash/57.swf width=410 height=309 type=application/x-shockwave-flash wmode="transparent" quality="high" allowNetworking="internal" allowScriptAccess="never"> <EMBED align=right src=http://imgfree.21cn.com/free/flash/57.swf width=350 height=240 type=application/x-shockwave-flash wmode="transparent" quality="high" allowNetworking="internal" allowScriptAccess="never"> <EMBED align=right src=http://imgfree.21cn.com/free/flash/17.swf width=410 height=309 type=application/x-shockwave-flash wmode="transparent" quality="high" allowNetworking="internal" allowScriptAccess="never"> <EMBED align=right src=http://imgfree.21cn.com/free/flash/17.swf width=400 height=300 type=application/x-shockwave-flash wmode="transparent" quality="high" allowNetworking="internal" allowScriptAccess="never"> <EMBED align=right src=http://imgfree.21cn.com/free/flash/22.swf width=410 height=309 type=application/x-shockwave-flash wmode="transparent" quality="high" allowNetworking="internal" allowScriptAccess="never"> <EMBED align=right src=http://imgfree.21cn.com/free/flash/17.swf width=370 height=250 type=application/x-shockwave-flash quality="high" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"> <EMBED align=right src=http://imgfree.21cn.com/free/flash/8.swf width=410 height=309 type=application/x-shockwave-flash quality="high" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"> </TD></TR></TBODY></TABLE></P></FONT></STRONG></TD>
<P></P></TR><P></P><P></P><P></P></P></TABLE>

如若另外加上《隐藏播放器的MP3音乐代码》就能成为音画
隐藏播放器的音响代码如下

评论这张

转发至微博

阅读(93)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_087065086082082068085085087065072087082064092095083069',
              blogTitle:'【转载】跟朋友一起学做透明素材动画(2)【原创】',
              blogAbstract:'   <TABLE borderColor=\"#cccccc\" cellSpacing=\"45\" cellPadding=\"0\" width=\"880\" align=\"center\" bgColor=\"#ffffff\" background=\"http://img8.ph.126.net/EacKU0u2ig4miAB28ls-sw==/1585267068851442788.jpg\" border=\"0\" \>  <TBODY\>  <TR\>  <TD align=\"middle\" \>  <P align=\"center\" \> </P\>  <P align=\"center\" \> </P\>  <DIV style=\"FONT-SIZE: 35pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 40%; FONT-FAMILY: 华文彩云;\"  scrollAmount=\"8\"  FONT\>  <P align=\"center\" \><FONT face=\"黑体\" \><B\>跟朋友一起学做FASH透明素材动画</B\></FONT\></P\></DIV\>  <P align=\"center\" \><STRONG\><FONT face=\"楷体_GB2312\" color=\"#ff0000\" size=\"6\" \>跟朋友一起学做透明素材动画(2)</FONT\></STRONG\></P\>  <P align=\"center\" \><STRONG\><FONT face=\"楷体_GB2312\" color=\"#000000\" size=\"6\" \>杨东/原创</FONT\></STRONG\></P\><STRONG\></STRONG\></TD\></TR\></TABLE\>',
              blogTag:'',
              blogUrl:'blog/static/13389562012112784238134',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:0,
              publishTime:1356612158134,
              permalink:'blog/static/13389562012112784238134',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'.',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/13389562012112784238134">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

.

导航

日志

【转载】跟朋友一起学做透明素材动画(2)【原创】

历史上的今天

最近读者

热度

评论

页脚