写javascript我已经快写到麻木的程度了,从表单验证,到JS+DHTML又到AJAX各种框架(DWR,prototype,YUI,jSON......)的热潮一波接一波,甚至还面向对象式的来封装JS.顺便提一下,我手头儿快结项的一个项目竟然是one page,one application,意思就是整个项目只有一个页面,这个主页面里include很多其它子页面,每个页面里都是DIV组成,在第一次将整个项目加载进来,完全用JS和AJAX来处理显示,逻辑,以及特效. 这里不讨论这种架构设计的优劣,我只想表明,我在JS里折腾得够呛,特别是IE6,IE7...FF2,FF3,opera,sarfria....这些浏览器全要兼容.可是项目摆在这里,任务总是要完成的,好在经过几个月的努力现在基本上测试完毕.
Flex的诞生其实给了程序员更多的选择,给了设计师更多的灵感和创意空间,这个效果还是很早以前学习FLEX时做的,效果可能并不能让你夺目,可是当你看完它的源码之后,你是否也该惊叹,ActionScript3的神奇力量.(这里的MX标签其实也是AS类)如此之少的代码可以带给用户更多的精彩.不是一种更好的选择吗?
不多说了,如果效果你不满意,就看看MM放松下吧.
(下面的不是截图,请点击图片)
别忘了学习,看完MM,再看看源码吧(这是很早以前的练习,里面的命名都不是很规范,也没时间整理,大家凑合着看):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="black">
<mx:states>
<mx:State name="can1State">
<mx:SetProperty target="{can3}" name="width" value="100"/>
<mx:SetProperty target="{can3}" name="height" value="100"/>
<mx:SetProperty target="{can3}" name="x" value="10"/>
<mx:SetProperty target="{can3}" name="y" value="120"/>
<mx:SetProperty target="{can1}" name="width" value="300"/>
<mx:SetProperty target="{can1}" name="height" value="300"/>
<mx:SetProperty target="{can1}" name="x" value="120"/>
<mx:SetProperty target="{can2}" name="y" value="10"/>
</mx:State>
<mx:State name="can2State" basedOn="can1State">
<mx:SetProperty target="{can1}" name="width" value="100"/>
<mx:SetProperty target="{can1}" name="height" value="100"/>
<mx:SetProperty target="{can1}" name="x" value="10"/>
<mx:SetProperty target="{can1}" name="y" value="120"/>
<mx:SetProperty target="{can2}" name="width" value="300"/>
<mx:SetProperty target="{can2}" name="height" value="300"/>
<mx:SetProperty target="{can2}" name="x" value="120"/>
<mx:SetProperty target="{can3}" name="y" value="10"/>
</mx:State>
</mx:states>
<mx:Script>
<![CDATA[
import mx.effects.easing.Bounce;
[Bindable]
private var ss:*=can3;
[Bindable]
private var up:*=can2;
[Bindable]
private var down:*=can3;
[Bindable]
[Embed(source="asset/1.jpg")]
private var redImg:Class;
[Bindable]
[Embed(source="asset/2.jpg")]
private var greenImg:Class;
[Bindable]
[Embed(source="asset/3.jpg")]
private var blueImg:Class;
]]>
</mx:Script>
<mx:Style>
Canvas{
borderThickness:"3";
borderStyle:"solid";
horizontalScrollPolicy:"off";
verticalScrollPolicy:"off";
}
</mx:Style>
<mx:transitions>
<mx:Transition>
<mx:Parallel targets="{[can1,can2,can3]}">
<mx:Resize duration="200" easingFunction="Bounce.easeOut"/>
<mx:Move xTo="120" duration="500" yTo="10" target="{ss}"/>
<mx:Move xTo="10" yTo="10" duration="500" target="{up}"/>
<mx:Move xTo="10" yTo="120" duration="500" target="{down}"/>
<mx:Resize widthFrom="100" widthTo="300" heightFrom="100" heightTo="300" duration="1000" target="{ss}"/>
<mx:Sequence>
<mx:Blur duration="500" blurYFrom="1.0" blurYTo="20.0"/>
<mx:Blur duration="500" blurYFrom="20.0" blurYTo="1"/>
</mx:Sequence>
</mx:Parallel>
</mx:Transition>
</mx:transitions>
<mx:Canvas borderColor="red" backgroundColor="black" id="can1" width="100" height="100" x="10" y="10" click="ss=can1;up=can2;down=can3;currentState='can1State';">
<mx:Image source="{redImg}" width="100%" height="100%" scaleX="1" scaleY="1"/>
</mx:Canvas>
<mx:Canvas borderColor="green" backgroundColor="white" id="can2" width="100" height="100" x="10" y="120" click="ss=can2;up=can3;down=can1;currentState='can2State';">
<mx:Image source="{greenImg}" width="100%" height="100%"/>
</mx:Canvas>
<mx:Canvas borderColor="blue" backgroundColor="red" id="can3" width="300" height="300" x="120" y="10" click="ss=can3;up=can1;down=can2;currentState='';">
<mx:Image source="{blueImg}" width="100%" height="100%"/>
</mx:Canvas>
</mx:Application>
分享到:
相关推荐
《ArcGIS Viewer Builder Flex 3.6 源码解析及应用开发》 ArcGIS Viewer Builder Flex 3.6 是一款强大的地图应用开发工具,它基于Adobe Flex技术,提供了丰富的地图展示、分析和定制功能。这个名为“arcgis-viewer-...
ArcGIS Viewer Flex 3.1 是Esri公司提供的一个强大的Web GIS应用程序开发框架,它基于Adobe Flex技术,为开发者提供了丰富的地图展示、地理分析和数据共享功能。这份源码是针对此框架的一个重要参考资料,对于想要...
这个"Flex-Ajax Bridge demo源码"是用于展示如何利用该技术实现在Flex和Ajax应用之间交互的实际代码示例。 在Flex-Ajax Bridge中,主要涉及以下几个关键知识点: 1. **Flex**:Flex是由Adobe开发的一种开放源码...
《ArcGIS Viewer Flex 3.0官方源码详解》 ArcGIS Viewer Flex 3.0是Esri公司推出的一款基于Flex技术的Web GIS应用框架,主要用于构建交互式的地图应用程序。这款开源软件允许开发者进行二次开发,以满足特定的地理...
Flex相册源码是一款基于Adobe Flex技术开发的多媒体相册应用程序。...通过深入研究这些知识点,并结合提供的源码,开发者不仅可以理解这个Flex相册的工作原理,还能为自己的项目创建出类似或更高级的多媒体展示应用。
本教程结合源码,将深入探讨如何利用ArcGIS Server和Flex API进行Web GIS应用的开发。 1. ArcGIS Server基础 ArcGIS Server的核心功能包括地图服务、地理编码、几何操作、数据转换等。它支持多种数据格式,如...
在本案例中,"flex实现web聊天源码"是指使用Flex技术创建的Web聊天应用程序的源代码。 Web聊天应用程序是通过网络实现实时通信的一种方式,通常包括文字聊天、音频或视频通话等功能。在Flex中实现Web聊天,开发者...
6. **许愿墙功能**:用户可以在应用中提交心愿,展示并与其他用户共享,增加了社交互动性。 7. **版本控制**:"v2.0"代表版本升级,通常涉及新功能的添加、已知问题的修复和性能优化。 8. **商业源码**:这类源码...
屏幕共享功能使得参会者可以展示自己的桌面或特定应用窗口;而聊天功能则提供文字交流,补充了音视频沟通的不足。 在实现这些功能时,Flex的组件库提供了丰富的UI元素,如视频播放器、按钮、文本输入框等,使得...
此外,APC还提供了数据共享的功能,可以用于跨脚本的数据存储。 接下来,我们将详细介绍如何在Ubuntu 8.10上构建这个高效的Web服务环境: 1. 安装依赖包: 在安装Nginx、PHP和PHP-FPM之前,需要确保所有必要的...
ArcGIS Viewer for Flex 3.0 是Esri公司开发的一款基于Adobe Flex技术的Web GIS应用框架,它提供了丰富的地图展示、地理分析和信息共享功能,使得开发者能够快速构建交互式的地理信息系统。此源码的开放,为开发者...
【标题解析】 ...通过分析这个项目的源码,开发者可以学习到如何在ASP.NET环境中整合Flex,以及如何实现一个完整的文件管理系统。这对于提升ASP.NET和Flex开发者在实际项目中的技能和经验非常有帮助。
在本文中,我们将深入探讨Flex如何与服务器端进行通信,以及如何通过提供的Flex源码和C#服务器端源码实现这一过程。 1. **Flex中的数据通信基础** - ** BlazeDS服务**:Adobe的BlazeDS是Flex与服务器端通信的主要...
通过学习和分析这份资料,开发者不仅可以掌握Flex和FMS3的基本用法,还能了解到实时通信和数据共享的关键技术,为构建类似的应用程序打下坚实基础。同时,这份资料的易读性和实用性也表明,它是初学者和有一定经验的...
【标题】"Web菜单源码(共享他人的)"所涉及的知识点主要集中在Web前端开发领域,特别是关于构建网站导航菜单的代码实现。在Web开发中,菜单是网站的重要组成部分,它帮助用户方便地浏览和访问网站的不同页面。下面将...
本实例源码主要展示了如何利用BlazeDS实现Flex客户端与Java后端之间的数据交互。 在Flex开发中,BlazeDS提供了以下核心功能: 1. **LiveCycle Data Services (LCDS)**:BlazeDS是LCDS的一个开源版本,提供了一套...
4. **Flex构建过程**:在AS_0100_HelloWorld实例中,你将学习如何创建一个Flex项目,编写ActionScript代码,然后在MXML文件中引用这些代码,最后通过Flex Compiler将源代码编译为SWF文件,该文件可以在Web浏览器中...
标题 "Flex/flash 无需服务器的P2P源码" 描述了这是一个使用Flex和Flash技术实现的点对点(P2P)通信系统,它能够实现NAT(网络地址转换)穿越,使得两个处于不同NAT后的设备也能直接通信,而无需通过中央服务器作为...
Flex单点登录(Single Sign-On, SSO)是一种身份验证机制,允许用户在一次登录后访问多个相互关联的...开发者可以深入研究源码,了解SSO的整个流程,包括前端的用户交互、数据传输,以及后端的身份验证和会话管理机制。
Flex OSGi实现-Potomac框架:页面间通信与数据共享详解 在现代软件开发中,尤其是在企业级应用中,灵活、可扩展且模块化的架构变得至关重要。OSGi(Open Services Gateway Initiative)是一个用于Java的开放标准,...