Lựa chọn phần mềm thiết kế E-book

2.3.1. Adobe Flash CS3 Professional

Adobe Flash (Macromedia Flash), hay cịn gọi một cách đơn giản là flash, được dùng để chỉ chương trình sáng tạo đa phương tiện (multimedia) lẫn phần mềm dùng để hiển thị chúng Macromedia Flash Player.

Flash là cơng cụ để phát triển các ứng dụng n hư thiết kế các phần mềm mơ phỏng. Sử dụng ngơn ngữ lập trình ActionScript để tạo các tương tác, các hoạt cảnh trong phim. Điểm mạnh của flash là cĩ thể nhúng các file âm thanh, hình ảnh động. Người lập trình cĩ thể chủ động lập các điều hướng cho chương trình. Flash cũng cĩ thể xuất bản đa dạng các kiểu html, exe, jpg, …để phù hợp với cấc ứng dụng của người sử dụng trên web, CD, …

Ưu điểm lớn nhất của flash – với đồ họa vectơ – là kích thước file rất nhỏ. Thuận tiện cho việc truyền tải dữ liệu qua Internet.

Hình 2.2. Màn hình làm việc của Adobe Flash CS3 Professional

Hiện nay cĩ rất nhiều phần mềm thiết kế tập tin flash (.swf), các phần mềm này cĩ tính năng là dễ sử dụng, giúp cho người sử dụng thiết kế được các flash một cách đơn giản nhờ vào các hiệu ứng sẵn cĩ.

Các phần mềm như: Sothink SWF Quicker, SWF Text, Sothink SWF Easy để thiết kế banner, button, album ảnh…

2.3.2. Adobe Dreamweaver CS3

Dreamweaver là cơng cụ để thiết kế và phát triển web rất hiệu quả của Macromedia, cho phép xây dựng những trang web cĩ giao diện tuyệt vời. Vì Dreamweaver rất dễ sử dụng nên nĩ tạo ra mơi trường rất linh hoạt trong thiết kế web. Sẽ rất hữu ích nếu sử dụng thành thạo các ngơn ngữ lập trình web, nhưng với Dreamweaver, vẫn cĩ thể tạo được các website hấp dẫn mà khơng cần biết nhiều về HTML, JavaScript…Với Dreamweaver ta cĩ thể:

• Xây dựng trang chủ của E-book và các trang liên kết khác.

• Tạo các liên kết từ trang này đến các trang khác.

• Dễ dàng nhúng các sản phẩm của các chương trình thiết kế web khác như Flash, Fireworks, Shockwave, Generator, Authorwave …

• Tạo kiểu, bố trí nội dung trang.

• Cho phép người sử dụng chỉnh sửa trực tiếp HTML. Với Quick Tag Editor bạn cĩ thể nhanh chĩng bổ sung hoặc xĩa bỏ một HTML mà khơng phải thốt khỏi cửa sổ tài liệu. Chế độ soạn thảo trang web bằng HTML giúp chúng ta cĩ thể thiết kế trang trực tiếp bằng ngơn ngữ HTML.

• Dreamweaver cịn hỗ trợ các HTML Styles và Cascading Style Sheet giúp chúng ta định dạng trang web nhằm tăng tính hấp dẫn khi duyệt các trang web này.

Hình 2.3. Màn hình làm việc của Adobe DreamWeaver CS3

2.3.3. Một số phần mềm tiện ích khác

2.3.3.1. Phần mềm viết và vẽ cơng thức cấu tạo

Chương trình ChemOffice cĩ rất nhiều tính năng và hỗ trợ nhiều chương trình hĩa học khác. Trong ChemOffice chúng tơi sử dụng chủ yếu 2 chương trình:

- Chem3D Ultra 9.0: dùng để vẽ hoặc chuyển cơng thức dạng 2D sang 3D.

- ChemDraw Ultra 9.0: dùng để vẽ cơng thức cấu tạo (dạng 2D) của các chất vơ cơ và hữu cơ, từ cơng thức cĩ thể biết tên chất hoặc ngược lại, cĩ thể viết tên gọi của chất, sau đĩ ChemDraw cĩ thể tự vẽ cơng thức cấu tạo của chất.

2.3.3.2. Phần mềm chụp ảnh màn hình chuyên nghiệp với SnagIt 9

SnagIt là phần mềm chụp màn hình đã từng đoạt nhiều giải thưởng. Sử dụng SnagIt bạn cĩ thể chọn và chụp bất cứ thứ gì xuất hiện trên màn hình của bạn và sau đĩ cĩ thể dễ dàng chèn chữ, mũi tên hoặc hiệu ứng và lưu ảnh chụp thành 1 file rồi chia sẻ nĩ ngay lập tức bằng e-mail hoặc IM. Chụp và chia sẻ 1 bài báo, 1 bức ảnh hoặc 1 trang Web trực tiếp từ

màn hình của bạn. Hoặc bạn cĩ thể chụp và chia sẻ 1 phần của 1 ứng dụng đang trên PC của bạn. Chương trình tự động lưu lại thành 1 trong 23 định dạng file hoặc gửi tới máy in, e-mail hoặc tới clipboard. Sử dụng trình chỉnh sửa được tích hợp trong SnagIt để chỉnh sửa, ghi chú và tối ưu hĩa bức ảnh của bạn rồi dùng Catalog Browser để sắp xếp những file ảnh. Ứng dụng này nâng cao thành phẩm của bạn trong khi cĩ thể tạo nhanh những file trình diễn và file văn bản hồn thiện.

2.3.3.3. Phần mềm Adobe Photoshop CS3

Adobe Photoshop CS3 là 1 phần mềm hồn hảo trong việc chỉnh sửa hình ảnh. Adobe Photoshop CS3 được tăng cường thêm những tính năng mới gĩp phần tăng năng suất làm việc cũng như nâng cao tính tự động, với những cơng cụ chỉnh sửa hiệu quả, và phá vỡ mọi giới hạn.

Hình 2.4. Màn hình làm việc của Adobe Photoshop CS3

2.3.3.4. Phần mềm Total Video Converter

Total Video Converter (TVC) là một cơng cụ chuyển đổi các đ ịnh dạng file đa năng nhất hiện nay, TVC hỗ trợ chuyển đổi qua lại hơn 30 định dạng file phổ biến hiện nay (trong đĩ cĩ cả AAC và FLV mà rất ít các chương trình khác cĩ) và hỗ trợ cả các loại file âm thanh trong các game PC.

Vì Flash chỉ hỗ trợ chèn các file phim .flv nên chúng tơi dùng TVC để chuyển đổi các định dạng file phim thành định dạng file .flv để mang vào flash.

2.3.4.1. Ngơn ngữ HTML

HTML (hay Hypertext Markup Language – Ngơn ngữ liên kết siêu văn bản) là ngơn ngữ đánh dấu chuẩn dùng lập trình các tài liệu World Wide Web, tài liệu là các tập tin văn bản đơn giản.

Ngơn ngữ HTML dùng các tag (thẻ) hoặc các đoạn mã lệnh để chỉ cho các trình duyệt (Web browsers) cách hiển thị các thành phần của trang như text và graphics, v à đáp lại những thao tác của người dùng bởi các thao tác ấn phím và nhắp chuột. Hầu hết các Web browser, đặc biệt là Microsoft Internet Explorer và Netscape Navigator, nh ận biết các tag của HTML vượt xa những chuẩn HTML đặt ra.

Đối với những GV khơng chuyên trong lĩnh vực lập trình website với các ngơn ngữ lập trình cấp cao, thì việc chọn cho mình ngơn ngữ thiết kế web với HTML là giải pháp tốt nhất, bởi vì ngơn ngữ HTML dễ học, thiết kế đơn giản, dễ thay đổi cấu trúc web và phát triển website thật dễ dàng, đồng thời việc kết hợp HTML với các ngơn ngữ thiết kế web khác như CSS, Javascript và đồ họa sẽ làm cho website đẹp hơn, sinh động hơn.

2.3.4.2. Ngơn ngữ ActionScript

ActionScript (AS) là ngơn ngữ lập trình được xây dựng trong Flash, AS rất giống ngơn ngữ C++, Java, JavaScript …và được dựa trên tiêu chuẩn do ECMA (Europe Computer Manufactures Association) lập ra gọi là ECMAScript.

2.4. Phối hợp các phần mềm để thiết kế E-book

Hình 2.5. Giao diện trang Index.html

Tạo trang Index bằng chương trình DreamWeaver, nhằm mục đích cho người sử dụng chưa cài chương trình xem flas h cĩ thể download chương trình về sử dụng để xem được E- book.

Trước tiên: dùng Photoshop thiế t kế như trên, sau đĩ dùng cơng cụ Knife của Photoshop cắt web. Đối với các phần được link, tạo thêm 1 hình giống vậy để tạo hiệu ứng hover khi rê chuột vào.

Cắt xong tất cả nhúng vào DreamWeaver bằng cách Save for Web.

Trong vùng làm việc code của DreamWeaver ta sử dụng đoạn mã code sau: <head>

font-size:0px;

margin:0px;

border:0px;

}

img, div, input, bg { behavior: url("iepngfix.htc") } body{

background:url(bg.gif);

}

#contain{

width:1048px;

background:url(bg-main1.png) repeat-y;

padding-left:12px; margin:auto; } .main{ width:1024px; } </style> </head>

Để tạo hiệu ứng chữ đổi màu cho link, dùng code sau :

.flash-player{

width:624px;

height:195px;

background:url(Images/index_05.jpg) no-repeat;

cursor:pointer; } .flash-player:hover{ background:url(Images/index_05a.jpg); } .open{ width:624px; height:53px;

background:url(Images/index_06.jpg) no-repeat; cursor:pointer; } .open:hover{ width:624px; height:53px;

background:url(Images/index_06a.jpg) no-repeat;

} .left{ float:left; } Trong body gồm cĩ: <body>

</div>

</body>

 Tạo trang Home.html

- Dùng DreamWeaver nhúng trang flash intro.swf vào nhằm mục đích cho flash chạy ổn trên các trình duyệt, khơng bị co giãn.

<body>

AC_FL_RunContent( 'codebase','http://download.macromedia.com/

pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1000','height','800','src ','intro','quality','high','pluginspage','http://www.adobe.com/shockwave/download/downl oad.cgi?P1_Prod_Version=ShockwaveFlash','movie','intro' );//end AC code

</script>

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#v ersion=9,0,28,0" width="1000" height="800">

type="application/x-shockwave-flash" width="1000" height="800"></embed> </object>

</noscript>

</div> </div>

Hình 2.6. Giao diện trang intro.swf

Button Bắt đầu: link tới file start.swfđồng thời mở ra nội dung trang Giáo khoa. Để tạo các button, ta làm như sau:

- Trong Flash, nhấn tổ hợp phím Ctrl-F8 để tạo 1 symbol mới, trong bảng CreateNew Symbol ta chọn:

Hình 2.7. Đặt tên cho button trong của sổ Create New Symbol

Tại màn hình chính, gõ text Bắt đầu, để tạo hiệu ứng cho button khi rê chuột vào, nhấp F6, ta cĩ thể đồi font chữ, màu chữ và kích thước tùy ý. Sau đĩ nhấp vào Scene 1, tại Library, kéo và rê but_begin vào sân khấu. Nhấp chọn vào button Bắt đầu, nhấp F9để viết ActionScript cho button như sau:

Hình 2.8. Cửa sổ Actions – Nơi viết ActionScript trong flash on(release) { unloadMovieNum(1); loadMovieNum("start.swf",2); gotoAndStop(1); stopAllSounds(); }

Button on-off music: tắt mở nhạc, ta thực hiện tương tự, tại màn hình chính thay vì gõ text, ta nhấn tổ hợp phím Ctrl-R để mang các hình ảnh, icon vào sân khấu. Code cho các nút như sau:

Với nút off: on(release) {

stopAllSounds(); }

Với nút on: on(release) {

_parent.bgsound.gotoAndPlay(1); }

Trang start.swf: cĩ 4 đề mục chính của E -book. Gồm các button tương ứng với các đoạn code sau:

- Giáo khoa

on(release) {

unloadMovieNum(4); unloadMovieNum(5); unloadMovieNum(6); loadMovieNum("giaokhoa.swf",3); gotoAndPlay(“giaokhoa”);} - Phương pháp giải on(release) { unloadMovieNum(4); unloadMovieNum(5); unloadMovieNum(6); loadMovieNum("phuongphap.swf",3); gotoAndPlay(“phuongphap”);} - Vui học on(release) { unloadMovieNum(4); unloadMovieNum(5); unloadMovieNum(6); loadMovieNum("vuihoc.swf",3); gotoAndPlay(“vuihoc”);} - Giới thiệu on(release) { unloadMovieNum(4); unloadMovieNum(5); unloadMovieNum(6); loadMovieNum("tacgia.swf",3); gotoAndPlay(“tacgia”);}  Trang giaokhoa.swf

Hình 2.9. Giao diện trang giaokhoa.swf

- Tạo 3 chương thành 3 button

Button chương 5: Để vào thư mục chương 5.swf

on (release) {

loadMovieNum("giaokhoa/chuong5.swf",4); }

Button chương 6: Để vào thư mục chương 6.swf

on (release) {

loadMovieNum("giaokhoa/chuong6.swf",4); }

Button chương 7: Để vào thư mục chương 7.swf

on (release) {

loadMovieNum("giaokhoa/chuong7.swf",4); }

 Phối hợp các phần mềm để tạo file lythuyet.swf

Hình 2.10. Giao diện trang nội dung bài học

 Dùng phần mềm SWF Text để tạo các tiêu đề bài học

Đây là chương trình cho phép chúng ta t ạo những banner, tiêu đề với những hiệu ứng cĩ sẵn, và rất dễ sử dụng.

Hình 2.11. Màn hình làm việc của SWFText Movie: thay đổi kích thước cho file flash.

Background: tạo màu nền cho tiêu đề. Background Effect: tạo hiệu ứng cho nền. Text: thay đổi nội dung cho tiêu đề. Text Effect: tạo hiệu ứng cho tiêu đề. Font: chọn font, màu chữ và kích thước. Sound: chọn âm thanh.

Nút preview: xem trước file flash.

Khi chương trình được khởi động luơn cĩ 1 file .swf kèm theo để bạn cĩ thể xem trước những lựa chọn cho từng mục. Sau khi lực chọn các hiệu ứng thích hợp, ta nhấp vào Publish và lựa chọn Save flash movie, như vậy chúng ta đã cĩ 1 tiêu đề bài học với những hiệu ứng thật hấp dẫn.

Hình 2.12. Các tiêu đề được tạo bằng SWFText

 Sử dụng SnagIt và photoshop để cắt và chỉnh lí ảnh.

- Trong Flash khơng hỗ trợ cho chúng ta viết các cơng thức cấu tạo hữu cơ, do đĩ để đưa các cơng thức hĩa vào, chúng ta phải chuyển các c ơng thức thành các file ảnh để dưa vào flash.

Khởi động chương trình SnagIt, sẽ xuất hiện giao diện sau như hình 2.13.

Hình 2.13. Màn hình làm việc của SnagIt 9.0 Region: chụp từng vùng bằng cách rê và kéo chuột.

Window: chụp của sổ hiện hành. Fullscreen: chụp tồn màn hình. Scrolling window: chụp trang web.

Nếu các cơng thức và các file ảnh khơng được rõ nét, chúng ta phải chỉnh sửa lại các ảnh đĩ để được sắc nét hơn.

Trong PhotoShop, mở bức ảnh mà bạn muốn chỉnh sửa. Hình gốc:

Hình 2.14. Ảnh chưa được chỉnh sửa

- Cách tốt nhất và nhanh nhất để làm bức ảnh này sắc nét hơn là sử dụng hộp thoại Levels.

- Để mở hộp thoại Levels, vào menu Image > Adjustments > Levels (hay nhấn Ctrl-L)

Hình 2.15. Cách mở hộp thoại Levels

Hình 2.16. Hộp thoại Levels

- Để cho bức ảnh sắc nét hơn thì chúng ta phải tăng màu đen và giảm bớt màu trắng

Hình 2.17. Điều chỉnh điểm màu đen trong hộp thoại Levels Và chúng ta được kết quả:

Hình 2.18. Ảnh sau khi được chỉnh sửa

 Sử dụng Total Video Converter để chuyển định dạng các file phim - Khởi động chương trình Total Video Converter, sẽ xuất hiện giao diện sau:

Flash chỉ hỗ trợ cho định dạng phim .flv, đối với các đinh dạng khác, chúng ta khơng thể chèn trực tiếp vào flash được. Phần mềm Total Video Converter sẽ chuyển các định dạng khác thành file.flv.

Nhấp vào button New Task→ Import files→ hộp thoại Open hiện ra → chọn file phim cần chuyển đổi → nhấp Open.

Click chọn FLV Video → nhấp Convert Now để thực hiện việc chuyển đổi.

 Sử dụng Swf Easy hoặc Swf Quicker để tạo Album ảnh, button, banner. Khởi động chương trình Swf Easy sẽ xuất hiện giao diện như hình 2.20.

Hình 2.20. Màn hình làm việc của Swf Easy

Để tạo Album ảnh, click chọn Album, tạo banner bảng nút Banner, tạo button bằng nút Navigation Buttons. Ta lựa chọn các kiểu album, banner, buttons thích hợp.

 Sử dụng Flash để tạo nội dung cho từng mục

Trong một bài học cĩ nhiều mục nhỏ, mỗi mục sẽ link đến từng nội dung tương ứng. Do đĩ, chúng tơi dùng flash dể tạo nội dung cho từng mục.

Đầu tiên, chúng ta tạo 1 file flash mới, sau đĩ nhấp Ctrl F7. Bảng Components hiện ra, click chọn User Interface → ScrollPane, kéo và rê ScrllPane vào màn hình.

Hình 2.21. Kéo và rê ScrollPane vào màn hình

- Click chọn cơng cụ Free Trasform để canh chỉnh kích thước của ScrollPane tương ứng với khung nội dung bên tay phải.

- Nhấn Ctrl-F8 để tạo 1 movie clip, bảng Create New Symbol hiện ra:

Hình 2.22. Cửa sổ Create New Symbol

- Movie Clip bai39-I-1 sẽ nằm bên Library, click chuột phải chọn Movie clip bai39-I-1 nằm bên Library (nếu khơng xuất hiện Library, nhấp Ctrl-L), chọn Edit.

- Sau đĩ, ta đưa nội dung bài học (đã được soạn bên Word vào bằng cách Copy và Paste).

Đặt tên cho Movie là tên đề mục của bài học (ví dụ: Bài 39-I-1). Type: Movie clip. Click chọn: Export for ActionScript

+ Nếu cĩ tư liệu bài học là các file hình ảnh, ta nhấp Ctrl-R, chọn đường dẫn đến file để đưa hình ảnh vào nội dung..

+ Nếu tư liệu là file flash.swf, chúng ta đưa file flash.swfvào flash như sau Tạo 1 button minh họa để link đến file flash minh họa, ví dụ:

Trên thanh Timeline, chọn 1 frame, ví dụ frame số 10, click chuột phải, chọn Insert Blank Keyframe.

Tạo 1 Scrollpane bằng với kích thước file flash minh họa. Nhấn Shift-F7 để mở bảng Component Inspector

Hình 2.23. Hướng dẫn nhúng file.swf vào chương trình flash

Tại Value, ta viết tên của file fl ash.swf cần đưa vào, và file flash này phải nằm chung

Sách giáo khoa điện tử (E-book)

Cấu trúc và nội dung E-book