用duilib制作仿QQ2013动态背景登录器

转载请说明原出处,谢谢~~

        在上一篇博客里,我修复了CActiveXUI控件的bug,从而可以使用flash动画来制作程序的背景,这篇博客说明一下应该怎么使用CActiveXUI控件创建透明无窗体的背景。

         去年的QQ2013的登陆界面就是动态界面,上篇博客我说道了,Duiengine已经有高人做好了仿QQ界面的代码,我这里只是把QQ2013的动态登陆界面制作出来。而QQ2014又换了全新的界面,不过熟悉UI制作的朋友知道,模仿QQ2014的登陆界面比Q2013的还要简单。可以看到QQ2013的登录器的如果特点就是背景是动态,这个只要使用flash文件做背景就可以了。上一篇博客已经打好了基础,现在做起来就很简单了。

        我先分析一下QQ2013的登录器的布局:如图

        从界面元素来讲,QQ登陆起的控件没几个,而且也只是常规的布局,最外层一个纵向布局,里面包含上中下三个横向布局,整个窗体都是可以拖动的。

        其中的上下布局很简单,我就不额外赘述了,写好相对布局,贴图上去就行了。

        中间的布局的左侧是一个CControlUI控件,设置背景图就可以,在这个图片右下角有一个状态按钮,选择登陆后的状态,这里的话用绝对布局放一个小图片到头像图片的右下角,然后在点击他时弹出个菜单就可以了,菜单的部分我也在前面的博客里说明了。而右侧就是一个CEditUI,一个CComboUI,两个CLabel,两个COptionUI控件。麻烦一点的就是帐号输入框,如果要达到和QQ一样效果就最好自定义一个CCbomboUI控件。最近在忙着做仿酷狗程序,我就不再花时间在这里开发这个控件了,好在这个控件开发起来应该很容易,可以参照我前面的仿酷狗的文章。

        而在xml中布局时,应该怎么布局就可以让flash做背景了?我这里说明一下。比如这个QQ登陆,我前面说了最外层应该使用一个纵向布局,如果要加上flash背景,就应该再额外套用一个布局来做最外层,里面包含一个CActiveXUI控件播放flash,再用绝对布局把QQ登陆起的布局放到flash上面,下面是示例代码和效果图:

<?xml version="1.0" encoding="UTF-8"?>
<Window size="380,290" caption="0,0,0,290" roundcorner="3,3" >
	<VerticalLayout bordersize="1" bordercolor="#FF000000" >
		<ActiveX name="flashActiveX" clsid="{D27CDB6E-AE6D-11CF-96B8-444553540000}" mouse="false"/>
		<VerticalLayout bkcolor="00FFFFFF" float="true" pos="0,0" width="380" height="290" >

			<HorizontalLayout height="30" bkcolor="00FFFFFF" inset="2,2,0,0"><!-- 标题栏 -->
				<Label text="  仿QQ登录器2013   BY:Redrain" textcolor="#FFFF0000" width="280" />
				<Control />
				<Button name="closebtn" width="42" maxheight="18" tooltip="点击这里直接退出游戏" normalimage="file='frame_btn_close_normal.bmp' mask='#FFFF00FF'" hotimage="file='frame_btn_close_hot.bmp' mask='#FFFF00FF'" pushedimage="file='frame_btn_close_down.bmp' mask='#FFFF00FF'"/>
			</HorizontalLayout >

			<HorizontalLayout bkcolor="00FFFFFF" > <!-- 主操作栏 -->

			</HorizontalLayout>

			<HorizontalLayout bkcolor="00FFFFFF" height="50"> <!-- 登陆按钮 -->
				<Button name="LoginBtn" text="登陆" padding="110,0,0,0" width="165" height="30" normalimage="file='login_btn_normal.png' conrer='10,10,10,10'" hotimage="file='login_btn_normal.png' conrer='10,10,10,10'" pushedimage="file='login_btn_normal.png' conrer='10,10,10,10'"/>
			</HorizontalLayout>
		</VerticalLayout>
    </VerticalLayout>
</Window>

      就说道这里吧,为了防止有人用他做界面型盗号木马,我就不把源码公布了,相信看到这里,我不公布代码大家也能做出和QQ 2013一样的登陆界面了。

       Redrain   2014.8.8 

时间: 2024-10-26 05:42:03

用duilib制作仿QQ2013动态背景登录器的相关文章

CSS3实现动态背景登录框的代码_表单特效

基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 实现的代码如下: html代码: <div class="htmleaf-container"> <div class="wrapper"> <div class="container"> <h1>Welcome</h1> <form class="fo

duilib修复ActiveXUI控件bug,以支持flash透明动态背景

转载请说明原出处,谢谢~~           昨天在QQ控件里和同学说起QQ2013登陆窗体的开发,从界面角度考虑,单单一个登陆界面是很容易做出来的.腾讯公司为了防止各种盗号行为可谓煞费苦心,QQ2013采用了动态背景就是为了防止界面型盗号木马,这种盗号木马做起来很简单,容易骗过很多电脑小白.而采用动态背景后就加大了这种木马的开发难度.           在Duiengine界面库中,已经有高手做出来一个高仿QQ界面的Demo.其中的登陆窗体只要使用flash做背景就可以了.在duilib中

仿酷狗音乐播放器开发日志二十——换肤功能背景图片控件的制作(附源码)

转载请说明原出处,谢谢~~           <仿酷狗音乐播放器开发日志二十>里做了换肤功能的一部分,今天完成其他的部分.酷狗的换肤窗口里的背景图可以让用户选择来换图,原酷狗的背景图的小图标,有normal.hover.down等多种状态,鼠标移动上去便会发生变化.如图        当鼠标经过时会有个黑色图片覆盖,边框变为浅蓝色.并且在他上面显示出作者的一些信息.要实现这个效果应该另外开发一个控件来支持动态的信息展示效果.我把这个小控件的开发过程和源码发一下,给学习做duilib控件的新手

PS结合AI制作创意的动态福字

  PS结合AI制作创意的动态福字.今天为大家分享PS结合AI制作创意的动态福字方法,教程很不错,很值得大家学习,推荐到脚本之家,喜欢的朋友快快来学习吧! 版权申明:本文原创作者含宗,感谢含宗的原创经验分享! 一.创作背景: ____毕业到现在,已有四年,一直感觉挺浮躁,静不下心来.经过深思熟虑,暗自下定决心2016静下心来回归设计,2016,宁静致远!公司年假放的比较早,整个假期有二十几天之久,决定春节不回家,在广州宅在窝里做设计,享受一个人的孤独.有朋友问,难道我不想家吗,呵呵,想想一大家人

轻松实现Flash动态背景

动态 今天我们为大家介绍几种Flash中常用动态背景的简单制作方法,主要运用随机数,步骤简单,但效果非常不错. 一.晃动的竖线 原文件下载学习 这个效果非常常用,其实实现起来也比较简单,主要通过控制MC的x坐标来实现. 新建一个MC,命名为line_g,画一条竖线,坐标(0,0). 注意:在这种需要控制坐标的flash中每个MC的初始坐标值都是很重要的,否则你很难弄清楚那个该死的MC到底跑到哪去了,即使是普通的flash,我们也最好制作得规范一些,这样看上去很清晰,检查起来也很方便. 再新建一个

PS制作仿梦露怀旧封面印刷效果教程

肖阳简介: 肖阳,1999年在今日捷成图片社做数码后期,2001年开始跟随著名摄影师李征老师做后期图片.随后还陆续跟多位著名摄影师.化妆师合作.2005年后和多家广告公司. 服装厂家合作从事广告设计和服装画册制作,现在在OVIP东方视线摄影学院担任后期数码课老师.曾为多位艺人做过后期修图工作,使用 PHOTOSHOP十年以上, 设计.排版.印刷也很有经验.有良好的媒体关系.服务客户:应大服装.德尔惠.爱慕.第一夫人.sonw image.拜耳.美克美家.戴梦得珠宝.小护士.乔伦等. 合作艺人:周

focusky演示文稿中添加动画动态背景

  如何在focusky演示文稿中添加动画动态背景?在Focusky多媒体演示制作大师中,可以添加flash动画(也就是*.swf文件)作为动态背景,也能添加声音播放器.相信很多朋友不知道怎么添加动画动态的背景,所以今天小编就为大家介绍一下focusky演示文稿中添加动画动态背景的方法,希望能帮助到用户们. 操作方法如下: 单击工具栏上的"插入", 在下拉栏中选择"SWF"选项     

duilib制作窗体动画效果

转载请说明原出处,谢谢~·http://blog.csdn.net/zhuhongshu/article/details/49026605         最近一段时间没写博客了,感觉最近没有遇到什么必须解决的bug.在一年前我把自己写的仿酷狗音乐播放器Demo写到博客时,我在博客末尾写过以后会做异形窗体和窗体动画的功能.异形窗体在半年前大概做完并且集成到我的库里了,但是窗体动画Demo没有写到博客.之前就有网友问我窗体动画的制作方法,一直懒着没写,不好意思···.          今天把窗体

仿酷狗音乐播放器开发日志二十一 开发动态调色板控件(附源码)

转载请说明原出处,谢谢~~           上一篇仿酷狗日志结束后,整个换肤功能就只剩下调色板功能没有做了,我本以为会很简单,但是研究了酷狗的调色板功能后发现不是那么简单的事情.首先看一下酷狗的调色板的样子:         我原本以为酷狗的主界面只是一张图片,然后通过鼠标坐标来选择颜色,简单粗暴.等我开始做这部分时发现情况不一样.         可以看到,酷狗的调色板分为两部分,上半部分是调色板的主界面,下半部分是调整亮度的工具栏,我这里分别给他们起名为Pallet和Bar方便说明.这个