`
hacker47
  • 浏览: 340525 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

FLEX展示--------Web可以如此精彩(漂亮MM+源码共享)

阅读更多

写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>

 

 

 

 

 

3
6
分享到:
评论
5 楼 leisure 2009-06-25  
没有mm,骗人
4 楼 chencang 2008-07-14  
我们boss上一周让我看看flex如何快速搞定程序,我当时还是第一次听说flex,汗
然后他要求我做个简单的html页面给他,不要拷贝网络上的代码。
了解了flex的一些表层后就做了个简单的页面,做了之后觉得自己好没有创新能力啊,做出来的那个简单的页面真是超级丑,感觉有些对不起flex了
这周开始做另外一个东西,到时候倒希望能将flex应用起来~~
3 楼 isky 2008-07-14  
......................了解一下了
2 楼 jusescn 2008-07-14  
对你所说的onepage one application比较感兴趣。最近接触的项目虽然做不到像extjs那么牛B,但是也是完整的js的SDK,可以交流下[jusescn@126.com]。
1 楼 seven_cuit 2008-07-13  
谢谢分享,我也想学一下

相关推荐

    arcgis-viewer-builder-flex-3.6-src.zip

    《ArcGIS Viewer Builder Flex 3.6 源码解析及应用开发》 ArcGIS Viewer Builder Flex 3.6 是一款强大的地图应用开发工具,它基于Adobe Flex技术,提供了丰富的地图展示、分析和定制功能。这个名为“arcgis-viewer-...

    arcgis-viewer-flex-3.1-src框架源码

    ArcGIS Viewer Flex 3.1 是Esri公司提供的一个强大的Web GIS应用程序开发框架,它基于Adobe Flex技术,为开发者提供了丰富的地图展示、地理分析和数据共享功能。这份源码是针对此框架的一个重要参考资料,对于想要...

    Flex-Ajax Bridge demo源码

    这个"Flex-Ajax Bridge demo源码"是用于展示如何利用该技术实现在Flex和Ajax应用之间交互的实际代码示例。 在Flex-Ajax Bridge中,主要涉及以下几个关键知识点: 1. **Flex**:Flex是由Adobe开发的一种开放源码...

    arcgis-viewer-flex-3.0-src官方源码

    《ArcGIS Viewer Flex 3.0官方源码详解》 ArcGIS Viewer Flex 3.0是Esri公司推出的一款基于Flex技术的Web GIS应用框架,主要用于构建交互式的地图应用程序。这款开源软件允许开发者进行二次开发,以满足特定的地理...

    flex相册源码(共享版)

    Flex相册源码是一款基于Adobe Flex技术开发的多媒体相册应用程序。...通过深入研究这些知识点,并结合提供的源码,开发者不仅可以理解这个Flex相册的工作原理,还能为自己的项目创建出类似或更高级的多媒体展示应用。

    ArcGIS+Server+Flex+API教程与源码

    本教程结合源码,将深入探讨如何利用ArcGIS Server和Flex API进行Web GIS应用的开发。 1. ArcGIS Server基础 ArcGIS Server的核心功能包括地图服务、地理编码、几何操作、数据转换等。它支持多种数据格式,如...

    flex实现web聊天源码

    在本案例中,"flex实现web聊天源码"是指使用Flex技术创建的Web聊天应用程序的源代码。 Web聊天应用程序是通过网络实现实时通信的一种方式,通常包括文字聊天、音频或视频通话等功能。在Flex中实现Web聊天,开发者...

    商业源码-编程源码-Flexsns-sky完全FLASH许愿天空 v2.0.zip

    6. **许愿墙功能**:用户可以在应用中提交心愿,展示并与其他用户共享,增加了社交互动性。 7. **版本控制**:"v2.0"代表版本升级,通常涉及新功能的添加、已知问题的修复和性能优化。 8. **商业源码**:这类源码...

    FLEX在线视频会议系统源码

    屏幕共享功能使得参会者可以展示自己的桌面或特定应用窗口;而聊天功能则提供文字交流,补充了音视频沟通的不足。 在实现这些功能时,Flex的组件库提供了丰富的UI元素,如视频播放器、按钮、文本输入框等,使得...

    Nginx + PHP-FPM + APC=绝妙的组合

    此外,APC还提供了数据共享的功能,可以用于跨脚本的数据存储。 接下来,我们将详细介绍如何在Ubuntu 8.10上构建这个高效的Web服务环境: 1. 安装依赖包: 在安装Nginx、PHP和PHP-FPM之前,需要确保所有必要的...

    ArcGIS Viewer For Flex 3.0 源码

    ArcGIS Viewer for Flex 3.0 是Esri公司开发的一款基于Adobe Flex技术的Web GIS应用框架,它提供了丰富的地图展示、地理分析和信息共享功能,使得开发者能够快速构建交互式的地理信息系统。此源码的开放,为开发者...

    ASP,NET源码——[上传下载]Asp.net + Flex实现网络硬盘.zip

    【标题解析】 ...通过分析这个项目的源码,开发者可以学习到如何在ASP.NET环境中整合Flex,以及如何实现一个完整的文件管理系统。这对于提升ASP.NET和Flex开发者在实际项目中的技能和经验非常有帮助。

    Flex与服务器端通信

    在本文中,我们将深入探讨Flex如何与服务器端进行通信,以及如何通过提供的Flex源码和C#服务器端源码实现这一过程。 1. **Flex中的数据通信基础** - ** BlazeDS服务**:Adobe的BlazeDS是Flex与服务器端通信的主要...

    Flex和Fms3打造在线聊天室 源码和文档

    通过学习和分析这份资料,开发者不仅可以掌握Flex和FMS3的基本用法,还能了解到实时通信和数据共享的关键技术,为构建类似的应用程序打下坚实基础。同时,这份资料的易读性和实用性也表明,它是初学者和有一定经验的...

    Web菜单源码(共享他人的)

    【标题】"Web菜单源码(共享他人的)"所涉及的知识点主要集中在Web前端开发领域,特别是关于构建网站导航菜单的代码实现。在Web开发中,菜单是网站的重要组成部分,它帮助用户方便地浏览和访问网站的不同页面。下面将...

    flex通信之BlazeDS通信实例源码

    本实例源码主要展示了如何利用BlazeDS实现Flex客户端与Java后端之间的数据交互。 在Flex开发中,BlazeDS提供了以下核心功能: 1. **LiveCycle Data Services (LCDS)**:BlazeDS是LCDS的一个开源版本,提供了一套...

    FLEX helloworld实例源码

    4. **Flex构建过程**:在AS_0100_HelloWorld实例中,你将学习如何创建一个Flex项目,编写ActionScript代码,然后在MXML文件中引用这些代码,最后通过Flex Compiler将源代码编译为SWF文件,该文件可以在Web浏览器中...

    Flex/flash 无需服务器的P2P源码

    标题 "Flex/flash 无需服务器的P2P源码" 描述了这是一个使用Flex和Flash技术实现的点对点(P2P)通信系统,它能够实现NAT(网络地址转换)穿越,使得两个处于不同NAT后的设备也能直接通信,而无需通过中央服务器作为...

    flex 单点登录,前端后端源码 jar包

    Flex单点登录(Single Sign-On, SSO)是一种身份验证机制,允许用户在一次登录后访问多个相互关联的...开发者可以深入研究源码,了解SSO的整个流程,包括前端的用户交互、数据传输,以及后端的身份验证和会话管理机制。

    flex osgi实现-potomac 实现页面与页面间数据传递和页面间各部分的数据传递

    Flex OSGi实现-Potomac框架:页面间通信与数据共享详解 在现代软件开发中,尤其是在企业级应用中,灵活、可扩展且模块化的架构变得至关重要。OSGi(Open Services Gateway Initiative)是一个用于Java的开放标准,...

Global site tag (gtag.js) - Google Analytics