雷内:大图音画制作与代码

大图音画的制作

第一种：框图音画。主要通过html语句实现多层图框，在图片上附加透明flash美化，配音乐。

第二种：特效音画。主要通过一些特效代码，实现图片动态效果，近似动画场景，配音乐。

第三种：大图音画。通过photoshop制成大图，将其进一步制成网页，再附加透明flash美化，配音乐。

第四种：电子杂志。使用制作杂志的软件，将图片编辑成册，透明flash以及音乐，用软件可导入自动生成。

第五种：单幅音画。一般高度低于3000的大图音画，可视为单幅音画。

从音画的发展来看，由于前两种具有以下特点，对制作者来说，既不易于掌握，又比较费心劳神，所以现在已很少有人使用。

 1、框图音画对代码要求非常严，构建层层框架的代码，常因错一个字符就会乱码，无法正常显示。

 2、特效音画对代码要求更严格，代码的编排以及相应处图片的更换，都需要细心和耐心，若有字符错误，也是无法正常显示。

现在网络流行的音画作品，后三种居多，因它们具有易操作，易掌握的特点，没有繁琐的代码编排，只需熟练使用软件便可，但也有相应的难点。

 1、必须会使用photoshop，因为制作图片和实现网页都要借助于它。

 2、photoshop功能较强大，要完全掌握并非易事，不过循序渐进，图片制作水平提高了，制作出的网页也会更美观。

 音画制作步骤

第一步 用photoshop软件制作大图

 1、首先打开photoshop，选择“文件”下拉菜单中的“新建”。

 2、在“新建”对话框中，设置宽度（自定尺寸），高度（自定尺寸），分辨率（72），颜色模式（RGB），背景内容（透明色）。

 注：宽度和高度，一般用像素作单位。分辨率单位为像素/英寸，颜色模式选择8位就可以。

 在此对话框的“高级”里，还可以设置“颜色配置文件”和像素长宽比，可分别设置成prophoto RGB 和 方形。 

 这些设置都完成了，为了以后制图方便，可以点击“存储预设”保存。

 3、制做图片，自由发挥。（具体步骤略）

 4、图片做好保存时，最好是psd格式，便于各图层修改。

 5、由于图较大，不便于上传到网上，也不易打开，所以必须使用切片工具，将其切割成一些小图。

 6、选择photoshop“文件”下的“存储为web所用格式”，将大图自动生成为html网页。

 7、为了网页的像素品质高，存储为网页格式时，一些相关设置必须注意，在“存储为web所用格式”对话框中，具体参数设置如下：

 A、预设：优化的文件格式（jpeg），压缩品质（最佳），“连续”“ICC配置文件”处打勾，品质（100），模糊（0），杂边（无）。

 B、图像大小：品质选择“两次立方（较平滑）”

 8、存储为网页格式时，出现“将优化结果存储为”对话框，参数选择如下：

 A、文件名：自定，后缀为html

 B、保存类型：HTML和图像（html）

 C、设置：背景图像

 D、切片：所有切片

 9、保存后，会出现html文件和images文件夹，images文件夹内所有图片都是切割好的图片，用于html文件调用。

注：一定要先将大图切割，再进行存储为网页这一步。

第二步 用frontpage软件制作网页

 1、首先用frontpage打开你用photoshop存储而成的网页。

 2、在代码中，把星号换为自己为音画网页取的名字。

 3、在这段代码 中，把颜色代码#FFFFFF(网页背景色)换成自己需要的颜色代码。

 4、为了音画的美观，可以在后面加上滚动条代码：  

同样，这段语句中的颜色代码#d7c9e2（滚动条颜色），可以根据自己音画的色彩更换。

 5、由于网页是用photoshop自动生成代码的，所以图默认是左对齐。找到这段代码语句

代码使用说明：

1、代码的起始部分：

 TABLE style="LEFT: -120px; WIDTH: 1000px; POSITION: relative; TOP: 0px"  对大图音画贴的发贴是个关键。其属性如下：

 LEFT: -120px; 定位网页整体的左右位置，俗称为横坐标。给出的数值越小，它越向左偏移，给出的数值越大它就越往右移动。

 WIDTH: 1000px； 表示的是整体网页的展示宽度，因为通常情况下电脑屏幕的展示宽度为1024像素，因此目前所制作的图片最大宽度设置为1000px。

 POSITION: relative 表示为设定网页相对以本文档面显示。

 TOP: 0px 表示为边框距顶部的距离。通常情况下设置为0。数值给的越大，它越往下移动。

 2、图片插入代码：

 表示为每层图片的插入。

 在图片插入这组代码中，只需要在每层图片的地方替换进去经过切割的图片地址就可以，但一定要注意图片的顺序不能弄错。如果替换的图片没有这么多，可以在替换完所有图片以后，把多余的图层代码删掉即可。如果不够用，也可以对图层进行复制，然后再粘贴进去。图片高度和宽度根据图片实际尺寸写入。

 3、音乐插入代码：

可以插入MP3、WMA格式。

 大图音画中怎样加入flash

      我的日志《音画制作方法与步骤》中，介绍了大图切割后分段图片的拼合代码，以及在整张大图中插入flash动画的代码。现在介绍切割图片拼合后分段插入flash动画的代码。

        说明：1、图片的宽度width 和高度height，应符合图片的实际尺寸；flash动画的宽度width 和高度height，一般应小于图片的宽度width 和高度height为好。2、本代码以8个切割图片为例，可自由增减。

代 码

音乐地址 wmode="transparent" autostart="true" invokeURLs="false" loop="true" allowScriptAccess="never" allowNetworking="internal">