ĐĂNG NHẬP

Box tự thiết kế banner flash cho website

Chủ Nhật, tháng 11 06, 2011 |

Macromedia Flash - Làm hiệu ứng pháo hoa

Thứ Hai, tháng 1 10, 2011 |
Cập nhật lúc 11h43' ngày 05/12/2008

Bài tập này rất đơn giản, bạn sẽ được hướng dẫn cách làm hiệu ứng pháp hoa nổ bằng cách sử dụng mask. Không cần dùng đến mã Action Script. Để hình ảnh này sống động hơn, bạn có thể lồng thêm hiệu ứng âm thanh vào! Thông qua bài tập này, bạn sẽ biết cách sử dụng Color Mixer Panel (Shift + F9), cách convert layer sang dạng mask…
Bước 1

Tạo một file flash mới. Nhấn Ctrl + J (Document Properties) và thiết lập kích thước file tùy ý bạn. Chọn màu nền là #003399 và Frame rate là 20 fps, sau đó kích OK.
Bước 2 



Lựa chọn công cụ Brush Tool và tùy chọn màu như sau:
Sau đó, vẽ một shape có hình như sau:
Bước 3

Kích vào frame 25 và nhấn phím F6. Sau đó, di chuyển shape này dịch xuống một chút bằng các phím mũi tên hoặc dùng công cụ Selection Tool (V) để kéo.


Bước 4

Tạo một layer mới (layer 2) và kéo nó xuống dưới layer 1. Xem hình sau
Bước 5

Chọn layer 2 và chọn công cụ Oval Tool (O). Thiết lập màu Stroke (màu viền có biểu tượng là cái bút) là No color (hình chữ nhật có đường chéo màu đỏ), màu hình vẽ (Fill color) chọn bất kỳ màu nào bạn thích và vẽ một hình tròn có kích thước 30 x 30 px ở chính giữa shape đã vẽ ban đầu. Sau khi vẽ xong sẽ có kết quả như sau:
Bước 6

Trong khi vẫn đang chọn hình tròn, vào phần Color Mixer Panel (Shift + F9) và chọn tùy chọn theo những đánh dấu sau:
Sau khi chỉnh xong hình tròn sẽ có màu như sau
Bước 7

Kích vào frame 25 và nhấn phím F6. Sau đó, chọn công cụ Free Transform Tool (Q) và kéo rộng hình tròn trùm lên shape ban đầu. Xem hình dưới
Bước 8

Chọn layer 2 và vào phần Properties Panel (Ctrl + F3) ở phía dưới màn hình làm việc. Trong phần bên trái của panel, bạn sẽ thấy hộp thoại sổ xuống Tween, chọn Shape
Thực hiện tương tự đối với layer 1


Bước 9


Chọn layer 1 và chuyển nó sang dạng mask bằng cách kích chuột phải vào nó và chọn Mask.
Bước 10

Giờ thì bạn cần chèn thêm âm thanh vào. Có thể tải file flash gốc về và copy file âm thanh từ thư viện file đó Library (Ctrl + L) sang Library trên file của bạn. 


Tạo một layer mới lên trên layer 1 và đặt tên nó là sound. Chọn layer sound và kéo file âm thanh đã lưu từ Library vào vùng làm việc.


Hãy chạy thử file bạn đã tạo: Ctrl + Enter.
TH - HTTheo  quantrimang.com.vn

Tạo hiệu ứng kính lúp khi đưa chuột vào

Thứ Tư, tháng 12 29, 2010 |
Bước 1: Tạo file mới
Tạo file mới, chèn hình vào layer 1.
Copy hình -> Tạo layer mới -> Chọn Edit/
Bước 2: Thêm Movie Clip hình tròn làm kính lúp.
-          Tạo thêm layer 3 - > Vẽ hình tròn (Nhấn giữ phím Shift ).
-          Chọn hình tròn -> nhấn F8 - > chọn chuyển thành Movie Clip.
Bước 3: Thêm Code điều khiển MC.
-          Chọm MC hình tròn và đặt tên: mc
-          Tạo layer mới -> đặt tên code -> nhấn F9 để nhập code như sau:
-          Nhấn Ctrl + Enter để xem kết quả.
Bước 4: Tạo hiệu ứng kính lúp.
-          Chọn layer chứa mc hình tròn - > Click phải -> chọn Mask.
-          Nhấn F12 để xem kết quả.




Paste Place
 (Ctrl + Shift + V) - > Nhấn phím Q, phóng to hình trên layer 2 hơn một ít.

Hiệu ứng ánh sáng chạy trong text

Thứ Năm, tháng 12 16, 2010 |
Sử dụng layer mask tạo ánh sáng chay trong text.

B1. Tạo file mới và chọn kích thước file, chọn màu nền.

B2.  Thêm text "vươn cao việt" nam vào tài liệu.


B3. Vẽ hình tròn -> tô màu chuyển sắc từ trắng đến trong suốt.

B4. Chọn hình tròn + Text "vươn cao việt" -> Nhất F8 -> chọn Movie Clip -> Double Click vào MC vừa tạo để diễn hoạt.


Chọn Modify / Distribute to layer (Ctrl + Shift + D) để tách hình lên các layer (mỗi đối tượng 1 layer).

B5. Tạo diễn hoạt cho hình tròn như hình.
Layer có text vươn cao việt nam: chọn Frame 30 -> nhấn F5 (không diễn hoạt) .
Layer hình tròn: chọn Frame 20 -> nhấn F6 -> Diễn hình chạy sang phải.


B6. Tạo layer mask để che phần bên ngoài Text.
- Chọn text vươn cao việt nam -> Copy
 - Tạo layer mới trên layer hình tròn -> Edit / Paste in place (Ctrl + Shift +V) -> Dán text đúng vị trí copy.
- Click phải lên layer Chọn Layer mask.

Nhấn Ctrl + Enter để kiểm tra.

Action script basic

Thứ Ba, tháng 12 14, 2010 |
Đặc điểm của AS2

Là ngôn ngữ lập trình dạng Script chạy ở Client.

Phân biệt chữ hoa chữ thường.

Kết thúc câu lệnh bằng dấu chấm phẩy (;).

// Ghi chú 1 dòng

/*
Ghi chú nhiều dòng
*/

Cấu trúc câu lệnh giống với javascript.
Biến

Khai báo biến:



var i:Number = 0;
var str:String = “Lap trinh Action script CB”;

In kiểm tra giá trị của biến:

trace(“Giá trị của biến i: ” + i);
trace(str);

in giá trị của biến vào textbox:

// In giá trị biến trong Dynamic Text có Instance name: txt
txt.text = str;
// In giá trị biến có định dạng html trong Dynamic Text có Instance name: txt
txt.htmlText = str;
Ví dụ:
Hiển thị nội dung của biến str có định dạng html trong textbox txt.

Bước 1: Tạo Dynamic Text có Instance name: txt

Bước 2: Khai báo và gán giá trị cho text box txt: Tạo thêm layer mới đặt tên: Action à F9 nhập vào đoạn code sau:
Nhấn Ctrl Enter để xem kết quả, lúc này nếu text chỉ nằm trên 1 dòng thì bạn chọn text box à Multiline và Show border Around text

Phép toán:

Phép toán số học:





+, -, *, /, %

Phép toán so sánh

Phép toán Logic





&&: AND
||: OR
!: NOT (Phủ định)

Phát biểu if:



Dạng 1:
If(điều kiện)
{
// Các câu lệnh thực hiện khi điều kiện đúng
}
Dạng 2:
If(điều kiện)
{
// Các câu lệnh thực hiện khi điều kiện đúng
}
Else
{
// Các câu lệnh thực hiện khi điều kiện sai
}

Ví dụ:
Var a=5;
if(a%2==0)
{
trace(a + “Là số chẳn”);
}
else
{
trace(a + “Là số lẻ”);
}
Ví dụ 2:
var n=1;
if(n)
{
trace(n); // 1
}

Vòng lặp for:



for(var i=0; i<10; i++)
{
// Các câu lệnh lặp khi điều kiện đúng
}
Ví dụ:
In các số chẳn, số lẻ từ 1 đến n
var n=10;
for(var i=1; i<=n; i++)
{
if(i%2==0)
{
trace (i + "là số chẳn");
}
else
{
trace (i +"là số lẻ");
}
}

Vòng lặp while:



while(đk)
{
// Các câu lệnh lặp khi điều kiện đúng
}
Ví dụ:
var j=10;
while(j>0)
{
trace (j);
j--;
}

Vòng lặp do…while:



do{
// Các câu lệnh lặp khi điều kiện đúng
}while(đk);
Ví dụ:
var j=10;
do{
trace (j);
j--;
} while(j>0);

* Vòng lặp do… while cũng giống với vòng lặp while tuy nhiên vòng lặp này luôn thực hiện ít nhất là 1 lần rồi mới kiểm tra điều kiện.

Sử dụng css trong Flash

Thứ Ba, tháng 12 14, 2010 |
Thực hiện load file text vào Text box, dùng Action script kết hợp với css để định dạng nội dung trong text box.

Bước 1:
Chuẩn bị file html hoặc file text.

File text có định dạng *.txt

Nội dung file text


Nội dung file css1.css



Dùng dreamweaver để tạo file css.
 Một số thuộc tính CSS thông dụng

Ctrl + N -> chọn Action Script 2.0
Ctrl + J -> set thuộc tính cho file flash như hình

Vẽ khung Dynamic text để chứa nội dung file text.txt.

Chọn Text tool (T) -> Chọn Dynamic text trên thanh Properties è vẽ khung text.

Định dạng khung Text như hình.
Thêm scrollbar cho text box.

Chọn Text -> Scrollable.

Chọn Window -> Components è User Interface è kéo thả UIScrollbar vào text box để tạo scrollbar.


 Load text vào textbox bằng Action script.

Trên Timeline è Chọn new layer để tạo layer mới đặt tên là Action è chọn Frame 1 trên layer Action è nhấn F9 è nhập vào đoạn code.
 Nhấn Ctrl + Enter để kiểm tra kết quả.


Motion Preset

Thứ Tư, tháng 12 08, 2010 |
Flash CS4 với nhiều công cụ và hiệu ứng có sẵn giúp cho người thiết kế tiết kiệm thời gian cho việc thiết kế. Motion Preset là thư viện hiệu ứng có sẵn dành cho action script 3.0

Bước 1
Tạo file flash mới

Ctrl + N è chọn Action Script 3.0





Ctrl + J è set thuộc tính cho file flash như hình







Bước 2
Chèn hình hoa đào vào file

File / Import / Import to Libraries è chọn hình hoa đào è ok.

Nhấn Ctrl + L è mờ bảng Libraries è kéo hình hoa đào vừa nhập vào màn hình.

Chọn hình hao đào è nhấn Ctrl + B để chuyển hình thành đối tượng thường è dùng công cụ Selection tool è quét chọn các hình ảnh thừa è nhấn delete để xóa.







Bước 3
Diễn hoạt cho hình hoa đào bằng Motion presets

Chọn hình hao đào è nhấn ctrl + G để nhóm hình hoa đào.

Chọn Window / Motion Preset.

Chọn hiệu ứng như hình è nhấn Apply è nhấn Ctrl + Enter để xem kết quả.







Bước 4
Hiệu chỉnh Motion presets

Click phải è Convert to Frame by Frame Animation è chuyển về chuyển động dạng Frame by Frame.

Chọn frame 30 nhấn F6 è thêm keyFrame.

Click phai vào timeline è Classic Tween è tạo diễn hoạt mới cho hình.

Chọn Frame 30 è kéo hình lên góc trên bên phải è xoay để tạo hiệu ứng vừa chuyển vừa xoay hình.



  



Tại frame 60 è nhấn F6. Nhấn Ctrl + Enter è xem kết quả.



Bước 5
Hiệu ứng cho chữ Nhất nghệ

Thêm layer mới đặt tên Text.

Nhập vào chữ Nhất nghệ è tô màu.

Chọn một hiệu ứng trên bảng Motion Preset è nhấn Apply.


Motion Guides, Shape Tween

Thứ Tư, tháng 12 08, 2010 |
Motion Guides
Bước 1: 
Vẽ hình tròn trên layer hình tròn

Hình 17
Bước 2: 
Tạo chuyển động từ điềm này sang điểm khác áp dụng cách chuyển động thứ nhất (create motion tween)


Tại key frame đầu tiên của layer hinhtron vẻ hình tròn và click phải tạo Create Montion Tween.


Hình 18

Chọn Key frame 20 trên thanh thước rồi click phải chọn Insert Keyframe (hoặc F6).

Click trái chọn keyframe số 20, chọn công cụ hình mũi tên (Selection Tool (V)) rồi kéo hình tròn đến nơi mình muốn.


Enter kiểm tra xem thử.

Bước 2:
Sử dụng thuộc tính Add Motion Guide

Click phải chuột tại layer hinhtron chọn Add Motion Guide (hoặc click trái chọn layer hinhtron rồi chọn công cụ Add Motion Guide).




Hình 20

Chọn điểm đầu layer Guide:hinhtron, chọn công cụ cây viết chì (Peccil Tool (Y)) rồi vẽ một đường cong tùy ý.

Hình 21



Hình 22

Chọn công cụ selection tool, chọn layer hinhtron chọn điểm đầu (keyframe đầu) rồi kéo hình tròn sao cho tâm hình tròn nằm trên đầu sợi dây.


Hình 23

Chọn điểm cuối (hinhtron) rồi kéo hình tròn nằm trên điểm cuối sợi dây.

Hình 24

Kiểm tra: Enter xem thử.



**Chú ý: Khi chạy Ctrl+Enter lên sẽ không thấy sợi dây mà ta vẽ, vậy để thấy sợi dây thì ta phải làm thêm bước sau:

Tại dấu chấm đầu tiên của layer Guide:hinhtron ta click phải chuột chọn CopyFrame.



 .



Hình 25

Tạo mới layer đặt tên là duongday rồi click phải tại dấu chấm đầu tiên của layer duongday chọn Past Frame.






Hình 26





Hình 27

Kéo layer duongday xuong nằm dưới layer hinhtron.

Click phải layer duongday bỏ chọn thuộc tình Guide.







Hình 28

Kiểm tra: Ctrl+Enter xem kết quả.



* Bài tập vận dụng nâng cao:
Áp dụng kiểu chuyển động “từ điểm này sang điểm khác” và “Chuyển động theo đường cong cho trước” làm được kết quả như hình sau:



 .



Hình 29
Có thể xem phim hướng dẩn mà làm theo. (Mở file chuyendong.exe lên xem rồi làm theo)



Shape Tween

Bước 1: Tạo mới một file mới bằng cách vào File chọn New, chọn Flash document.
Bước 2: Tại keyframe số 1 ta chọn hình tròn rồi vẽ một hình tròn.







Hình 11
Bước 3: Chọn keyframe số 20 trên thanh thước ta click phải chuột chọn Insert Blank Keyframe







Hình 12
Bước 4: chọn công cụ PolyStart tool (Nếu ko thấy thì click và đè trái chuột tại Rectangle tool rồi chọn Polystart tool







Hình 13
Bước 5: trên thanh property chọn thuộc tính options, chọn kiểu ngôi sao, chọn số cánh của ngôi sao và độ dày của ngôi sao







Hình 14
Bước 6: Vẽ hình ngôi sao







Hình 15
Bước 7: Click trái chuột chọn khoản giữa trên thanh thước, xuống thanh property thấy thuộc tính Tween ta chọn Shape







Hình 16
Bước 8: Nhấn tổ hợp phím Ctrl+Enter xem kết quả.

Rank & Visitors

NGƯỜI THEO DÕI

Lên đầu trang
Vào giữa trang
Xuống cuối trang