Portal
Ngày khởi sự
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.
+ Phần mềm Adobe Flash bạn có thể tải bản portable ở đây
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:
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*30, f*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 , 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.
kieuxuandientn
+ Phần mềm Adobe Flash bạn có thể tải bản portable ở đây
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:
- Code:
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*30, f*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 , 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.
kieuxuandientn
