Flash AS3制作畫框隨圖片的大小而動態(tài)改變教程

這篇教程是向腳本之家介紹Flash AS3制作畫框隨圖片的大小而動態(tài)改變方法,這是一個為圖片加框的效果,畫框依據(jù)圖片的大小而動態(tài)改變。(單擊下面可以看到效果)
演示:
1、新建一個Flash文件,寬、高設置為550*420,背景黑色。
2、準備4張大小不同規(guī)格的圖片,最大的寬、高不要超過530*380。
3、導入圖片:在文件菜單選導入=>導入到庫。如圖1:
4、圖層1,改名為圖片。拖第一個圖片到舞臺將它轉換成影片剪輯。命名”Image 1 ″設定注冊點居中。如圖2:
5、重復第4步,拖入其它的3張圖片到舞臺,任意擺放。命名”Image 2 ″,”Image 3 ″,”Image 4 ″,庫面板如圖3:
6、給舞臺上的實例命名“image1”至“image4”。
7、隱藏圖層1,添加圖層2。圖4:
8、圖層2改名為邊框,用矩形工具,填充色禁止,筆觸白色,高度為4像素,畫一個長方形邊框。
9、將長方形轉換為影片剪輯,設置注冊點居中。舞臺實例命名為“imageBorder”。圖5:
10、添加圖層3,命名為as,輸入代碼:
import gs.*;
//Save the center coordinates of the stage
var centerX:uint = stage.stageWidth / 2;
var centerY:uint = stage.stageHeight / 2;
//Let’s add the images to an array
var imagesArray:Array = new Array(image1,image2,image3,image4);
//This variable will store the current image displayed
var currentImage:MovieClip = null;
//Make the border invisible at first
imageBorder.alpha = 0;
//Loop through the array elements
for (var i:uint = 0; i < imagesArray.length; i++) {
//We want all the images to be invisible at the beginning
imagesArray[i].alpha = 0;
//Save the index of the image to a variable called "imageIndex"
imagesArray[i].imageIndex = i;
}
//We listen when the user clicks the mouse on the stage
stage.addEventListener(MouseEvent.CLICK, stageClicked);
//This function is called when the user clicks the stage
function stageClicked(e:MouseEvent):void {
//Check that the current image is not null
if (currentImage != null) {
//Animate the current image away
TweenMax.to(currentImage, 1, {alpha:0});
//Check to see if we are at the end of the imagesArray
if (currentImage.imageIndex == imagesArray.length - 1) {
//Set the first image of the array to be our currentImage
currentImage = imagesArray[0];
} else {
//We are not at the end of the array, so get the next image from the array
currentImage = imagesArray[currentImage.imageIndex + 1];
}
} else {
//If the currentImage is null (= we just started the movie), we set the first image in the array
//to be our current image.
currentImage = imagesArray[0];
//Set the border’s alpha to 0.5
imageBorder.alpha = 0.5;
}
//Position the current image and the border to the center of the stage
currentImage.x = imageBorder.x = centerX;
currentImage.y = imageBorder.y = centerY;
//Animate the border’s width and height according to the current image’s dimensions.
//We also a nice glow effect to the image border
TweenMax.to(imageBorder, 0.5, {width: currentImage.width + 8, height: currentImage.height + 8,
glowFilter:{color:Math.random() * 0xffffff, alpha:1, blurX:20, blurY:20, strength:100, quality:1}});
//Animate the currentImage’s alpha
TweenMax.to(currentImage, 1, {alpha:1});
}
教程結束,以上就是Flash AS3制作畫框隨圖片的大小而動態(tài)改變教程,希望能對大家有所幫助,謝謝閱讀!
相關文章
flash如何做雨滴下落的動畫效果? Flash8做一個下雨效果的技巧
flash如何做雨滴下落的動畫效果?想要做一個逼真的雨滴落下的效果,該怎么做雨滴落下水花擴散的效果呢?下面我們就來看看Flash8做一個下雨效果的技巧2022-08-18flash理發(fā)店旋轉彩燈動畫效果怎么做? 理發(fā)店旋轉燈制作技巧
flash理發(fā)店旋轉彩燈動畫效果怎么做?經(jīng)常使用flash制作動畫效果,該怎么制作旋轉燈效果,下面我們就來看看理發(fā)店旋轉燈制作技巧,詳細請看下文介紹2022-07-23flash怎么把形狀變成文字? flash星星變文字動畫的實現(xiàn)方法
flash怎么把形狀變成文字?flash繪制的星星想要慢慢變成文字,該怎么將圖形變文字呢?下面我們就來看看flash星星變文字動畫的實現(xiàn)方法,詳細請看下文介紹2022-06-06flash怎么制作補間動畫? flash變形動畫的實現(xiàn)方法
flash怎么制作補間動畫?flash中想要制作形狀變化的動畫效果,該怎么制作補間動畫呢?下面我們就來就來看看flash變形動畫的實現(xiàn)方法2022-02-06FLASH怎么讓搖曳的荷花更逼著? flash制作風吹荷花動畫的技巧
FLASH怎么讓搖曳的荷花更逼?flash中想要制作風吹荷花的動畫熊愛國,該怎么制作這個效果呢?下面我們就來看看flash制作風吹荷花動畫的技巧2022-02-06flash怎么制作荷花在荷花池里搖擺的動畫? FLASH做擺動荷花的技巧
flash怎么制作荷花在荷花池里搖擺的動畫??flash中想要制作荷花搖擺的動畫,該怎么制作荷花搖曳的動畫呢?下面我們就來看看FLASH做擺動荷花的技巧2022-02-06flash怎么做徑向彩虹文字動畫? 文字添加彩虹動畫效果的技巧
flash怎么做徑向彩虹文字動畫?flash椎間盤買個輸入的文字,想要添加動畫效果,該怎么添加徑向彩虹文字效果呢?下面我們就來看看flash文字添加彩虹動畫效果的技巧,詳細請2021-11-09flash怎么做眨眼動畫效果? flash動漫人物眨眼動畫的做法
flash怎么做眨眼動畫效果?flash中想要制作一個動漫人物的眼睛眨眼動畫,該怎么制作呢?下面我們就來看看flash動漫人物眨眼動畫的做法2021-11-08flash怎么制作火焰文字效果? flash做火焰字體動畫的技巧
flash怎么制作火焰文字效果?flash中想要制作一個熊熊燃燒的活顏文字,該怎么制作這個文字效果呢?下面我們就來看看flash做火焰字體動畫的技巧2021-11-01flash怎么做文字動畫logo? 閃動的片頭動畫flash的實現(xiàn)方法
flash怎么做文字動畫logo?flash中想要制作一個文字logo的動畫,讓文字閃爍,該怎么制作這個效果呢?下面我們就來看看flash制作文字動畫的技巧2021-10-29