注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

风之泪

风过雨过,花开花落。。。

 
 
 

日志

 
 

flex Itemrender使用例子:简单的flex相册  

2010-11-22 23:03:10|  分类: flex |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
flex Itemrender使用例子:简单的flex相册的制作方法。

flex Itemrender使用例子:简单的flex相册的制作方法。

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
    <mx:Style>
        global {
            modal-transparency: 0.9;
            modal-transparency-color: white;
            modal-transparency-blur: 9;
        }
    </mx:Style>
    <mx:Script>
        <![CDATA[
            import mx.effects.Resize;
            import mx.events.ResizeEvent;
            import mx.events.ListEvent;
            import mx.controls.Image;
            import mx.events.ItemClickEvent;
            import mx.managers.PopUpManager;
            private var img:Image;
            private function tileList_itemClick(evt:ListEvent):void {
                img = new Image();
                // img.width = 300;
                // img.height = 300;
                img.maintainAspectRatio = true;
                img.addEventListener(Event.COMPLETE, image_complete);
                img.addEventListener(ResizeEvent.RESIZE, image_resize);
                img.addEventListener(MouseEvent.CLICK, image_click);
                img.source = evt.itemRenderer.data.@fullImage;
                img.setStyle("addedEffect", image_addedEffect);
                img.setStyle("removedEffect", image_removedEffect);
                PopUpManager.addPopUp(img, this, true);
            }
            private function image_click(evt:MouseEvent):void {
                PopUpManager.removePopUp(evt.currentTarget as Image);
            }
            private function image_resize(evt:ResizeEvent):void {
PopUpManager.centerPopUp(evt.currentTargetasImage); } privatefunctionimage_complete(evt:Event):void{ PopUpManager.centerPopUp(evt.currentTargetasImage); } ]] /mx:Script mx:WipeDownid=image_addedEffec
                PopUpManager.centerPopUp(evt.currentTarget as Image);
            }
            private function image_complete(evt:Event):void {
                PopUpManager.centerPopUp(evt.currentTarget as Image);
            }
        ]]>
    </mx:Script>
    <mx:WipeDown id="image_addedEffect" startDelay="100" />
    <mx:Parallel id="image_removedEffect">
        <mx:Zoom />
        <mx:Fade />
    </mx:Parallel>
    <mx:XML id="xml" source="gallery.xml" />
    <mx:XMLListCollection id="xmlListColl" source="{xml.image}" />
    <mx:TileList id="tileList"
            dataProvider="{xmlListColl}"
            itemRenderer="CustomItemRenderer"
            columnCount="4"
            columnWidth="125"
            rowCount="2"
            rowHeight="100"
            themeColor="haloSilver"
            verticalScrollPolicy="on"
            itemClick="tileList_itemClick(event);" />
</mx:Application>

以下是CustomItemRenderer.mxml    :

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
        horizontalAlign="center"
        verticalAlign="middle">
    <mx:Image source="{data.@thumbnailImage}" />
    <mx:Label text="{data.@title}" />
</mx:VBox>

以下是 gallery.xml   :

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<gallery>
    <image title="flex"
        thumbnailImage="assets/fx_appicon-tn.gif"
        fullImage="assets/fx_appicon.jpg" />
    <image title="Flash"
            thumbnailImage="assets/fl_appicon-tn.gif"
            fullImage="assets/fl_appicon.jpg" />
    <image title="Illustrator"
            thumbnailImage="assets/ai_appicon-tn.gif"
fullImage=assets/ai_appicon.jpg/ imagetitle=Dreamweaver thumbnailImage=assets/dw_appicon-tn.gif fullImage=assets/dw_appicon.jpg/ imagetitle=ColdFusion thumbnailImage=assets/cf_appicon-tn.gif fullImag
            fullImage="assets/ai_appicon.jpg" />
    <image title="Dreamweaver"
            thumbnailImage="assets/dw_appicon-tn.gif"
            fullImage="assets/dw_appicon.jpg" />
    <image title="ColdFusion"
            thumbnailImage="assets/cf_appicon-tn.gif"
            fullImage="assets/cf_appicon.jpg" />
    <image title="Flash Player"
            thumbnailImage="assets/fl_player_appicon-tn.gif"
            fullImage="assets/fl_player_appicon.jpg" />
    <image title="Fireworks"
            thumbnailImage="assets/fw_appicon-tn.gif"
            fullImage="assets/fw_appicon.jpg" />
    <image title="Lightroom"
            thumbnailImage="assets/lr_appicon-tn.gif"
            fullImage="assets/lr_appicon.jpg" />
    <image title="Photoshop"
            thumbnailImage="assets/ps_appicon-tn.gif"
            fullImage="assets/ps_appicon.jpg" />
</gallery>

  评论这张
 
阅读(1564)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017