【音画练习帖】红梅报春 帖赠湖心(附制作代码及素材)

2018-02-09   竹影淘沙




附:制作代码及素材

一  音画代码:
(为了说明方便,我用颜色标出五段代码)

<table style="POSITION: relative; WIDTH: 1200px; TOP: 0px; LEFT: 0px" >
<tbody>
<tr>
<td> 
      
<div><img src="http://userimage8.360doc.com/18/0209/10/5587937_201802091028470708947598.jpg"></div>

<div class="divBorderStyle" style="POSITION: absolute; LEFT: 400px; TOP: 116px"><embed type="application/x-shockwave-flash" height="685" width="500" src="http://www.xctvw.cn/fla/bb/hc/71.swf" quality="high" wmode="transparent" 第一个flash=""></div>

<div align="center"><embed src="http://link.hhtjim.com/xiami/2088555.mp3" hidden="true" type="audio/mpeg" autostart="true" loop="true" wmode="transparent"></div>

</td></tr></tbody></table>

二  音画代码简要说明:
       
音画代码我用颜色标出五部分:

1  音画的绝对定位代码。(绝对定位代码:
POSITION: relative);(这个是制作的音画宽度:
WIDTH: 1200px,根据需要自定

2  音画原图代码:带入http://userimage8.360doc.com/18/0209/10/5587937_201802091028470708947598.jpg
    这个音画原图我没切割。如果切割成2片,原图代码为:
    <div><img src="图1
.jpg
"></div>
    <div><img src="图2
.jpg
"></div>

3  添加flash的代码(这里必须用相对定位代码:POSITION: absolute
),flash相对左和顶的位置尺寸以及宽、高需要反复调试。

4  添加音乐代码
添加音乐代码的方式有很多,可选用自己喜欢的方式。

5  音画结束代码:
</td></tr></tbody></table>

     
关于音画代码,我的体会是该有的一个不能少,不该有的多一个也不要。


三  音画素材:
1  背景素材


2  人物素材:

四    PS制作的音画原图:



五  制作步骤参考:
        1  在PS新建一个画布  1200*800;
        2  拖入背景素材,布置位置并进行必要处理;
        3  拖入人物素材(事先调整好人物尺寸大小);
        4  添加标题、文字;
        5  将文件存储为(*PDD*PSD)格式,便于以后修改;
        6  点击:文件—存储为web和设备所用的格式—预览,再次修改。最后存储一张.jpg 图片上传,既是http://userimage8.360doc.com/18/0209/10/5587937_201802091028470708947598.jpg;
        7  按上述音画代码五步骤完成音画制作。


这是制作音画的基本代码,也完全适合制作大图音画,万变不离其宗,只不过再增加图片切割或flash等添加
仓促写就,错误难免,仅供参考。更多内容参看:湖心寺寓的单图音画《春天的记忆》及其代码分解

 

    猜你喜欢
    发表评论 评论公约
    喜欢该文的人也喜欢 更多