AloFlash ! Cộng đồng flash Việt Nam



You are here: Tutorials  AS 1.0 - 2.0 Làm đồng hồ trong flash

Làm đồng hồ trong flash

Email In PDF.
Xem kết quả: / 58
Bình thườngTuyệt vời 

Hic hôm nay mới rảnh để viết tut này mọi người thông cảm nhé. Mình sẽ dành thời gian hướng dẫn chi tiết để ai cũng có thể tự tạo cho mình một chiệc đồng hồ như ý muốn, hay tặng người iu để chiếm lấy trái tim người ấy.... :P

Nguyên vật liệu cho bài flash này là 1 tấm ảnh nền có hình cái đồng hồ nhưng chưa có kim nhé. Bạn có thể dùng Photoshop làm cho nó long lanh lên. Mình thì chọn cái này vi sắp đến giáng sinh rồi :D

Sau khi bạn đã có bức hình nền như trên rồi thì chúng ta tiến hành làm kim cho nó quay như đồng hồ nhé.

Bước 1:

Tạo 1 file flash mới Ctrl + N, kích thước bằng kích thước cái ảnh nền của bạn nhé. Mình chọn kích thước 450x320 bằng kích thước cái ảnh nền ở trên.

Bước 2:

Import bức hình nền vào flash bằng cách vào File > Import > Import to Stage... Sau khi import xong bạn sử dụng công cụ Selection Tool (V) click vào bức ảnh nền là làm như trong hình dưới để căn chỉnh bức ảnh vừa khít vào khung hiển thị của Flash.

Sau khi làm xong bạn khóa layer này lại nhé.

Bước 3:

Tạo 1 layer mới, trên layer này chúng ta sẽ tiến hành vẽ kim cho đồng hồ (ở bước này bạn có thể tạo kim đồng hồ bằng photoshop nếu làm trong photoshop bạn nhớ xuất ra file PNG để nền trong suốt nhé) mình sẽ hướng dẫn các bạn làm kim trong flash cho đơn giản.

Các bạn nhấn Ctrl + để phóng to flash lên nhé cho thuận tiện việc vẽ kim đồng hồ. Sử dụng công cụ vẽ đường thẳng Line Tool (N) Chọn màu Stroke là màu mà bạn muốn kim hiển thị nhé. Giữ Shift vẽ 1 đường thẳng như hình:

Chúng ta tiếp tục nhấn Ctrl + phóng ta lên chút nữa rồi sử cụng công cụ Oval Tool (O), vẽ 1 hình bầu dục sao cho phần đáy kim phình ra 1 chút.

Bước 4:

Sau khi bạn đã cảm thấy OK cái kim này thì nhấn Ctrl + A để chọn tất cả nó và nhấn F8 để convert nó thành dạng Movie Clip

Bước 5:

Nhánh đúp 2 lần vào Movie Clip để vào bên trong. Ở đây chúng ta sẽ tạo 3 kim: Giờ, Phút, Giây cho đầy đủ :)

Bằng cách đơn giản, các bạn nhấn Ctrl + A chọn toàn bọ cái kim đỏ ở trên, nhấn Ctrl + C hoặc chuột phải chọn Copy, click chuột ra ngoài nhấn Ctrl + V hoặc click chuột phải chọn Pase. làm vậy 2 lần ta sẽ được 3 kim như hình.

Bạn có nhận thấy 3 kim này giống hệt nhau không, giờ ta sẽ làm chúng khác nhau bằng cách giúp chúng có độ dài ngắn và màu sắc khác nhau.

Chọn 1 kim bất kỳ, bằng cách sử dụng công cụ Selection Tool (V), Click chuột vào kim đó hoặc click chuột vào điểm bên ngoài kéo 1 khung bao quanh kim đó rồi nhả ra. Sau khi đã chọn kim bạn muốn chọn màu Stroke và màu Fill là màu vàng ta sẽ được như hình:

Sử dụng công cụ Free Transform Tool (Q) kéo nó ngắn lại vừa phải (bạn tưởng tượng đây là kim phút nhé).

Như vậy là ta đã có kim phút, ta làm tương tự cho kim giờ như trên và sẽ được kết quả 3 kim như sau:

Chúng ta đã xong công đoạn thiết kế 3 kim đồng hồ (Giờ phút và giây), các bạn có thể thiết kế 3 kim này bên Illustrator hoặc Photoshop cho đẹp hơn nếu bạn muốn nhé.

Bước 6:

Bạn sử dụng công cụ Selection Tool (V), kéo chọn kim giây màu đỏ như hình trên và nhấn F8 để convert nó thành dạng Movie Clip và đặt tên cho nó là ndlsc như hình:

Giờ là bước quan trọng để tạo tâm quay cho kim đồng hồ, các bạn lưu ý bước này nếu làm không đúng kim đồng hồ sẽ quay không chuẩn.

Click đúp vào Movie clip bạn vừa tạo (kim giây) để vào trong, sử dụng công cụ Free Transform Tool (Q) bạn sẽ nhận thấy như hình dưới, tâm xoay sẽ là cái tâm mình khoanh tròn đỏ.

Giò thì bạn sẽ kéo cái kim lên sao cho điểm bạn muốn làm tâm quay sẽ vừa khít vào cái tâm mình đã đánh dấu ở hình trên. Mình chọn chỗ giữa phần phình to làm tâm nên mình đã kéo kim lên như hình:

OK như vậy là tạm ổn. Chúng ta quay lại Scene trước nhỉ, bằng cách bạn nhấn vào mũi tên mình khoanh đỏ trong hình dưới hoặc click đúp vào ngoài vùng chứa các đối tượng.

Ra ngoài ta sẽ thấy kết quả là cái kim giây đã ở trên và cái tâm hoa đã nằm giữa ở phần phình to như hình:

Tương tự như trên kéo chọn kim phút màu vàng và nhấn F8 để Convert nó thành dạng Movie Clip và đặt tên cho nó là: ndlmn

Bạn cũng tạo tâm tương tự như kim đỏ ở trên.

Làm như vậy với kim xanh là kim giờ khi Convert thành Movie Clip bạn đặt tên cho kim xanh (kim giờ) là: ndlhr

Sau khi làm xong 3 kim như trên ta sẽ được kết quả như hình:

Bạn thấy chúng đã có tâm ở những vị trí thíc hợp chưa, như hình trên 3 cái tâm dấu hoa thập đã nằm ở giữa 3 chỗ phình to của 3 kim. :)

Bước 7:

Giờ chúng ta sẽ xắp xếp vị trí các Movie Clip của 3 kim cho hợp lý. Như hình dưới mình đã chồng các kim lên nhau sao cho cái tâm dấu hoa thập chèn lên nhau và vào chính giữa hình đồng hồ nền bên dưới:

Khi đã OK giờ bạn nhấn Ctrl + A để chọn tất cả các kim, nhấn chuột phải và chọn Distribule to Layers

Kết quả là nó sẽ nhân ra thành 4 layer như hình dưới:

Bước 8:

Click vào frame đầu tiên trên layer 1 nhấn phím F9 mở bảng Action Script chèn vào đoạn code sau:

 

abc = new Date();
a = abc.getHours();
b = abc.getMinutes();
c = abc.getSeconds();
d = abc.getMilliseconds();
e = a + (b/60) + (c/3600) + (d/3600000);
f = b + (c/60) + (d/60000);
g = c + (d/1000);
setProperty(ndlhr, _rotation, e*30);
setProperty(ndlmn, _rotation, f*6);
setProperty(ndlsc, _rotation, g*6);

Trong đó: Tùy theo từng múi giờ của từng nước mà bạn chọn cho phù hợp, các bạn có thể sửa ở phần e*30f*6 và g*6 cho phù hợp, cái này các bạn tự tính toán nhé. Trong code trên là múi giờ Việt Nam nhé.

Bước 9:

Nhấn F9 để tắt bảng Action Script đi, click chuột vào frame thứ 2 trên layer 1 nhấn F6 để chèn thêm cho nó 1 keyframe, Nhấn phím F9 mở bảng Action Script chèn vào đoạn code:

gotoAndPlay(1);

OK :D, vậy là ta đã hoàn thành bài tập này rồi, Bạn thử nhấn Ctrl + Enter để xem thành quả của mình nào.

Chúc các bạn thành công.

aloflash.com

Download

Bình luận (17)Add Comment
0
...
được viết bởi lose, Tháng mười một 08, 2010
co thay gi dau pa
0
...
được viết bởi thietkeweb4vn, Tháng mười một 09, 2010
hic , co thay gi dau
0
...
được viết bởi Bố Già Lừa Đảo, Tháng một 21, 2011
Bố Già Lừa Đảo smilies/angry.gifsmilies/angry.gifsmilies/angry.gifsmilies/angry.gifsmilies/angry.gifsmilies/angry.gifsmilies/angry.gifsmilies/angry.gifsmilies/angry.gif
0
...
được viết bởi nhanduyen, Tháng hai 11, 2011
dep that. moi hoc flash, dang can cai nay
0
...
được viết bởi Thanh, Tháng ba 03, 2011
thanks! anh nhieu nha! qua la 1 trang hoc flash tuyet voi, rat mong anh chia se nhieu hon nua!!
0
...
được viết bởi Hung, Tháng chín 15, 2011
cho em xin đoạn code ngôi sao lấp lánh ở backgound với anh, kiếm mãi chả ra smilies/shocked.gif
0
...
được viết bởi vo dnh, Tháng chín 30, 2011
ban lam bang phan mem nao the??
0
...
được viết bởi ccfvx, Tháng mười 17, 2011
Cai quan trong nhat la phan mem xay dung do hong flash thi deo noi. cho 0 bai viet nay
0
...
được viết bởi khanh, Tháng mười một 01, 2011
flash 8 9 deu dc
0
...
được viết bởi thanh ha, Tháng một 09, 2012
mjh sap thi juj nen can may cai nay ne hjhjsmilies/grin.gifsmilies/grin.gif
0
...
được viết bởi thanh ha, Tháng một 09, 2012
ban nao co code tuyet roi thi cho mih nua nhe
0
...
được viết bởi ..., Tháng tám 14, 2012
cho em xin code làm tuyết rơi đi anh
0
...
được viết bởi ..., Tháng chín 23, 2012
lam flash cho dien thoai duoc khong ha ban
0
...
được viết bởi nhimxu, Tháng mười một 27, 2012
m làm đc rùi mừ chỉnh nhầm tầm hay sao nó vọt lên trên smilies/sad.gif
smilies/cool.gif
0
...
được viết bởi nguyen giap, Tháng mười hai 12, 2012
bạn ơi sao kim giây lại nằm bên dưới kim phút nhỉ??? bạn giúp mình kiểm tra lại nhé.
0
...
được viết bởi hung, Tháng mười một 22, 2013
cái này là làm ở ActionScrip 2.0 còn lam bằng ActionScrip 3.0 dc k hả bạn
0
...
được viết bởi Toan, Tháng sáu 16, 2014
em chỉ muốn làm cái đồng hồ thôi nên lần đâu sài phần mêm này, bác cho em hỏi cái " frame" của layer là cái nào thế! bác cho em xin cái pic đi, em tìm mãi không thấy, chả biết cái nào T.T

Viết bình luận
nhỏ hơn | lớn hơn

busy