›
›

Giáo trình Thiết kế đa phương tiện (Flash) (Phần 2) - Trường Cao đẳng nghề Đà Lạt

pdf 60 trang Gia Huy 16/05/2022 3000
Download
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Thiết kế đa phương tiện (Flash) (Phần 2) - Trường Cao đẳng nghề Đà Lạt", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfgiao_trinh_thiet_ke_da_phuong_tien_flash_phan_2_truong_cao_d.pdf

Nội dung text: Giáo trình Thiết kế đa phương tiện (Flash) (Phần 2) - Trường Cao đẳng nghề Đà Lạt

  1. 1. Giới thiệu Nếu bạn đã quen sử dụng JavaScript rồi thì bạn sẽ rất vui khi biết rằng JavaScript có thể liên lạc được với ActionScript. Tuy nhiên, cách này không hoạt động tốt đối với tất cả các loại trình duyệt. Việc liên lạc này được xây dựng trên 2 công nghệ. Một là công nghệ LiveConnect được xây dựng trong những phiên bản trình duyệt Netscape trước phiên bản 6.0. Công nghệ thứ hai là ActiveX dùng để liên lạc giữa Flash và Internet Explorer. Nhưng nếu bạn đang thiết kế cho người dùng sử dụng trình duyệt của Windows thì cách này sẽ rất tốt. Gởi thông điệp đến JavaScript Gởi thông điệp từ ActionScript đến JavaScript thì chỉ cần viết code trong ActionScript nhưng nó cũng sẽ thay đổi nội dung trang HTML của bạn . Nếu bạn tạo file Flash bằng cách chọn FSCommand trong Publish settings, bạn sẽ tạo được một file HTML đã được sửa chữa đầy đủ để nhận thông điệp. Công việc của bạn chỉ là thay thế những chỗ được đánh dấu Your code here bằng phần JavaScript của bạn. Để hiểu rõ hơn cách nó làm việc như thế nào thì chúng ta hãy cùng nhau mổ xẻ file html mà Flash đã tạo ra nhé Đầu tiên, hãy chú ý đến thẻ OBJECT/EMBED, trong đó sẽ có một số phần để chấp nhận sự liên lạc. Tham số ID trong thẻ OBJECT sẽ giống với tham số NAME trong thẻ EMBED. Hai tham số này sẽ đặt tên cho movie của chúng ta trong trang web để JavaScript có thể gọi nó. Ngoài ra còn có một tham số khác trong thẻ EMBED, đó là tham số swLiveConnect để cho phép những phiên bạn Netscape trước phiên bản 6.0 có thể liên lạc với Flash bằng công nghệ LiveConnect. CODE Trang 110
  2. Trước đoạn code của thẻ OBJECT/EMBED sẽ có một đoạn script. Phần đầu tiên là một hàm JavaScript với tên của movie ID trong thẻ OBJECT và nối tiếp với _DoFSCommand. Như ví dụ ở trên thì tên hàm của chúng ta sẽ là flashmovie_DoFSCommand. Trong hàm này thì chúng ta sẽ truyền dữ liệu lại cho movie. Không may là Netscape và Internet Explorer nhìn nhận movie của chúng ta khác nhau . Internet Explorer nhìn movie với tên truyền vào tham số ID (flashmovie), còn Netscape nhìn movie với tên là document.flashmovie. Hãy xem đoạn code dưới đây xem nhé: CODE function flashmovie_DoFSCommand(command, args) { if (navigator.appName.indexOf("Microsoft") != -1) { var flashmovieObj = flashmovie; } else { var flashmovieObj = document.flashmovie; } alert(command); alert(args); } Trong Internet Explorer, Flash không chỉ có thể liên lạc với JavaScript mà còn có thể liện lạc với VBScript. Đoạn code dưới đây được viết bằng JavaScript thay cho đoạn JavaScript trên: CODE if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1) { document.write(' \n'); document.write('on error resume next \n'); document.write('Sub flashmovie_FSCommand(ByVal command, ByVal args)\n'); document.write('call flashmovie_DoFSCommand(command, args)\n'); document.write('end sub\n'); document.write(' \n'); } Trang 111
  3. Vậy còn phần ActionScript phải làm sao đây. Xin trả lời là chỉ cần một dòng duy nhất mà thôi CODE fscommand ("alert", "This is alert 1."); Nhận thông điệp từ JavaScript Nhận thông điệp từ JavaScript thì có vẻ dễ hơn. Nhưng bạn phải nhớ rằng đã đặt tham số ID trong thẻ OBJECT và tham số NAME trong thẻ EMBED, nhớ đặt giống tên nhé. Và cũng nhớ đặt swLiveConnect=true trong thẻ EMBED. Bây giờ thì đã sẵn sàng để truyền thông điệp từ JavaScript cho movie rồi. Hãy xem ví dụ này nhé, trong ví dụ này thì chúng ta sẽ sử dụng hàm gotoFrame để di chuyển movie sang frame thứ hai. CODE Chắc chắc đến đây các bạn đang tự hỏi tại sao di chuyển sang frame thứ hai mà lại sử dụng gotoFrame(1), đúng không nào? Bởi vì hệ đếm của chúng ta bắt đầu từ số 0 (zero-based). Vì vậy, frame 1 sẽ là 0, frame 2 sẽ là 1, frame 3 sẽ là 2 Có hơn 24 câu lệnh trong Flash movie. Tuy nhiên chúng ta không cần phải dành nhiều thời gian để tìm hiểu bởi vì như đã nói ở trên thì cách liên lạc này không phải hoạt động tốt đối với tất cả các loại trình duyệt. Bạn có thể sử dụng hàm GetVariable và SetVariable để điều khiển những biến trong timeline của movie. Câu lệnh Zoom dùng để kéo dãn movie. Hai hàm isPlaying và percentLoaded dùng để kiểm tra movie nào đang hoạt động. Play dùng để play một movie khi nó đang ngừng. Trang 112
  4. 2. Luyện tập: Mở window mới Có lẽ đây là một yêu cầu rất thường gặp đối với những người sử dụng Flash. Bạn có thể làm được điều này bằng cách sử dụng hàm getURL hoặc JavaScript. Tuy nhiên, sử dụng JavaScript sẽ có rất nhiều đặc điểm mới và hay hơn, bạn có thể đặt lại những thuộc tính của window. Nào, cùng làm thử nhé: - Tạo một movie mới. - Đặt vào movie một button. - Chèn đoạn code sau cho button vừa tạo CODE on (release) { fscommand ("newwindow", "content.html"); } - Trong phần Publish Settings, chọn để publish ra file HTML cùng với Flash movie. Trong phần HTML, nhớ chọn vào mục Flash with FSCommand - Publish movie của bạn. - Mở file HTML mà Flash vừa tạo bằng một trình soạn thảo nào cũng được, như NotePad chẳng hạn. Hãy tìm phần để chèn JavaScript, và chèn đoạn code sau vào: CODE if (command == "newwindow") { window.open(args,"","width=320,height=240,location=no,toolbar=no, menubar=no"); } - Tạo thêm một file HTML đơn giản nữa và đặt tên là content.html Trang 113
  5. - Mở file HTML của bạn ra trong một trình duyệt và nhớ là trình duyệt đó phải hỗ trợ JavaScript đó nha. Khi nhấn vào button thì một cửa sổ mới sẽ xuất hiện, không có toolbar, kích thước 320x240. - Vậy còn đối với những trình duyệt không hỗ trợ JavaScript thì sao? Đơn giản thôi, sử dụng getURL . Điều quan trọng là cần phải cho Flash biết lúc nào sử dụng Flash, lúc nào sử dụng JavaScript. Quay trở lại file HTML mà Flash đã tạo, chèn đoạn code JavaScript sau vào cuối đoạn code ta đã chèn vào lúc trước CODE function initComm() { window.document.newWindowMovie.SetVariable("jsCommOK","OK"); } Đ oạn code trên sẽ thử đặt giá trị cho biến jsCommOK là OK. Nếu trình duyệt có hỗ trợ JavaScript thì jsCommOK sẽ mang giá trị OK còn nếu không thì biến jsCommOK vẫn là undefined. - Để chạy hàm initComm đầu tiên thì bạn sửa lại phần BODY của trang HTML như sau: CODE Đ iều này có nghĩa là hàm initComm sẽ được gọi ngay sau khi trang này load xong. - Bây giờ hãy quay trở lại file Flash của bạn, sửa đoạn script của button thành: CODE on (release) { if (jsCommOK == "OK") { fscommand ("newwindow", "content.html"); } else { getURL ("content.html", "_blank"); } Trang 114
  6. } 3. Luyện tập: Tạo một SlideShow đƣợc điều khiển bởi JavaScript Trong phần này, chúng ta sẽ cùng nhau làm một file Flash không có ActionScript mà sẽ được điều khiển bằng JavaScript. - Tạo một movie Flash mới với 3 frame hoặc nhiều hơn. Nội dung của mỗi frame thì không quan trọng, bạn muốn để gì trong đó cũng đựơc nhưng một lời khuyên là mỗi frame nên khác nhau để chúng ta theo dõi sự thay đổi - Đặt câu lệnh stop() vào frame đầu tiên - Publish ra file HTML - Mở file HTML đó ra trong trình soạn thảo văn bản - Truyền tham số ID trong thẻ OBJECT và NAME trong thẻ EMBED, cả hai sẽ mang giá trị là slideshow - Nhớ đặt swLiveConnect=true trong thẻ EMBED - Tạo 2 button trong file HTML bằng đoạn code sau: CODE - Mỗi button sẽ gọi một hàm. Cả hai hàm sẽ sử dụng TcurrentFame(“/”)biết đang ở frame thứ mấy, rồi sử dụng gotoFrame để di chuyển tới hoặc lui. CODE Trang 115
  7. function nextFrame() { var frameNum = window.document.slideshow.TCurrentFrame("/"); window.document.slideshow.GotoFrame(frameNum+1); } function prevFrame() { var frameNum = window.document.slideshow.TCurrentFrame("/"); window.document.slideshow.GotoFrame(frameNum-1); } Công việc tiếp theo bạn còn nhớ không: CHẠY THỬ đi nào 4. Gởi thông tin cho máy chủ Cho đến tận bây giờ, những movie chúng ta làm được hầu hết là chỉ chạy một mình (stand alone). Có nghĩa là nó chỉ chạy ở một máy khách (client-side) không có sự liên lạc với máy chủ (Server). Nên nhớ rằng Flash cũng có thể gởi trả thông tin cho Server giống như form của HTML. Vậy thì trong giờ thứ 18 này, chúng ta sẽ tìm hiểu về vấn đề này. Trong phần này chúng ta sẽ học: - Tìm hiểu về đối tượng LoadVars - Tạo một chương trình server-side đơn giản - Sử dụng Flash để gởi dữ liệu về cho Server Đối tƣợng LoadVars Đối tượng LoadVars bao gồm một tập hợp các câu lệnh và những biến đặc biệt để gởi dữ liệu cho Server giống như post form trong HTML. Chúng ta có thể tạo đối tượng giống như tạo những đối tượng khác. Lấy dữ liệu Dưới đây là một ví dụ. Thay vì sử dụng new Object() bằng new LoadVars. Sau đó thì đối tượng LoadVars mới sẽ được tạo. CODE myVars = new LoadVars(); Trang 116
  8. Với đối tượng LoadVars, chúng ta có thể làm được 2 việc, đó là gởi và lấy dữ liệu. Để lấy dữ liệu, chúng ta sử dụng câu lệnh load. Cái chúng ta cần ở đây là một đường dẫn đến nơi chứa dữ liệu: CODE myVars.load("myURL.txt"); Ví dụ trên hoạt động giống như câu lệnh LoadVariables trong giờ thứ 10. Tuy nhiên, câu lệnh LoadVariables chỉ lấy và thay thế dữ liệu trong cùng một level với câu lệnh này mà thôi. Hãy tưởng tượng, chúng ta có một file chứa dữ liệu như sau: CODE name=George&ID=47 Gởi dữ liệu Với đối tượng LoadVars, chúng ta cũng có thể gởi dữ liệu đi lên Server. Trước hết, chúng ta đưa dữ liệu vào đối tượng LoadVars, rồi sau đó sử dụng câu lệnh send để gởi dữ liệu đi. CODE myVars = new LoadVars(); myVars.name = "George"; myVars.ID = 47; myVars.send("serverprogram.cgi", "_self"); Đoạn code trên sẽ tạo một đối tượng LoadVars mới tên là myVars, rồi đưa hai thuộc tính vào đối tượng myVars. Sau đó, gởi dữ liệu đi lên Server, chính xác là đến chương trình CGI tên là echo.cgi. Câu lệnh send cũng hoạt động tương tự như trong form của HTML. _self là Target, chúng ta có thể thay thế bằng các giá trị khác như đã được biết. Nhưng còn một câu lệnh nữa là sendAndLoad. Câu lệnh này được ghép câu lệnh send và load. Có nghĩa là đối tượng LoadVars sẽ gởi dữ liệu lên Server, sau đó sẽ lấy giá trị trả về. CODE mySendVars = new LoadVars(); myLoadVars = new LoadVars(); mySendVars.name = "George"; mySendVars.ID = 47; mySendVars.sendAndLoad("serverprogram.cgi", myLoadVars); Trang 117
  9. Trạng thái lấy dữ liệu Hãy nhớ là câu lệnh send và load sẽ không lấy dữ liệu ngay tức thì. Có thể phải đợi trong một thời gian ngắn hoặc dài. Vì vậy, chúng ta sẽ có nhu cầu theo dõi trạng thái lấy dữ liệu. Chúng ta không thể sử dụng dữ liệu ngay lập tức sau câu lệnh load hoặc sendAndLoad, mà cần phải kiểm tra xem đã lấy dữ liệu xong chưa. Cách đơn giản nhất là dùng một movie clip lặp đi lặp lại để kiểm tra. Cũng có thể sử dụng getBytesLoaded và getBytesTotal với những dữ liệu lớn. Dưới đây là ví dụ để kiểm tra việc lấy dữ liệu: CODE myLoadVars.onLoad = function(success) { if (success) { gotoAndStop("load done"); } else { gotoAndStop("load problem"); } } Như trong đoạn code trên thì đối số success sẽ nhận một trong hai giá trị true hoặc false để cho biết việc nhận dữ liệu đã xong hay chưa Trang 118
  10. Bài 7. Dùng XML với Flash Càng ngày XML càng trở nên thông dụng trong các ứng dụng tin học, và ngay cả trong Flash, vậy trong phần này mình sẽ học các điều sau: • XML căn bản • Đối tượng XML trong Flash • Phân tích và xử lý XML theo phuơng pháo đệ quy (recursive) 1. XML Căn bản XML chỉ đơn giản là một văn bản để chứa dữ liệu. XML tương tự như HTML, cũng dùng các thẻ. Tuy nhiên, XML khác ở HTML là các thẻ HTML đã được ấn định trước cho các chức năng khác nhau, còn XML thì không. Với XML, bạn có thể tự tạo cho mình các thẻ theo ý bạn để phù hợp cho mục đích riêng của bạn. Có thể tạo một XML file với 1 trình biên tập văn bản (như Notepad, Textpad ) đơn giản hay là các software chuyên để viết về XML (XMLSpy, Epic ) Với Flash MX, bạn có thể dễ dàng truy cập được dữ liệu trữ ở trong XML, và đối tượng XML của Flash sẽ tự động phân tích văn bản XML này. Trong VNFX có rất nhiều bài viết về XML (ví dụ như bài giới thiệu XML của Flash- Lee) các bạn có thể tham khảo thêm 1.1 Đối tƣợng XML Đối tượng XML trong Flash gồm có nhiều hàm vằ đặc tính dùng để giúp bạn lấy và phân tích dữ kiện trong XML file một cách dễ dàng. Bước đầu tiên khi dùng đối tượng XML là tạo một phiên bản XML trước: CODE myXML = new XML() Trang 119
  11. 1.2 Phân tích và sử lý văn bản thành XML Sau khi tạo phiên bản XML trên, hiện giờ phiên bản này vẫn chưa có gì cả, tuy nhiên bạn có thể nhanh chóng tạo ra một tài liệu XML bằng cách dùng lệnh parseXML. Lệnh này sẽ nhập một chuổi văn bản, và phân tích và xử lý nó thành 1 tài liệu XML. CODE myXML = new XML(); myXML.parseXML(" Gary 47 "); Hay bạn có thể viết trực tiếp như sau CODE myXML = new XML(" Gary 47 "); Nếu mà chuổi được nhập vào không thể tạo thành XML hoàn chỉnh thì bạn có thể dùng đặc tính status để kiểm tra. CODE myXML = new XML(" Gary 47 "); trace(myXML.status); Output window sẽ cho ra -9 khi chạy đoạn code trên. -9 có nghĩa là thiếu thẻ đóng (end tag), vì mình thiếu thẻ . Nếu output window cho ra -10 thì bạn thiếu thẻ mở (start tag), và 0 có nghĩa là mọi việc hoàn chỉnh 1.3 Lấy dữ liệu từ đối tƣợng XML Có nhiều hàm để làm việc này. Ví dụ, bạn có thể dùng firstChild để lấy nút (node) đầu tiên của đối tượng XML: CODE myXML = new XML(" Gary 47 "); trace(myXML.firstChild); Trang 120
  12. Output window sẽ cho ra Gary 47 . Vì đây chính là nút đầu tiên của đối tượng XML. Nếu chúng ta đi xâu vào 1 lần nữa với firstChild CODE myXML = new XML(" Gary 47 "); trace(myXML.firstChild.firstChild); Kỳ này output window sẽ cho ra Gary , vì phần tử name là nút đầu tiên của user Ngoài cách trên ra, còn 1 cách nữa là dùng childNodes, là ma trận của của các nút. Cùng một ví dụ trên nhưng có thể dùng như sau với chidlNodes CODE myXML = new XML(" Gary 47 "); trace(myXML.childNodes[0].childNodes[0]); Dưới nút name, chúng ta còn một nút nữa dưới nút name, và có thể dùng cách trên để lấy nút đó: CODE myXML = new XML(" Gary 47 "); trace(myXML.childNodes[0].childNodes[0].childNodes[0]); và output window sẽ cho ra chữ Gary. Đây là nút văn bản (text node) của nút name. Nhìn thì tưởng đây là tận cùng rồi, không thể xuống sâu hơn được nữa, vì đây là nút cuối cùng, nhưng nếu bạn muốn lấy giá trị của nó như là chuổi văn bản thì bạn có thể đi thêm 1 bước nữa như sau: CODE myXML = new XML(" Gary 47 "); trace(myXML.childNodes[0].childNodes[0].childNodes[0].nodeValue); Nếu bạn muốn lấy cái ID ở trong nút thứ 2 thì thay đổi như sau: CODE myXML = new XML(" Gary 47 "); trace(myXML.childNodes[0].childNodes[1].childNodes[0].nodeValue); Trang 121
  13. * Để giải thích thêm về đoạn code trên, nếu bạn chỉ dùng childNodes thì kết quả sẻ là 1 đối tượng, còn nếu bạn dùng nodeValue thì sẽ ra chuỗi. Bạn có thể thử bẳng đoạn code mình viết dưới đây CODE myXML = new XML(" Gary 47 "); myVar1 = myXML.childNodes[0].childNodes[0].childNodes[0]; myVar2 = myXML.childNodes[0].childNodes[0].childNodes[0].nodeValue; trace ("myVar1: " +typeof(myVar1)); trace ("myVar2: " +typeof(myVar2)); và output window sẽ cho bạn thấy rõ, cái nào law đối tượng và cái nào là chuỗi. Tự tạo XML từ "tay trắng" đKhông biành dịch nhết dưịch câu này sao cho trên vậy. đúng nghĩa với "Creating XML from Scratch". Các cách tạo XML ở trên đều từ 1 chuỗi văn bản, nhưng nếu như bạn không có 1 chuỗi văn bản nào trước thì sao? Bạn có thể dùng createElement để tạo ra các nút mới và dùng createTextNode để tạo ra các text node. Tuy nhiên 2 lệnh trên chỉ tạo ra nút chứ không thêm vào trong XML, vậy bạn phải thêm nó vào bằng lệnh appendChild. Để minh hoạ, chúng ta sẽ tạo một XML tương tự như trên nhưng với các lệnh vừa đề cập. CODE myXML = new XML(); newElement = myXML.createElement("user"); myXML.appendChild(newElement); newElement = myXML.createElement("name"); myXML.childNodes[0].appendChild(newElement); newText = myXML.createTextNode("Gary"); myXML.childNodes[0].childNodes[0].appendChild(newText); newElement = myXML.createElement("ID"); myXML.childNodes[0].appendChild(newElement); newText = myXML.createTextNode("47"); myXML.childNodes[0].childNodes[1].appendChild(newText); Nếu bạn muốn thay đổi giá trị của text node, thì bạn chỉ cần dùng nodeValue Trang 122
  14. CODE myXML.childNodes[0].childNodes[1].childNodes[0].nodeValue = 53; 1.4 Thuộc tính Thuộc tính (Attribute) gồm có từ khoá và giá trị của từ khoá đó, và dùng để định rõ một thành phần hơn. Ví dụ, đoạn XML dưới dây với attribute type làm rõ nghĩa của thành phần name hơn, ("alias" là bí danh) CODE Gary 47 Nếu bạn muốn đưa đoạn code trên vào trong XML object thì phải đổi dấu " (ngoặc kép) thành dấu ' (ngoặc đơn) CODE trace(myXML.childNodes[0].childNodes[0].attributes.type); Còn một cách nữa cũng cho ra kết quả như trên là dùng [] CODE trace(myXML.childNodes[0].childNodes[0].attributes["type"]); Và bạn có thể thay đổi giá trị của attribute, hay thêm attribute mới như sau: CODE myXML.childNodes[0].childNodes[0].attributes["type"] = "real"; Với câu trên, nếu attribute type chưa có thì nó sẽ được tạo (trong sách các đoạn code trên tác giả viết lộn giữa type và alias, nếu bạn so sánh giữa sách và bài này thì sẽ thấy sự khác biệt, và có thể các source file cũng sẽ không chính xác, vậy các bạn cần kiểm tra lại) Trang 123
  15. Khác với node, attribute không thể truy cập bằng ma trận (array) nên bạn không thể dùng các lệnh như length hay dùng [] với index number. Nhưng bạn có thể dùng vòng lặp for in để truy cập từng attribute của node. CODE myXML = new XML(" Gary 47 "); for(attr in myXML.childNodes[0].childNodes[0].attributes) { trace(attr+": "+myXML.childNodes[0].childNodes[0].attributes[attr]); } output window sẽ cho ra: alias và verified 2. Thêm vài AS về XML Bạn cũng cần biết thêm một số điều về đối tượng XML. Nhất là điểm sau, bất cứ một phần nào của đối tượng XML cũng có thể là một đối tượng XML riêng biệt. Ví dụ bạn có thể lấy cái node đầu tiên của đối tượng XML và quy thành một biến CODE myXML = new XML(" Gary 47 "); thisUser = myXML.childNodes[0]; thisUserName = thisUser.childNodes[0]; thisUserNameText = thisUserName.childNodes[0].nodeValue; thisUserID = thisUser.childNodes[1]; thisUserIDText = thisUserID.childNodes[0].nodeValue; Bạn có thể biết được số node ở trong ở trong một node khác bẳng thuộc tính length của childNodes. Ví dụ, user node có 2 node ở trong, vậy bạn có thể biết được bằng với đoạn code sau: CODE myXML = new XML(" Gary 47 "); trace(myXML.childNodes[0].childNodes.length); Ngoài việc có tểh tìm được giá trị của một node văn bản bằng nodeValue, bạn có thể bíết được tên của thành phần (hay thẻ) với nodeName. Ví dụ bạn có thể lấy được tên của thành phần (thẻ) đầu tiên của user là name như sau: CODE Trang 124
  16. myXML = new XML(" Gary 47 "); trace(myXML.childNodes[0].childNodes[0].nodeName); Bạn có thể biết được một node là thành phần của XML hay là một node văn bản (text node) bằng với thuộc tính nodeType. Nếu nodeType là 1 thì có là 1 thành phần của XML và có thể có nhiều thành phần ở trong node đó, nếu là 3 thì node đó chính là node văn bản. Printing Không phức tạp như trình duyệt hoặc Server Cominucation, in ấn là một cách mà FLash truyền dữ liệu ra ngoài. Khả năng in ấn của FLash là rất hữu ích vì nó cho phép chúng ta xây dựng những văn bản mà người sử dụng có thể in ra nội dung từ file flash của bạn.Đây thường là lựa chọn tốt hơn dựa vào hàm in ấn của trình duyệt . Trong phần này chúng ta sẽ : - Học cách thiết lập movie của bạn cho việc in ấn - Học cách sử dụng các lệnh in - Tạo ra một biểu mẫu có thể in được 2 - Đặt tên cho frame Bạn sẽ chỉ định những frame được in bằng ký hiệu "#p" . Nếu ký hiệu đó không được đặt lên frame nào thì Flash sẽ in ra toàn bộ movie của bạn. Ngược lại, nếu bạn đặt từ hai ký hiệu trở lên trong movie của bạn thì flash sẽ in ra tất cả những frame đó. Hình 1 cho ta thấy timeline với hai frame đã được đặt ký hiệu in. Chú ý rằng, tất cả những frame có chưa ký hiệu in này sẽ được đặt ở một layer riêng. Theo cách đó, bạn có thể đặt được nhiều ký hiệu trên nhiều frame. Và nó cũng thuận tiện hơn khi bạn không muốn sử dụng ký hiệu "#p" như một label thật cho keyframe. *Chú ý: Khi bạn đặt từ hai ký hiệu in trở lên, khi test movie, Flash sẽ xuất hiện lời cảnh báo : "WARNING : Duplicate layer " Đó là điều rủi ro có thế xảy ra, nhưng cũng sẽ không ảnh hưởng đến movie của bạn trừ phi bạn sử dụng label "#p" trong câu lệnh "gotoAndStop" hoặc những lệnh tương tự Trang 125
  17. 3- Lên kế hoạch in Bạn cần phải suy nghĩ và lên kế hoạch cho movie của bạn khi muốn movie có khả năng in. Vì không thể chỉ in một frame hiện tại nên bạn cần tạo ra những frame có khả năng in. Chú ý rằng mọi thứ tồn tại trên movie của bạn sẽ được in ra. Nó bao gồm cả nút Print ( để khi nhấn vào sẽ thực hiện lệnh in), nếu trong movie có tồn tại. Vì vậy chúng ta cần phải có một frame chứa nút Print, và một frame khác tương tự nhưng không có nút Print cũng như các yếu tố khôgn cần thiết khác. Frame thứ hai này sẽ được dặt nhãn là "#p" Bạn có thể bố trí bằng cách sử dụng timeline chính. Ví dụ bạn có một menu và một nút Prin trên hai layer riêng biệt, mà cần có trong nội dung của biểu mẫu in. Những layer này nếu bạn không muốn in ra thì không cần kéo chũng sang frame có nhãn "#p" hai hình sau thể hiện điều này. Hình thứ nhất,là frame mà người dùng sẽ thấy xuất hiện trên trang web. NÓ chứa nội dung. nút Print và menu Ngược lại, trong hình hai là nội dung mà người duyệt web không thấ y được, ít nhất là trên màn hình. Frame này được đặt tên là "#p" bạn có thể thấy trên timeline.Layer Buttons không sử dụng keyframe giống như ở frame 1. Ngoài việc chặn nút Print không đựoc in ra, có thể thêm vào frame này một số thông tin sẽ được in ra như địa chỉ, Trang 126
  18. Bây giờ bạn đã biết làm thế nào để chuẩn bị cho một biểu mẫu in, bây giờ cùng học AS cần thiết II> Các câu lệnh Có hai lệnh in chính được sử dụng. Chúng có một khác biệt rất nhỏ, nhưng về căn bản là hoạt động giống nhau. 1- Print Lệnh thứ nhất là QUOTE Print Lệnh này bao gồm hai tham số. Tham số thứ nhất là đối tượng để in. Thương là timeline chính, hoặc "_root". Bạn cũng có thể sử dụng "this". Tuy nhiên, nếu bạn không muốn in những frame trong movie, bạn có thể sử dụng tham chiếu tới movie đó. Tham số thứ hai là một trong ba tuỳ chọn sau : QUOTE bframe Trang 127
  19. QUOTE bmovie QUOTE bmax Các tham số này giúp FLash có thể co dãn văn bản in theo ý của người sử dụng. Flash có thể co dãn văn bản in tới kích thước của trang giấy mà không bóp méo văn bản. Ví dụ nếu frame được in có kích thước 550x400, thì chiều ngang sẽ được phóng to tới kích thước 550px chiều dọc có thể sẽ được scale theo tỷ lệ. Khi sử dụng tuỳ chọn "bframe", từng frame sẽ tự scale để lấp đầy kích thước của trang đó. Nếu frame thứ nhất có nội dung với kích thước là 550x400 nhưng frame thứ hai chỉ chứa nội dung có kích thước 275x200, khi đó frame thứ hai sẽ tự động scale gấp đôi kích thước ban đầu. khi sử dụng tuỳ chọn "bmax", Flash sẽ kiểm tra toàn bộ các frame được in để xác định xem frame nào có kích thước lớn nhất. Các frame còn lại sẽ scale dựa trên kích thước của frame lớn nhất, tính theo tỷ lệ. Điều này taọ nên các frame có kích thước tỷ lệ với nhau Ví dụ, frame lớn nhất có kích thước 550x400, và nó lấp đầy trang in. Frame khác chỉ có kích thước 275x200, nó chỉ chiếm một nửa trang in. Tuỳ chọn cuối cùng là "bmovie", trường hợp này bạn cần phải làm thêmm một việc nhỏ nữa, đó là tạo ra frame mới có chưa một khung. Khung này sẽ xác định kích thước lớn nhất được in ra đối với văn bản (bằng kích thứoc của khung). Bạn phải đặt tên frame này với ký hiệu "#b". Và flash sẽ sử dụng kích thước của khung để scale toàn bộ các frame còn lại. Nếu có một phần văn bản này nằmg ngoài khung in chúng sẽ không được in ra. Sau đây là ví dụ về lệnh "Print" : QUOTE on(release) { print(this,"bframe"); } Như bạn đã thấy, tuỳ chọn được coi như một chuỗi và được đặt trong dấu "" 2-PrintAsBitmap ĐCâu liều khác biệnh này làm việt là lệnh Print sệc tương tẽ gự nhửi các ư lệnh Print vđối tượng ớđồi hai tham s hoạ và font chố tươững t tớựi máy in. Sau . đó, máy in sẽ xây dựng lại các vector và nội dung để in ra. Trang 128
  20. Ngược lại, PrintAsBitmap sẽ chuyển toàn bộ nội dung thành một ảnh bitmap lớn và Đgửiểi tm thuới máy in. ận lới nhất của PrintAsBimap là độ trong suốt của văn bản cũng được in ra. Nếu bạn có một đối tượng đồ hoạ bán trong suốt, chắc có ưu điẻm chắn bạn sẽ cần đến chức năng in này, đồng thời nó cũng hoạt động tốt với nhiều loại máy in hơn. Lệnh in chính là văn bản được in ra có tính thẩm mỹ cao, đường cong smooth hơn và chữ rõ ràng hơn khi được in ra. Nó cũng nhanh hơn khi in qua mạng. Nguyên tác chung nhất là sử dụng lệnh PrintAsBitmap khi bạn thật sự chắc chắn kết quả sẽ giống như nội dung hiển thị trên màn hình. Sử dung Print khi văn bản không cần độ chính xác cao hoặc khi bạn xây dựng movie để điều khiển môi trường như mạng nội bộ. Chú ý: Nếu bạn sưe dụng movie qua internet, lệnh in chỉ làm việc khi tất cả các frame trong movie được load xuống. Thao tác : Tạo biểu mẫu in Một điều mà người dùng ghét nhất trên một website là một biểu mẫu mà chúng ta phải in ra, điền vào, rồi gửi đi . Chúng ta đang sử dụng máy tính, đột nhiên lại phải đi kiếm cái bút trên bàn để viết ? Vì vậy tại sao chúng ta không tạo ra biễu mẫu cho phép điền thông tin vào, sau đó được in ra vời đầy đủ nội dung đã được nhập vào. Chúng ta sẽ làm ví dụ đơn giản này, và sẽ thấy chúng thuận tiện hơn rất nhiều so với một biêt mẫu html yêu cầu người sử dụng in ra toàn bộ nội dung của site. Bạn hoàn toàn có thể điề khiển những gì sẽ được in ra, vì vậy những thứ linh tinh trên trang web có thể được bỏ qua và những yếu tố mới như email address có thể được thêm vào. 1- Tạo một movie mới 2- Tạo ra các trường nhập dữ liệu (ví dụ tên, tuổi, địa chỉ, giới tính, email ) (xem hình) sau đó đặt tên layer này là CONTENT Trang 129
  21. 3-Đặt tiêu đề cho trường lên phía trên ô nhập liệu 4-Tạo thanh tiêu đề cho Form. Chú ý,hai loại tiêu đề này sẽ được đặt ở hai layer riêng biệt . 5-Tạo nút Print và đặt trong layer tên là Buttons 6-CHèn đoạn mã sau cho button : QUOTE on (release){ print (this, "bmax"); } Trang 130
  22. 7- Thêm Frame thứ hai cho movie, kéo Title Bar và Content sang frame 2 Tạo blank keyframe cho layer Buttons và Titles, vì chúng sẽ có nội dung khác trong frame thứ hai 8- Trong frame thứ hai của layer Title, đặt một tiêu đề khác. Ví dụ, nếu frame thứ nhất là "Fill out that application" thì ở frame thứ hai chỉ cần là Appilcation 9- Sau đó, biểu mẫu đã sẵn sàng để điền vào. Tiêu đề cũ sẽ biến mất, bạn có thể nhìn thấy tiêu đề mới trong hình 10- Thêm một layer mới tên là Signature. Đặt một keyframe ở frame thứ hai của layer này. Thêm đường ngăn cách và địa chỉ trong frame này. Nếu làm đúng thì frame 1 của layer này sẽ không có gì, nội dung chỉ tồn tại ở frame 2 Trang 131
  23. 11- Thêm layers tên Frame Labels . Đặt trong đó hai keyframe. Keyframe thứ 2, chúng ta đặt ký hiệu "#p" . Keyframe thứ nhất chèn code QUOTE stop(); đượTest movie cc in ra vớủi tiêu a bạn. Bđề "Application", chạn hãy điền vào biữể ký, và u mẫu địđó, và a chỉ ấn nút Print. Frame thứ hai sẽ Tóm tắt Để in được các frame trong một movie bạn cần phải đặt label cho chúng là "#p". Bạn có thể đặt tên cho một hoặc nhiều frame trong cùng một movie. Mọi thứ trong frame "#p" sẽ được in ra. Bạn có thể trang trí tuỳ thích đối với biểu mẫu được in ra, trừ những yếu tố như menu. Bạn có thể sự dụng lệnh "Print" để in các frame sử dụng vector shape để gứi tới máy in. Tuy nhiên, nếu cần in những đối tượng đồ hoạ bán trong suốt hoặc chắc chắn rằng tất cả những biểu mẫu in ra giống nhau, bạn có thể sử dụng lệnh PrintAsBitmap Trang 132
  24. Bài 8. Sử dụng component Có 7 component gắn liền kèm theo chương trình Flash: CheckBox, ComboBox, ListBox, PushButton, RadioButton, ScrollBar, ScrollPane. Để thêm một component vào movie của bạn, bạn có thể click đúp lên component trong bảng Component, hoặc nhấn và kéo một component vào stage. 1. PushButton Click và kéo component PushButton vào stage sẽ tạo một instance (thể hiện) mới của component PushButton trên màn stage. Khi đó bạn đã thêm một số phần tử Library vào trong movie. Rất may là các phần tử này được cất trong các folder rất gọn trong Library (thư viện), vì thế chúng cũng không ảnh hưởng mấy đến công việc của bạn. Component PushButton trên stage trông rất đơn giản: chỉ là một khung với từ "PushButton" ở giữa. Bạn nhớ bật tính năng Live Preview (xem trước) của Flash bằng cách chọn Control >Enable Live Preview. đểSau khi PushButton đổi tên. Hai thông sđã ốở có th trên stage, bể thiết đặạt cho component PushButton là n có thể click chọn nó và mở bảng Properties Label (nhãn): ta đổi thành Press Me ! và Click Handler (quản lý sự kiện nhấn nút): đây là tên của hàm được gọi khi nút được click. Hàm này phải nằm trong cùng Timeline với nút; vì thế nếu nút đặt ở level gốc (root level), hàm phải ở trên Timeline chính. Ta thiết đặt Click Handler thành buttonPressed (nút đã được nhấn). Ngoài ra bạn đặt cho component một instance name (tên minh họa) là testButton (kiểm tra nút). Bây giờ tất cả công việc phải làm là viết hàm buttonPressed. Dưới đây là một ví dụ đơn giản. Hàm này chỉ gửi một vài dòng text ra cửa sổ Output: ActionScript function buttonPressed(buttonInstance) { if (buttonInstance == testButton) { trace("Test Button Pushed."); Trang 133
  25. } else { trace(buttonInstance._name); } } Mỗi hàm quản lý nút sẽ chuyển một tham số: một tham chiếu đến nút gọi hàm. Vì thế bạn có thể kiểm tra instance này có phải có tên là testButton hay không. Hàm ví dụ ở trên sẽ chuyển thông báo "Test Button Pushed" nếu nút được nhấn là testButton, và in ra tên minh họa của nút nếu nút bị nhấn không phải là testButton. Bạn có thể xem ví dụ mẫu này trong movie 21pushbutton.fla. 2. CheckBoxes Component CheckBox (hộp kiểm) tương tự như cái mà chúng ta đã tạo ở giờ 15 (anh em dịch sau nhé). Để tạo một CheckBox component, click đúp vào nó trong bảng Components, hoặc click và kéo nó lên trên stage. Để tạo một instance thứ hai, mở folder Flash UI Components trong thư viện Library và kéo component CheckBox lên trên stage. Trong ví dụ movie 21checkboxes.fla, tôi đã tạo 3 hộp kiểm (CheckBoxes). Nếu bạn chọn một component trong chúng và mở bảng Properties, bạn sẽ thấy nó có nhiều thông số hơn so với component PushButton. Bổ sung vào các thông số Label và Change Handler, giờ đây bạn có cả Initial Value (giá trị ban đầu) và Label Placement (sắp xếp nhãn). Thông số Initial Value là true hoặc false, tùy thuộc vào việc bạn muốn hộp kiểm ban đầu được đánh dấu hay (right hoặc left) so vố Label Placement cho phép bới ô kiểm. Right là sắp xếạp mn sắặp xc địếnh. Np các nhãn ếu bạn chuyở bên phển thành left, ải hoặc trái không. Thông s dòng chữ ghi nhãn của hộp kiểm sẽ xuất hiện ở bên trái của ô. Trong movie mẫu, tôi đặt tên cho 3 instance CheckBox là option1, option2, và option3. Tôi cũng đặt nhãn (label: phần text bên cạnh ô kiểm) là Option One, Option Two, và Option Three. Thông số Change Handler của mỗi instance được đổi thành changeOptions. Tôi đặt hàm changeOptions trong timeline chính. Hàm này sẽ được thực thi khi nào một trong các hộp kiểm CheckBox được click vào. Nó sẽ gửi tên và trạng thái mới của CheckBox ra cửa sổ Output. Trang 134
  26. ActionScript function changeOptions(checkBoxInstance) { trace(checkBoxInstance._name+": "+checkBoxInstance.getValue()); } đượTrong 21checkboxes.fla, tôi cc đặt tên là doneButton và sũng thêm vào mẽ gọi hàm buttonPressed. Hàm này sột component PushButton. Nút này ẽ lặp đi lặp lại với tất cả các CheckBox và gửi trạng thái của chúng (được đánh dấu hay chưa) ra cửa sổ Output. ActionScript function buttonPressed(buttonInstance) { if (buttonInstance == doneButton) { trace("Option One: "+option1.getValue()); trace("Option Two: "+option2.getValue()); trace("Option Three: "+option3.getValue()); } } Thay vì gửi các kết quả ra cửa sổ Output, hầu hết bạn sẽ muốn sử dụng chúng trong các dạng khác. Ví dụ, bạn có thể đặt chúng trong một đối tượng LoadVars để chúng có thể gửi tới một server. 3. RadioButtons RadioButtons giống như CheckBoxes, ngoại trừ việc chúng được sắp xếp thành các nhóm. Tại một thời điểm, bạn chỉ có thể chọn một nút RadioButton trong một nhóm. File mẫu 21radiobuttons.fla có ba component RadioButtons. Nếu bạn chọn một trong những nút đó và mở bảng các thuộc tính (Properties panel) cho nút, bạn sẽ nhìn thấy component này có nhiều thông số hơn so với các component CheckBox hay PushButton. Thêm vào các thông số bạn đã thấy trong component CheckBox là hai thông số Group Name (tên nhóm) và Data (dữ liệu). Thông số Group Name xác định xem RadioButton thuộc về nhóm nào. Trong movie mẫu, cả ba RadioButtons đều thiết đặt Trang 135
  27. thông số này là firstGroup. Nếu đã có một nhóm nút thứ hai với một tên khác, thì hai nhóm này được xem là độc lập với nhau khi quyết định RadioButton nào được bật. Thông số Data là tùy chọn và bạn có thể sử dụng trong các đoạn mã của mình. Bạn có thể truy cập (access) nó bởi hàm getData(). Bạn có thể lưu trữ các lệnh mà đoạn mã của bạn thực thi khi nút radio được chọn. Trong movie mẫu, ba RadioButtons được đặt tên là choice1, choice2, và choice3. Nhãn của ba nút này là Choice One, Choice Two, và Choice Three. Việc xác định xem người dùng đã chọn nút radio nào sẽ được thực hiện khi PushButton trong movie được click. Sau đó PushButton sẽ chạy đoạn script này để quyết định xem lựa chọn nào đã được thiết lập. Đoạn script sẽ lặp đi lặp lại với cả ba nút để tìm kiếm một nút trả về true từ hàm getState(). Điều này nghĩa là nút RadioButton đó đã được bật. ActionScript function buttonPressed(buttonInstance) { if (buttonInstance == doneButton) { var choice = "none"; for(i=1;i<=3;i++) { if (this["choice"+i].getState()) { choice = this["choice"+i]._name; } } trace("Choice: "+choice); } } 4. ListBox Một ListBox (hộp danh sách) là một phương pháp đơn giản cho phép người dùng lựa chọn một hoặc nhiều tùy chọn. Một ListBox có thể đặt như một thiết lập của CheckBoxes hoặc RadioButtons. Nó đặc biệt hữu ích khi bạn có nhiều lựa chọn nhưng khoảng trống trên màn hình có hạn. Một khung danh sách trong như một trường text cuộn trên thực tế là như vậy. Mỗi dòng tương ứng với một lựa chọn riêng biệt của người sử dụng. Nếu có nhiều lựa chọn hơn vùng mà khung danh sách có thể hiển thị thì người dùng có thể cuộn lên và cuộn xuống để xem hết các mục trong danh sách. Trang 136
  28. Khi bạn tạo một instance mới của component ListBox, bạn phải thiết đặt thông số Select Multiple (lựa chọn nhiều dòng) của nó. Nếu tham số này là true, người dùng có thể dùng các phím Shift, Command, hoặc Ctrl để lựa chọn nhiều hơn một dòng. Nếu là false, mỗi lần bạn chỉ có thể chọn được một dòng. Thêm vào đó, bạn phải thiết đặt thông số Labels (nhãn). Tuy nhiên, đây không phải là một giá trị đơn mà là một mảng các giá trị. Flash có một giao diện đặc biệt (special interface) cho việc nhập các giá trị này. Khi bạn click trên tham số Labels trong bảng Properties, bạn sẽ bắt gặp một hộp thoại cho phép bạn nhập vào một mảng các mục (item) cho các thông số khác. Bạn cũng có một tham số Data (dữ liệu) để tạo một mảng dữ liệu. Thông số Data này, giống như thông số data đã dùng với các nút radio, cho phép đoạn mã của bạn lấy thông tin bổ sung về các lựa chọn mà người dùng đã chọn. Tuy nhiên, thông số này không bắt buộc phải có. Trong movie mẫu 21listbox.fla, tôi đặt một component ListBox với ba lựa chọn trên màn hình. Chúng được thiết đặt là có thể chọn nhiều dòng. Khi người dùng click lên trên một dòng, hàm listBoxChange sẽ được gọi. Điều này được xác định bởi thông số Change Handler của nó. Hàm này cho bạn biết dòng nào (lựa chọn nào) vừa được chọn: ActionScript function listBoxChange(listBoxInstance) { trace(listBoxInstance.getValue()); } Trong movie mẫu này cũng có một component PushButton. Khi nó được click, nó sẽ thực thi hàm này. Nó sử dụng hàm getSelectedItems() để lấy một mảng các lựa chọn (choices) đã chọn trong list box. Mỗi mục chọn trong mảng là một đối tượng với một thuộc tính label và data. Vì chúng ta đã không sử dụng các thuộc tính data của hộp danh sách (list box), nên thay vào đó chúng ta sẽ lấy các nhãn (label). ActionScript function buttonPressed(buttonInstance) { if (buttonInstance == doneButton) { items = myListBox.getSelectedItems(); for(var Trang 137
  29. i=0;i<items.length;i++) { trace(items[i].label); } } } Bạn cũng có thể thêm hoặc bớt các dòng từ list box bằng cách sử dụng ActionScript. Ví dụ, addItem sẽ thêm một lựa chọn bổ sung vào list box. ActionScript myListBox.addItem("Choice Four"); Bạn có thể dùng addItemAt, removeItemAt, và replaceItemAt để thay đổi list box bởi ActionScript. 5. ComboBox Một combo box giống như một menu kéo xuống (pull-downl menu) ở đó người dùng cũng có thể gõ vào một giá trị. May thay, bạn cũng có thể tắt tùy chọn hiệu chỉnh giá trị. Khi đó combo box như một menu pull-down bình thường. Thông số để làm điều này là Editable (có thể hiệu chỉnh) trong hộp thoại Properties. Bổ sung cho tham số đó, bạn cũng có thể cung cấp các mảng chứa nhãn (Labels) và dữ liệu (Data). Một thông số khác của combo box là Row Count (số dòng). Các combo box có thể nhỏ như các list box. Khi người dùng click vào, chúng sẽ trải rộng thành một danh sách các lựa chọn. Nếu số lựa chọn vượt quá giá trị Row Count, một thanh cuộn sẽ xuất hiện ở bên phải cho phép người dùng cuộn lên xuống để lựa chọn. Cơ bản một combo box có thể có 3 trạng thái. Khi không hoạt động nó thu nhỏ thành một dòng. Khi click vào nó, combo box sẽ trải rộng thành danh sách tuỳ chọn, nếu số lựa chọn lớn hơn số dòng có thể hiển thị thì xuất hiện thêm thanh cuộn. Khi một người dùng chọn một lựa chọn mới trong combo box, bộ quản lý Click Handler sẽ được gọi. Dưới đây là một hàm đơn giản cho bạn biết nhãn của combo box đã chọn: ActionScript Trang 138
  30. function comboBoxChange(comboBoxInstance) { trace(comboBoxInstance.getValue()); } Bạn cũng có thể dùng getSelectedIndex() để lấy chỉ mục (tính từ 0) của mục đã chọn. Movie mẫu 21combobox.fla là một ví dụ về component ComboBox. 6. ScrollPane Hai component tiếp theo khác hẳn so với 5 component ở trên. Chúng không dùng để cho phép người dùng lựa chọn, nhưng dùng để hiển thị lượng thông tin lớn trong các khoảng nhỏ (cuộn mà lị). Component ScrollPane (ô cuộn) gồm có một thanh cuộn dọc, cuộn ngang và một vùng hiển thị hình chữ nhật. Thông số chính của component này là Scroll Content (cuộn nội dung). Đây là tên liên kết (Linkage name) cho một movie clip. Khi bạn chạy movie, movie clip được copy từ Library và đặt vào vùng hiển thị của ô cuộn. Sau đó các thanh cuộn sẽ cho phép người dùng nhìn thấy các phần khác nhau của movie clip. Bạn có thể xem ví dụ trong file 21scrollpane.fla. Nếu bạn thiết đặt thông số Drag Content là true, người dùng cũng có thể click vào trong vùng hiển thị và kéo hình trong đó chạy. Các thanh cuộn cũng thay đổi khi bạn kéo nội dung trong ô cuộn (chính là cái movie clip hiển thị trong ô đó). Mặc dù component ScrollPane không đòi hỏi bất kỳ ActionScript nào để làm việc, nhưng có rất nhiều hàm mà bạn có thể dùng để xác định xem phần nào của movie clip đang được xem hoặc để thay đổi chiều rộng (width) và chiều cao (height) của ô. Bạn cũng có thể dùng bảng Properties để thay đổi chiều rộng và chiều cao của ô cuộn. Khi bạn làm việc đó, ô cuộn trông bị méo mó trong Flash, nhưng no star where, nó sẽ ngon lành ngay khi bạn chạy movie. Một lệnh ActionScript rất hữu ích là loadScrollContent . Lệnh này sử dụng một địa chỉ URL và hiển thị một movie clip ở ngoài vào trong ô cuộn. Trang 139
  31. ActionScript myScrollPane.loadScrollContent("myMovieClipFile.swf"); Ô cuộn có thể được dùng như một trình duyệt hình ảnh. 7. ScrollBar Component cuối cùng là ScrollBar. Component này thêm các thanh cuộn vào trường text. Bạn có thể dùng component này mà không cần dùng bất kỳ code ActionScript nào. Chỉ việc kéo và thả một component ScrollBar vào một trường text (text field), tự nó sẽ thêm vào trường text. Component ScrollBar có ít thuộc tính Actionscript có thể sử dụng được. Ví dụ, bạn có thể sử dụng getScrollPosition() để lấy vị trí cuộn hiện tại và setScrollPosition() để thay đổi nó. Thực hành với Components Bây giờ chúng ta sẽ phối hợp 5 component khác nhau để tạo một form nhập dữ liệu: CheckBox, RadioButton, ComboBox, ListBox, và PushButton components. Tạo một Flash movie mới. Tạo ba component CheckBox. Đặt tên cho chúng là checkbox1, checkbox2, và checkbox3. Nhãn của chúng là: Macintosh, Windows, Linux. Tạo ba component RadioButton. Đặt tên cho chúng là radiobutton1, radiobutton2, và radiobutton3. Nhãn của chúng lần lượt là như trên Tạo một ComboBox component. Đặt tên cho nó là combobox. Thêm một vài nhãn (label) vào đó để người dùng có thể chọn lựa. Tạo một ListBox component đặt tên là listbox. Thêm bao nhiêu nhãn vào tuỳ bạn. Đừng lo lắng về thứ tự của chúng vì chúng ta sẽ sắp xếp lại sau. Thiết đặt thông số ListBox Multiple Selections thành false. Dùng bảng Properties để tạo cho khung danh sách (list box) rộng 200 và cao 200 pixel. Trang 140
  32. Thêm một PushButton component. Đặt cho nó nhãn là Done và thông số điều khiển Click Handler là buttonPressed. Thêm dòng sau vào trong frame script. Nó sẽ sắp xếp lại nhãn của các mục trong component ListBox. ActionScript listbox.sortItemsBy("label","Asc"); Lệnh sortItemsBy làm việc rất tốt với component ComboBox. Bạn có thể dùng "label" hoặc "data" cho thông số đầu tiên. Điều đó tùy thuộc vào nhãn (label) hay các trường dữ liệu (data) sẽ được sử dụng để sắp xếp. Thông số thứ hai có thể là "Asc" (sắp xếp theo thứ tự tăng dần) hoặc "Desc" (giảm dần). Component PushButton sẽ gọi hàm buttonPressed. Chúng ta sẽ tạo hàm này theo từng đoạn nhỏ để xử lý từng phần của form. Hàm bắt đầu bằng việc tạo một mảng mới. Sau đó nó kiểm tra từng check box xem hàm getValue() của nó có phải là true không. Nếu là true, nhãn của check box đó sẽ được thêm vào mảng đó. Khi vòng lặp kết thúc, mảng own chứa bất kỳ lựa chọn nào mà người dùng đã làm với các check box. ActionScript function buttonPressed(buttonInstance) { if (buttonInstance == doneButton) { // sưu tập mảng của các CheckBoxes đã chọn own = new Array(); for(var i=1;i<=3;i++) { if (this["checkbox"+i].getValue()) { own.push(this["checkbox"+i].getLabel()); } } trace("Computers Owned: "+own); Trang 141
  33. Đoạn mã tiếp theo kiểm tra tất cả các component RadioButton và ghi nhớ xem component nào đã được bật (đã được chọn): ActionScript // xác định RadioButton nào đã lựa chọn favorite = "none"; for(var i=1;i<=3;i++) { if (this["radiobutton"+i].getState()) { favorite = this["radiobutton"+i].getLabel(); } } trace("Favorite: "+favorite); Component đơn giản nhất là combo box. Đoạn mã này chỉ đơn giản trả về giá trị của nó: ActionScript // lấy giá trị của ComboBox ComboBox nextPurchase = comboBox.getValue(); trace("Next Purchase: "+nextPurchase); Để check (kiểm) nhiều lựa chọn của list box, bạn cần lặp từ đầu đến cuối mảng trả về bởi getSelectedItems(). Sau đó bạn cần xem xét thuộc tính label của mỗi mục chọn (item). Đoạn mã sau sẽ làm điều đó và xây dựng một mảng chứa các nhãn đã lựa chọn: ActionScript // sưu tập các lựa chọn của ListBox uses = new Array(); items = listbox.getSelectedItems(); for(var i=0;i<items.length;i++) { uses.push(items[i].label); } trace("Uses: "+uses); } } Trang 142
  34. Nếu thực sự hiện tại bạn đang làm điều này, nên sử dụng các đối tượng có tính cấu trúc hơn là sử dụng lệnh trace. Cho ví dụ, bạn có thể tạo một đối tượng LoadVars để sau đó gửi thông tin đến máy chủ. Các component cThay đổi kiểu dáng (Style) của Flash vốn trông ủa một Componentđã rất đẹp. Nh ưng nếu tất cả các nhà phát triển Flash đều bắt đầu sử dụng chúng, thì tất cả các Flash movie của chúng ta trông sẽ na ná nhau. May thay, bạn có thể tuỳ chỉnh các component theo nhiều cách khác nhau. Bạn có thể dễ dàng tạo các giao diện riêng (custom skin) cho chúng. Dưới đây là ba cách tùy chỉnh component bằng cách sử dụng ActionScript. Global Customization (tuỳ biến chung) Sử dụng đối tượng globalStyleFormat, bạn có thể tùy chỉnh giao diện cho tất cả các component trong một lần. Đây là một ví dụ thay đổi màu chữ của tất cả các text trong tất cả các component thành màu xanh da trời (blue): ActionScript globalStyleFormat.textColor = 0x0000FF; globalStyleFormat.applyChanges(); Lệnh applyChanges chấp nhận sự thay đổi. Ngoài ra, bạn có thể thiết đặt nhiều thuộc tính khác. Dưới đây là một số thay đổi chi tiết: ActionScript globalStyleFormat.textColor = 0x0000FF; globalStyleFormat.textFont = "Arial"; globalStyleFormat.textSize = 18; globalStyleFormat.textBold = true; globalStyleFormat.applyChanges(); Bạn có thể thay đổi thành nhiều giá trị như font chẳng hạn. Số mục thay đổi trong kiểu dáng của các component quá dài để có thể liệt kê hết ở đây. Bạn có thể thay đổi màu sắc và kiểu dáng của các dấu kiểm trong CheckBoxes, các hình tròn trong những RadioButton, những mũi tên trong các thanh cuộn ScrollBars, màu nền, màu Trang 143
  35. sắc của vùng tô sáng (highlight colors), màu sắc các mục chọn, v.v Hãy xem trong chương trình Flash của bạn để biết đầy đủ thông tin về danh sách này. Grouped Customization (tùy chỉnh theo nhóm) Mặc dù đối tượng globalStyleFormat đã được sử dụng bởi tất cả các component trên stage, bạn vẫn có thể tạo cho các đối tượng của bạn kiểu dáng (style) riêng biệt chỉ dùng trong một vài component mà bạn chỉ định. Bạn thực hiện điều đó bằng cách tạo một đối tượng FStyleFormat. Khi bạn làm điều này, đối tượng mới của bạn sẽ có các thuộc tính giống như đối tượng globalStyleFormat. Ví dụ, bạn có thể tạo một đối tượng kiểu dáng (style object) và thiết đặt màu sắc của nó thành đỏ tươi như dưới đây: ActionScript myStyle = new FStyleFormat(); myStyle.textColor = 0xFF00FF; Các yếu tố khác của style không được thiết đặt chính xác trong đối tượng style này. Vì thế bạn có thể áp dụng style này cho một component, mà diện mạo của style không thay đổi. Để áp dụng kiểu dáng style này vào một component, hãy sử dụng lệnh addListener: myStyle.addListener(radiobutton1); Bạn nghĩ có vẻ kỳ quặc khi sử dụng với addListener, đúng là như vậy. Hãy hiểu rằng: bạn báo cho component để tiếp nhận (listen) đối tượng style. Single Component Customization (tùy chỉnh component riêng lẻ) Bạn cũng có thể thiết đặt một cách chính xác một trong những thuộc tính của style. Tuy nhiên, bạn không thể làm điều đó bằng cách sử dụng cú pháp chấm (dot) gọn và đẹp như bạn mong muốn. Thay vì thế, bạn cần phải dùng lệnh setStyleProperty. Lệnh Trang 144
  36. muốn thi đặết thut đặt cho nó ộc tính style dở tham sưới dố thạng mứ hai. ột chuỗi ở tham số đầu tiên và giá trị mà bạn này sẽ ActionScript checkbox1.setStyleProperty("textColor",0xFF0000); Bằng cách sử dụng ba phương pháp thiết đặt style cho các component, bạn có thể tùy chỉnh các component theo như mong muốn. Trang 145
  37. Bài 9. Điều khiển âm thanh với ActionScript Có hai cách để bạn có thể cho âm thanh vào đoạn phim Flash của mình. Cách thứ nhất là đặt nó vào ngay timeline. Việc này không cần phải sử dụng mã. Cách thứ hai là sử dụng ActionScript để chơi những đoạn nhạc được lưu trữ trong Library. 1. Tìm hiểu cách truy xuất âm thanh với ActionScript Việc kết nối và chơi nhạc: Đ iều đầu tiên mà bạn cần trước khi chơi một đoạn nhạc với ActionScript là kết nối đến nó. Bạn hãy "Import" file nhạc vào Library, bấm phải chuột chọn "Linkage", rồi đánh dấu vào các phần export. Bạn cũng có thể đặt một cái tên "Identifier" khác cho đoạn nhạc thay vì để tên file nhạc. Ví dụ, nếu bạn "import" file nhạc "mysound.wav", nó sẽ xuất hiện trong Library với cái tên mysound.wav. Khi bạn chọn Linkage, và đánh dấu export, nó sẽ được đặt tên "Identifier" ngay là "mysound.wav", nhưng bạn có thể sửa thành bất kì tên gi bạn muốn(vd: nhac1). Đó chính là cái tên mà bạn sẽ sử dụng trong ActionScript. Để chơi một đoạn nhạc bằng ActionScript, bạn phải làm ít nhất ba bƣớc: Đầu tiên là tạo một đối tượng "Sound" : ActionScript mySound = new Sound(); Thứ hai, bạn cần gắn đoạn nhạc trong thư viện vào đối tượng "Sound" này: mySound.attachSound("mySound.wav") //mySound.wav là tên bạn đã đặt trong phần "Identifier" Cuối cùng, bạn hãy ra lệnh cho đối tượng "Sound" của bạn chơi đoạn nhạc: ActionScript mySound.start(); Và đây là một đoạn đơn giản đặt vào trong một Button để chơi đoạn nhạc từ Library: Trang 146
  38. ActionScript on (release) { mySound = new Sound(); mySound.attachSound("poof.wav"); mySound.start(); } Bạn có thể tham khảo một ví dụ đơn giản trong file "22playsound.fla" kèm theo quyển sách này. Bạn cũng có thể xem qua một phương pháp hơi phức tạp một tí trong file "22playsoundfunction.fla". Trong file Flash này, có một function tên là "playsound" được đặt ở timeline chính. "function" này bao gồm tất cả các mã mà bạn cần để chơi một đoạn nhạc đơn giản. ActionScript function playSound(soundName,balance) { var mySound = new Sound(); mySound.attachSound(soundName); mySound.start(); } Với việc sử dụng function này, bạn đã đơn giản hóa đoạn ActionScript nên bạn sẽ chỉ cần sử dụng đúng một dòng lệnh để chơi nhạc. Đây là đoạn mã đặt trong một Button để sử dụng function này: ActionScript on (release) { playSound("poof.wav"); } Câu lệnh "start" Câu lệnh "start" trong ví dụ trên có thể được sử dụng bằng nhiều cách. Bạn có thể thêm hai tham số nữa vào nó để thay đổi cách mà đoạn nhạc sẽ được chơi. Tham số thứ nhất bạn có thể thêm được gọi là "offset". Nó giúp bạn có thể chơi bản nhạc từ bất kì vị trí nào bạn muốn chứ không phải chơi lại từ đầu. Ví dụ, dòng lệnh này sẽ bắt đầu chơi từ vị trí thứ 1000 miligiây của đoạn nhạc(1 giây sau khi bật): Trang 147
  39. ActionScript mySound.start(1000); Tham số thứ hai của câu lệnh "start" là số lần lặp lại của đoạn nhạc. Ví dụ, nếu bạn muốn bắt đầu bản nhạc tại vị trí sau 1 giây và lặp ba lần, câu lệnh sẽ như sau: ActionScript mySound.start(1000,3); Bắt đầu bản nhạc tại vị trí từ đầu và lặp ba lần: ActionScript mySound.start(0,3); Câu lệnh đi đôi với "start" là "stop". Khi bạn đang chơi một đoạn nhạc, bạn có thể đưa ra câu lệnh "stop" bất cứ khi này để ngừng hẳn đoạn nhạc. Bạn phải thêm vào tham số là tên (Identifier) của đoạn nhạc. Nếu không, lệnh "stop" sẽ ngừng tất cả các đoạn nhạc đang chơi. ActionScript mySound.stop("poof.wav"); Điều chỉnh âm lƣợng Bạn có thể sửa đổi đoạn trước và khi đang chơi bằng một số câu lệnh. Các câu lệnh này còn có thể điều chỉnh âm lượng của đoạn nhạc, trong tất cả loa hay chỉ từng cái. đếLện 100 là bnh "setVolume" là cách ạn có thể vặn to, nhđiều chỏ mỉnh ột đơđon giạn nhản nhạc: ất, bạn chỉ cần cho một tham số từ 0 ActionScript mySound.setVolume(50); Trang 148
  40. Trong file "22playsoundvolume.fla" bao gồm một nút Play và bốn nút khác để điều chỉnh âm lượng lần từ là 0, 10, 50 và cuối cùng là 100. Nút Play sẽ chơi một đoạn nhạc 100 lần nên bạn có thể thử điều chỉnh âm lượng trong lúc đang chơi nhạc. Chú ý là việc bạn điều chỉnh âm thanh của một đoạn nhạc sẽ không liên quan đến các đoạn nhạc khác. Vì vậy bạn có thể điều chỉnh các âm thanh khác nhau như nhạc nền và các tiếng động. Đối tƣợng "Sound" Đối tượng "Sound" có hai thuộc tính mà bạn nên biết đến. Thứ nhất là "duration" là độ dài của đoạn nhạc tính bằng miligiây. Thứ hai là "position" là vị trí mà đoạn nhạc đang chơi, cũng tính bằng miligiây. Ví dụ, nếu một đoạn nhạc có thuộc tính "duration" bằng 3000, có nghĩa là nó dài 3 giây. Nếu thuộc tính "position" bằng 1500 thì đoạn nhạc đang chơi ở chính giữa. Trong file "22tracksound.fla" thể hiện cách dùng "position" và "duration" để thể hiện của đoạn nhạc. Sau khi bắt đầu, một vạch đen sẽ chạy dần dần theo vị trí của đoạn nhạc. ActionScript onClipEvent(enterFrame) { // tính xem đã chơi được bao nhiêu của đoạn nhạc (giá trị từ 0.0 đến 1.0) percentPlayed = thisSound.position/thisSound.duration; // lấy độ dài của thanh barWidth = _root.bar._width; // đặt vị trí của dấu vạch _root.mark._x = _root.bar._x + barWidth*percentPlayed; } Khi đoạn nhạc kết thúc: Bạn có thể sử dụng thuộc tính "position" và "duration" để kiểm tra một đoạn nhạc hết hay chưa, khi đó hai giá trị này sẽ bằng nhau. Tuy nhiên nếu đoạn nhạc được lặp nhiều lần thì hai giá trị này sẽ bằng nhau mỗi khi cuối đoạn nhạc. Trang 149
  41. ĐMây là một cách tột function sốt hơn để kiẽể đượm tra khi nào c thực thi khi đoạđn nhoạn nhạc kạếc kt thúc là dùng "onSoundComplete". ết thúc hẳn. ActionScript mySound = new Sound(); mySound.attachSound("mySound.aif"); mySound.onSoundComplete = function () { trace("sound done!"); } mySound.start(); Đ iều chỉnh độ cân bằng: Bạn có thể điều chỉnh âm lượng của loa này to hơn loa khác thông qua lệnh "setPan". Điều này giống như giàn máy stereo. Bạn có thể đặt giá trị từ -100 đến 100. Nếu bạn để là -100, tất cả âm thanh sẽ được phát ra bên loa trái, còn 100 sẽ là loa phải. ActionScript mySound.setPan(-100); Bạn có thể tham khảo file "22monopan.fla". Khi bạn bấm nào nút "Play" bên trái, loa trái sẽ phát ra, bấm nút "Play" bên phải, loa phải sẽ phát ra. 2. Quản lý streaming cho movie Trong giờ này chúng ta sẽ tiến hành những bước sau: • Tìm hiểu, giám sát movie khi load • Làm 1 loader • Load các media movie ở bên ngoài vào flash (sound, image) Chúng ta bắt đâu với bước 1 nhé : Các Movie Flash đều có tính chất stream. Điều này có nghĩa là frame đầu tiên của movie sẽ bắt đầu ngay khi nó được nạp xuống, ko phụ thuộc vào việc cái frame cuối cùng đã được load xong hay chưa. Bạn có thể ko muốn việc này xảy ra. Ví dụ như movie của bạn là 1 đoạn animation ngắn, bạn có thể ko muốn nó bắt đầu cho đến khi movie được load hoàn Trang 150
  42. toàn từ web. Có vài cách để bắt movie đợi cho đến khi loading xong. Cách thông dụng nhất là ta tạo 1 loader frame. Đó là frame đầu tiên của movie. Nó sẽ quan sát tính chất của movie và xác định xem khi nao thì movie kết thúc việc loading. Để biết được có bao nhiều frame đã được load xuống bạn sử dụng tính chất _framesLoaded, còn để biết tổng số Frame của movie bạn sử dụng tính chất: _framesTotal. Bạn có thể sử dụng điều này trong 1 số trường hợp đơn giản. Ví dụ bạn đặt ở frame đầu tiên lệnh stop(); Ở đó ta tạo 1 button cho phép người sử dụng tiếp túc. Khi người sử dụng click vào btn bạn có thể dùng 1 đoạn script tương tự như sau để xác định xem phải làm gì tiếp theo: CODE on (release) { if (_root._framesLoaded == _root._totalFrames) { play(); } else { textDisplay = "Wait a few seconds and press again."; } } Nếu như movie chưa được load hết thì text field mà ta đã liên kết qua var textDisplay sẽ thông báo cho user. Bạn cũng có thể sử dụng kĩ thuật này trong 1 phần của 1 movie dài. Ví dụ btn có thể nằm ở Frame 50 và chỉ để người sử dụng tiếp tục khi mà 50 frames tiếp theo đã sẵn sàng. Ta dùng đoạn code sau để thực hiện: CODE onClipEvent(load) { _root.textDisplay = "Waiting for the next sequence to load."; _root.stop(); } onClipEvent(enterFrame) { if (_root._framesLoaded >= 100) { _root.play(); } } Trang 151
  43. Đây là phần đầu cơ bản của 1 loader script. Tuy nhiên có các cách khác chính xác hơn để giám sát việc loading hơn là tính số frames. Bạn có thể sử dụng getBytesLoaded and getBytesTotal để tính tổng số file và số file đã load. Đây là đoạn script đặt vào trong 1 mc ở frame đầu tiên của movie. Ở frame đầu tiên bạn chú ý đặt thêm lệnh stop(); CODE onClipEvent(enterFrame) { if (_root.getBytesLoaded() == _root.getBytesTotal()) { _root.play(); } } Ở mỗi lần enterFrame điều kiện sẽ được kiểm tra và khi thỏa mãn tức movie được load hoàn toàn thì movie sẽ được play tiếp tục Chúng ta tiếp tục tiến hành làm 1 loader đơn giản để cho toàn bộ movie được load trước khi nó vượt qua frame 1 : 1.Mở 1 file mới. 2.Ở frame đầu ta tạo 1 keyframe 3.Tạo thêm 1 kf mới ở frame 2 Để có thể test cái loader 1 cách rõ ràng thì frame 2 nên chứa 1 movie tối thiểu là 100 K. Cách tốt nhất để tăng dung lượng là ta import 1 video. 4.Trở lại frame 1, chúng ta muốn có 1 movie chờ cho đến khi toàn bộ movie đã được load trước khi tiép tục sang frame 2 > cho 1 lệnh stop(); vào frame 1 này. Ta tạo 1 shape đơn giản và convert nó sang mc và tống cổ nó sang 1 góc màn hình mà người xem ko nhìn thấy (chuối rừng). Ta cho đoạn script sau vào: CODE onClipEvent(enterFrame) { bytesLoaded = _root.getBytesLoaded(); bytesTotal = _root.getBytesTotal() percentLoaded = Math.round(100*bytesLoaded/bytesTotal); _root.displayText = "Loading: "+percentLoaded+"%"; if (bytesLoaded == bytesTotal) { _root.play(); } } Trang 152
  44. đoạn script sẽ kiểm tra getBytesLoaded để xem liệu movie đã kết thúc việc loading chưa. Ở đây ta tính số phần trăm đã load (percentLoaded) và cho hiển thị con số này qua biến displayText ở root level Bạn đừng quên tạo 1 dynamic text field và đặt var cho nó là displayText nhe. Sẽ rất khó kiểm tra khi bạn test cái movie này với Flash player trên máy vì movie của bạn chạy nhanh quá, ko kịp nhìn cái loader. Bởi vậy nên publish nó lên 1 trang web rùi test . Hoặc bạn có thể giả thiết lập 1 cai modem 56 K Nào bây giờ goto website và test bạn sẽ thấy quá trình loading được hiện ở số phần trăm ở text field. Khi đạt đến 100% movie sẽ tiếp tục play. Bạn có thể kiểm tra movie của bạn với file: 23simpleloader.fla 3.Để cho cái loader của chúng ta thêm đẹp, chúng ta tiến hành bước 3 làm 1 loader phức tạp hơn có thêm 1 cái progess bar nữa nhé : các bước làm như sau: 1.Bắt đầu 1 movie mới 2.Vẽ 1 hình chữ nhật rộng với border 3.Chọn toàn bộ cái hình chữ nhật này và đặt chúng vào 1 mc bằng cách chọn insert và convert to mc. 4.Click 2 cái vào mc mới này để edit nó 5.Tách riêng phần fill và border của cái hình chữ nhật ra làm 2 layer 6.Copy cái fill của hình chữ nhật và tạo 1 layer mới để paste nó vào. Layer này nên nằm ở trước và layer có chứa hình chữ nhật cũ thì nằm sau nó. 7.Chọn hình chữ nhật mới này(cai fill) và chọn cho nó màu tối hơn. đăt vị trí khớp với cái border, phía trên hình chữ nhât cũ 8.Bây giờ ta convert nó sang mc và đặt instance name là barFill Double click vào mc mới này và ta chỉnh reg. point cho nó là góc tận cùng bên trái. Trang 153
  45. Trở lại movie chính, ta tạo thêm 1 layer mới. Và đặt 1 dynamic text ở đó. Đặt var cho nó là displaytext, bạn nhớ chọn font chữ đẹp dẹp và màu cũng đẹp đẹp 1 chút nhé Ở movie của timeline chính ta đặt đoạn code sau vào mc chính của chúng ta: CODE onClipEvent(load) { // initialize variables bytesLoaded = 0; bytesTotal = _root.getBytesTotal(); } Đoạn code enterFrame phải làm nhiều việc nhất. Nó có nhiệm vụ theo dõi số bytesLoaded và bytesTotal liên tục mỗi Frame. Biến percentLoaded có giá trị từ 0 đến 100. Và nó được sử dụng chính để thay đối _xscale của thanh Bar. Bạn còn nhớ là ta đã mặc định điểm reg. point của thanh Bar này ở góc bên trái ko? Chính vì vậy mà thanh bar sẽ dài ra theo giá trị của biến percentLoaded sang phía bên phải Khi mà số bytesLoaded = số bytesTotal thì display text sẽ hiện thông báo: "Loading Complete" và chuyển movie sang frame tiếp theo. CODE onClipEvent(enterFrame) { // if there is more to load if (bytesLoaded < bytesTotal) { // get current amount loaded bytesLoaded = _root.getBytesLoaded(); // calculate percentage percentLoaded = Math.round(100*bytesLoaded/bytesTotal); // if there is still more if (bytesLoaded < bytesTotal) { // display text displayText = "Loading: "+percentLoaded+"%"; // set scale of bar barFill._xscale = percentLoaded; // no more left Trang 154
  46. } else { // display complete displayText = "Loading Complete."; // fill out bar barFill._xscale = 100; // go to next frame _root.nextFrame(); } } } Ko biết hướng dẫn như trên các bạn đã hình dung ra cách làm chưa nhỉ. Nếu các bạn chưa hiểu thì cbt sẽ post thêm hình minh họa vào Timeline của chúng ta tôt nhất nên phân ra như sau nha: -Timeline chính sẽ gồm có 3 layer. Layer thứ nhất sẽ chứa cái loader bar mc mà chúng ta đã tạo. Nó sẽ kéo dài trong 2 frames. -Layer thứ 2 sẽ gồm có 2 keyframes ở fr1 và fr2. Ở kf 1 là lệnh stop(); Layer thứ 2 ta sẽ cho 1 button. Người sử dụng sẽ click vào button để xem tiếp phần còn lại của movie. Trong btn cho đoạn code sau: CODE on (release) { play(); } -Layer thứ 3 bắt đầu từ frame thứ 3 sẽ chứa cái movie cần load của bạn Các bạn có thể xem thêm ở file : 23complexLoader.fla Có những lúc bạn cần tạo các movie lớn có các media thì ta ko cần phải tạo 1 movie đầy những file media trong đó mà có thể load các file media có sẵn này từ bên ngoài. Nhờ vậy bạn có thể xây dựng 1 trình diễn lớn bằng cách sử dụng những file bên Trang 155
  47. Đểngoài. làm được điều này chúng ta sẽ tìm hiểu các bước sau: Thế chỗ movie hiện thời Cách đơn giản để làm điều này là bạn chia cắt movie này ra thành các phần riêng. Khi 1 movie kết thúc ta có thể chuyển đến 1 movie khác. Tất cả những gì bạn cần là dùng lệnh loadMovie Ví dụ, bạn có 1 frame ở cuối 1 movie dài. Khi người xem đến đó, họ có thể click vào 1 button và xem 1 movie khác. Đoạn code đơn giản như sau: CODE on (release) { loadMovie("animation2.swf"); } Hoặc là bạn có thể cho người sử dụng lựa chọn animation mà họ muốn xem tiếp. Ở cuối movie sẽ có 2 buttons chứa các movie khác nhau. Việc tạo liên kết giữa các movie là rất quan trọng sao cho khi user có thể trở lại movie cũ ban đầu. Bạn có thể xem ví dụ ở file 23movie1.fla để biết thêm làm thế nào để trình bày tác phẩm của bạn với các files có sẵn. Loading a Movie Clip Với lệnh loadMovie bạn có thể thay thế chỗ của 1 mc bằng 1 mc khác. Ví dụ để thay thế chỗ của myMovieClip bằng file otherMovie.swf bạn chỉ cần làm: CODE myMovieClip.loadMovie("otherMovie.swf); Khi sử dụng loadMovie bạn có thể dùng getBytesTotal and getBytesLoaded functions để thông báo cho người dùng bằng text hoặc bằng progess bar mà chúng ta đã làm ở trên quá trình load. Nếu muốn preload một movie clip để sẵn sàng lúc cần hiển thị, chúng ta sẽ tạo một movie trống, không có gì ở trong ngoại trừ một câu lệnh stop(). Sau đó chúng ta load mc vào mc trống này (ko hiển thị trên stage). Khi load hoàn toàn thì movie của chúng ta đã sẵn sàng ở frame đầu tiên. Trang 156
  48. Movie file này sẽ nằm sẵn sàng trong browser cache của user. Bây giờ khi đến đoạn đượcó sc download hoàn toàn vử dụng mc này thì lệnh loadMovie sề rồi. Sau đó sẽ làm viử dụng lệc. Lúc ệnh gotoAndPlay(2) đó sẽ nhanh hơn vì file để qua frame đã 1. Loading a JPEG myMovieClip.loadMovie("picture.jpg"); Flash MX cũng cho phép ta khả năng load 1 file JPEG ở ngoài vào. Cách làm tương tự như cách chúng ta load movie ở trên, chỉ cần thay đổi địa chỉ movie bằng địa chỉ của file JPEG là ok: CODE myMovieClip.loadMovie("picture.jpg"); mc myMovieClip bây giờ được thay thế chỗ bằng 1 mc có chứa bitmap image này. Bạn có thể kiểm tra và xem ví dụ ở file 23loadipeg.fla Loading a Sound Có 2 cách để play 1 sound từ 1 file bên ngoài. Cả 2 đều sử dụng sound object và lệnh loadSound. Các sound file này cần ở dạng phổ biến là mp3. Sau đây là 1 ví dụ cho cách thứ 1, để chơi 1 event sound. Ở đây toàn bộ sound sẽ được load vào bộ nhớ trước và sau đó được chơi nếu như có lệnh start(); CODE on (release) { mySound = new sound(); mySound.loadSound("mysound.mp3",false); mySound.start(); } Flash sẽ ghi nhớ là lệnh start đã được đưa ra thậm chí khi sound mới chỉ bắt đầu download. Khi sound được load xong thì nó sẽ được play ngay lập tức Trang 157
  49. CODE on (release) { mySound = new sound(); mySound.loadSound("mysound.mp3",true); } Cách thứ 2 là ta sử dụng true ở param thứ 2. Giá trị true này sẽ bảo với flash đó là 1 stream sound. Ngay khi sound được load phần nào thì sẽ bắt đầu chơi ngay trong lúc phần còn lại vẫn tiếp tục được load. Nếu người dùng có kết nối mạng tốt thì sẽ nghe được toàn bộ sound khi load. Ghi chú là bạn ko cần phải sử dụng lệnh start với 1 streaming sound. Tuy nhiên bạn cần phải chú ý khi sử lí file MP3. Ví dụ nếu bạn sử dụng file nhạc mp3 với 128 Kbps hay 160 Kbps thường dùng để nghe thì nó sẽ là 1 file quá lớn để có thể stream vói internet, đặc biệt nếu người sư dụng dùng modem. 32 Kpsb hay ít hơn sẽ thích hợp hơn khi ta sử dụng stream. Một số câu hỏi và trả lời sau có thể giúp bạn nắm rõ bài hơn: Câu 1: ta có thể load 1 mc, vậy có thể unload chúng ko?? -Trả lời: có, bằng lệnh unloadMovie Câu 2: bình thường thì flash cần bao lâu để load trước khi nó start?? -Trả lời: ngay frame đầu tiên. Bởi vậy bạn cần sử dụng lệnh stop nếu như muốn nó đợi trước khi tiếp tục. Câu 3: 2 cách để xác định khi 1 movie được load hoàn toàn?? -Trả lời: cách 1 dùng getBytesLoaded == getBytesTotal function cách 2 dùng _frameLoaded property và _totalFrames property. Ngoài ra bạn có thể xem thêm các bài viết sau: Cách tạo 1 preloader đơn giản Trang 158
  50. Cách tổng quát để tạo 1 loader đẹp: Ngoài ra về loadMovie, loadSound cũng có rất nhiều bài. Bạn chịu khó search ha Vẽ với AS Đây là h cuối cùng, cũng là giờ rất thú vị, hy vọng các bạn cảm thấy dzui dzẻ khi vẽ bằng AS . CBT ko có kinh nghiệm dịch bài, với lại nhìn vào mấy bài text dày đặc chữ là tối mắt tối mũi nên nhiều chỗ dịch lung tung, theo ý thích bởi vậy có chỗ nào diễn đạt tối nghĩa, ko đúng thì các bạn cứ thẳng thắn góp ý, đừng thương tiếc . Drawing lines -Để vẽ 1 đường thẳng, việc đầu tiên cần làm là định nghĩa các giá trị của lineStyle, nó dày như thế nào nè, rùi có màu gì và độ alpha. CODE lineStyle(thickness, color, alpha); Màu (color): giá trị được đưa ra dưới dạng số thập lục phân hexa, ví dụ: 0x000000 là màu đen, 0xffffff: trắng , chúng ta có thể nhìn vào bảng color mixer để biết thêm Độ trong suốt(alpha): min = 0; max=100; Độ dày (thickness): độ dày nhỏ nhất là 0, còn lớn nhất là bao nhiu thì cbt ko biết . Với độ dày 1 cái line có độ dày là 1 pixel, còn nếu ta cho giá trị là 0 (hairline) thì nó vẫn có độ dày là 1 pixel . Tuy nhiên chúng khác nhau ở chỗ: với hairline nếu như chúng ta thay đổi scale của nó thì độ dày của nó vẫn ko thay đổi. Các bạn thử đoạn code sau, và thay đổi giá trị độ dày nhé: CODE lineStyle(0,0x000000,100); moveTo(20,50); lineTo(200,200); _xscale=300; _yscale=300; Nhìn đoạn code trên ta thấy xuất hiện lệnh: Trang 159
  51. CODE moveTo(20,50) Để vẽ 1 đường thẳng ta cần xác định 2 điểm: đầu và cuối. Mỗi điểm lại được xác đinh với 2 giá trị x và y > moveTo là điểm đầu, điểm đặt bút. Như vậy ở câu trên ta đặt bút tại x=20; y=50. > lineTo là điểm tiếp đến. Ta có x= 200; y=200. Như vậy chúng ta đã vẽ được đường thẳng nối từ điểm (20,50) đến (200,200). Chú ý: 1. nếu như các bạn ko nêu điểm moveTo thì nó tự mặc định là điểm (0,0) 2. nếu như các bạn vẽ thêm các line tiếp theo với lineTo thì điểm đặt bút được mặc định là điểm cuối cùng của line trước. Ví dụ để vẽ 500 đường lung tung trên màn hình ta có đoạn code đơn giản sau: CODE // set line style lineStyle(2,0x000000,100); // draw 500 lines for(var i=0;i<500;i++) { // pick random start point x1 = Math.random()*550; y1 = Math.random()*400; // pick random end point x2 = Math.random()*550; y2 = Math.random()*400; // move to start point moveTo(x1,y1); // draw to end point lineTo(x2,y2); } Trang 160
  52. Bây giờ các bạn thử play trò này xem sao, thử thay đổi độ alpha, color or thickness của nó Mọi người thử copy and paste đoạn code sau xem hiện ra gì nào : CODE // set line style lineStyle(2,0x999999,100); for(var x=-400;x<550;x+=10) { // draw diagonal strip from left to right moveTo(x,0); lineTo(x+400,400); // draw opposite strip moveTo(550-x,0); lineTo(550-x-400,400); } Drawing Curves Tương tự khi bạn đã biết cách vẽ line rồi thì vẽ curveTo ko có gì là khó. Nó chỉ có thêm 1 chút giá trị thôi. Ta có đoạn code: CODE lineStyle(3,0x000000,100); moveTo(150,200); curveTo(275,275,400,200); Như đã biết moveTo là điểm bắt đầu, anker1 ha. curveTo(control_x, control_y, anker2_x, anker2_y); Control_point là tiếp tuyến của 2 điểm anker với đường cong anker2 là điểm cuối cùng của curve. Các bạn có thể đọc thêm 1 số bài viết trong diễn đàn về đường cong bezier để hiểu rõ thêm . Chúng ta play tiếp với đoạn code sau: CODE Trang 161
  53. lineStyle( 1, 0x0000FF, 100 ); moveTo(200,200); curveTo(250,200,300,200); curveTo(300,250,300,300); curveTo(250,300,200,300); curveTo(200,250,200,200); Olala, tại sao chúng ko hiện ra các curve mà lại là 1 hình vuông. Nguyên nhân là do chúng ta cho các giá trị control point ở giữa 2 điểm kia Hãy thử thay đổi 1 chút xem chúng ta có gì nào: CODE var bend = 42; moveTo(200,200); curveTo(250,200-bend,300,200); curveTo(300+bend,250,300,300); curveTo(250,300+bend,200,300); curveTo(200-bend,250,200,200); sử dụng biến bend để thay đổi control point ta được 1 hình trong hơi méo rùi . Về phần này plz đọc thêm các topic trong box AS Drawing Filled Areas Trước hết để có thể tô màu cho 1 vùng ta cần phải vẽ 1 hình khép kín ha. Sau đó dùng lệnh beginFill để vẽ: CODE beginFill(color of fill, alpha of fill) Ví dụ đoạn code sau: CODE lineStyle( 3, 0x000000, 100 ); beginFill( 0xFF0000 ); moveTo(175,100); lineTo(375,100); lineTo(375,300); lineTo(175,300); lineTo(175,100); endFill(); Trang 162
  54. Nếu như 1 vùng được cắt bởi line lần thứ 2 thì ở chỗ đó nó sẽ ko có màu nữa. Dựa vào đó ta có thể tạo nên 1 số hình thú vị . Bạn thử copy đoạn code sau xem nó hiện ra cái gì nào và chỗ nào được tô màu, chỗ nào ko : CODE lineStyle(3,0x000000,100 ); beginFill(0xFF0000); moveTo(250,50); lineTo(308,230); lineTo(155,120); lineTo(345,120); lineTo(192,230); lineTo(250,50); endFill(); Có cách khác tốt hơn để vẽ 1 star, nó cho phép chúng ta qui định các giá trị ban đầu. Bạn thử xem file fla 24betterstar.fla xem sao Pause Vẽ với chuột Phần tiếp theo trong sách này có đoạn code để user vẽ với chuột, thành thật mà nói, nếu bạn đã đọc đoạn code của DS post bên phần Flash hack thì bạn sẽ thấy nó khác nhau 1 trời 1 vực như thế nào Nếu bạn đã đọc đoạn code của DS thì đừng nên đọc tiếp đoạn code hướng dẫn trong cuốn sách này làm gì. CBt thấy là ko cần thiết phải dịch chỗ này nhưng trót rùi nên tôn trọng quyển sách, cbt dịch cho đầy đủ vậy 1.Tạo 1 shape đơn giản, convert to mc. 2.Copy đoạn code sau vào mc (cbt đã phân tích kèm) CODE onClipEvent (load) { // cho các giá trị cho kiểu line _root.lineStyle(0, 0x000000, 100); } Trang 163
  55. //khi chuột được dzí xuống thì bắt đầu vẽ onClipEvent(mouseDown) { // ok to draw draw = true; // xác định điểm start để vẽ startX = _root._xmouse; startY = _root._ymouse; _root.moveTo(startX,startY); } //khi thả chuột ra thì ko vẽ nữa onClipEvent(mouseUp) { // don't draw anymore draw = false; } //bắt đầu onClipEvent (enterFrame) { if (draw) { //lấy vị trí hiện tại của chuột newX = _root._xmouse; newY = _root._ymouse; //nếu như vị trí khác với vị trí ban đầu if ((newX != startX) or (newY != startY)) { //vẽ 1 line tới vị trí mới _root.lineTo(newX,newY); // reset location for new time startX = newX; startY = newY; } } } 3. Tạo 1 movie clip riêng cho các hình đã vẽ Những gì chúng ta đã làm ở trên chỉ là vẽ 1 cách đơn giản trên stage, nó có bất lợi là có thể bị bất kì mc nào che khuất. ko thể di chuyển. Trang 164
  56. Khi chúng ta đặt những cái này vào trong 1 mc thì thuận tiện hơn rất nhiều. ta có thể thay đổi _x, _y, rotation, alpha, scale Để tạo 1 new mc ta dùng lệnh : CODE my_mc.createEmptyMovieClip("tên của new mc", level của nó) Ví dụ : CODE this.createEmptyMovieClip("myMovieClip",1); myMoveClip.lineStyle(0,0x000000,100); myMoveClip.moveTo(100,100); myMovieClip.lineTo(200,200); Như vậy bạn đã có 1 mc mới tên là myMovieClip, level 1, có chứa các hình vẽ trên. Nếu bạn muốn viết nhanh hơn thì có thể viết lại như sau: CODE this.createEmptyMovieClip("myMovieClip",1); with(mymovieClip){ lineStyle(0,0x000000,100); moveTo(100,100); lineTo(200,200); } Lệnh createEmptyMovieClip này còn có rất nhiều tác dụng khác như ta có thể attach thêm movie vào đó hay là sao chép (duplicateMovieClip) Rùi bi giờ bạn hãy thử tạo 1 mc mới đi nào Có 1 bài hướng dẫn vẽ bông tuyết khá đẹp trong cuốn sách, tuy nhiên code được chia nhỏ thành các function khá dài dòng và mất công. trong khi trong diễn đàn của chúng ta có nhiều đoạn code về làm tuyết hay hơn rất nhiều: bài thế trời làm tuyết của DS trong box hướng dẫn thực hành. Đặc bịêt hợp với chủ đề này là bài dùng 100% bằng AS c Trang 165
  57. dịch vủa Raider (tìm trong mề đoạn code trong sách này nục lục), trong ữa. đó có đoạn code rất hay. Bởi vậy cbt sẽ ko Để biết thêm chi tiết xin xem file fla 24snowflakes.fla Textfield Đây là phần cuối cùng, chúng ta sẽ học cách tạo 1 text field và sau đó là làm 1 effect flying words. Để Tạo Text tạo 1 text chúng ta cần tạo 1 ô text (text field) với lệnh : CODE createTextField("text_name", level , vị trí _x, vi trí _y, chiều rộng,chiều dài); Sau đó là text hiện lên trong text field đó: CODE text_name.text = "Nội dung text"; Ví dụ đoạn code sau, mình phân tích trong đó luon cho nhanh: CODE //tạo 1 ô chữ tên my , level 0, _x=0, _y=170, width=550, height=60 createTextField("myTextField",0,0,170,550,60); //text myTextField.text = "Welcome to VNFX"; myTextField.embedFonts = true; //mặc định các tính chất của text myTextFormat = new TextFormat(); //loại chữ, cỡ, màu, vị trí myTextFormat.font = "Arial"; myTextFormat.size = 48; myTextFormat.color = 0x330000; myTextFormat.align = "center"; Trang 166
  58. //liên kết những tính chất này với ô text của chúng ta myTextField.setTextFormat(myTextFormat); Chú ý khi sử dụng embedFont ta cần phải chọn 1 font trong thư viện click vào góc phải trên cùng của thư viện, chọn font mà bạn muốn, sau đó click chuột phải, linkage, export, IDname Nếu bạn muốn tạo 1 Input text thì cần phải cho type của textField là input, sau đó có thể set thêm các variable để máy có thể nhận info từ user Còn rất nhiều các tính chất trong textField và textFormat class, các bạn nên đọc thêm help để trang trí cho textField của mình Lý thuyết chỉ có vậy, nào bây giờ chúng ta sẽ làm effect flying words CBT không dám nhận xét nhiều về đoạn code và cách làm trong cuốn sách này, tuy nhiên nó được chia nhỏ thành các function gây rắc rối, dài dòng cho người đọc, lại còn phải tạo thêm mc trên stage, có chỗ hạn chế nữa CODE function createText(n,text) { // create a new movie clip this.createEmptyMovieClip("text"+n,n); mc = this["text"+n]; // set the text format myFormat = new TextFormat(); myFormat.font = "Arial"; myFormat.color = 0x000000; myFormat.size = 24; myFormat.align = "center"; // create a new text field mc.createTextField("myTextField",1,-100,-20,200,40); mc.myTextField.text = text.toUpperCase(); mc.myTextField.embedFonts = true; mc.myTextField.setTextFormat(myFormat); // return reference to this movie clip return(mc); } function createAllText(textList) { // loop through array of text for(var i=0;i<textList.length;i++) { // create movie clip with this text mc = createText(i,textList[i]); Trang 167
  59. // set random location mc._x = Math.random()*450+50; mc._y = Math.random()*350+25; // set scale to nothing mc._xscale = 0; mc._yscale = 0; // set scale variable to negative amount mc.scale = 0-i*100; } } function init() { // create array of text var words = "Love,Peace,Destiny,Llamas,Fate,History,Cheese,Rainbows,Tiny Rocks"; var textList = words.split(","); // create all text movie clips createAllText(textList); // remember how many there are numWords = textList.length; } function moveText() { // loop through words for(var i=0;i 300) { mc._visible = false; // set scale of movie clip to scale when it is a positive number } else if (mc.scale > 0) { mc._xscale = mc.scale; mc._yscale = mc.scale; } } } init(); stop(); Sau đó bạn tạo 1 mc trên stage và nhét đoạn code sau vào: CODE onClipEvent(enterFrame) { _parent.moveText(); } Cuối cùng vào thư viện, trong menu của thư viện ta chọn font ruì linkage, rùi export với tên Arial. Trang 168
  60. effect này ko có gì khác là ta tạo 1 array chứa các ô text, sau đó các text hiện ra từ từ và dần dần phóng to lên, đến 1 kích thước nào đó thì biến mất. Để các text hiện ra từ từ ta chỉ cần mặc định scale ban đầu của text là ko, sau đó dùng thêm 1 var nữa. Dần dần phóng to lên thì ta thay đổi scale thôi. Thấy đoạn code trên dài dòng quá nên cbt viết lại cho nó đơn giản bớt như sau CODE function a(){ wordArr=new Array("vnfx","flash","actionscript"); //ta tạo 3 mc chứa 3 text field for(var n=0;n 300) { removeMovieClip(this); } else if (this.scale > 0) { this._xscale=this._yscale = this.scale; } } } } a(); //cho lặp lại sau 5 s setInterval(a, 5000); Trang 169