劉志娟（廣西財(cái)經(jīng)學(xué)院現(xiàn)代教育技術(shù)部，廣西南寧530003）

?

協(xié)作學(xué)習(xí)理念下多點(diǎn)觸控式課件設(shè)計(jì)與開發(fā)

劉志娟
（廣西財(cái)經(jīng)學(xué)院現(xiàn)代教育技術(shù)部，廣西南寧530003）

多點(diǎn)觸控技術(shù)的出現(xiàn)，實(shí)現(xiàn)了多人同時在觸控設(shè)備上面對面操作的功能，給協(xié)作學(xué)習(xí)帶來新的交互方式。傳統(tǒng)的計(jì)算機(jī)課件主要以鼠標(biāo)鍵盤操作為主，協(xié)作學(xué)習(xí)通過網(wǎng)絡(luò)來實(shí)現(xiàn)交互，文章以《圖形的變換》內(nèi)容為例，提出多點(diǎn)觸控式課件開發(fā)的原則、設(shè)計(jì)與開發(fā)過程，體現(xiàn)了新的協(xié)作學(xué)習(xí)交互方式。

多點(diǎn)觸控；課件設(shè)計(jì)；協(xié)作學(xué)習(xí)

一、多點(diǎn)觸控技術(shù)概述

多點(diǎn)觸控（英譯為Multitouch或Multi-touch）是采用人機(jī)交互技術(shù)與硬件設(shè)備共同實(shí)現(xiàn)的技術(shù)，能在沒有傳統(tǒng)輸入設(shè)備的情況下進(jìn)行計(jì)算機(jī)的人機(jī)交互操作。［1］使用者主要通過多點(diǎn)觸控手勢來實(shí)現(xiàn)交互，基本包括單擊、雙擊、拖動、滑動、旋轉(zhuǎn)等手勢，比如在觸摸屏上旋轉(zhuǎn)圖片，兩個手指劃開或者收攏來放大或縮小圖片，或者左手用兩手指劃開放大一張圖片，同時右手拖動另一張圖片將其移開。［2］多點(diǎn)觸控手勢顛覆了傳統(tǒng)用鼠標(biāo)單擊進(jìn)行輸入的方式，具有高效和自然的特點(diǎn)。

傳統(tǒng)的計(jì)算機(jī)課件主要以鼠標(biāo)單擊、鍵盤輸入為主，協(xié)作學(xué)習(xí)主要依靠網(wǎng)絡(luò)完成。隨著電子白板、平板電腦、智能手機(jī)等多點(diǎn)觸控設(shè)備進(jìn)入教育領(lǐng)域，其操作自然、多用戶的特點(diǎn)使得面對面的協(xié)作學(xué)習(xí)方式發(fā)生了改變，打破了傳統(tǒng)計(jì)算機(jī)輔助教學(xué)的方式。

二、多點(diǎn)觸控技術(shù)支持的協(xié)作學(xué)習(xí)

計(jì)算機(jī)支持的協(xié)作學(xué)習(xí) （Computer Supported Collaborative Learning，簡稱CSCL），是指利用計(jì)算機(jī)技術(shù)建立協(xié)作學(xué)習(xí)的環(huán)境，使教師與學(xué)生、學(xué)生與學(xué)生在討論、協(xié)作與交流的基礎(chǔ)上進(jìn)行協(xié)作學(xué)習(xí)的一種學(xué)習(xí)方式，是傳統(tǒng)合作學(xué)習(xí)的延伸和發(fā)展。［3］Lipponen提出“CSCL的重點(diǎn)是為了增強(qiáng)同伴之間的交互和小組協(xié)同工作通過技術(shù)支持協(xié)作學(xué)習(xí)的方式實(shí)現(xiàn)，以及技術(shù)如何促進(jìn)知識和技能在社區(qū)成員間的協(xié)作共享及交流”。［4］

英國達(dá)勒姆大學(xué)SynergyNet項(xiàng)目利用多點(diǎn)觸控桌開展協(xié)作學(xué)習(xí)活動，以促進(jìn)課堂對話和合作學(xué)習(xí)，多名學(xué)生同時在觸控桌上操作。

為探索多點(diǎn)觸控技術(shù)有效促進(jìn)課堂教學(xué)效果，此次課的目標(biāo)是學(xué)生利用紙張與數(shù)字提供的線索找出礦難的原因，Steve Higgins將學(xué)生分成兩組，一組學(xué)生利用多點(diǎn)觸控桌中提供的數(shù)字和紙張完成任務(wù)，另一組學(xué)生利用放置在普通桌子上的小紙片完成任務(wù)，在多點(diǎn)觸控桌當(dāng)中，學(xué)生可以任意放大、縮小旋轉(zhuǎn)紙片的大小和方向，并且能看到其他同學(xué)的操作，實(shí)現(xiàn)協(xié)作學(xué)習(xí)的無縫對接。［5］Steve Higgins發(fā)現(xiàn)學(xué)生利用多點(diǎn)觸控桌完成任務(wù)比在普通桌子上利用小紙片完成任務(wù)的效果要好。SynergyNet項(xiàng)目利用多點(diǎn)觸控技術(shù)做了大量的學(xué)習(xí)活動，利用新技術(shù)整合了傳統(tǒng)教育的課堂環(huán)境，為設(shè)計(jì)多點(diǎn)觸控式教學(xué)資源提供了新的指導(dǎo)策略。

三、多點(diǎn)觸控式課件案例設(shè)計(jì)分析

筆者以小學(xué)五年級數(shù)學(xué)中《圖形的變換》這節(jié)學(xué)習(xí)內(nèi)容為例設(shè)計(jì)開發(fā)多點(diǎn)觸控式課件。

1.多點(diǎn)觸控式課件設(shè)計(jì)原則

設(shè)計(jì)原則是教學(xué)軟件進(jìn)行設(shè)計(jì)的基本要求之一，針對多點(diǎn)觸控技術(shù)的各種特征和優(yōu)勢，圍繞學(xué)習(xí)者對學(xué)習(xí)的影響為基礎(chǔ)，在開發(fā)多點(diǎn)觸控式課件要注意以下幾點(diǎn)原則：

（1）學(xué)習(xí)者為中心

在進(jìn)行多點(diǎn)觸控式課件設(shè)計(jì)時，首先要確定學(xué)習(xí)者的學(xué)習(xí)基礎(chǔ)，案例中的學(xué)習(xí)對象為小學(xué)五年級的學(xué)生，具有一定的計(jì)算機(jī)基礎(chǔ)，大部分都操作過智能手機(jī)等觸控設(shè)備，操作多點(diǎn)觸控式課件不存在太大障礙。

（2）易操作互動強(qiáng)

多點(diǎn)觸控式課件的設(shè)計(jì)元素應(yīng)該簡潔明了，容易操作，學(xué)習(xí)者不必花大量的時間去學(xué)習(xí)復(fù)雜的操作，讓學(xué)習(xí)者體驗(yàn)最直接自然的交互方式。本案例中優(yōu)化了多點(diǎn)觸控式課件界面設(shè)計(jì)，提高了學(xué)習(xí)者的學(xué)習(xí)效率。

（3）兼容性

安卓系統(tǒng)、蘋果系統(tǒng)、windows系統(tǒng)等多個平臺都支持多點(diǎn)觸控式課件的運(yùn)行，相同的平臺有多個版本，這就要求在設(shè)計(jì)開發(fā)多點(diǎn)觸控式課件時要考慮它的兼容性，能夠兼容到不同版本或者不同平臺上使用。［6］

2.開發(fā)工具

本案例的多點(diǎn)觸控式課件以Android系統(tǒng)為開發(fā)平臺，利用Flash CS6進(jìn)行開發(fā)。Android是Google公司發(fā)布的基于linux的自由及開放源代碼的操作系統(tǒng)，應(yīng)用于智能手機(jī)、平板電腦等移動設(shè)備，Android平臺的開放性使得更多開發(fā)者和移動終端廠商加入到Android應(yīng)用開發(fā)中。［7］新版本的Flash CS6可生成Sprite表單和訪問專用設(shè)備，Adobe Flash Player和AIR運(yùn)行時針對Android和iOS設(shè)備平臺進(jìn)行設(shè)計(jì)，具有跨平臺的特性。［8］

3.內(nèi)容設(shè)計(jì)分析與開發(fā)

小學(xué)五年級數(shù)學(xué)《圖形的變換》這一節(jié)課內(nèi)容中設(shè)計(jì)了“做一做、“畫一畫”、“設(shè)計(jì)欣賞”等模塊，主要讓學(xué)生動手操作設(shè)計(jì)美麗圖案，體會平移、對稱、旋轉(zhuǎn)在設(shè)計(jì)圖案中的應(yīng)用，［9］從運(yùn)動變化的角度去探索和認(rèn)識空間與圖形，鍛煉學(xué)生的空間想象力和空間思維能力，發(fā)展空間觀念，同時提高學(xué)生合作學(xué)習(xí)的能力。利用平移、旋轉(zhuǎn)等特性進(jìn)行圖案設(shè)計(jì)在傳統(tǒng)的計(jì)算機(jī)輔助教學(xué)中，學(xué)生通過鼠標(biāo)來移動、旋轉(zhuǎn)圖形或者利用傳統(tǒng)的教學(xué)道具來設(shè)計(jì)，但是學(xué)生只能獨(dú)自操作完成任務(wù)。傳統(tǒng)的計(jì)算機(jī)輔助教學(xué)主要以鼠標(biāo)鍵盤為交互事件，通過網(wǎng)絡(luò)環(huán)境來實(shí)現(xiàn)的協(xié)同操作，準(zhǔn)備多臺主機(jī)，同時提供網(wǎng)絡(luò)連接的環(huán)境，難以滿足多事件同時觸發(fā)的需求。而教師利用平板多點(diǎn)觸控技術(shù)的交互特性，可以充分調(diào)動學(xué)生的視覺、觸覺、聽覺等多種感官，能讓學(xué)生更加直接地參與到課件的協(xié)作學(xué)習(xí)中來，同時學(xué)生面對面地操作與討論，也鍛煉了學(xué)生的合作學(xué)習(xí)能力。

（1）“軸對稱——做一做”模塊設(shè)計(jì)

“做一做”模塊通過模擬一個剪紙制作軸對稱圖形的過程，讓學(xué)生體驗(yàn)剪紙中蘊(yùn)含著的對稱思想。在平板上模擬剪紙的五個步驟如下：

①學(xué)生手指從左到右滑動，就可將紙張從左到右滑動，同時紙張對折；

②用手指在屏幕上畫出對稱圖形的一半，比如畫小樹，如圖1（a）所示；

③用手指將多余的紙張從左到右滑動，紙張移開，得到小樹的一半圖形；

④用手指將折疊的紙張從右到左滑動，得出一個軸對稱的小樹圖形，如圖1（b）所示。

圖1　“軸對稱——做一做”操作界面

“做一做”模塊的實(shí)現(xiàn)主要涉及過渡動畫的設(shè)置、繪制自定義形狀、剪切效果和翻轉(zhuǎn)效果等內(nèi)容，而在傳統(tǒng)滑鼠式課件中主要通過鼠標(biāo)單擊來實(shí)現(xiàn)這一系列操作。

（2）“旋轉(zhuǎn)——畫一畫”模塊的設(shè)計(jì)

“畫一畫”模塊學(xué)生已經(jīng)掌握了部分圖形旋轉(zhuǎn)的知識，通過設(shè)計(jì)扇形圖的旋轉(zhuǎn)動畫來讓學(xué)生一步一步體驗(yàn)圖形的旋轉(zhuǎn)效果。課件中要求學(xué)生利用“旋轉(zhuǎn)手勢”旋轉(zhuǎn)右邊的扇形圖，圖形順時針旋轉(zhuǎn)90度，確定將要旋轉(zhuǎn)的圖形，利用旋轉(zhuǎn)手勢旋轉(zhuǎn)圖形，如圖2。第一次旋轉(zhuǎn)圖形A90度得到圖形B，同樣用旋轉(zhuǎn)手勢旋轉(zhuǎn)B、C、D三個圖形，從中探索圖形旋轉(zhuǎn)的特征和性質(zhì)。

圖2　“旋轉(zhuǎn)——做一做”操作界面

“畫一畫”模塊實(shí)現(xiàn)的關(guān)鍵技術(shù)是觸摸環(huán)境下“旋轉(zhuǎn)手勢”的使用，程序在手勢模式MultitouchInputMode. GESTURE下監(jiān)聽旋轉(zhuǎn)手勢TransformGestureEvent.GESTURE_ROTATE事件，而在傳統(tǒng)滑鼠式課件中是通過滑動鼠標(biāo)來實(shí)現(xiàn)圖形旋轉(zhuǎn)90度。

（3）“設(shè)計(jì)欣賞”模塊設(shè)計(jì)與開發(fā)

在“設(shè)計(jì)欣賞“模塊中利用對稱和旋轉(zhuǎn)的特性設(shè)計(jì)了拼圖課件，支持多人共同操作課件，本課件設(shè)計(jì)了兩名學(xué)生共同協(xié)作完成拼圖設(shè)計(jì)。學(xué)生將手指定位在小方塊中間，手指拖動小方塊到拼圖的位置。為構(gòu)建對稱圖形，需要旋轉(zhuǎn)小方塊的方向，學(xué)生利用旋轉(zhuǎn)手勢將小方塊旋轉(zhuǎn)。在課件中兩名學(xué)生可以同時操作左右兩邊的小方塊，通過變換旋轉(zhuǎn)組成新的圖案，如圖3。傳統(tǒng)課件的交互主要是鼠標(biāo)點(diǎn)擊的人機(jī)交互方式，多點(diǎn)觸控平板的環(huán)境下，學(xué)生面對面共同操作課件，體現(xiàn)了協(xié)作學(xué)習(xí)的新的交互方式。

圖3　設(shè)計(jì)欣賞操作界面

“設(shè)計(jì)欣賞”模塊實(shí)現(xiàn)的關(guān)鍵技術(shù)是多點(diǎn)交互事件的處理。課件中操作部件需要添加相應(yīng)的事件監(jiān)聽操作，傳統(tǒng)滑鼠課件主要是處理MouseEvent.MOUSE_ DOWN事件，而多點(diǎn)觸控環(huán)境下，則處理TouchEvent. TOUCH_BEGIN的開始事件。該模塊中主要是移動和旋轉(zhuǎn)的操作。

小方塊的移動主要處理TouchEvent.TOUCH_END和TouchEvent.TOUCH_BEGIN兩個事件。拖動事件從點(diǎn)擊操作部件的TouchEvent.TOUCH_BEGIN事件，通過touch-PointID來識別事件對應(yīng)的拖動對象。關(guān)鍵代碼如下：

要完成旋轉(zhuǎn)操作處理事件是在小方塊內(nèi)添加一個透明的元件mcR。手指觸摸小方塊中間相應(yīng)拖動操作，觸摸mcR元件為旋轉(zhuǎn)操作。mcR元件的旋轉(zhuǎn)功能實(shí)現(xiàn)主要是通過 TouchEvent.TOUCH_BEGIN、TouchEvent. TOUCH_END和TouchEvent.TOUCH_MOVE事件來制作的。其中TouchEvent.TOUCH_BEGIN添加在mcR元件上，而TouchEvent.TOUCH_END和TouchEvent.TOUCH_ MOVE是添加在舞臺stage對象上。小方塊旋轉(zhuǎn)的相關(guān)代碼如下所示：

四、結(jié)語

多點(diǎn)觸控式課件改變了傳統(tǒng)滑鼠式課件的交互方式，用手勢操作課件使得人機(jī)交互更加自然，同時改變了傳統(tǒng)的協(xié)作學(xué)習(xí)方式，允許多個人同時書寫和繪畫等，實(shí)時面對面討論與動手合作，創(chuàng)造了更多互動的環(huán)境。多點(diǎn)觸控式課件作為新的計(jì)算機(jī)輔助教學(xué)的新工具，促進(jìn)了課堂協(xié)作學(xué)習(xí)新方式的發(fā)展，給協(xié)作學(xué)習(xí)教育帶來了新的變革與挑戰(zhàn)。如今，很多學(xué)校引進(jìn)了觸控式的電子白板、一體機(jī)等新教學(xué)設(shè)備，如何利用新的教學(xué)設(shè)備助力設(shè)計(jì)和開發(fā)更多協(xié)作學(xué)習(xí)的教學(xué)資源，在新技術(shù)變革教育的研究方向當(dāng)中需要進(jìn)一步探討。

［1］百度百科.多點(diǎn)觸摸技術(shù)［DB/OL］.http：//baike.baidu. com/link？url=PpbEnvG7-kBlwp0TMh-WrlXypsOIF-bnn8ZdEb7iYz6NbLKyx5qHsBebMSqhY9C7ObZduFg-BEKVtwkszAReKwWq.

［2］網(wǎng)易科技報(bào)道.前沿視頻體驗(yàn)：神奇的多重觸控屏技術(shù) ［EB/OL］.http：//tech.163.com/07/0227/09/38B1EJA 1000926PT.html.2007-02-27.

［3］黃榮懷.計(jì)算機(jī)支持的協(xié)作學(xué)習(xí)（理論與方法）［M］.北京：人民教育出版社，2003.

［4］Lipponen Lasse.Exploring foundations for computer-supported［C］.CSCL'02 Proceedings of the Conference on Computer Support for Collaborative Learning：Foundations for a CSCL Community.2002.

［5］Steve Higgins，Emma Mercier，Liz Burd，Joyce-Gibbons Andrew.Multi-touch tables and the relationship with collaborative classroom pedagogies A synthetic review［J］. British Journal of Educational Technology.2012，43（6）：1042

［6］王冬冬.移動學(xué)習(xí)游戲的設(shè)計(jì)與開發(fā)［D］.上海：華東師范大學(xué)，2011.

［7］劉世珍.基于Anbroid平臺學(xué)習(xí)軟件開發(fā)研究與實(shí)踐［D］.大慶：東北石油大學(xué)，2013.

［8］百度百科.flashcs6［DB/OL］.http：//baike.baidu.com/ link？url=OREZBWvKdCDuDmB7_6UgfFCJ0XqoyMkiQ5m EFnaU9kJYQYnrzDF9YLXTzn9noqea-7RkJpA H wC18ei kkbBtgva.

［9］王棟昌.“圖形與變換”的教學(xué)分析——以北師大版教材為例［J］.教學(xué)月刊：小學(xué)版（數(shù)學(xué)），2012（7）.

（編輯：李曉萍）

G434

B

1673-8454（2016）02-0056-03