Flex Photo Gallery

网页设计 everyinch 13046℃ 0评论

制作一个XML驱动的Photo Gallery。最后的效果如图1所示。

图1 Photo Gallery效果图

一、准备工作

assets文件夹是特别重要的,里面既包含素材的图像文件而且还包括组织这些图像的XML文件。在assets文件夹下的pictures文件夹下包含18张素材文件,分别命名为1.jpg到18.jpg(图2)。下一个重要的文件是assets文件夹下的pictures.xml文件(图3)。这个简单的XML文件里面列出了素材文件的名称和位置。将这些信息包含到MXML文件中也是可以的,但使用XML的组织方式不用打开Flex源文件就可以更新素材文件。

图2 Pictures文件夹下的素材文件         图3 Pictures.xml文件的内容

1. 使用FlexàFileànewàFlex Project菜单新建一个Flex工程。

2. 在Flex源文件夹下新建一个新文件夹,并命名为assets(图4)。并将XML文件以及图像素材文件复制到该文件夹。

图4 新建文件夹菜单项

二、建立预览图Panel

在Photo Gallery网站中使用了两个Panel组件,一个用来显示预览图像,即每个图像的缩小版本用来加快下载速度。另一个用来显示完整大小的图像。最后的结果如图5。

图5 预览图Panel

1. 在Components的Layout文件夹中将Panel组件拖放到设计视图中,并将该Panel组件的ID属性命名为thumbsPanel用以标识该Panel。设置Panel的Title属性为:预览。

2. 由于在这个Panel中要显示3行6列的预览图,所以把它的宽度设为250,高度设为460,这样保证在预览图之间留有一定的空隙,为了给以后的zoom效果留有空间。将它的位置设置到浏览器的垂直中心,且不随分辨率的变化而发生位置的改变。距离水平中心向左偏离292。具体设置如图6。

 图6 设置预览图Panel的属性

3. 拖放一个Tile组件到Panel组件中,并设置它的宽度和高度使它完全占据Panel的白色空间(图7)。

 图7 设置Tile组件的属性

4. 在Tile组件中放置一个Hbox组件,然后在HBox组件中再放进一个Image组件。HBox组件要比Image组件尺寸稍微大一些,设置它的宽度和高度均为70。

5. 设置Image组件的大小为50*50,并将包含Image组件的Hbox组件的Horizontal和Vertical对齐设置为center和middle(图8)。

 图8 设置HBox剧中对齐之后的效果

设置HBox的居中对齐,需要打开Properties的Category View视图进行设置如图9。

 图9 HBox的居中设置

三、引用XML文件

将XML文件引用到MXML是十分简单的,但需要切换到Source视图进行操作。

1. 调入XML文件需要使用HTTPService组件。切换到Source视图,在<mx:Application>标签的下面添加如下代码:

<mx:HTTPService id=”galleryData” url=”assets/pictures.xml”/>。

这行代码将服务命名为galleryData,使用它的url属性定义外部XML文件的位置。

2. 一般情况下,需要一个事件来触发HTTPService。但在这个Photo Gallery应用中需要当文档载入完成之后就调用XML文件,从而将素材文件调入到预览Panel中。所以在<Application> 标签中添加如下属性:creationComplete=”galleryData.send()”。

目前完成的代码如下:












[/code]
四、使用Repeater组件
Repeater组件允许重复执行功能相似的一段代码。在本例中需要重复创建预览图像,即重复HBox和Image组件。切换到Source视图,键入Repeater组件,重复的代码如下:






[/code]
Repeater组件的dataProvider属性值是基于XML文件的结构,即将HTTPService读入的XML文件的每一个图像文件重复设置在HBox和Image组件里。id属性命名为:imageRepeater。完成该步骤之后的代码如下:














[/code]
1. 切换回Design视图,选择Image组件

2. 在Image组件的Source属性中键入:{imageRepeater.currentItem}。即将Image组件的图像来源设置为Repeater组件读入的XML文件中的每一个图像。

3. 运行本工程,效果如图10

 图10 预览图效果

五、建立显示图像Panel

1. 拖放一个新的Panel并放置到预览图Panel的右侧,设置它和预览图Panel具有相同的高度,由于是要在这个Panel中显示原始尺寸的大图,所以设置它的宽度为580。命名该Panel为viewerPanel。

2. 在这个Panel拖放进来一个Image组件,将它的宽度和高度设置为100%,命名为previewImg。将它的Source属性设置为assets/First.png(图11)。

 图11 显示图像Panel的最终效果

六、连接预览Panel和显示Panel

需要编写一段ActionScript以发送预览图Panel的图像到显示Panel。代码如下:



[/code]
这段代码编写一个函数用来将Repeater组件得到的正确的图像加载到命名为previewImg的Image组件中。接下来选择预览图Panel中的Image组件,打开Properties中的Category View(图12),在click属性中键入:getImage(event)。到这里一个基本的Photo Gallery已经完成。

 图12 Image组件的Category View

七、为预览图增加一些效果

为了增加界面的交互性,常常为用户所做的选择增加一些动画效果的反馈。在Flex中实现效果需要切换到Source视图,并为鼠标的rollover事件定义效果。

1. 首先为rollover事件定义一个效果。在Flex中可以选择Parallel方式即并行播放定义的效果,或者选择Sequence方式即逐次的播放效果,在这里使用Parallel方式,并命名为:over。定义如下:

<mx:Parallel id="over">

 

</mx:Parallel>

2.定义Zoom效果,即在Parallel标签之间添加Zoom标签,duration属性表示Zoom持续的毫秒数,zoomHeightTo和zoomWidthTo定义放大的百分比。




[/code]
3. 增加Glow效果。





[/code]
4. 现在已经定义鼠标移动到预览图上的效果,接下来定义鼠标移开之后恢复到原貌的效果。





[/code]
5. 现在需要将定义的效果加到预览图上。切换到Design视图,选择预览图Panel中的Image组件,打开Properties的Category View(图13),在rollOverEffect属性中键入:{over}。 在rollOutEffect属性中键入:{out}。

最终完成的效果如图13。

 图13 Photo Gallery最终完成效果



转载请注明:陈童的博客 » Flex Photo Gallery

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. could
    coach2015-03-01 05:55 回复

无觅相关文章插件,快速提升流量