Thiệp Xuân SVG

17/01/2014 08:29

(e-CHÍP Online) Năm hết Tết đến, bạn hãy "rủ rê" các bé trong nhà vẽ thiệp Xuân đặc biệt cho ông bà, họ hàng. Từ đó, bạn tạo nên thiệp điện tử có dòng chữ động và nhạc nền.


Bạn nên khuyến khích các bé vẽ thiệp Xuân tự do, đừng gò bó. Sau đó bạn dùng máy ảnh hoặc máy quét để đưa "tác phẩm" dễ thương của các bé vào máy tính, làm hình nền cho thiệp.

Khi đã có tập tin hình ảnh JPG, bạn chuyển đổi kích thước cho hình, chừng 500 x 500 (tính theo điểm ảnh) là vừa. Không nên dùng tập tin JPG quá lớn.

Thiệp "đại trà" của những dịch vụ thiệp điện tử chuyên nghiệp trên mạng thường được tạo bằng công cụ Flash, có hình động và nhạc nền. Nếu bạn cũng dùng công cụ Flash, bạn thu được kết quả là tập tin SWF. Tuy nhiên, người dùng thiết bị di động (điện thoại, máy tính bảng) sẽ không xem được thiệp Flash như vậy. Đối với người dùng máy tính PC, tải xuống tập tin SWF và dùng trình duyệt để mở xem là thao tác không mấy thuận tiện.

Ta hãy đặt ra mục tiêu: tự tạo thiệp sinh động sao cho người nhận chỉ cần bấm vào địa chỉ thiệp trong thư điện tử để xem (giống như dịch vụ thiệp điện tử chuyên nghiệp) và người nhận cũng xem được thiệp trên thiết bị di động nữa. Bạn có thể đạt mục tiêu như vậy nếu tạo thiệp ở dạng thức SVG và lưu thiệp trong "ổ đĩa" Google Drive. Các phiên bản gần đây của trình duyệt Firefox, Chrome, Safari, Opera và Internet Explorer (phiên bản 9 và 10) đều thể hiện tốt nội dung tập tin SVG. Dạng thức SVG có hiệu lực trên những thiết dị di động dùng hệ điều hành Android 3+, iOS 3.2+ (iPod/iPhone/iPad) hoặc dùng trình duyệt Opera Mini 5+, Opera Mobile 10+.

Để tạo tập tin SVG, bạn có thể dùng công cụ thiết kế đồ họa phổ biến trên PC như Adobe Illustrator hoặc CorelDRAW. Bài này hướng dẫn bạn dùng Illustrator. Bạn không cần dùng phiên bản mới nhất của Illustrator vì ta chỉ cần làm vài việc đơn giản.

Bạn mở Illustrator, chọn Web Document trong phần Create New ở "cửa sổ chào". Trong hộp thoại New Document, bạn đặt tên cho bản vẽ trong ô Name, XuanGiapNgo chẳng hạn, nhập trị số 500 px trong ô WidthHeight để quy định kích thước và bấm OK.

Từ thanh trình đơn, bạn chọn File > Place và tìm chọn tập tin hình nền JPG chứa hình vẽ của bé, lưu trong thư mục nào đó. Hình được chọn xuất hiện giữa trang thiết kế. Bạn gõ phím Z để chọn công cụ Zoom, giữ phím Alt và bấm vài lần vào giữa trang để lấy tầm nhìn xa.

Bạn gõ phím P để chọn công cụ Pen. Bạn bấm vào ô Fill, gõ phím /, bấm vào ô Stroke, gõ phím / để đường cong sắp vẽ không có màu tô và màu nét.

Ta cần vẽ đường cong từ trái qua phải để làm qũy đạo cho lời chúc. Ta sẽ làm cho lời chúc uốn éo mềm mại trong thiệp. Bạn bấm vào đâu đó ở xa biên trái của trang để quy định điểm thứ nhất của đường cong. Khi nhấn phím trái của chuột chọn điểm thứ hai, bạn giữ phím trái và di chuyển chuột để điều khiển độ cong của đoạn nối điểm thứ hai với điểm thứ nhất, cho đến khi vừa ý. Cứ thế, bạn tạo ra các điểm tiếp theo cho đường cong vòng vèo, đại khái như hình sau. Bạn chú ý, ta tạo một đoạn cong đầu khá dài ở bên trái, ngoài trang, để đủ chứa lời chúc hoàn toàn nằm ngoài trang. Hình minh họa dưới đây tạm dùng một chậu mai làm nền, trông rất... thường. Bạn phải dùng hình mà các bé đã cắm cúi vẽ với tất cả tấm lòng, thiệp mới trở nên đặc biệt đối với ông bà.

Bạn chọn File > Save (hoặc ấn Ctrl+S) để lưu bản vẽ. Trong hộp thoại Save As, bạn bấm vào ô Format, chọn dạng thức SVG (*.SVG), bấm nút Save As. Bạn bấm OK trong hộp thoại SVG Options để chấp thuận các lựa chọn mặc định. Xong, bạn đóng Illustrator.

Tập tin SVG mà bạn vừa thu được (XuanGiapNgo.svg) là một tập tin văn bản chứa đựng hình nền JPG và đường cong mà bạn đã vẽ. Bạn dùng công cụ Notepad, mở tập tin SVG đó. Quan sát phần cuối tập tin, bạn thấy nội dung đại khái như sau:

...

<path fill="none" d="..."/>

</svg>

Mỗi phần bắt đầu bằng ký tự < và kết thúc bằng ký tự > gọi là một thẻ lệnh (tag). Thẻ lệnh <path/> mô tả đường cong mà bạn đã vẽ trong Illustrator. Thẻ lệnh <path/> có thuộc tính fill với trị là none, cho biết đường cong đang xét không có màu tô.

Bạn viết thêm như sau:

...

<path id="curve1" fill="none" d="..."/>

<text fill="red" style="font:bold 16pt arial">

<textPath xlink:href="#curve1" startOffset ="100%">

<animate attributeName="startOffset" dur="10s" from="100%" to="0%"

repeatCount="indefinite" />

Chúc Mừng Năm Mới - Xuân Giáp Ngọ 2014

</textPath>

</text>

</svg>

Ta thêm thuộc tính id cho thẻ lệnh <path/> để đặt tên cho đường cong là curve1. Ta dùng tên đường cong curve1 trong thẻ lệnh <textPath> để quy định rằng dòng chữ Chúc Mừng Năm Mới – Xuân Giáp Ngọ 2014 sẽ chạy theo đường cong curve1. Các thuộc tính của thẻ lệnh <animate/> quy định lời chúc chạy từ điểm cuối (100%) đến điểm đầu (0%) của đường cong, trong thời gian 10 giây. Lời chúc chuyển động bất tận do thuộc tính repeatCount có trị là indefinite.

Khi bạn ấn Ctrl+S để lưu tập tin SVG vừa được bổ sung, Notepad hiển thị thông báo nói rằng nội dung tập tin chứa ký tự Unicode, cần chọn cách mã hóa thích hợp. Bạn bấm nút Cancel. Trong hộp thoại Save As vừa hiện ra, bạn bấm vào ô Encoding, chọn UTF-8, bấm Save và bấm Yes để xác nhận rằng bạn muốn thay thế nội dung cũ của tập tin SVG.

Bạn mở trình duyệt, ấn Ctrl+O, tìm chọn tập tin SVG để mở xem. Bạn thấy lời chúc chạy theo đường cong đúng như dự định.

Trong Notepad, bạn có thể viết thêm một lời chúc nữa, cũng chạy theo qũy đạo curve1 hiện có:

...

Chúc Mừng Năm Mới - Xuân Giáp Ngọ 2014

</textPath>

</text>

<text fill="red" style="font:bold 16pt arial">

<textPath xlink:href="#curve1" startOffset ="100%">

<animate attributeName="startOffset" begin="5s" dur="10s" from="100%" to="0%"

repeatCount="indefinite" />

An Khang Thịnh Vượng - Vạn Sự Như Ý

</textPath>

</text>

</svg>

Thuộc tính begin của thẻ lệnh <animate/> quy định lời chúc thứ hai xuất phát sau lời chúc thứ nhất 5 giây. Chuyển sang cửa sổ trình duyệt, bạn gõ phím F5 để đọc lại tập tin SVG. Bạn thấy lời chúc thứ hai "đuổi theo" lời chúc đầu tiên như hình sau.

Muốn thiệp có nhạc, bạn phải thêm tập tin MP3 (có tên là Tet.mp3 chẳng hạn) vào cùng thư mục chứa tập tin SVG. Bạn dùng tập tin nhạc MP3 tùy ý, chứa bài ca xuân mà bạn thích nhất. Bạn mở Notepad viết bổ sung vào phần cuối tập tin SVG như sau:

...

An Khang Thịnh Vượng - Vạn Sự Như Ý

</textPath>

</text>

<foreignObject x="0" y="0" width="10" height="10">

<body xmlns="http://www.w3.org/1999/xhtml">

<audio src="Tet.mp3" autoplay="true" loop="true" />

</body>

</foreignObject>

</svg>

Trong những dòng vừa bổ sung, thẻ lệnh <audio/> được viết theo cú pháp của ngôn ngữ HTML5. Hiện nay, Chrome có lẽ là trình duyệt ủng hộ chuẩn HTML5 tốt nhất. Trình duyệt Chrome đã hiện diện trên các máy Nexus của Google.

Bạn nên cho các bé xem thử "thiệp động" vừa tạo ra. Chắc chắn các bé sẽ rất thích.

Việc cần làm tiếp theo là đưa hai tập tin SVG và MP3 vào một thư mục công cộng trong Google Drive (giả sử bạn đã dùng Google Drive). Bạn hãy dùng trình duyệt để mở trang Google Drive (drive.google.com). Nếu chưa có thư mục công cộng, bạn chọn Create > Folder, gõ tên thư mục mới, Thiep chẳng hạn và bấm Create. Bạn bấm-phải vào thư mục vừa tạo, chọn Share > Share. Trong hộp thoại Sharing settings vừa hiện ra, bạn chọn Change > Public on the web và bấm Save.

Bạn chú ý, trong ô Link to share của hộp thoại Sharing settings, bạn thấy địa chỉ mạng đại khái như sau:

https://drive.google.com/folderview?id=0B6V71JFFDDgybklnNHFEdTJ1SzQ&usp=sharing

Trong đó, dãy chữ số 0B6V71JFFDDgybklnNHFEdTJ1SzQ là số hiệu của thư mục Thiep đang xét (dĩ nhiên, số hiệu thư mục cụ thể của bạn sẽ khác, chứ không giống như vậy). Bạn chọn địa chỉ mạng đó, ấn Ctrl+C để sao chép và bấm Done.

Để đưa thiệp vào thư mục Thiep, bạn bấm nút Upload, chọn Files, tìm chọn hai tập tin XuanGiapNgo.svg va Tet.mp3, bấm Open, chọn Upload and Share. Nếu thấy hộp thoại Upload Settings, bạn nhớ tắt hai ô duyệt đề nghị bạn chuyển đổi tập tin thành dạng thức riêng của Google, rồi bấm Start upload.

Muốn gửi thiệp, bạn viết thư điện tử, ấn Ctrl+V để dán địa chỉ thư mục Thiep vào thư:

https://drive.google.com/folderview?id=0B6V71JFFDDgybklnNHFEdTJ1SzQ&usp=sharing

Bạn sửa lại địa chỉ mạng trong thư như sau để có địa chỉ mạng hoàn chỉnh của thiệp:

http://googledrive.com/host/0B6V71JFFDDgybklnNHFEdTJ1SzQ/XuanGiapNgo.svg

Nghĩa là địa chỉ mạng thực sự của thiệp phải bắt đầu bằng http://googledrive.com/host/, tiếp theo là số hiệu của thư mục và dấu "xổ trái" /, sau cùng là tên của tập tin thiệp SVG.

Người nhận thư chỉ cần bấm vào địa chỉ mạng như vậy để xem thiệp của bạn. Địa chỉ mạng trong ví dụ nêu trên là địa chỉ mạng thực sự của thiệp xuân mà người viết bài muốn gửi đến bạn thay cho lời kết.

NGỌC GIAO

Ý kiến bạn đọc (0)
Tên   Email

Lên đầu trang