穿梭在传统空间中的新意

多媒体娱乐

主题观摩:上东阳光·林曦网站,这个房地产网站是国产Flash网站中不可多得的精品之作。网站以绿色为主色调,用曲线作渲染,演绎了一段精致的绿色柔情。

整个网站界面的设计并不复杂,难得的是在有限的平面构成中,将各个板块合理的分布,而且使用传统的网站布局,这样有助于观众的视觉浏览,界面元素也没有影响到内容的分布。

亮点1:网页布局清新

亮点2:具有新意的动态加载图标效果

本期临摹主题:http://www.upeast.com

47-g8-2.jpg
47-g8-1.jpg

菜单奥秘

网站的菜单使用了传统的Flash循环放大效果,鼠标指向时,会逐级放大,但设计人员为了不影响版面的布局,有意识的控制了菜单按钮的放大程度。点击上东区位按钮后,进入它的子页面。在这个子页面的右侧,有一个非常新颖的设计,就是动态加载外部图标,使图标平铺在版面中。今天我们就来学习这种动态加载图标,以及使图标平铺页面的效果制作。

47-g8-3.jpg

模仿实例

第一步:打开Flash8.0,导入background.jpg背景图片,新建一个图层,使用绘图工具绘制一个矩形,大小为50像素,放置在舞台的右上方。

第二步:选中这个矩形按F8键转换成影片剪辑,在属性面板中输入实例名称为load_mc。

第三步:在第1帧加入代码如下:

load_mc._visible=false

for( var i:Number=0;i<15;i++){

load_mc.duplicateMovieClip("load_mc"+i,this.getNextHighestDepth())

this["load_mc"+i]._x=(i%3)*60+load_mc._x

this["load_mc"+i]._y=int(i/3)*60+load_mc._y

this["load_mc"+i].loadMovie("icon/graphicsicon"+i+".jpg")

}

代码解读

Load_mc影片剪辑不显示;

创建一个for循环,变量i等于0,当i小于15时,i递增;

Load_mc影片剪辑开始复制,复制品的名称为load_mc+变量i,它的层深为现在层级里没有用到的第一个层深;

这些复制品的X坐标等于用i除以3的余数,乘以60,再加上load_mc的X坐标;

这些复制品的Y坐标等于用i来除以3取整以后乘以60,加上load_mc的Y坐标;

这些复制品将装载icon目录里的graphicsicon加上变量i再加上.jpg的图标文件。

第四步:我们在实际创作时,可以将icon目录里的图标名称更改为graphicsicon1~graphicsicon14这样的名称,然后按“Ctrl+Enter”键测试。

此实例的下载地址为http://flash.ym8.net/cpcw/upeast.rar