巧用Friworks MX自动处理图片

软件世界

装上了Fireworks MX后,很多人都会发现在Fireworks MX的commands菜单中多了这么一条命令──Data-Driven Graphics Wizard。它是Fireworks MX最令人激动的新功能之一。有了这个命令,你可以从单个数据来源创建多张图形并且还能自动处理你的web图形。然而在使用Data-Driven Graphics Wizard这个命令之前,得先准备一个包含了变量的XML数据文件,然后在Fireworks的图形模板文件中嵌入这些参数才能产生新的图形。有这么神奇吗?那么我们就举个例子来说明吧。

举例说明

我们先来看看这个包含变量的XML文件。这个XML文件可以用一个数据库软件通过Access2002输出或是通过手工在Dreamweaver MX或是其他文字编辑器中创建,XML文件的格式应该是这样的:



ZX2002
luxury.png
http://www.triomotors.com/zx2002


M210
power.png
http://www.triomotors.com/zr2002


从上面这个文件中我们可以观察到,每条记录被这个标签所包围,就像HTML中标签使用的方法一样,而像被varModel、image、url这些标记所包围的内容则是要被输出到图形模板文件中实际显示的内容。
现在我们用Fireworks MX创建图形模板文件,其实任何一个Fireworks的图形文件都能变成模板,你所要做的只是在图形文件上增加一些变量。
在命名变量的时候,如果图形模板中包含在{}中的变量名和XML文件中包含在<>中的标记名一样的话,那么在执行Data-Driven Graphics Wizard这条命令时,这两边的变量参数就会一一对应,这种命令方式可以帮你省去很多麻烦。

具体操作

大致的情况都告诉大家了,我们开始动手试着做一下吧。打开你的资源管理器,找到安装Fireworks MX的目录中的Samples文件夹,里面有个Data-Driven Graphics Wizard文件夹,这个文件夹里面的东西就是我们动手实践所需要的源文件。
在Fireworks MX中打开这个Sample Template.png图形模板文件,然后使用菜单命令commands>Data-Driven Graphics Wizard,此时会打开Data-Driven Graphics Wizard对话窗口((图1))。

图1
图1

step1 of 6:Choose a Data Source(选择一个数据源)

这是操作的第一步,现在你所要做的操作就是在“Select an XML data file”输入框中,点击后面的文件夹按钮,定位Data-Driven Graphics Wizard文件夹中的sample_Data.xml文件。如果你有图像变量的话,在下面一个选项中定位将要被替换图像变量的图像所包含的文件夹,在本例中选择sample_images文件夹。点击“Next”按钮,进入下一步的操作。

Step 2 of 6:Preview the Data(预览数据)

在第二个步骤中,Data-Driven Graphics Wizard将会检查XML文件中数据记录,之间的数据为一条记录,显示在同一个窗口中,Preview the Data窗口下面还有4个按钮可以让你切换记录的显示内容。如果你的XML文件不正确的话,这个窗口也会进行提示,让你更换或修改XML文件。点击“Next”按钮进入下一步的操作。

Step 3 of 6:Select Records to Process(选择要进行处理的记录)

在第三步中,可以让你选择要处理的记录,这一步中有3个选项
●All Records:将会处理所有的XML中的记录
●Firest Record Only:只处理XML中的第一个记录
●Specific Record Numbers:指定要处理的记录数,记录数用逗号分隔,比如说“1,3,5”或“2,4,6”。
当你做出选择后,点击“Next”按钮。

Step 4 of 6:Map Variables to fields(匹配变量到数据区域)

这个步骤是Data-Driven Graphics wizard命令的关键((图2))。在这个窗口中你可以发现,当Fireworks图形模板中的变量和XML文件中的变量域的命名一样的话,在Mapped Variables显示区域中就会将这两个变量自动匹配进去,出现类似于“Text:{varAction}<==>varAction”这样的一条自动匹配记录。注意大小写在这儿也会严格加以区分。如果你的两个变量名不一样,那么将不会自动匹配,你就只能通过手工操作的方法来进行匹配了。在这个Fireworks的图形模板中我们将图像变量命名为{varImage},而XML文件中的变量域则是image,所以这两个参数是不可能自动匹配的,此时“Select a Variable”选择区域中将会出现“Image::{varImage}”这个变量,用鼠标单击选中它,同时右边的“Select a field”中有个image值,也选中它,此时选中的这两个变量都是高亮显示,点击“+”号按钮,那么这两个变量就会加入到“Mapped Variable”区域中。点击“Next”按钮结束。

图2
图2

Step 5 of 6:Export Settings输出设置

第五步操作主要是设置当图像自动处理完后输出时的一些设置,在Filename区域中为输出的图片命名,File Numbering下拉列表中有几种命名的排序方案,Starting Value是指从指定的某个值开始为图像命名,本例中所举的例子有三个记录。当然保存输出的图像是什么格式,则需要在Images选项中设置,勾选“Export Images”选项,在Template Export Settings下拉列表中先选择一种图像的输出格式,并且选择保存图像文件的文件夹。在Source File选项中,选择“Save Source PNG Files”选项,那么将会把这些输出的图像的源PNG文件也进行保存,也为它们指定一个要保存的文件夹,有了源PNG文件后,方便以后对图像进行修改。操作完成后,点击“Next”按钮。

Step 6 of 6:Review Settings回顾设置

最后一步是让你对选择的设置进行确认,如果你觉得没有什么问题的话,点击“Done”按钮,那么Fireworks MX将会根据你的设置,自动地对你的图片进行处理,并且在指定的文件夹中进行保存。如果你觉得哪儿的设置令你不满意,你可以点击“Back”按钮,返回以前的设置进行修改,直到满意后可以进行处理为止。当你所有的图像都处理完毕后,Fieworks MX软件中打开的仍旧只是刚才那个图形模板文件,其他进行处理的图片都已经被保存了。
打开文件夹查看被保存的文件,你就会发现,这三个新产生的图像和图形模板文件一样,只是设置的文字变量和图像变量的区域有所不同,这些变量都被XML文件指定的数据给替换了。如果你在图像变量上应用了很多种效果,那么这些效果也都会被转移到替换图像中,假如你设置了输出时的URL链接,那么这些URL链接也将被改变。
感觉这个command命令真的是非常地神奇。不知道大家有没有发现,Data-Driven Graphics wizard这个command命令用Flash MX的操作界面,可见Macromedia MX的系列软件已经非常成熟了,彼此的相互接合功能也非常地棒,看来我们接下来要研究的东西是越来越多了。不足之处就是这个Data-Driven Graphics Wizard命令不支持中文,就算把它的encoding编码改成gb2312也不行,测试不成功。