1 FL 教程Flash 設計過渡卷動效果精美圖庫特效 周四 3月 03, 2011 7:18 pm
Admin
Admin
用Flash打造一個具有卷動過渡效果的精美圖庫展示動畫。效果不錯,希望大家喜歡。
先看效果:
點擊這里下載Fla源文件
設計方法:
首先新建立Flash文檔,然后修改文檔屬性:
我們設計的這個圖庫,大家通過演示可以看到單擊小圖,可以動態顯示大圖,所以我們事先要做一些工作。預備一些大小相同的圖片8張,并且分別設計
相應的縮略圖8張,大圖導入Flash中分別轉換為影片剪輯元件,小縮略圖導入Flash后轉變為影片剪輯元件,都放到庫里面,留著我們來使用。
這里我們設計一個main主影片剪輯,然后在里面設計一個背景:
然后再新建立一個層,把縮略圖都按順序擺放整潔,實例名分別是thumb0、thumb1、thumb2、thumb3、thumb4、thumb5、thumb6、thumb7:
當把大圖導入Flash時,按F8轉變為影片剪輯元件,標示符分別是image0、image1、image2、image3、image4、image5、image6、image7。設置如下:
然后再建立一個層,輸入下面代碼:
this.createEmptyMovieClip("images", 100);
this.attachMovie("mask", "mask", 101);
mask._x = images._x =-68;
mask._y = target = -150;
images._y = -1000;
images.setMask(mask);
speed = 5;
for (var i = 0; i<8; i ) {
var img = images.attachMovie("image" i, "image" i, i);
img._y = img._height*i;
var thumb = this["thumb" i];
thumb._alpha = 60;
thumb.pos = target (i*-img._height);
thumb.onPress = function() {
target = this.pos;
};
thumb.onRollOver = function() {
this._alpha = 100;
};
thumb.onRollOut = function() {
this._alpha = 60;
};
}
this.onEnterFrame = function() {
images._y = (target-images._y)/speed;
};
最后我又設計了一個loading。按測試吧!]
先看效果:
點擊這里下載Fla源文件
設計方法:
首先新建立Flash文檔,然后修改文檔屬性:
我們設計的這個圖庫,大家通過演示可以看到單擊小圖,可以動態顯示大圖,所以我們事先要做一些工作。預備一些大小相同的圖片8張,并且分別設計
相應的縮略圖8張,大圖導入Flash中分別轉換為影片剪輯元件,小縮略圖導入Flash后轉變為影片剪輯元件,都放到庫里面,留著我們來使用。
這里我們設計一個main主影片剪輯,然后在里面設計一個背景:
然后再新建立一個層,把縮略圖都按順序擺放整潔,實例名分別是thumb0、thumb1、thumb2、thumb3、thumb4、thumb5、thumb6、thumb7:
當把大圖導入Flash時,按F8轉變為影片剪輯元件,標示符分別是image0、image1、image2、image3、image4、image5、image6、image7。設置如下:
然后再建立一個層,輸入下面代碼:
this.createEmptyMovieClip("images", 100);
this.attachMovie("mask", "mask", 101);
mask._x = images._x =-68;
mask._y = target = -150;
images._y = -1000;
images.setMask(mask);
speed = 5;
for (var i = 0; i<8; i ) {
var img = images.attachMovie("image" i, "image" i, i);
img._y = img._height*i;
var thumb = this["thumb" i];
thumb._alpha = 60;
thumb.pos = target (i*-img._height);
thumb.onPress = function() {
target = this.pos;
};
thumb.onRollOver = function() {
this._alpha = 100;
};
thumb.onRollOut = function() {
this._alpha = 60;
};
}
this.onEnterFrame = function() {
images._y = (target-images._y)/speed;
};
最后我又設計了一個loading。按測試吧!]