wonderimage » webDesign

四月200902

333 views

全Flash web制作涉及到的一些相关技术

全Flash web制作涉及到的一些相关技术：

1、页面加载技术，目前可以使用传统的loadMovie函数，movieClipLoader类来解决，或者使用网上可以找到的相关类库作为解决方案。

import mx.transitions.Tween;

import mx.transitions.easing.*;

var loadingTw:Tween;

stop();

//----------------------EXTERNAL SWF LOADER

loadingTextBox._alpha = 0;

var mcLoader:MovieClipLoader = new MovieClipLoader();

var mcLoaderListener:Object = new Object();

//add a listener for the loader

mcLoader.addListener(mcLoaderListener);

//while the external swf file is loading

mcLoaderListener.onLoadProgress = function(target_mc, bytesLoaded, bytesTotal) {

//show preloader

loadingTextBox._alpha = 100;

//update preloader

var pctLoaded = Math.round(bytesLoaded/bytesTotal*100);

//page_mc.preloader_mc._xscale = pctLoaded;

trace(pctLoaded+" loaded!");

loadingTextBox.loadingShow.text = "loading: "+pctLoaded+"%";

//if loaded, fade in loaded content

if (bytesLoaded>=bytesTotal) {

loadingTextBox._alpha = 0;

loadingTw = new Tween(loadingTextBox, "_alpha", Regular.easeOut, 100, 0, 12, false);

trace("load done!");

}

};

mcLoaderListener.onLoadInit = function() {

loader_mc.play();

};

mcLoader.loadClip("part"+_root.link+".swf",loader_mc);

2、数据加载技术，一般使用XML结构的数据，封装数据的xml文件可以手动修改，也可以制作Php等后台动态更新数据，如果采用php可以把数据存储在mysql数据库，网站页面请求数据时，用php动态输出XML格式数据。目前打算尝试使用Wordpress系统作为flash展示型网站的管理后台，初步了解应该是可行的解决方案！

3、全屏幕控制：

下载: code.as

//舞台的缩放及对齐控制

Stage.scaleMode = "noScale";

Stage.align = "TL";

//页面元素的初始设置！

loaderbox._x =(Stage.width-358)/2;

loaderbox._y =(Stage.height-50)/2;

logo._x =(Stage.width-288)/2;

logo._y =(Stage.height-118)/2-30;

BgLight._x = 0;

BgLight._y = 0;

BgLight._width = Stage.width;

BgLight._height= Stage.height;

///////////////////////////

//监听舞台resize变化

fullscreen = new Object();

fullscreen.onResize = function() {

//swf大小改变时触发根据Stage.width和Stage.height获得的舞台的宽和高来调整各元素显示

loaderbox._x =(Stage.width-358)/2;

loaderbox._y =(Stage.height-50)/2;

logo._x =(Stage.width-288)/2;

logo._y =(Stage.height-118)/2-30;

BgLight._width = Stage.width;

BgLight._height= Stage.height;

slideShow._x =(Stage.width-744)/2;

slideShow._y =(Stage.height-492)/2;

bottomBar._x = 0;

bottomBar._y = Stage.height-83;

bottomBar._width = Stage.width;

topBar._x = 0;

topBar._y = 0;

topBar._width = Stage.width;

logoBottom._x = 15;

logoBottom._y = Stage.height-110;

logoTop._x =(Stage.width-440)/2;

logoTop._y =0;

musicCtr._x = Stage.width+80;

musicCtr._y = Stage.height-55;

menu._x = 420;

menu._y = Stage.height-80;

};

Stage.addListener(fullscreen);

三月200930

wonder

385 views

0

大连劳动保障局网站项目

效果图1

效果图2

二月200919

wonder

188 views

0

关于web栅格系统

在web设计上应用栅格系统，这个很多人在讨论，翻看了网上的几篇文章感觉很有启发！
关于栅格系统查看：
http://lifesinger.org/blog/?p=375
http://960.gs/
其实这种设计方法这平面媒介上也是渊源很长的了，通过我的理解基于栅格的设计就是可以让整个体系中的各种视觉元素的布局、尺寸，更加规范化。当然完全的栅格化是不切实际和无效率的（不能一味地追求将所有设计都栅格化），在网站布局和主要元素上应用栅格作为度量标尺，在大型商业系统视觉设计上还是非常有价值的。
优势：
1、能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。
2、基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。
哪些地方使用栅格布局：
1、页面的总体宽度布局，比如两栏、三栏等布局
2、一些固定区块的尺寸，比如广告图片的尺寸
3、区块之间的间距，可以参考栅格系统的槽宽（Gutter）
4、一些可以栅格化的小区域，暗合栅格往往能简化布局上的考虑