Flash+JS 打造全屏仿windows 网页

2005-12-20 13:21:39

大家请先看看这两个样本: http://www.egomedia.com http://www.aspecto.net/linxi 前几天看到"自我媒体" (http://www.egomedia.com ) 这个网站,觉得那种全屏打开的页面很有feeling, 所以仿造了一个.但是因为时间的原因还没做完.(到时候还要加一个flash版的留言版,和几个游戏) 而且由于空间的限制,MTV 无法上传,请大家见谅. 一、需求分析: 1:全屏页面分辨率需为 1024*768 如果低于此分辨率,画面精细的效果得不到体现。所以应该限制此分辩率以下的操作系统访问此界面。 2:打开的全屏窗口应该右上角有最小化、关闭按扭。 3:每个载入的窗口应该可以移动、关闭、最小化。 4:桌面上的图标可以拖动,双击。 5:屏幕底部有一个任务栏,当鼠标移至屏幕底部,任务栏从底部弹出。可以用一个按扭使其退回屏幕底部。 二、技术要点: Java Script: Screen 对象 (object): 该对象具有以下属性(Properties): availHeight [有效高度], (有效高度=高度-任务栏高度) availWidth [有效宽度], bufferDepth [缓冲区大小], colorDepth[颜色深度], height [高度], width [宽度], up&#100;ateInterval [更新间隔], Window 对象 (object): 该对象具有以下属性(Properties): clientInformation[客户端信息], closed [已关闭], defaultStatus[默认状态], dialogArguments [会话框返回数组], dialogHeight [会话框高度], dialogLeft [会话框距屏幕左], dialogTop[会话框距屏幕顶], dialogWidth[会话框宽度], (以上5 个属性只适用于己于人showModalDialog() 创建的形式会话框) document[文档], event[事件], history[历史], length*[长度], location[位置], name[名称], navigator[浏览器], offscreenBuffering [关闭屏幕缓冲 Y/N ], opener [script 开窗口都有opener 指向开这个的窗口 你自己开的浏览器就是空的 window.close 根据这个判断的是否提示] parent*,[父窗口] returnValue[返回值], screen[屏幕], self[自身], status[状态], top* [是否顶窗口] *An asterisk indicates properties not applicable to modal dialogs. 带*号的属性不可用于 modal dialogs (由 showModalDialog() 创建的形式会话框). Collections (集合) frames* [框架] 方法(Methods): alert[警告], blur[最小化], clearInterval [取消间隔], clearTimeout[清除超时设置], close[关闭], confirm [确定] (object.confirm([message]) 是否确定?此函数将返回一个逻辑值 ), execScript[执行代码], focus[聚焦], moveBy[相对移动], moveTo[移动到], navigate[导航 =window.location.href 本地URL ], open* [打开], prompt [提示], resizeBy [相对缩放], resizeTo [缩放到], scroll[卷动], scrollBy[相对卷动], scrollTo[卷动到], setInterval[设置间隔], setTimeout[设置超时], showHelp[显示帮助], showModalDialog* [显示形式会话框] *An asterisk indicates properties not applicable to modal dialogs. 带*号的属性不可用于 modal dialogs (由 showModalDialog() 创建的形式会话框). 事件(Events): onbeforeunload[关闭前], onblur[最小化], onerror[错误], onfocus[得到焦点], onhelp[帮助], onload[载入], onresize[缩放], onscroll[卷动], onunload [关闭] flash Action Script: on (press [按], release [释放], releaseOutside [外部释放], rollOver [滑过] , rollOut [滑离], dragOver [拖过], dragOut [拖离], keyPress "" [按键]) GetUrl [转到连接] ("javascript :self.close()"); StratDrag("MovieClip"); [开始拖曳] StopDrag("MovieClip"); [停止拖曳] loadMovie("*.swf", "MovieClip"); [加载影片到MovieClip] LoadmovieNum ("*.swf",n); [加载影片到第n层] UnLoadmovie("*.swf"); [卸载影片] play()[播放]; stop()[停止]; pc_today=new Date();[新建日期对象] pc_today.getHours();[时] pc_today.getMinutes();[分] pc_today.getTime();[秒] .getBytesLoaded();[已载入字节数] .getBytesTotal();[需载入的字节总数] _root.getBytesTotal 表示当前SWF文件的字节数. on(release){ getURL("javascript :self.close()"); // [转到连接] } 执行JS代码,关闭当前窗口,同样的 getURL("javascript :self.blur()"); 可以使当前窗口最小化. 三、程序代码 1,控制在1024*768 分辨率以上可以打开全屏的 JS代码。 将此代码放入 <Body></Body> 区。 <script language="JavaScript" type="text/JavaScript"> <!-- function cc_openBrWindow(theURL,winName,features) { //v2.0 if(screen.width>=1024 && screen.height>=768) { window.open(theURL,winName,features); } else { alert("请将分辨率调至 1024 * 768 以上获得最佳显示效果.^_^!") } } //--> </script> <a href="#"><IMG SRC="image/index_06.gif" ALT="Enter The Flash SITE! Best View Mode 1024*768*24 bit." WIDTH=209 HEIGHT=53 border="0" onClick="cc_openBrWindow('flash/index.html','full','fullscreen=yes')"></a> 2,Flash 中测试mp3 载入百分比的 AS: 说明:主场景中有一名为loadmp3 的 MovieClip .用于载入 mp3 转成的SWF 文件,也可直接载入mp3. 做一个 100 帧的 loading MovieClip 名为loading_mv . 做一个两帧的无图象的MovieClip 名为loading_mv_test . 第一帧代码如下: mp3loaded = _root.loadmp3.getBytesLoaded(); mp3total = _root.loadmp3.getBytesTotal(); mp3percent = 0; if (mp3total>1000 && mp3loaded>10) { //当主场景中的 loadmp3 没有载入影片 mp3loaded的值为1 ,而不为0 ; //因为有一个字节来表示这个 MovieClip mp3percent = int (mp3loaded/mp3total*100); _parent.gotoAndstop(mp3percent); } else { _parent.gotoAndstop(1); } pctoday = new Date(); pctime = pctoday.getHours() add ":" add pctoday.getMinutes() add ":" add pctoday.getSeconds(); //在场景中建立一个动态文本对象,变量名为pctime, 就可以实时显示系统时间了。 第二帧代码如下: gotoandplay(1); 3,桌面图标的主要代码: on (press) { startDrag(""); } on (release) { stopDrag(); frame = time._currentframe; if (settime == 0) { //settime ==0 表示还没有开始计时。settime ==1 表示已经开始计时。 time.gotoandplay(1); settime = 1; } //开使记时,设置记时位 settime . if (settime == 1 && frame<=6) { //开始计时的6帧以内,(0.5S) 再次释放鼠标。 loadMovie("000.jpg", "_root.picback.bak"); //也可以换成其他动作。 } else { settime = 0; //计时位复位。 } } //time 为一个二十帧的 MovieClip, //在二十帧的as 为 stop(); 四、原文件 压缩包中包含了主文件的原代码。 1024*768*12 FPS 003.jpg,004.jpg.005.swf 的大小均为1024*768 ,但是没有放到压缩包中 (请自行设置)。 密码为 linxi 原文件未经作者允许,请勿用于商业用途。 五、写到最后。 这是我第一次写教程,请大家不要乱仍东西,要是砸到花花草草可不好啊! 还有请版竹帮忙加一点点分, ^_^ ! 我现在湘潭联合数据 http://www.hnxtbip.com 兼职做 flash. 有公司想做flash的请联系: E_mail: pcking_can@163.com 参考资料: Dynamic HTML ___ 1997 Microsoft Corporation. All rights reserved. Terms of Use. [URL=http://flash8.net/viewfile.asp?ID=44473]原代码 Flash+JS 打造全屏仿windows 网页By 林夕 _带原文件 [中级教程] -------------------------------------------------------------------------------- Flash+JS 打造全屏仿windows 网页By 林夕 [中级教程] Flash+JS 打造全屏仿windows 网页By 林夕 _带原文件 [中级教程] 大家请先看看这两个样本: http://www.egomedia.com http://www.aspecto.net/linxi 前几天看到"自我媒体" (http://www.egomedia.com ) 这个网站,觉得那种全屏打开的页面很有feeling, 所以仿造了一个.但是因为时间的原因还没做完.(到时候还要加一个flash版的留言版,和几个游戏) 而且由于空间的限制,MTV 无法上传,请大家见谅. 一、需求分析: 1:全屏页面分辨率需为 1024*768 如果低于此分辨率,画面精细的效果得不到体现。所以应该限制此分辩率以下的操作系统访问此界面。 2:打开的全屏窗口应该右上角有最小化、关闭按扭。 3:每个载入的窗口应该可以移动、关闭、最小化。 4:桌面上的图标可以拖动,双击。 5:屏幕底部有一个任务栏,当鼠标移至屏幕底部,任务栏从底部弹出。可以用一个按扭使其退回屏幕底部。 二、技术要点: Java Script: Screen 对象 (object): 该对象具有以下属性(Properties): availHeight [有效高度], (有效高度=高度-任务栏高度) availWidth [有效宽度], bufferDepth [缓冲区大小], colorDepth[颜色深度], height [高度], width [宽度], up&#100;ateInterval [更新间隔], Window 对象 (object): 该对象具有以下属性(Properties): clientInformation[客户端信息], closed [已关闭], defaultStatus[默认状态], dialogArguments [会话框返回数组], dialogHeight [会话框高度], dialogLeft [会话框距屏幕左], dialogTop[会话框距屏幕顶], dialogWidth[会话框宽度], (以上5 个属性只适用于己于人showModalDialog() 创建的形式会话框) document[文档], event[事件], history[历史], length*[长度], location[位置], name[名称], navigator[浏览器], offscreenBuffering [关闭屏幕缓冲 Y/N ], opener [script 开窗口都有opener 指向开这个的窗口 你自己开的浏览器就是空的 window.close 根据这个判断的是否提示] parent*,[父窗口] returnValue[返回值], screen[屏幕], self[自身], status[状态], top* [是否顶窗口] *An asterisk indicates properties not applicable to modal dialogs. 带*号的属性不可用于 modal dialogs (由 showModalDialog() 创建的形式会话框). Collections (集合) frames* [框架] 方法(Methods): alert[警告], blur[最小化], clearInterval [取消间隔], clearTimeout[清除超时设置], close[关闭], confirm [确定] (object.confirm([message]) 是否确定?此函数将返回一个逻辑值 ), execScript[执行代码], focus[聚焦], moveBy[相对移动], moveTo[移动到], navigate[导航 =window.location.href 本地URL ], open* [打开], prompt [提示], resizeBy [相对缩放], resizeTo [缩放到], scroll[卷动], scrollBy[相对卷动], scrollTo[卷动到], setInterval[设置间隔], setTimeout[设置超时], showHelp[显示帮助], showModalDialog* [显示形式会话框] *An asterisk indicates properties not applicable to modal dialogs. 带*号的属性不可用于 modal dialogs (由 showModalDialog() 创建的形式会话框). 事件(Events): onbeforeunload[关闭前], onblur[最小化], onerror[错误], onfocus[得到焦点], onhelp[帮助], onload[载入], onresize[缩放], onscroll[卷动], onunload [关闭] flash Action Script: on (press [按], release [释放], releaseOutside [外部释放], rollOver [滑过] , rollOut [滑离], dragOver [拖过], dragOut [拖离], keyPress "" [按键]) GetUrl [转到连接] ("javascript :self.close()"); StratDrag("MovieClip"); [开始拖曳] StopDrag("MovieClip"); [停止拖曳] loadMovie("*.swf", "MovieClip"); [加载影片到MovieClip] LoadmovieNum ("*.swf",n); [加载影片到第n层] UnLoadmovie("*.swf"); [卸载影片] play()[播放]; stop()[停止]; pc_today=new Date();[新建日期对象] pc_today.getHours();[时] pc_today.getMinutes();[分] pc_today.getTime();[秒] .getBytesLoaded();[已载入字节数] .getBytesTotal();[需载入的字节总数] _root.getBytesTotal 表示当前SWF文件的字节数. on(release){ getURL("javascript :self.close()"); // [转到连接] } 执行JS代码,关闭当前窗口,同样的 getURL("javascript :self.blur()"); 可以使当前窗口最小化. 三、程序代码 1,控制在1024*768 分辨率以上可以打开全屏的 JS代码。 将此代码放入 <Body></Body> 区。 <script language="JavaScript" type="text/JavaScript"> <!-- function cc_openBrWindow(theURL,winName,features) { //v2.0 if(screen.width>=1024 && screen.height>=768) { window.open(theURL,winName,features); } else { alert("请将分辨率调至 1024 * 768 以上获得最佳显示效果.^_^!") } } //--> </script> <a href="#"><IMG SRC="image/index_06.gif" ALT="Enter The Flash SITE! Best View Mode 1024*768*24 bit." WIDTH=209 HEIGHT=53 border="0" onClick="cc_openBrWindow('flash/index.html','full','fullscreen=yes')"></a> 2,Flash 中测试mp3 载入百分比的 AS: 说明:主场景中有一名为loadmp3 的 MovieClip .用于载入 mp3 转成的SWF 文件,也可直接载入mp3. 做一个 100 帧的 loading MovieClip 名为loading_mv . 做一个两帧的无图象的MovieClip 名为loading_mv_test . 第一帧代码如下: mp3loaded = _root.loadmp3.getBytesLoaded(); mp3total = _root.loadmp3.getBytesTotal(); mp3percent = 0; if (mp3total>1000 && mp3loaded>10) { //当主场景中的 loadmp3 没有载入影片 mp3loaded的值为1 ,而不为0 ; //因为有一个字节来表示这个 MovieClip mp3percent = int (mp3loaded/mp3total*100); _parent.gotoAndstop(mp3percent); } else { _parent.gotoAndstop(1); } pctoday = new Date(); pctime = pctoday.getHours() add ":" add pctoday.getMinutes() add ":" add pctoday.getSeconds(); //在场景中建立一个动态文本对象,变量名为pctime, 就可以实时显示系统时间了。 第二帧代码如下: gotoandplay(1); 3,桌面图标的主要代码: on (press) { startDrag(""); } on (release) { stopDrag(); frame = time._currentframe; if (settime == 0) { //settime ==0 表示还没有开始计时。settime ==1 表示已经开始计时。 time.gotoandplay(1); settime = 1; } //开使记时,设置记时位 settime . if (settime == 1 && frame<=6) { //开始计时的6帧以内,(0.5S) 再次释放鼠标。 loadMovie("000.jpg", "_root.picback.bak"); //也可以换成其他动作。 } else { settime = 0; //计时位复位。 } } //time 为一个二十帧的 MovieClip, //在二十帧的as 为 stop(); 四、原文件 压缩包中包含了主文件的原代码。 1024*768*12 FPS 003.jpg,004.jpg.005.swf 的大小均为1024*768 ,但是没有放到压缩包中 (请自行设置)。 密码为 linxi 原文件未经作者允许,请勿用于商业用途。 五、写到最后。 请大家不要乱仍东西,要是砸到花花草草可不好啊! 还有请版竹帮忙加一点点分, ^_^ ! 参考资料: Dynamic HTML ___ 1997 Microsoft Corporation. All rights reserved. Terms of Use. [URL=http://flash8.net/viewfile.asp?ID=44473]原代码[/url]