梦中人の梦工场

这里有爱的细雨，这里有情的倾诉。这里帮你筑梦，帮你圆梦！

日志

关于我

梦中人

喜欢做梦,从小到大,始终不变,喜欢研究,海阔天空,天文地理,喜欢交友,不分老幼,不分男女。

文章分类

u5制作多张滚动图片

2011-12-13 00:01:59| 分类： U 5教程 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

本文引用自寒冬腊月《u5制作多张滚动图片的方法》

怎样分享别人的模块? - hdly006502 - .

将向博客新手详细解讲制作过程
http://hdly006502.blog.163.com.
撰文：寒冬腊月

怎样分享别人的模块? - hdly006502 - .

u5制作多张滚动图片的方法

首先准备好需要制作的素材图片:

1、上、下滚动的素材:

2、在ps里合成5张尺寸为100*100像素的好友头像,合成后图片为500*100像素;见下图:

下面,我就利用u5软件来操作:

一、打开u5软件,新建一个尺寸为500*120像素的完全透明画布;(注:500宽*120高,其中120为好友图片100+上滚动10+下滚动10.)

二、新建画布出现后,点击"添加图片"并使图片在画布中上、下对称让图片置于画布正中; 然后看介面下方的第一帧里出现添加后的图片,同时右侧也多了一个以obj-1开头的蓝底背景;如下图

三、相同的方法,再添加一次图片(好友图)后,右侧多了一个以obj-2开头的蓝底背景;见下图

四、我把第一次添加的图片为内层图,第二添加的为外层图;因内层图片我已做了在画布居中(数据为0和10,见上图);那同样外层图也要做居中的调整 ;只要将外层图在画布中的位置数据改为10和10即可:

操作方法是:鼠标右击obj-2→对象属性→位置及尺寸→将数据改为:左是10、顶部是10;点击确定后,内、外层均在画布正中位置了;见下图:

五、接下来,我们就可以来做内、外层图片的滚动了;分二大步走:

笫一步:我们还是从外层做起:

1、点击介面下方的添加"相同帧",为它添加50帧为止;介面下方就会出现1-50帧了;

2、拖动介面下方的滚动条看到第二帧并点击它,将下图第一个红圈内的第一数据变为20、顶部数据不变为10,操作方法见上面第四步:

3、依次类推,点第三帧并将第一个数据改为30(顶部数据仍然为10不变)、第四帧数据为40直到第五十帧数据为500结束;这时,你可以点击"预览"发现外层图片就可以由左向右滚动了,见下图:

(说明:因为我们先做的是外层图片的滚动,所以内层图片还是静态不动的哦!)

笫二步:我们再做内层图片做滚动:

1、点击介面右侧的obj-1 使之变为蓝色背景并将介面正下方的滚动条拖回到笫一帧点击它,然后鼠标右击obj-1 处;将位置及尺寸→将数据改为:左是-490、顶部10数据一直不变;

操作方法是:鼠标右击obj-1→对象属性→位置及尺寸→将数据改为:左是-490;

2、相同的方法,点第二帧数据改为:左是-480、点第三帧数据为 -470、直到最后一帧数据为 0为止,再点击"预览"看到,此时内、外层图片均按规律由左向右移动了;见下图:

六、继续操作步骤,为做好的滚动图再添加上、下滚动图片素材;这里也要分两大步来做:

笫一步:先做滚动图片上边的滚动闪条的添加:

1、拖动介面下方的滚动条看到第一帧并点击它;然后点击"添加图片"导入闪动的图片素材后（本人己提供素材）,添加后,介面正下方的第五帧和介面右侧 obj-3 到 obj-7 全变成蓝底背景;这时,你点击"预览"会发现移动图片上方添加的滚动闪图只显示部分;见下图

2、我们还必需从第六帧继续添加该闪图,直到第四十六帧的添加后,闪图就完全显示了;此时,正图上方滚动闪图就已添加完成,如下图:

笫二步:再做下边的滚动闪图的添加:(这一步相对复杂一些)

1、依然回到第一帧,点"添加图片"后,这时添加的闪图会重叠在正图上方并出现虚线框,看第五帧和介面在侧obj-101到obj-105全显示蓝底背景;见下图

2、分别点第一帧再点obj-101并使obj-102到obj-105变为白底背景, 采用第四步的操作方法,分别将上图红圈内的数据改为(0和110);依次类推直到点第五帧和obj-105并将数据同样改为0和110;

3、上面仅是做了第一到第五帧闪图的添加,还必须从第六帧开始继续添加闪图后,采用上一步的方法直到第四十六帧添加完毕.

最后,点"预览"就会看到下面的效果图了:

最终效果图如下:

怎样分享别人的模块? - hdly006502 - .

转载自: 寒冬腊月 http://hdly006502.blog.163.com

怎样分享别人的模块? - hdly006502 - .

评论这张

转发至微博

阅读(1372)| 评论(4)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_087067086084088064081080087075072081083064087081084070080',
              blogTitle:'u5制作多张滚动图片',
              blogAbstract:'  <P\><WBR\>本文引用自寒冬腊月<A target=\"_blank\" href=\"http://blog.163.com/hdly006502/blog/static/49012263201131284719344\" \>《u5制作多张滚动图片的方法》</A\></P\>  <P\><BR\> </P\>  <TABLE title=\"寒冬腊月编制/请勿篡改！更多精彩,登陆:http://hdly006502.blog.163.com.\" border=\"0\" cellSpacing=\"16\" borderColorLight=\"#6666ff\" borderColorDark=\"#6666ff\" cellPadding=\"0\" width=\"711\" background=\"http://img.blog.163.com/photo/s0hard5gLPJPFk_lmfpgHA==/1143069880422478435.jpg\" align=\"center\" \>  <TBODY\>  <TR\>  <TD\>  <TABLE border=\"0\" cellSpacing=\"0\" borderColorLight=\"#800080\" borderColorDark=\"#000000\" cellPadding=\"0\" width=\"100%\"  background=\"http://img.blog.163.com/photo/Xd3MFG-wtBfNs_089Uv44Q==/4290241595023956008.jpg\" align=\"center\" \>  <TBODY\>  <TR\>  <TD\>  </TD\></TR\></TABLE\></TD\></TR\></TABLE\>',
              blogTag:'',
              blogUrl:'blog/static/72337254201191594339833',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1323705719905,
              publishTime:1323705719812,
              permalink:'blog/static/72337254201191594339833',
              commentCount:4,
              mainCommentCount:2,
              recommendCount:1,
              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:true,
              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/72337254201191594339833">${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 - 订阅此博客

梦中人の梦工场

导航

日志

u5制作多张滚动图片

历史上的今天

最近读者

热度

评论

页脚