FLASH相册的最简单做法 - 达人(gmail)

2007/11/13 | FLASH相册的最简单做法
类别(让工作更简单) | 评论(0) | 阅读(879) | 发表于 11:15: 今天看到一个非常简单的制作FLASH相册的方法

原文地址：http://www.marktip.com/blog/article.asp?id=126

先说一些利用模板创建SimpleViewer相册的方法。可以用三个软件来创建它，Porta，Google的 Picasa，和苹果的 iPhoto。大家可以任选一个下载，我用的是Picasa，免费又是中文的，界面很爽的 。

用Picasa创建相册

，也很简单。先下载Picasa，然后下载一个用来生成SimpleViewer的模板文件，下载后解压到你的Picasa安装包的web\templates下面（例如：C:\Program Files\Picasa2\web\templates）。

然后运行Picasa，选中你要创建相册的图片，选择菜单里的“文件夹”，选择“作为网页导出…”，或直接按“Ctrl + W”，在弹出的对话框中设置好导出图片尺寸，网页标题和输出目录，然后点击“下一步”，在模板中选择“SimpleViewer V1.1”，点完成即可。

手动定制SimpleViewer

1. 首先当然还是先下载SimpleViewer，并解压到一个你的文件夹，全部文件如下：

2. 添加你的相册图片到"images"文件夹，图片文件应该用jpg格式的。

3. 制作你的相册图片的小文件，用来做相册里的按钮式的预览图，你可以用图像编辑软件（如photoshop）制作尺寸最小为45x45 像素的图片，太大的图片程序将自动裁切。图片的名称要与“images”里的大图一一对应，并且文件名要一样。最后把图片放到“ thumbs ” 文件夹。

4. 编辑 imageData.xml

imageData.xml文件可以用任意文本编辑软件打开，我们首先看到第一段。如下：

<SIMPLEVIEWER_DATA maxImageDimension="480" textColor="0xFFFFFF" frameColor="0xFFFFFF" bgColor="0x181818" frameWidth="20" stagePadding="20" thumbnailRows="2" thumbnailColumns="3" navPosition="right" navDirection="LTR" title="Example Title" imagePath="" thumbPath="">

设置的相册选项如下：

maxImageDimension: 设置图片的最大尺寸，图片不要超过这个尺寸，以确保你的图片显示清晰，否则会被拉伸。
textColor: 标题文字的颜色(十进制色彩值).
frameColor: 图片外框、进度条、viewed icon、预览图翻页箭头的颜色(十进制色彩值).
frameWidth: 图像外框的宽度值(像素单位px).
stagePadding: 大图片和预览图片的距离值.
thumbnailRows: 预览图的行数.
thumbnailColumns: 预览图的列数.
navPosition: 设置预览图的相对显示图片的位置，可以设置"top"(上), "bottom"(下),"left"(左) 或 "right"(右).
navDirection: 设置更多预览图的导向，就是那些箭头按钮，其值为"LTR" (Left to Right从左往右) 或 "RTL" (Right to Left从右往左)
title: 相册的标题.
imagePath and thumbPath: 这两个文件不须设置，除非你想定制SimpleViewer的文件结构；imagePath用来设置更改大图片的目录路径，thumbPath用来设置小图片的位置。

接下来, 为每张相册里的图片添加一个<IMAGE> 标记；

<IMAGE>
<NAME>115-1503_IMG.jpg</NAME>
<CAPTION>Arles old town.</CAPTION>
</IMAGE>

·<NAME> 是图片及预览图片的文件名。
·<CAPTION> 是相应图片的标题。

<CAPTION>标记中可以包含 HTML 格式，包括超链接、字体标记、加粗、下划线和斜体。你只可在如下所示的 CDATA 标记加入 HTML 格式：

<CAPTION><![CDATA[
Big times textbold text 
<a href="index.html">link text</a>]]></CAPTION>

5. 修改完之后，大家记得把 imageData.xml 文件保存为UTF-8编码的，这样就可以显示中文了。

6. 设置背景颜色
设置背景颜色，编辑 "index.html" 文件。在代码的三个位置输入十进制的颜色值：

background-color: #181818;

<param name="BGCOLOR" value="#181818" />

bgcolor="#181818"

注：这里设置的颜色应匹配 imageData.xml 文件中颜色设置。

7. 常见问题：
(1)让图片可下载：
在<CAPTION>里添加Html链接
<CAPTION><![CDATA[<A href="images/DSC_0696.jpg" target="_blank">
Open image in new window</A>]]></CAPTION>

_____________________________________________________________________________
上面的是静态的，你也可以添加后台管理，把它变成动态的，如下

动态管理后台
是PHP的，需要服务器端支持：
Server ：

　· Supported Platforms: Linux, UNIX, Mac OS X
　· PHP4.1 and above, PHP 5.0.4 and above
　· GD (1.x works, 2.x recommended)
　· XML support (expat, libxml)
　· Safe-Mode has to be Off.
　· Write access to the installation directory is mandatory.

郁闷，偶服务器空间不支持，大家有兴趣的话去下载一个，可以分类图片，在线上传等功能。相关说明可以看这里。

查看更多的，请点：
简单实用的免费相册程序SimpleViewer; 0

http://gmail.5d.cn/

评论Comments