Flex + XML的图片轮显

简介: 点击查看示例运行效果>> 有待优化的问题: 1、载入图片未做loading处理; 2、图片未使用延时加载处理,默认加载了全部的图片; 3、界面UI美化 逻辑部分与JavaScript有些类似,在解析XML时,单独写了一个as类来处理,btn的外观使用了CSS进行控制,资源全部放在名为assets文件夹目录下,工程目录   主文件的代码(PictureSwitch.

点击查看示例运行效果>>

image

有待优化的问题:

1、载入图片未做loading处理;

2、图片未使用延时加载处理,默认加载了全部的图片;

3、界面UI美化

逻辑部分与JavaScript有些类似,在解析XML时,单独写了一个as类来处理,btn的外观使用了CSS进行控制,资源全部放在名为assets文件夹目录下,工程目录

image

 

主文件的代码(PictureSwitch.mxml):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="800" height="600"
creationComplete="inited()" viewSourceURL="srcview/index.html">

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.Button;
import mx.controls.Image;
import mx.effects.Effect;
import mx.effects.Iris;
import mx.effects.WipeLeft;
import mx.effects.WipeRight;
import mx.managers.ToolTipManager;

import vo.AdVO;

private static const XML_URL:String = "assets/xml/ad.xml";
private var xmlDataArr:Array;
private var timer:Timer;
private var currentIdx:Number;
private var buttonArr:Array;
private var imagesArr:Array;

private function inited():void
{
var _loader:URLLoader = new URLLoader();
var _req:URLRequest = new URLRequest(XML_URL);

_req.method = URLRequestMethod.GET;

_loader.dataFormat = URLLoaderDataFormat.TEXT;

_loader.addEventListener(Event.COMPLETE, completeHandler);
_loader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
_loader.load(_req);
}

private function progressHandler(evt:ProgressEvent):void
{
var str:String = "Loading " + Math.floor((evt.bytesLoaded / evt.bytesTotal) * 100) + "%";

setTxt(str);
}

private function completeHandler(evt:Event):void
{
xmlDataArr = [];
buttonArr = [];
imagesArr = [];

var _loader:URLLoader = evt.target as URLLoader;

_loader.removeEventListener(Event.COMPLETE, completeHandler);
_loader.removeEventListener(ProgressEvent.PROGRESS, progressHandler);

var _xml:XML = XML(_loader.data);
var _adVO:AdVO;
var _idx:Number = 0;

for each (var x:XML in _xml.child("item"))
{
_idx++;

_adVO = new AdVO(x);

createPictureItem(_adVO, _idx);

xmlDataArr.push(_adVO);
}

ToolTipManager.enabled = false;

autoPlay();

timer = new Timer(3000, 0);
timer.addEventListener(TimerEvent.TIMER, autoPlay);
timer.start();

loadingTxt.visible = false;
}

private function createPictureItem(adVO:AdVO, idx:Number):void
{
var _button:Button = new Button();
_button.width = 30;
_button.height = 15;
_button.buttonMode = true;
_button.label = idx.toString();
_button.addEventListener(MouseEvent.CLICK, changeHandler);

btnContainer.addChild(_button);

buttonArr.push(_button);


var _image:Image = new Image();
_image.x = 0;
_image.y = 0;
_image.source = adVO.getImgUrl();
// _image.visible = false;
_image.setStyle("showEffect", getRandomEffect());
// _image.setStyle("hideEffect", "fadeOut");
_image.buttonMode = true;

_image.addEventListener(MouseEvent.CLICK, clickHandler);

imgContainer.addChild(_image);

imagesArr.push(_image);
}

private function autoPlay(evt:TimerEvent=null, idx:Number=NaN):void
{
var _btn:Button;
var _img:Image;

if (!isNaN(currentIdx))
{
_btn = Button(buttonArr[currentIdx]);
_btn.styleName = "";

// _img = Image(imagesArr[currentIdx]);
// _img.visible = false;
}

if (isNaN(currentIdx))
{
currentIdx = 0;
}
else {

if (!isNaN(idx))
{
currentIdx = idx;
}
else
{
currentIdx += 1;
}

if (currentIdx > buttonArr.length - 1)
{
currentIdx = 0;
}
}

_btn = Button(buttonArr[currentIdx]);
_btn.styleName = "selected";

_img = Image(imagesArr[currentIdx]);
_img.parent.setChildIndex(_img, imagesArr.length - 1);
_img.visible = false;
_img.visible = true;
}

private function getRandomEffect():String
{
var arr:Array = [
'fadeIn',
'iris',
'wipeRight',
'wipeLeft',
'blur',
'dissolve'
];

var idx:Number = Math.floor(Math.random() * arr.length);

return arr[idx].toString();
}

private function changeHandler(evt:MouseEvent=null):void
{
timer.stop();
timer.reset();
timer.start();

var _btn:Button = Button(evt.target);
var _idx:Number = _btn.parent.getChildIndex(_btn);

if (_idx !== currentIdx)
{
autoPlay(null, _idx);
}
}

private function clickHandler(evt:MouseEvent):void
{
var adVO:AdVO = xmlDataArr[currentIdx] as AdVO;

Alert.show("点击了" + (currentIdx + 1).toString() + "--打开链接:" + adVO.url);
}

private function setTxt(txt:String):void
{
loadingTxt.htmlText = txt;
}

]]>
</mx:Script>

<mx:Style>
Application {
theme-color : #FFFFFF;
font-size : 12;
background-alpha : 0.0;
border-color : #FFFFFF;
}

Button
{
font-weight:normal;
corner-radius : 0;
font-size : 9;
color : #FFFFFF;
background-color : #FF0000;
fill-alphas:0.3, 0,3;
fill-colors:"#FF0000", "#FF0000";
background-color:#FF0000;
}

.selected {
font-weight:bold;
fill-alphas:1.0, 1.0;
}
</mx:Style>

<mx:Iris id="iris" />
<mx:Fade id="fadeIn" duration="1000" alphaTo="1.0" />
<mx:Fade id="fadeOut" duration="800" alphaTo="0.0" alphaFrom="1.0" />
<mx:WipeRight id="wipeRight" />
<mx:WipeLeft id="wipeLeft" />
<mx:Blur id="blur" duration="1000" blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0" />
<mx:Dissolve duration="1000" alphaFrom="0.0" alphaTo="1.0" id="dissolve" />

<mx:Canvas width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">

<mx:Canvas id="mask" width="100%" height="100%" backgroundColor="#FFFFFF" alpha="0" />

<mx:Canvas id="imgContainer" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" />

<mx:HBox id="btnContainer" width="100%" verticalAlign="bottom" bottom="10" right="10" horizontalAlign="right" horizontalGap="2" />

<mx:Text text="loading..." id="loadingTxt" horizontalCenter="0" verticalCenter="-10" />

</mx:Canvas>


</mx:Application>

参考网站:

1、【原创】使用Flex实现图片(广告)切换控件

2、图片的showEffect

 

提供示例的完全源码下载,点此立即下载>>

目录
相关文章
|
2月前
|
XML 数据采集 存储
挖掘网络宝藏:R和XML库助你轻松抓取 www.sohu.com 图片
网络上有无数的图片资源,但是如何从特定的网站中快速地抓取图片呢?本文将介绍一种使用 R 语言和 XML 库的简单方法,让你可以轻松地从 www.sohu.com 网站上下载你感兴趣的图片。本文将涉及以下几个方面: ● 为什么选择 R 语言和 XML 库作为图片爬虫的工具? ● 如何使用 R 语言和 XML 库来访问、解析和提取网页上的图片链接? ● 如何使用代理 IP 技术,参考亿牛云爬虫代理的设置,避免被网站屏蔽或限制? ● 如何实现多线程技术,提高图片爬取的效率和速度? ● 如何将爬取到的图片保存到本地或云端,进行数据分析和可视化?
|
11月前
|
XML 存储 自动驾驶
无人驾驶之交通识别项目--基于xml和图片生成自己的数据集txt用于yolo4训练
无人驾驶之交通识别项目--基于xml和图片生成自己的数据集txt用于yolo4训练
无人驾驶之交通识别项目--基于xml和图片生成自己的数据集txt用于yolo4训练
|
缓存 Java Android开发
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
268 0
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
|
Android开发
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片(三)
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片(三)
112 0
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片(三)
|
Android开发
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片(二)
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片(二)
115 0