Giáo trình Thiết kế đa phương tiện (Flash) - Phần 2

vent sound. Ở đây toàn bộ sound sẽ 
được load vào bộ nhớ trước và sau đó được chơi nếu như có lệnh start(); 
 CODE 
 on (release) { mySound = 
 new sound(); 
 mySound.loadSound("mysound.mp3",false); mySound.start(); 
 } 
 Flash sẽ ghi nhớ là lệnh start đã được đưa ra thậm chí khi sound mới chỉ bắt đầu 
download. Khi sound được load xong thì nó sẽ được play ngay lập tức 
 Trang 157 
 CODE 
 on (release) { mySound = 
 new sound(); 
 mySound.loadSound("mysound.mp3",true); 
 } 
 Cách thứ 2 là ta sử dụng true ở param thứ 2. Giá trị true này sẽ bảo với flash đó 
là 1 stream sound. Ngay khi sound được load phần nào thì sẽ bắt đầu chơi ngay trong 
lúc phần còn lại vẫn tiếp tục được load. Nếu người dùng có kết nối mạng tốt thì sẽ 
nghe được toàn bộ sound khi load. 
 Ghi chú là bạn ko cần phải sử dụng lệnh start với 1 streaming sound. Tuy nhiên 
bạn cần phải chú ý khi sử lí file MP3. Ví dụ nếu bạn sử dụng file nhạc mp3 với 128 
Kbps hay 160 Kbps thường dùng để nghe thì nó sẽ là 1 file quá lớn để có thể stream 
vói internet, đặc biệt nếu người sư dụng dùng modem. 32 Kpsb hay ít hơn sẽ thích hợp 
hơn khi ta sử dụng stream. 
Một số câu hỏi và trả lời sau có thể giúp bạn nắm rõ bài hơn: 
 Câu 1: ta có thể load 1 mc, vậy có thể unload chúng ko?? 
 -Trả lời: có, bằng lệnh unloadMovie 
 Câu 2: bình thường thì flash cần bao lâu để load trước khi nó start?? 
 -Trả lời: ngay frame đầu tiên. Bởi vậy bạn cần sử dụng lệnh stop nếu như muốn 
nó đợi trước khi tiếp tục. 
 Câu 3: 2 cách để xác định khi 1 movie được load hoàn toàn?? 
 -Trả lời: cách 1 dùng getBytesLoaded == getBytesTotal function cách 2 dùng 
_frameLoaded property và _totalFrames property. 
 Ngoài ra bạn có thể xem thêm các bài viết sau: 
 Cách tạo 1 preloader đơn giản 
 Trang 158 
 Cách tổng quát để tạo 1 loader đẹp: 
 Ngoài ra về loadMovie, loadSound cũng có rất nhiều bài. Bạn chịu khó search ha 
 Vẽ với AS 
 Đây là h cuối cùng, cũng là giờ rất thú vị, hy vọng các bạn cảm thấy dzui dzẻ khi 
vẽ bằng AS . CBT ko có kinh nghiệm dịch bài, với lại nhìn vào mấy bài text dày đặc 
chữ là tối mắt tối mũi nên nhiều chỗ dịch lung tung, theo ý thích bởi vậy có chỗ nào 
diễn đạt tối nghĩa, ko đúng thì các bạn cứ thẳng thắn góp ý, đừng thương tiếc . 
 Drawing lines 
 -Để vẽ 1 đường thẳng, việc đầu tiên cần làm là định nghĩa các giá trị của 
lineStyle, nó dày như thế nào nè, rùi có màu gì và độ alpha. 
 CODE 
 lineStyle(thickness, color, alpha); 
 Màu (color): giá trị được đưa ra dưới dạng số thập lục phân hexa, ví dụ: 
0x000000 là màu đen, 0xffffff: trắng , chúng ta có thể nhìn vào bảng color mixer để 
biết thêm 
 Độ trong suốt(alpha): min = 0; max=100; 
 Độ dày (thickness): độ dày nhỏ nhất là 0, còn lớn nhất là bao nhiu thì cbt ko biết 
. Với độ dày 1 cái line có độ dày là 1 pixel, còn nếu ta cho giá trị là 0 (hairline) thì nó 
vẫn có độ dày là 1 pixel . Tuy nhiên chúng khác nhau ở chỗ: với hairline nếu như 
chúng ta thay đổi scale của nó thì độ dày của nó vẫn ko thay đổi. Các bạn thử đoạn 
code sau, và thay đổi giá trị độ dày nhé: 
 CODE 
 lineStyle(0,0x000000,100); 
 moveTo(20,50); lineTo(200,200); 
 _xscale=300; 
 _yscale=300; 
 Nhìn đoạn code trên ta thấy xuất hiện lệnh: 
 Trang 159 
 CODE 
 moveTo(20,50) 
 Để vẽ 1 đường thẳng ta cần xác định 2 điểm: đầu và cuối. Mỗi điểm lại được xác 
đinh với 2 giá trị x và y 
 ---> moveTo là điểm đầu, điểm đặt bút. Như vậy ở câu trên ta đặt bút tại x=20; 
y=50. 
 ----> lineTo là điểm tiếp đến. Ta có x= 200; y=200. Như vậy chúng ta đã vẽ được 
đường thẳng nối từ điểm (20,50) đến (200,200). 
Chú ý: 
 1. nếu như các bạn ko nêu điểm moveTo thì nó tự mặc định là điểm (0,0) 2. nếu 
như các bạn vẽ thêm các line tiếp theo với lineTo thì điểm đặt bút được mặc định là 
điểm cuối cùng của line trước. 
 Ví dụ để vẽ 500 đường lung tung trên màn hình ta có đoạn code đơn giản sau: 
 CODE 
 // set line style 
 lineStyle(2,0x000000,100); 
 // draw 500 lines for(var 
 i=0;i<500;i++) { 
 // pick random start point x1 = 
 Math.random()*550; y1 = 
 Math.random()*400; 
 // pick random end point x2 = 
 Math.random()*550; y2 = 
 Math.random()*400; 
 // move to start point 
 moveTo(x1,y1); 
 // draw to end point lineTo(x2,y2); 
 } 
 Trang 160 
 Bây giờ các bạn thử play trò này xem sao, thử thay đổi độ alpha, color or 
thickness của nó 
 Mọi người thử copy and paste đoạn code sau xem hiện ra gì nào : 
 CODE 
 // set line style 
 lineStyle(2,0x999999,100); 
 for(var x=-400;x<550;x+=10) { 
 // draw diagonal strip from left to right 
 moveTo(x,0); lineTo(x+400,400); 
 // draw opposite strip moveTo(550-x,0); 
 lineTo(550-x-400,400); 
 } 
Drawing Curves 
 Tương tự khi bạn đã biết cách vẽ line rồi thì vẽ curveTo ko có gì là khó. Nó chỉ 
có thêm 1 chút giá trị thôi. Ta có đoạn code: 
 CODE 
 lineStyle(3,0x000000,100); moveTo(150,200); 
 curveTo(275,275,400,200); 
 Như đã biết moveTo là điểm bắt đầu, anker1 ha. 
 curveTo(control_x, control_y, anker2_x, anker2_y); Control_point là tiếp tuyến 
của 2 điểm anker với đường cong anker2 là điểm cuối cùng của curve. 
 Các bạn có thể đọc thêm 1 số bài viết trong diễn đàn về đường cong bezier để 
hiểu rõ thêm . 
 Chúng ta play tiếp với đoạn code sau: 
 CODE 
 Trang 161 
 lineStyle( 1, 0x0000FF, 100 ); moveTo(200,200); 
 curveTo(250,200,300,200); 
 curveTo(300,250,300,300); 
 curveTo(250,300,200,300); 
 curveTo(200,250,200,200); 
 Olala, tại sao chúng ko hiện ra các curve mà lại là 1 hình vuông. Nguyên nhân là 
do 
 chúng ta cho các giá trị control point ở giữa 2 điểm kia Hãy thử thay đổi 1 chút 
xem chúng ta có gì nào: 
 CODE 
 var bend = 42; moveTo(200,200); 
 curveTo(250,200-bend,300,200); 
 curveTo(300+bend,250,300,300); 
 curveTo(250,300+bend,200,300); 
 curveTo(200-bend,250,200,200); 
 sử dụng biến bend để thay đổi control point ta được 1 hình trong hơi méo rùi . Về 
phần này plz đọc thêm các topic trong box AS 
 Drawing Filled Areas 
 Trước hết để có thể tô màu cho 1 vùng ta cần phải vẽ 1 hình khép kín ha. Sau đó 
dùng lệnh beginFill để vẽ: 
 CODE 
 beginFill(color of fill, alpha of fill) 
 Ví dụ đoạn code sau: 
 CODE 
 lineStyle( 3, 0x000000, 100 ); 
 beginFill( 0xFF0000 ); 
 moveTo(175,100); lineTo(375,100); 
 lineTo(375,300); lineTo(175,300); 
 lineTo(175,100); 
 endFill(); 
 Trang 162 
 Nếu như 1 vùng được cắt bởi line lần thứ 2 thì ở chỗ đó nó sẽ ko có màu nữa. 
Dựa vào đó ta có thể tạo nên 1 số hình thú vị . Bạn thử copy đoạn code sau xem nó 
hiện ra cái gì nào và chỗ nào được tô màu, chỗ nào ko : 
 CODE 
 lineStyle(3,0x000000,100 ); 
 beginFill(0xFF0000); 
 moveTo(250,50); 
 lineTo(308,230); 
 lineTo(155,120); 
 lineTo(345,120); 
 lineTo(192,230); 
 lineTo(250,50); endFill(); 
 Có cách khác tốt hơn để vẽ 1 star, nó cho phép chúng ta qui định các giá trị ban 
đầu. 
 Bạn thử xem file fla 24betterstar.fla xem sao 
 Pause 
Vẽ với chuột 
 Phần tiếp theo trong sách này có đoạn code để user vẽ với chuột, thành thật mà 
nói, nếu bạn đã đọc đoạn code của DS post bên phần Flash hack thì bạn sẽ thấy nó 
khác nhau 1 trời 1 vực như thế nào 
 Nếu bạn đã đọc đoạn code của 
DS thì đừng nên đọc tiếp đoạn code hướng dẫn trong cuốn sách này làm gì. CBt thấy 
là ko cần thiết phải dịch chỗ này nhưng trót rùi nên tôn trọng quyển sách, cbt dịch cho 
đầy đủ vậy 
 1.Tạo 1 shape đơn giản, convert to mc. 
 2.Copy đoạn code sau vào mc (cbt đã phân tích kèm) 
 CODE 
 onClipEvent (load) { 
 // cho các giá trị cho kiểu line 
 _root.lineStyle(0, 0x000000, 100); 
 } 
 Trang 163 
 //khi chuột được dzí xuống thì bắt đầu vẽ onClipEvent(mouseDown) 
 { 
 // ok to draw 
 draw = true; 
 // xác định điểm start để vẽ startX 
 = _root._xmouse; startY = 
 _root._ymouse; 
 _root.moveTo(startX,startY); 
 } 
 //khi thả chuột ra thì ko vẽ nữa 
 onClipEvent(mouseUp) { // don't 
 draw anymore draw = false; 
 } 
//bắt đầu onClipEvent 
 (enterFrame) { if (draw) { 
 //lấy vị trí hiện tại của chuột 
 newX = _root._xmouse; newY = 
 _root._ymouse; 
 //nếu như vị trí khác với vị trí ban đầu 
 if ((newX != startX) or (newY != startY)) { 
 //vẽ 1 line tới vị trí mới 
 _root.lineTo(newX,newY); 
 // reset location for new time 
 startX = newX; startY = newY; 
 } 
 } 
 } 
 3. Tạo 1 movie clip riêng cho các hình đã vẽ 
 Những gì chúng ta đã làm ở trên chỉ là vẽ 1 cách đơn giản trên stage, nó có bất 
lợi là có thể bị bất kì mc nào che khuất. ko thể di chuyển. 
 Trang 164 
 Khi chúng ta đặt những cái này vào trong 1 mc thì thuận tiện hơn rất nhiều. ta có 
thể thay đổi _x, _y, rotation, alpha, scale .... 
 Để tạo 1 new mc ta dùng lệnh : 
 CODE 
 my_mc.createEmptyMovieClip("tên của new mc", level của nó) 
 Ví dụ : 
 CODE 
 this.createEmptyMovieClip("myMovieClip",1); 
 myMoveClip.lineStyle(0,0x000000,100); myMoveClip.moveTo(100,100); 
 myMovieClip.lineTo(200,200); 
 Như vậy bạn đã có 1 mc mới tên là myMovieClip, level 1, có chứa các hình vẽ 
trên. 
 Nếu bạn muốn viết nhanh hơn thì có thể viết lại như sau: 
 CODE 
 this.createEmptyMovieClip("myMovieClip",1); 
 with(mymovieClip){ lineStyle(0,0x000000,100); 
 moveTo(100,100); lineTo(200,200); 
 } 
 Lệnh createEmptyMovieClip này còn có rất nhiều tác dụng khác như ta có thể 
attach thêm movie vào đó hay là sao chép (duplicateMovieClip) 
 Rùi bi giờ bạn hãy thử tạo 1 mc mới đi nào 
 Có 1 bài hướng dẫn vẽ bông tuyết khá đẹp trong cuốn sách, tuy nhiên code được 
chia nhỏ thành các function khá dài dòng và mất công. trong khi trong diễn đàn của 
chúng ta có nhiều đoạn code về làm tuyết hay hơn rất nhiều: bài thế trời làm tuyết của 
DS trong box hướng dẫn thực hành. Đặc bịêt hợp với chủ đề này là bài dùng 100% 
bằng AS c 
 Trang 165 
 dịch vủa Raider (tìm trong mề đoạn code trong sách này nục lục), trong ữa. đó 
có đoạn code rất hay. Bởi vậy cbt sẽ ko Để biết thêm chi tiết xin xem file fla 
24snowflakes.fla 
Textfield 
 Đây là phần cuối cùng, chúng ta sẽ học cách tạo 1 text field và sau đó là làm 1 
effect flying words. 
 Để Tạo Text tạo 1 text chúng ta cần tạo 1 ô text (text field) với lệnh : 
 CODE 
 createTextField("text_name", level , vị trí _x, vi trí _y, chiều rộng,chiều dài); 
 Sau đó là text hiện lên trong text field đó: 
 CODE 
 text_name.text = "Nội dung text"; 
 Ví dụ đoạn code sau, mình phân tích trong đó luon cho nhanh: 
 CODE 
 //tạo 1 ô chữ tên my..., level 0, _x=0, _y=170, width=550, height=60 
 createTextField("myTextField",0,0,170,550,60); 
 //text 
 myTextField.text = "Welcome to VNFX"; 
 myTextField.embedFonts = true; 
 //mặc định các tính chất của text 
 myTextFormat = new TextFormat(); 
//loại chữ, cỡ, màu, vị trí 
 myTextFormat.font = "Arial"; 
 myTextFormat.size = 48; 
 myTextFormat.color = 0x330000; 
 myTextFormat.align = "center"; 
 Trang 166 
 //liên kết những tính chất này với ô text của chúng ta 
 myTextField.setTextFormat(myTextFormat); 
 Chú ý khi sử dụng embedFont ta cần phải chọn 1 font trong thư viện click vào 
góc phải trên cùng của thư viện, chọn font mà bạn muốn, sau đó click chuột phải, 
linkage, export, IDname 
 Nếu bạn muốn tạo 1 Input text thì cần phải cho type của textField là input, sau đó 
có thể set thêm các variable để máy có thể nhận info từ user 
 Còn rất nhiều các tính chất trong textField và textFormat class, các bạn nên đọc 
thêm help để trang trí cho textField của mình 
 Lý thuyết chỉ có vậy, nào bây giờ chúng ta sẽ làm effect flying words 
 CBT không dám nhận xét nhiều về đoạn code và cách làm trong cuốn sách này, 
tuy nhiên nó được chia nhỏ thành các function gây rắc rối, dài dòng cho người đọc, lại 
còn phải tạo thêm mc trên stage, có chỗ hạn chế nữa... 
 CODE 
 function createText(n,text) { // create a new movie clip 
 this.createEmptyMovieClip("text"+n,n); mc = this["text"+n]; 
 // set the text format myFormat = new TextFormat(); myFormat.font = "Arial"; 
 myFormat.color = 0x000000; myFormat.size = 24; 
 myFormat.align = "center"; 
 // create a new text field 
 mc.createTextField("myTextField",1,-100,-20,200,40); mc.myTextField.text = 
 text.toUpperCase(); mc.myTextField.embedFonts = true; 
 mc.myTextField.setTextFormat(myFormat); 
 // return reference to this movie clip return(mc); 
 } 
 function createAllText(textList) { // loop through array of text 
 for(var i=0;i<textList.length;i++) { 
 // create movie clip with this text mc = createText(i,textList[i]); 
 Trang 167 
 // set random location mc._x = Math.random()*450+50; mc._y = 
 Math.random()*350+25; 
 // set scale to nothing 
 mc._xscale = 0; mc._yscale = 0; 
 // set scale variable to negative amount mc.scale = 0-i*100; } 
 } 
 function init() { // create array of text 
 var words = "Love,Peace,Destiny,Llamas,Fate,History,Cheese,Rainbows,Tiny 
 Rocks"; 
 var textList = words.split(","); 
 // create all text movie clips createAllText(textList); 
 // remember how many there are numWords = textList.length; 
 } 
 function moveText() { // loop through words 
 for(var i=0;i<numWords;i++) { 
 // increase the scale of this movie clip mc = this["text"+i]; 
 mc.scale += 10; 
 // hide movie clip when scale is too big if (mc.scale > 300) { 
 mc._visible = false; 
 // set scale of movie clip to scale when it is a positive number 
 } else if (mc.scale > 0) { mc._xscale = mc.scale; mc._yscale = 
 mc.scale; 
 } 
 } } init(); stop(); 
 Sau đó bạn tạo 1 mc trên stage và nhét đoạn code sau vào: 
 CODE 
 onClipEvent(enterFrame) { 
 _parent.moveText(); } 
 Cuối cùng vào thư viện, trong menu của thư viện ta chọn font ruì linkage, rùi 
export với tên Arial. 
 Trang 168 
 effect này ko có gì khác là ta tạo 1 array chứa các ô text, sau đó các text hiện ra 
từ từ và dần dần phóng to lên, đến 1 kích thước nào đó thì biến mất. 
 Để các text hiện ra từ từ ta chỉ cần mặc định scale ban đầu của text là ko, sau đó 
dùng thêm 1 var nữa. Dần dần phóng to lên thì ta thay đổi scale thôi. 
 Thấy đoạn code trên dài dòng quá nên cbt viết lại cho nó đơn giản bớt như sau 
 CODE 
 function a(){ 
 wordArr=new Array("vnfx","flash","actionscript"); 
 //ta tạo 3 mc chứa 3 text field for(var 
 n=0;n<wordArr.length;n++){ 
 _root.createEmptyMovieClip("text"+n,n) 
 mc=_root["text"+n]; myFormat=new 
 TextFormat(); myFormat.font="Arial"; 
 myFormat.color = 0x000000; 
 myFormat.size = 24; myFormat.align = 
 "center"; 
mc.createTextField("myTextField",1,-100,-20,200,40); 
 mc.myTextField.text = wordArr[n]; 
 mc.myTextField.embedFonts = true; 
 mc.myTextField.setTextFormat(myFormat); 
 //mặc định các giá trị ban đầu 
 mc._x=Math.random()*450+50; 
 mc._y=Math.random()*350+25; mc._xscale=mc._yscale=0; 
 //biến để tạo sự xuất hiên từ từ 
 mc.scale=0-n*100; 
 mc.onEnterFrame=function(){ 
 this.scale+=10; if (this.scale > 
 300) { removeMovieClip(this); } 
 else if (this.scale > 0) { 
 this._xscale=this._yscale = this.scale; 
 } 
 } 
 } } a(); 
 //cho lặp 
 lại sau 5 s 
 setInterval(a, 5000); 
 Trang 169