OBin's Blog: javascript

New

Chúng ta đã biết cách gọi một function Javascript từ file Flash bằng AS3 ở bài viết Cách gọi hàm Javascript từ trong file Flash bằng Action Script 3. Hôm nay chúng ta sẻ tìm hiểu cách gọi một hàm Javascript từ bên trong một file Flash sử dụng Action Script 2.

1Tạo một movie hoặc button để thực hiện hành động gọi hàm Javascript

Đưa button này vào một layer trong stage, nhấn F9 để đặt code Action script như sau vào:

on(rollOver)
{
    getURL("javascript:ActionJS()");
}

Đoạn code trên gắn một hành động rollOver của chuột lên button, khi roll chuột lên button, hàm Javascript ActionJS bên ngoài sẻ được gọi và thực hiện.

2Tạo một file html chứa file flash và hàm Javascript mà file flash đó sẽ gọi

Ví dụ ta sẻ tạo một hàm Javascript như sau:

<script>
   function ActionJS(){ alert('hello world!'); }
</script>

Lưu ý: Chỉ khi chạy file html chứa file flash và JS trên trình duyệt thì hành động mới được thực hiện

Tải file thực hiện ví dụ trong bài viết: Download

Sử dụng Action Script 2 có vẻ đơn giản hơn Action Script 3 phải không nào. Chúc các bạn thành công!

Xem thêm:
- 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 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
- Hướng dẫn gắn link (url) trong Flash Action Script 3
- Hướng dẫn cách convert swf sang HTML5 dễ dàng bằng Adobe Flash CC

Hướng dẫn ngắn sau sẽ giúp bạn tìm hiểu cách gọi một hàm Javascript từ bên trong một file Flash sử dụng Action Script 3.

1Tạo một movie hoặc button để thực hiện hành động gọi hàm Javascript

Đặt Instance name của movie hoặc button đó với tên bắt kì trong ví dụ này là ButtonMC
Đưa button này vào một layer trong stage
Trên time line tạo một layer nằm trên layer của button với keyframe đặt code Action Script như sau:

import flash.external.ExternalInterface;

ButtonMC.addEventListener(MouseEvent.ROLL_OVER, ActionSC);

function ActionSC(e:MouseEvent):void
{
 ExternalInterface.call("ActionJS()");
}

Đoạn code trên dùng ButtonMC để gắn một hành động ROLL_OVER của chuột lên, khi roll chuột lên button, hàm ActionSC sẽ được gọi với một hành động gọi một hàm của Javascript bên ngoài
tên là ActionJS.

2Tạo một file html chứa file flash và hàm Javascript mà file flash đó sẻ gọi

Ví dụ ta sẻ tạo một hàm Javascript như sau:

<script>
   function ActionJS(){ alert('hello world!'); }
</script>

Lưu ý: Chỉ khi chạy file html chứa file flash và JS trên trình duyệt thì hành động mới được thực hiện

Tải file thực hiện ví dụ trong bài viết: Download

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

Xem thêm:
- Hướng dẫn gọi hàm Javascript từ trong file Flash bằng Action Script 2
- Hướng dẫn cách convert swf sang HTML5 dễ dàng bằng Adobe Flash CC
- 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 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
- Hướng dẫn gắn link (url) trong Flash Action Script 3

Sau đây là 5 HTML, CSS, JS framework ( Frontend Frameworks) được sử dụng phổ biến nhất hiện nay. Mỗi Framework đều có những đặc điểm riêng phù hợp với từng mục đích sử dụng của người phát triển web. Nếu bạn chưa từng dùng qua thì có thể tham khảo để tìm ra một frameworks phù hợp với dự án của mình.

1 Bootstrap:

Là HTML, CSS, JS framework phổ biến nhất hiện nay với lượng người dùng khá lớn. Framework này hỗ trợ hầu hết các thành phần có trong một website cũng như tính năng responsive + mobile nên nó có thể sử dụng cho nhiều dự án khác nhau từ lớn đến nhỏ.

Một số thông tin chi tiết:

    Tác giả: Mark Otto và Jacob Thornton.
    Phát hành: 2011
    Phiên bản hiện tại: 3.3.5 ( + 4.0 Alpha)
    Mức độ phổ biến: 75,000 + GitHub
    Khái niệm/ Nguyên tắc cốt lõi: RWD ( Responsive web design ) & mobile first
    Preprocessors: Less and Sass
    Responsive: Có
    Modular: Có
    Icon set: Glyphicons Halflings set
    Add-ons: Không kèm theo, nhưng có rất nhiều plugin từ bên thứ 3.
    Thành phần độc đáo: Jumbotron
    Tài liệu: Hỗ trợ đầy đủ
    Customization: Basic GUI Customizer , bạn cần phải nhập vào các giá trị màu bằng tay, vì không có bảng chọn màu có sẵn.
    Trình duyệt hỗ trợ: Firefox, Chrome, Safari, IE8+ (Bạn cần thêm Respond.js để hỗ trợ IE8)
    Giấy phép: MIT

Download

2 Foundation by ZURB:

Foundation là tên tuổi thứ 2 mà ta nhắc tới. Được sự bảo bọc của công ty ZURB đây là một nền tảng vô cùng mạnh mẽ. Foundation được sử dụng cho các website lơn nhứ Facebook, Mozilla, Ebay, Yahoo!...

Một số thông tin chi tiết:

    Tác giả: ZURB
    Phát hành: 2011
    Phiên bản hiện tại: 5.5.2
    Mức độ phổ biến: 18,000 + GitHub
    Khái niệm/ Nguyên tắc cốt lõi: RWD ( Responsive web design ), mobile first, semantic
    Kích thước: 326 KB
    Preprocessors: Sass
    Responsive: Có
    Modular: Có
    Icon set: Foundation Icon Fonts
    Add-ons: Có.
    Thành phần độc đáo: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
    Tài liệu: Hỗ trợ đầy đủ
    Customization: No GUI customizer, chỉ có hướng dẫn tùy biến
    Trình duyệt hỗ trợ: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
    Giấy phép: MIT

Download

3 Semantic UI:

Semantic UI nỗ lực không ngừng để làm cho các trang web xây dựng nhiều ngữ nghĩa (Semantic - Phần này nếu không hiểu bạn nên tìm hiểu riêng). Nó sử dụng các nguyên tắc ngôn ngữ tự nhiên, do đó làm cho mã dễ đọc và dễ hiểu.

Một số thông tin chi tiết:

    Tác giả: Jack Lukic
    Phát hành: 2013
    Phiên bản hiện tại: 2.1.4
    Mức độ phổ biến: 12,900 + GitHub
    Khái niệm/ Nguyên tắc cốt lõi: Semantic, tag ambivalence, responsive.
    Kích thước: 552 KB
    Preprocessors: Less
    Responsive: Có
    Modular: Có
    Icon set: Font Awesome
    Add-ons: Không.
    Thành phần độc đáo: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
    Tài liệu: Hỗ trợ rất tốt
    Customization: No GUI customizer, chỉ có hướng dẫn tùy biến
    Trình duyệt hỗ trợ: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10
    Giấy phép: MIT

Download

4 Pure by Yahoo!:

Có trọng lượng nhẹ, hỗ trợ modul,viết thuần CSS, bao gồm các thành phần có thể được sử dụng cùng nhau hoặc riêng tùy thuộc vào nhu cầu của bạn.

Một số thông tin chi tiết:

    Tác giả: Yahoo
    Phát hành: 2013
    Phiên bản hiện tại: 0.6.0
    Mức độ phổ biến: 9,900 + GitHub
    Khái niệm/ Nguyên tắc cốt lõi: SMACSS, minimalism
    Kích thước: 18 KB
    Preprocessors: Không có
    Responsive: Có
    Modular: Có
    Icon set: Không có, nhưng bạn có thể sử dụng Font Awesome
    Add-ons: Không.
    Thành phần độc đáo: Không
    Tài liệu: Hỗ trợ tốt
    Customization: Basic GUI Skin Builder
    Trình duyệt hỗ trợ: Latest versions of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
    Giấy phép: Yahoo! Inc. BSD

Download

5 UIkit by YOOtheme:

là một bộ sưu tập ngắn gọn dễ sử dụng và dễ dàng tùy chỉnh các thành phần. Mặc dù nó không phải là phổ biến như các đối thủ khác,nhưng nó cung cấp các chức năng tương tự và chất lượng.

Một số thông tin chi tiết:

    Tác giả: YOOtheme
    Phát hành: 2013
    Phiên bản hiện tại: 2.22.0
    Mức độ phổ biến: 3,800 + GitHub
    Khái niệm/ Nguyên tắc cốt lõi: RWD, mobile first
    Kích thước:   118 KB
    Preprocessors: Less, Sass
    Responsive: Có
    Modular: Có
    Icon set: Font Awesome
    Add-ons: Có.
    Thành phần độc đáo: Article, Flex, Cover, HTML Editor
    Tài liệu: Hỗ trợ tốt
    Customization: Advanced GUI Customizer
    Trình duyệt hỗ trợ: Chrome, Firefox, Safari, IE9+
    Giấy phép: MIT

Download

Với một số thông tin trên, chúc các bạn tìm được framework ưng ý nhất.

Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- BlueTrip - Css Framework phong cách đơn giản dễ sử dụng
- 6 slider miễn phí mà sử dụng thư viện jQuery
- Tạo menu dropdowns nhanh trong Bootstrap
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin

Có thể bạn quan tâm

Xem nhiều trong tuần

Giải đáp