Thiết kế Menu và chức năng AutoRun cho CD-ROM
Bảo Kha

Mách bạn từ cách thiết kế menu và chức năng AutoRun cho D-ROM, cùng cách “thay da đổi thịt” cái menu ấy cho nó đẹp hơn, tỏ ra “rồ” (pro – nói tắt trong tiếng Anh, nghĩa là chuyên nghiệp) hơn!

Khi đưa đĩa CD-ROM vào ổ, chương trình trên đĩa tự chạy, trên màn hình xuất hiện một menu gồm nhiều nút bấm, mà dí chuột vào và nhấp một cái là xem đoạn phim, hay mở một trang web, hay cài một ứng dụng,..

Có khi nào bạn tự hỏi làm sao để tạo ra chương trình ấy, với các khả năng thú vị như vậy? Nếu có, hẳn không ít bạn le lưỡi cho rằng chắc là khó và kỳ công lắm, vì “món này” chỉ dành cho dân lập trình thứ thiệt?

Thế nhưng đường đến La Mã có trăm ngàn cách đi mà bạn! Thiệt tình mà nói, kiến thức về Ai-Ti của tôi chỉ ở mức i.. tờ mà thôi, nên không dám dùng hàng hiệu như Vi-sùa-bê-xích (VB) hay Si-plếch-plếch (C++). Chỉ xin mạn phép bày trò cùng các bạn cái ngón nghề AutoPlay Media Studio 4.0 để làm cái chuyện cỏn con, đì-zai (thiết kế) menu chương trình và tạo chức năng autorun cho CD-ROM qua các động tác... nhấp nhấp con chuột, chứ chẳng cần phải biết cú pháp hay kiến thức lập trình gì cao siêu cả!

Vẽ chuyện

Để cuộc chơi thêm hấp dẫn, tôi lại xin mạn phép "phịa" hàng loạt các yêu cầu (trả lời câu hỏi mình muốn cái gì?). Giả sử các bạn đã có nội dung cần ghi lên CD-ROM: một đoạn phim dạng Demo.avi, trang web cá nhân Myweb.html, trình duyệt IE 6.0 chưa cài, tài liệu hướng dẫn sử dụng IE 6.0 bằng tiếng Việt được soạn từ Word: Tailieu.doc.

Yêu cầu: Khi đưa đĩa vào ổ, sẽ tự động xuất hiện một menu, trên menu đó có ít nhất bốn nút, nếu người dùng nhấp chuột vào nút thứ nhất sẽ xem được phim, nút thứ hai sẽ xem được trang web, nút thứ ba sẽ cài trình duyệt IE 6.0 vào máy, và nút thứ tư sẽ mở file Word ra xem.

Câu hỏi đặt ra: Làm sao đây?

Bày trò

Để "làm trò", bạn cài chương trình AutoPlay Media Studio 4.0 vào máy. Chạy ứng dụng, chọn kiểu mẫu Clouds Software Installer (640x480) ở mục Project Template và đặt tên cho Project là Bay tro ở ô Project name, nhấn OK để chấp nhận.

Tiếp theo, chọn menu lệnh Project, chọn Setting để xác lập lại các thông số theo yêu cầu riêng của chúng ta. Tại mục General:

- Distribution Folder: Nhấn biểu tượng để thay đổi thư mục lấy dữ liệu và xuất dữ liệu sau khi biên dịch chương trình. Ví dụ: D:\Menu Dizai.

- Window: Đánh dấu vào ô chọn Full Screen để chọn kiểu hiển thị cho menu là đầy màn hình, bạn có thể chọn thử hai dạng còn lại để thử xem hiệu quả thế nào.

Chọn nút OK để chấp nhận. Mở tiếp menu Page, chọn lệnh Properties..., mục Background, ô Colors, chọn màu đen cho Background.

Bây giờ, bạn có thể chọn biểu tượng hay phím F5 để chạy thử. Chương trình sẽ tự biên dịch hàng loạt các lệnh:

Nếu thành công, trên màn hình sẽ xuất hiện kết quả như sau:

Như vậy, chẳng cần lập trình một lệnh nào cả, chúng ta đã có ngay một menu lệnh với đầy đủ các nút bấm và rất mỹ thuật. Nếu dí chuột vào một nút bất kỳ, bạn sẽ thấy nút này đổi màu khác, đồng thời khung to bên phải menu có xuất hiện các dòng thông báo (toàn tiếng Anh, đọc chả hiểu!). Tò mò nhấp thử chuột, bạn sẽ thấy nút bấm đổi màu đỏ, rồi chuyển lại bình thường, trên màn hình xuất hiện báo lỗi(xem hình)

Không sao cả! Lý do là chương trình cung cấp khung sườn dạng chung chung cho chúng ta, còn tiểu tiết thế nào phải do chính chúng ta sắp đặt, thay đổi lại cho phù hợp với nhu cầu và mục đích sử dụng của mình. Bao nhiêu đó là quá quý rồi bạn ạ (nếu dùng C hay C++ để tạo ra giao diện như vậy, khéo bạn sẽ “ná thở” đó).

Trước khi làm tiếp, các bạn chọn nút Exit để thoát chế độ xem thử và trở lại chương trình. Nhớ "làm ơn" chép (copy) tất cả các thứ cần thiết để sản xuất CD-ROM vào thư mục D:\Menu Dizai, chúng ta cũng thoả thuận kể từ bi giờ mọi thứ có liên quan đến "quy trình sản xuất CD-ROM" đều phải được ném vào thư mục này.

Đổi ruột thay gan

Nói như vậy cũng không quá rùng rợn đâu, bạn ạ! Bởi vì đến đây, cái vỏ bề ngoài xem như đã ổn, chúng ta chỉ cần thay đổi tính năng của từng cái nút bấm sao cho mỗi khi nhấn vào đó, nó "hiểu" và thực hiện theo đúng ý muốn của bạn.

Tất cả các nút đều giống nhau vì có tất cả năm mục: Settings, Attributes, Caption, Sounds và Actions. Mỗi mục có nhiều thuộc tính có liên quan, chỉ cần thay đổi các thuộc tính này, bạn sẽ được tính năng của nút phù hợp với nhu cầu, ý muốn của mình.

- Mục Settings: Mục này cho phép thay đổi hình ảnh của nút. Mỗi mút có b trạng thái: Bình thường (Normal), khi bị chuột dí vào; chưa nhấp (Mouse Over); và khi bị chuột nhấp xuống (Mouse Down). Ngoài ra, muốn bỏ nền dư thừa cho nút, bạn chỉ cần chọn ô Transparent Background. Đến đây, có thể lý giải được vì sao lúc chạy thử, khi bạn đưa chuột vào nút hay nhấn nút, màu nút thay đổi: Khi dí chuột vào nút, chương trình sẽ hiểu nút đang ở chế độ Mouse Over nên tự động đổi hình khác tương ứng. Tương tự cho trường hợp nhấp chuột.

- Mục Attributes: Cho phép thay đổi tên gọi (Name), kích thước và vị trí của nút (ô Size/Position). Nếu không muốn cho thay đổi kích thước nút thì đánh dấu vào ô Lock size. Muốn vô hiệu hóa cả bốn ô Left, Top, Width, Height thì đánh dấu vào ô Lock positon. Khi con trỏ chuột đặt lâu trên nút sẽ tự phát sinh một dòng chú thích, đó chính là nội dung của ô Tooltip text. Ngoài ra, để định phím tắt cho nút, ta đặt con trỏ chuột vào ô Shortcut key rồi dùng tay nhấn vào bàn phím một tổ hợp bất kỳ (ví dụ Ctrl+Shift+I). Bạn có thể thay đổi hình dạng của con trỏ chuột khi đặt trên nút ở list box Cusor, mặc định là hình bàn tay (hand).

- Mục Caption: Chủ yếu là để trang trí cho nút. Để thay đổi tên hiển thị của nút, chỉ cần gõ nội dung vào ô Message. Có thể gõ tiếng Việt. Để thay đổi kiểu font, cỡ chữ: Chọn Select Font...

Ô Color cho phép thay đổi màu ba trạng thái chữ nằm trên nút khi con trỏ chuột tác động lên (mặc định: tất cả màu trắng). Để canh hàng cho chữ nằm trong nút, chúng ta có thể chọn một trong ba vị trí left, center hay right tại ô Horizontal Alignment.

- Mục Sounds: Chủ yếu góp phần thêm nổi đình nổi đám khi Menu được kích hoạt. Ứng dụng hơi bị "keo", chỉ cho phép dùng một dạng file âm thanh là .wav, cho hai trạng thái khi chuột chạy qua nút (Mouse Over Sound) hay nút bị chuột nhấp (Mouse Click Sound). Nếu tạm thời bạn hơi bị “túng”, chưa kịp bịa ra cái âm thanh gì quái hơn thì hãy "xài tạm" hai cái tiếng do chương trình cho mặc định vậy.

- Mục Actions: Tất cả linh hồn của nút đều nằm ở đây, bạn muốn nó thực thi cái gì thì hãy vào đây ra lệnh. Một nút có thể tác động đến 30 đối tượng có liên quan do chương trình cho phép (từ việc chạy một file MP3, hiển thị cửa sổ thông báo... cho đến việc thay đổi Registry của Windows). Có thể nói: “Đẳng cấp” sử dụng chương trình này được cân đo bằng việc ai biết cách can thiệp nhiều hay ít 30 đối tượng ở mục Actions này. Vì vậy, nếu có điều kiện, các bạn hãy cố đào sâu thêm, có rất nhiều điều thú vị đang chờ bạn khám phá, nếu “thông” được cỡ hai phần ba cũng đã quá đủ để các bạn tung hoành.

Trở về vấn đề đã được tôi phịa ra lúc đầu, ta sẽ giải quyết từng bước một:

- Chọn hai đối tượng Mouse Over Text, Page Title, Logo rồi nhấn phím Delete để bỏ nhằm làm cho Menu của bạn đơn giản. (Vào dịp khác, chúng ta sẽ nói tiếp về các đối tượng này.)

- Chọn, nhấn đúp nút Install, chọn mục Attributes, đặt tổ hợp phím tắt là Ctrl+Shift+S. Qua mục Caption, gõ "Cài đặt IE 6.0" vào ô Message, chắc chắn mã tiếng Việt không hiện được nhưng cũng hổng sao! Nhấn Select Font..., chọn font VNI-Times, Bold, cỡ 16 pt, nhấn OK để chấp nhận. Chọn màu cho chữ ở ba trạng thái lần lượt là trắng, vàng, đỏ và canh giữa Center.

Qua mục Actions, ở sự kiện On Mouse Click, bạn nhấn đúp vào dòng: File.Open (open, "%SrcDir%\setup.exe"), tiếp theo nhấn vào biểu tượng để chỉ đường dẫn đến D:\Menu Dizai\IE6.0\IE6Setup.exe. Chọn OK, thế là xong nút thứ nhất.

Làm tương tự với các nút tiếp theo. Nhưng ở ô Message, mục Caption, thay vì nhập "Cài đặt IE 6.0", bạn thay lần lượt là: "Xem phim", "Coi tài liệu", "Web cá nhân", chọn font, cỡ chữ, màu sắc, canh hàng giống y như trên. Còn ở mục Action, cũng ở sự kiện On Mouse Click, bạn cũng dẫn đến đường dẫn D:\Menu Dizai - thay vì vào thư mục IE6.0 trỏ đến file IE6Setup.exe, bạn sẽ dẫn đến lần lượt các file Demo.avi, Tailieu.doc, Myweb.html. Riêng nút Exit không thay đổi gì cả.

Sau khi thực hiện xong các công việc trên, bạn hãy bấm F5 để chạy thử, nhấn các nút để kiểm tra. Nếu mọi việc êm xuôi thì nhấn F7 để cho biên dịch. Nếu thành công, bạn sẽ thấy ở thư mục D:\Menu Dizai xuất hiện các file: autorun.apm, autorun.exe, autorun.inf và thư mục Data.

Cuối cùng, bạn hãy ghi tất cả thư mục này vào CD-ROM nhưng nhớ phải cho nằm ngay thư mục gốc của CD-ROM, đừng bao giờ đặt nó vào một thư mục con. Sau khi ghi xong, bạn đưa đĩa vào ổ đọc CD-ROM, nếu đĩa tự động chạy và trên màn hình xuất hiện đúng ngay menu do bạn thiết kế lúc nãy thì xem như đáng đồng tiền bát gạo.

Nhưng bạn đừng quên nhấp lại từng nút để kiểm tra xem nó có chạy bậy bạ không. Nếu tất cả đều OK, xin chúc mừng bạn một lần nữa! Lúc này, bạn có thể nhanh tay sản xuất hàng loạt đem tặng bạn bè được rồi đó!

Thay da đổi thịt nhờ Photoshop

Có thể tạm gọi phiên bản vừa tạo xong là vẹc-xông 1.0 (verion 1.0), chỉ loè được những ai không biết thôi! Bởi vì đó là mẫu chung, do chương trình AutoPlay Media Studio 4.0 thiết kế sẵn, nên nếu bạn để nguyên xi như vậy mà đi “nổ” thì ắt là giấu đầu lòi đuôi, “đụng hàng” là cái chắc.

Vì vậy, tôi muốn đưa bạn luôn qua sông, chứ để giữa dòng sẽ khó yên lòng!

Chỉ cần dùng vài chiêu Photoshop thôi, bạn sẽ nâng cấp được ngay phiên bản của mình từ 1.0 lên 5 hay 6.0 gì cũng được.

"Da thịt" của toàn bộ Menu được gói gọn trong ba tập tin hình ảnh thể hiện ba trạng thái của nút bấm là Normal, Mouse Over, Mouse Down và tập tin nền (background). Biết vậy, ta chỉ cần đì-zai lại các tập tin này là đảm bảo “thánh” cũng không biết ta dùng cái chi để tạo ra giao diện menu kia.

Các bạn thích cái chi? Riêng tôi mê Lucky Luke như điếu đổ, nên sẽ mượn vài hình ảnh của anh chàng này để "bày trò" nhé.

- Tạo hình nền mới: Nhấn Ctrl+N, tạo ra một file hình mới đặt tên là background, có kích thước 630x425 pixels, độ phân giải 72 dpi, mode màu RGB, chọn Transparent ở ô Contents, nhấn OK.

Tiếp theo, mở tiếp các hình ảnh của Lucky Luke và tứ quái Dalton, bấm phím M, nắm lôi hình Lucky Luke rồi thả vào background, đóng file hình Lucky Luke. Trở lại file background, nhấn tổ hợp phím Ctrl+T để tăng kích thước file ảnh Lucky. Lưu ý: Che bớt phần hình dư thừa khúc trên, chỉ lấy phần ảnh gồm các nhân vật mà thôi. Sau khi kéo to hình nhưng vẫn cố chừa một khoảng trắng bên trái, đó chính là vị trí của các nút bấm. Nhấp đúp vào hình để chấp nhận thao tác tăng kích thước ảnh.

Tiếp theo, dùng công cụ nhấp vào bức tường để chọn màu tường, sau đó dùng tiếp công cụ vẽ một vùng chọn trên hình để tạo ra một phần bức tường bị mất. Chọn Edit/Fill để tô màu cho vùng chọn, nhấn Ctrl+D để bỏ thao tác chọn.

Tương tự như trên, bạn hãy tiếp tục chọn màu, chọn và tô cho phần hình còn lại bị mất. Tô xong, nếu nhìn kỹ vẫn thấy nó giả tạo vì giữa hình và phần tạo mới có ranh giới rõ ràng. Vì vậy, bạn lại chọn tiếp công cụ ngón tay để bôi đi các lằn ranh cho đến khi nào cảm thấy hài lòng thì dừng lại.

Khi đó, chúng ta sẽ được một bức tranh nền rất hoàn hảo. Vào menu Layer, chọn lệnh Flatten Image để gộp các lớp lại thành một lớp Background. Nhấn Ctrl+S để lưu ảnh vừa tạo vào thư mục D:\Menu Dizai có tên background.jpg.

- Tạo các nút bấm Lucky Luke: Tương tự như trên, tạo một file ảnh mới có kích thước 200x50 pixels, đặt tên là button. Mở các file hình ảnh đầu của Lucky Luke. Nhấn đúp vào công cụ (?), chọn chế độ Fixed Size ở ô Style, và đặt hai thông số cho ô Width và Height lần lượt là 180 và 40.

Trở lại file Button, dùng công cụ nhấn vào vùng làm việc, sẽ có một vùng chọn kích thước 180x40 pixels xuất hiện. Tiếp theo, di chuyển vùng chọn vào giữa vùng làm việc, chọn Select/Modify/Smooth... nhập vào thông số 10, vùng chọn sẽ được bo tròn các góc.

Nhấn đúp vào ô màu nằm trên (màu foreground) ở thanh công cụ để định lại thông số cho màu tô là R:0, G:128, B: 23, chọn OK để chấp nhận. Chọn Edit/Fill, ô Use chọn Foreground Color, Opacity 100%, Mode: Normal để tô nhấn tiếp OK. Nhấn Ctrl+D để bỏ chọn.

Đặt lại thông số màu Foreground là màu vàng R: 249, G: 244, B: 0. Cũng vào Menu Edit nhưng chọn Stroke, nhập thông số cho ô Width là 2, chọn Outside, nhấn OK để tô viền cho nút. Tạo thêm hai bản sao của button bằng cách chọn menu Image, chọn lệnh Duplicate..., lần lượt đặt tên cho chúng là Button Over và Button Down.

Tiếp theo, dùng công cụ chọn lấy vùng trắng bên ngoài của hình đầu Lucky Luke, nhấn Shift+F7 để lấy ngược phần hình trong (chỉ có cái đầu), nhấn phím V để đổi sang công cụ move , nắm và lôi phần hình được chọn vào tập tin Button, điều chỉnh kích thước cho phù hợp. Lưu lại thành file Button.jpg cho vào thư mục D:\Munu Dizai.

Tương tự cho hai ảnh đầu còn lại, ta sẽ được bộ ba các nút như sau:

Quay trở về AutoPlay Media Studio 4.0:

- Bạn nhấn phải chuột vào hình nền, chọn Page Properties... thay hình nền hiện tại thành file bacgriund.jpg mà ta mới vừa tạo từ Photoshop.

- Tiếp theo chọn một nút bất kỳ, vào mục Settings thay lần lượt các file hình của ba trạng thái nút lần lượt là Button.jpg, Button Over.jpg, Button Down.jpg cho Normal Image, Mouse Over Image và Mouse Down Image. Nhớ đánh dấu vào mục Transparent background để loại bỏ màu nền trắng dư thừa. Qua mục Caption, định lại cỡ chữ là 12, canh phải.

Thực hiện tương tự cho các nút còn lại, bạn sẽ thấy toàn bộ menu đã được thay da đổi thịt, khác hẳn ban đầu. Chạy thử, rồi biên dịch lại và ghi lên CD-ROM, bạn đã có được “phiên bản” rất mới. Lúc này, bạn có thể lớn tiếng cùng thiên hạ: "Tôi đã vất vả lắm, nát óc lắm, viết chương trình mệt lắm mới ra bản úp-đết này đấy!". (Trước khi “nổ” với ai, bạn nên nhìn xung quanh xem có cao thủ nào hay không, nếu không khéo dễ bị “quê” thêm lần nữa đấy!)