OBin's Blog: học flash

New

Hiện nay HTML5 đã trở nên phổ biến và được hỗ trợ ở mọi trình duyệt vì vậy việc thay thế định dạng quảng cáo Flash bằng HTML5 là cần thiết và trở thành xu hướng bắt buộc.
Về cơ bản HTML5 chạy nhẹ, hỗ trợ trên cả thiết bị mobile hay các hệ điều hành khác nhau kể cả iOS mà không cần bất kì trình player nào như Flash.

Hướng dẫn làm banner quảng cáo HTML5

Để làm banner quảng cáo HTML5 hay chuyển đổi các banner Flash thành HTML5 rất đơn giản, các bạn chỉ cần làm theo các bước sau đây:

1 Làm mới một banner HTML5:

Để làm banner HTML5 dễ dàng nhất bạn nên cài đặt và sử dụng phần mền Adobe Flash CC, sau khi cài đặt bạn mở ứng dụng lên chọn New -> HTML Canvas

- Làm banner bình thường như làm với banner Flash, lưu ý là hiện tại Flash CC chưa hỗ trợ một số hiệu ứng Flash cho HTML5 như Style: Tint, Advanced hay một số hiệu ứng Filter nên khi xuất ra file chạy sẽ không thấy được.

- Xuất file HTML5 bằng cách nhấn Enter hoặc vào Publich để setting chi tiết ( Bạn có thể đọc thêm bài viết Hướng dẫn cách convert swf sang HTML5 dễ dàng bằng Adobe Flash CC để biết thêm)

- Đặt code redirect link khi người dùng click banner:
Sau khi xuất ra file HTML5, bạn sẽ nhận được file .html và .js, bạn mở file HTML lên trên editor và thêm đoạn code sau vào cuối function handleComplete

stage.addEventListener('click', btnRediect);
function btnRediect(){
 location.href = "http://www.obinb.com";
}

Bạn chỉnh link redirect theo ý bạn nhé :) Sau đó lưu lại và kiểm tra kết quả trên trình duyệt.

Download file banner cơ bản trong bài viết này tại đây

Lưu ý: Khi gắn banner HTML5 bạn có thể gắn trực tiếp trong qua thẻ Canvas trong html hoặc sử dụng một iframe để load vào vị trí mình muốn.

2 Chuyển đổi một banner Flash có sẵn sang HTML5:
Rất đơn giản, bạn mở file gốc của banner Flash định dạng FLA rồi làm theo các bước trong bài viết Hướng dẫn cách convert swf sang HTML5 dễ dàng bằng Adobe Flash CC là được.
Đến bước gắn link bạn làm như ở trong bài viết này nhé.

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

Xem thêm:
- Tổng hợp những hiệu ứng ánh sáng flash để làm banner hoặc intro
- Một số hiệu ứng ánh sáng chói trong Flash để làm banner, intro...
- Hướng dẫn làm hiệu ứng tuyết rơi bằng Action Script 3 trong Flash
- Tạo bộ đếm giờ (Countdown Timer) bằng Action Script 2 trong Flash
- Tổng hợp những Tag (Thẻ) mới trong HTML5
- Cấu trúc chuẩn của một trang HTML5

Sau đây là hướng dẫn tạo bộ đếm giờ (Countdown Timer) bằng Action Script 2 trong Flash. Các bước thực hiện khá đơn giản như sau:

Bước 1: Tạo một layer chứa các đối tượng dynamic text của bộ bộ đếm, tạo 4 đối tượng là dynamic text trên layer đó gồm Ngày, Giờ, Phút và Giây, tương ứng với instance name time_txt1, time_txt2, time_txt3, time_txt4

Bước 2: Tạo một layer khác chứa Action Script xử lý timer như sau:

this.onEnterFrame = function()
{
 //lưu trữ dữ liệu ngày
 var today:Date = new Date();
 //lưu trữ dữ liệu năm, lấy năm hiện tại
 var currentYear = today.getFullYear();
 //lưu trữ dữ liệu giờ
 var currentTime = today.getTime();
 //tạo và lưu trữ dữ liệu thời gian được chọn
 var targetDate:Date = new Date(currentYear,7,27,15);
 var targetTime = targetDate.getTime();
 //Xác định thời gian hoàn thành, đơn vị là milliseconds
 var timeLeft = targetTime - currentTime;
 var sec = Math.floor(timeLeft/1000);
 var min = Math.floor(sec/60);
 var hours = Math.floor(min/60);
 var days = Math.floor(hours/24);
 //Lấy giá trị của biến còn lại. Chuyển "sec" (giây) thành chuỗi
 sec = String(sec % 60);
 //Với một chuỗi ta có thể kiểm tra được độ dài kí tự( length)
 if(sec.length < 2){
  sec = "0" + sec;
 }
 min = String(min % 60);
 if(min.length < 2){
  min = "0" + min;
 }
 hours = String(hours % 24);
 if(hours.length < 2){
  hours = "0" + hours;
 }
 days = String(days);
 
 if(timeLeft > 0 ){
  //Gán các giá trị cho từng chuỗi trên stage
  var counter_days:String = days;
  var counter_hours:String = hours;
  var counter_min:String = min;
  var counter_sec:String = sec;
  time_txt1.text = counter_days;
  time_txt2.text = counter_hours;
  time_txt3.text = counter_min;
  time_txt4.text = counter_sec;
 }else{
  trace("TIME'S UP");
        var newTime:String = "00:00:00:00";
        time_txt.text = newTime;
        delete (this.onEnterFrame);
 }
}

Tại đoạn code:

var targetDate:Date = new Date(currentYear,7,27,15);

- Có nghĩa vào thời gian là năm hiện tại, ngày 27, tháng 7, vào lúc 15 giờ sẻ hết thời gian đếm. Bạn chỉ cần thay thời gian mình muốn vào.

Lưu lại và chạy để xem kết quả nhé.

Download file FLA tại đây

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

Xem thêm:
- Hướng dẫn cách convert swf sang HTML5 dễ dàng bằng Adobe Flash CC
- Một số hiệu ứng ánh sáng chói trong Flash để làm banner, intro
- Tổng hợp những hiệu ứng ánh sáng flash để làm banner hoặc intro
- Chèn nhạc từ bên ngoài vào file flash bằng ActionScript 3
- Tạo bộ đếm giờ (Countdown Timer) bằng Action Script 2 trong Flash
- Cách gọi hàm Javascript từ trong file Flash bằng Action Script 3

Tất cả các phần mềm hiện nay hầu hết đều hỗ trợ phím tắt để bạn có thể thao tác nhanh hơn, Adobe Flash cũng vậy, nếu bạn chưa hoặc ít sử dụng phím tắt trong Flash thì cũng nên tham khảo qua những phím tắt thông dụng sau đây, nó sẻ giúp bạn làm việc nhanh hơn.

1. Phím tắt với phím Alt

Alt+F : File menu
Alt+E : Edit menu
Alt+V : View menu
Alt+I: Insert menu
Alt + M : Modify menu
Alt+T : Text menu
Alt+C : Command menu
ALt+W : Window menu
ALt+H : Help menu
Alt + F2 : Accessbility
Alt+ F3 : Movie Explorer
Alt+F4 : Close
Alt + F7 : Component Inspector

2. Phím tắt với phím Ctr

Ctrl+1 : 100%
Ctrl+2 : Show Frame
Ctrl+3 : Show All
Ctrl + 4 : 400%
Ctrl + 8 : 800%
Ctrl + + : Zoom out
Ctrl+ - : Zoom in
Ctrl+ ' : Show Grid
Ctrl+ / : Edit Snapping
Ctrl+ ; : Show Guides .
CtrL+A : Select all
Ctrl + B : Break apart
Ctrl+C : Copy
Ctrl+ D : Duplicate
Ctrl+E : Edit Symbol
Ctrl+ F : Find and replace .
Ctrl+G : Group
Ctrl+ H : Hide Edges
Ctrl+I : Info
Ctrl+J : Document Properties
Ctrl+K : Align
Ctrl+L : Show / Hide Library .
Ctrl+ N : New Document
Ctrl+O : Open From File
Ctrl+P : Print
CtrL+Q : Quit
Ctrl+R : Import to stage
Ctrl + S : Save a document
Ctrl+ T : Transform window
Ctrl+U : Preferences
Ctrl+V : Paste in center
Ctrl+W: Close a document
Ctrl+X : Cut
Ctrl+ Y : Redo
Ctrl+Z : Undo
Ctrl + F2 : Show / Hide Tool Box
Ctrl+ F3 : Show/ Hide Properties
Ctrl+ F4 :Đóng tài liệu đang làm

Ctrl+ F7 : Component windows
Ctrl+F8 : New Symbol
Ctrl+F9 : Color Swatches
Ctrl+ F10 : History window
Ctrl+ F11 : Strings
Ctrl+F12 :Publish HTML
Ctrl+ Down : Sent backward
Ctrl+Enter : Test Movie
Ctrl+ Up : Bring forward
Ctrl+ Alt + ; : Lock Guides
Ctrl+ Alt+ Enter : Test Scene
Ctrl+Alt+ R : Rewind
Ctrl+ Alt+ G : Edit Grid
Ctrl+Alt +H : Show Shape Hints
Ctrl+Alt+K : Dublicate window
Ctrl+Alt +L : Lock
Ctrl+Alt+M : Mute Sound
Ctrl + Alt+ P : Test Project
Ctrl+Alt+S : Scale And Rotate
Ctrl+Alt+T : Show/Hide Timeline
Ctrl + Alt+W : Close all documents .
Ctrl+Shift+ ' : Snap to Grid
Ctrl+ Shift+ ; : Snap to guide
Ctrl+ Shift + / : Snap to object
Ctrl+Shift+9 : Rotate 90 o Cw
Ctrl+Shift+7 : Rotate 90 . CCw
Ctrl+Shift + 10 : web service
Ctrl+Shift+A : Diselect all
Ctrl+Shift+D : Distribute to Layers
Ctrl+Shift + Down : sent to back
Ctrl+Shift+ Enter : Debug movie
Ctrl+ Shift+F12 : Export Setting .
Ctrl+Shift+G : Ungroup
Ctrl+Shift+H : Add Shape Hint
Ctrl+Shift+L : Align Left
Ctrl+Shift + O : Open External Library .
Ctrl+Shift+R : Align Right
Ctrl+Shift+S : Save as
Ctrl+Shift +Up : Bring to front
Ctrl+Shift+V : Paste in Place
Ctrl+Shift + W : work area
Ctrl+Shift+Z : Remove transform
Ctrl + Alt +Shift + All : View Out line
Ctrl+Alt+Shift+A : Anti Alias
Ctrl+Alt +Shift+C : Shape Optimize
Ctrl+Alt +Shift + F :Fast
Ctrl+Alt+Shift+G : Edit Guides .
Ctrl+Shift+Alt+L : Unlock
Ctrl+Alt+Shift+R : Show Rulers
Ctrl+ Alt + Shift + T : Anti Alias Text .
Ctrl+Alt+Shift+S : Export Movie .

3. Phím tắt đơn

F1 : Help
F2 : Output panel
F3 : Find And Replace
F4 : Hide /Show All panel
F5 : Insert a frame
F6 : Insert a key Frame
F7 : Insert a blank key frame
F8 : Convert to Symbol
F9 : Action Panel
F11 : Library
F12 : Publish
, : Dịch chuyển sang phải 1 frame
. : Dịch chuyển sang trái 1 frame
A :SubSelection Tool
B : Brush
E: Eraser
F : Gradient transform tool
H : Hand tool
I : EyeDropper tool
K :Paint Bucket Tool
L : Lasso Tool
N : Line tool
M : Zoom tool
P : Pentool
O : Oval tool
Q : Free Transform tool
R : Rectangle tool
S : Ink Bottle
T : Text
V : Selection tool
Y : Pencil too

4. Phím tắt với phím Shift

Shift + F2 : Scene
Shift+ F3 : Behavior
Shift + F4 : Debugger
Shift +F5 : Xóa một frame
Shift+ F6 : Xóa một keyFrame
Shift + F8 : Project
Shift + F9 : Color mixer
Shift + F10 : Right mouse
Shift + F12 : Publish

Hướng dẫn cách chèn file video FLV vào một file flash sử dụng AS3 đơn giản
Tạo một file FLA trống, chèn đoạn code bên dưới vào một keyframe.

var video:Video = new Video();

    addChild(video);


    var nc:NetConnection = new NetConnection();

    nc.connect(null);


    var ns:NetStream = new NetStream(nc);

    ns.client = {onMetaData:ns_onMetaData, onCuePoint:ns_onCuePoint};


    video.attachNetStream(ns);

    ns.play("http://www.examples.com/video.flv");


    function ns_onMetaData(item:Object):void {

     trace("metaData");

     // Resize video instance.

     video.width = item.width;

     video.height = item.height;

     // Center video instance on Stage.

     video.x = (stage.stageWidth - video.width) / 2;

     video.y = (stage.stageHeight - video.height) / 2;

    }


    function ns_onCuePoint(item:Object):void {

     trace("cuePoint");

     trace(item.name + "\t" + item.time);

    }

Bây giờ bạn chỉ việc thay đường dẫn video http://www.examples.com/video.flv thành đường dẫn video của bạn, lưu tập tin và chạy thử xem nhé.
Lưu ý:
Bạn có thể chỉnh thêm thông số size video bằng cách chỉnh đoạn code

video.width = item.width;

video.height = item.height;

và chỉnh vị trí video trên stage bằng cách chỉnh đoạn code:

video.x = (stage.stageWidth - video.width) / 2;

video.y = (stage.stageHeight - video.height) / 2;

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

Để giảm dung lượng file flash có 3 cách làm sau:

- 1. Giảm chất lượng ảnh: Cách này hiệu quả nhất, nhưng nếu bạn giảm chất lượng quá thấp thì sẻ làm hình ảnh mờ rất xấu, giảm khoản còn 80% thì tối nhất.

- 2. Chuyển các thành phần của flash thành vector nếu được: Cách này cũng khá hiệu quả nhưng hơi khó và tốn công

- 3. Dùng external source, load vào flash khi cần dùng: Cách này hay nhưng chỉ đối với những file flash phức tạp như web, game hay ứng dụng flash. Còn với banner hay intro thì không khả thi, đồng thời cũng đòi hỏi bạn phải biết action script.

Bạn có thể tham khảo thêm cách này từ link bên dưới:

=> Load hình hoặc movie từ bên ngoài vào một file Flash với Action Script 2
=> Load file hình hoặc movie từ bên ngoài vào một file Flash với Action Script 3

Còn một cách khác nữa là sử dụng phần mềm, về cơ bản thì phần mềm cũng sử dụng 3 cách trên để xử lý nhưng có kết quả không như chúng ta mong muốn.

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

Xem thêm:
- Code popup quảng cáo nằm dưới trình duyệt (popup under)
- Hướng dẫn đặt quảng cáo theo từng forum hoặc category trong xenforo
- Code chèn banner xuất hiện tự động random đơn giản bằng Javascript
- Code popup quảng cáo xuất hiện khi click chuột lần đầu tiên
- Tổng hợp những hiệu ứng ánh sáng flash để làm banner hoặc intro
- Hướng dẫn cách làm banner quảng cáo responsive

Để load file hình hoặc movie từ bên ngoài vào một file Flash với Action Script 2 thì bạn thực hiện theo 3 cách đơn giản sau:

Cách 1:

loadMovie("contents.swf", image_mc);

Cách 2:

image_mc.loadMovie("contents.swf");

Bạn có thể sử dụng cách load movie để load hình ảnh như sau:

image_mc.loadMovie("http://obinb.com/image1.jpg");

Lưu ý: Trong các đoạn script trên, image_mc là instance name của một movieClip trong library

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

Xem thêm:
- Load file hình hoặc movie từ bên ngoài vào một file Flash với Action Script 3
- Tạo bộ đếm giờ (Countdown Timer) bằng Action Script 2 trong Flash
- Chèn nhạc từ bên ngoài vào file flash bằng ActionScript 3
- Hướng dẫn gắn link (url) trong Flash Action Script 3

Để load file hình hoặc movie từ bên ngoài vào một file Flash với Action Script 3 thì bạn thực hiện các bước đơn giản sau:

- Tạo một file làm việc FLA và đặt tên tùy ý, kích thước tùy ý nhưng phải là Action script 3.0.

- Ở key frame đầu tiên nhấn F9 để mở khung nhập Action tại keyframe đó lên và coppy nội dung dưới đây vào:

var myLoader:Loader = new Loader();

var url:URLRequest = new URLRequest("filemovie.swf");

myLoader.load(url);

addChild(myLoader);

// Set vị trí swf sẻ hiển thị trên stage

myLoader.x = 10;

myLoader.y = 175

// Set kích thước swf sẻ hiển thị trên stage

myLoader.scaleX = 2;

myLoader.scaleY = 2;

- Điền các thông số sau theo đúng ý bạn:
+ filemovie.swf là đường dẫn file swf bạn muốn load từ bên ngoài.
+ x là tọa độ x trên stage mà bạn muốn đặt file swf
+ y là tọa độ y trên stage mà bạn muốn đặt file swf
+ scaleX: là độ kéo giản của file swf theo chiều ngang
+ scaleY là độ kéo giản file swf theo chiều dọc

Sau khi điền xong bạn nhấn Save và nhấn Ctr + Enter để chạy thử nhé

Chúc bạn thành công!

Xem thêm:
- Load hình hoặc movie từ bên ngoài vào một file Flash với Action Script 2
- Tạo bộ đếm giờ (Countdown Timer) bằng Action Script 2 trong Flash
- Chèn nhạc từ bên ngoài vào file flash bằng ActionScript 3
- Load file hình hoặc movie từ bên ngoài vào một file Flash với Action Script 3
- Hướng dẫn gắn link (url) trong Flash Action Script 3

Có thể bạn quan tâm

Xem nhiều trong tuần

Giải đáp