打開程序,屏幕上顯示如圖27-1所示的程序流程圖和如圖27-2所示的程序運行主畫面。
圖27-1 程序流程圖 圖27-2 程序運行主畫面
在圖27-1中,【run to view documentation】設計圖標完成發布一個聲明并運行程序到主畫面的功能,其余設計圖標則完成運行程序實例的功能。
在如圖27-2所示的主畫面中有如下3個按鈕:
l 【introduction】——程序簡介
l 【hot text interactions】——程序流程圖標設計說明
l 【run the example】——運行實例
鼠標單擊【run the example】按鈕,程序進入實例演示分支,其運行畫面如圖27-3所示。
畫面左側窗口顯示出icon 1、icon 2和icon 3目錄表文字,每個目錄成一行;窗口上沿顯示出當前設計圖標名稱為list;右側上方有一個【back to list】按鈕。
單擊“icon 1”目錄,左側窗口中顯示出:by clicking on “icon 1”in the list, you've
navigated to this icon的文字,提示用戶通過單擊目錄表中的“icon 1”,用戶已導航到了這一設計圖標中。窗口上沿此時顯示當前設計圖標名稱為“icon 1”。單擊“icon 2”目錄(或“icon 3”目錄),畫面顯示含義相同的文字,窗口上沿顯示出當前設計圖標名稱為“icon 2”(或“icon 3”)。
單擊【back to list】按鈕,程序返回如圖27-3所示的首頁畫面。
圖27-3 實例運行畫面
流程中在【navigate to pages】框架圖標下設置了4個頁面,分別為list、icon 1、icon 2和icon 3,均為顯示圖標。
首頁list設計圖標中輸入了icon 1~icon 3的目錄列表;icon 1~icon 3各頁中則輸入了各頁顯示的文字。
【navigate to pages】框架圖標的輸入/輸出層如圖27-4所示。
圖27-4 【navigate to pages】框架的輸入/輸出層
框架輸入層【background】顯示圖標中嵌入了currenticon={icontitle(currentpageid)},因此在程序進入某頁中時可實時顯示出該頁標題名稱。
【navigation hyperlinks】交互響應圖標下僅保留一個【back to list】按鈕交互響應分
支,這就是窗口右側上方的【back to list】按鈕。單擊該按鈕進入該分支中的導航圖標。
導航圖標的屬性設置如圖27-5所示。
圖27-5 【back to list】導航圖標屬性設置對話框
由圖27-5可知,導航進行本框架內的跳轉,目的頁為【first】(即首頁)。
因此用戶在單擊了【back to list】按鈕后,程序跳轉到首頁(【list】圖標),顯示出目錄列表。
及時點評 在authorware中,利用框架圖標,可以建立流程的頁;通過導航圖標,可以實現對頁的訪問。這種由框架與導航的配合實現程序頁面之間跳轉的方式被稱為頁管理。本例在框架輸入層中僅保留一個導航跳轉,跳轉的目的地為框架首頁,是一種簡單的導航跳轉設置。
超文本鏈接(hyperlink)即熱文字交互響應(hottext),它是authorware系統中11種交互響應類型外的又一種交互響應方式。
熱文字交互響應設計一般有3個方面的內容:
l 熱文字定制
l 將定制的熱文字應用于具體文字
l 設置熱文字鏈接的頁
單擊【text/define styles…】菜單命令,彈出文字風格設置對話框,如圖27-6所示。
在對話框左側列出已有的文字風格,可選擇其中一種風格;也可單擊【add】按鈕重新增加一種新的文字風格,并在左下角輸入其名稱。
本例熱文字名稱為“hot text”,使用arial字體,字號大小為10,字型為bold,顏色為深綠。
對話框右側列出了該熱文字交互響應方式選項。
本例在interactivity欄中選擇了:
single click——鼠標單擊產生響應
auto highting——選中時變亮度顯示
cursor——鼠標移入時變手形
注意:本例在此并不選擇navigate to選項。
圖27-6 文字風格設置對話框
打開【list】顯示圖標,選中icon 1目錄文字,單擊【text/apply styles…】菜單命令,彈出熱文字應用對話框,如圖27-7所示。
圖27-7 熱文字應用對話框
在對話框中選擇“hot text”文字類型,則剛才設置的文字風格被應用于icon 1文字上。
同理可將hot text文字風格應用于icon 2和icon 3文字上。
運行程序,首先自動進入框架首頁,顯示出icon 1~icon 3的目錄列表。
單擊“icon 1”,彈出如圖27-8所示的導航鏈接設置對話框。
圖27-8 【navigation link】導航鏈接設置對話框
在該對話框中可設置icon 1熱文字與目的頁的鏈接。
本例選擇“icon 1”熱文字與程序流程中icon 1頁圖標鏈接,即用戶單擊目錄列表中的icon 1熱文字,程序跳轉到框架的icon 1頁圖標中。
同理可設置目錄列表中“icon 2”和“icon 3”熱文字鍵接到框架的icon 2和icon 3頁圖標。單擊【done】按鈕完成設置。
當鏈接頁設置完成后,在框架首頁的【list】圖標右上角將出現一個小的黑三角形符號,如圖27-1流程圖中所示。
再次運行程序,單擊icon 1(或icon 2、icon 3)熱文字目錄,程序跳轉到框架的icon 1(或icon 2、icon 3)頁圖標中;單擊【back to list】按鈕,程序返回框架首頁。從而完美實現超文本鏈接的設計。
及時點評 設置熱文字鏈接的頁時,前面的熱文字定制中本來也可選擇navigate to選項而進行。但在熱文字定制時就立即進行鏈接設置,將使所有相同類型的熱文字都鏈接到同一頁中去,在本例中會使icon 1、icon 2和icon 3目錄跳到同一頁,這顯然不符合設計要求。icon 1、icon 2和icon 3文字雖有相同的熱文字類型,但應用本例的辦法,再設置鏈接的頁,則可使icon 1、icon 2和icon 3分別鏈接到不同的頁中去。
另外,導航圖標雖然有十分靈活的跳轉功能,但它的跳轉都是針對頁圖標而言的。因此,在流程中如果沒有框架圖標及其下屬的頁,導航圖標也就無法發揮其導航跳轉的作用。
本例應用框架與導航的頁管理結構設計技術,采用熱文字交互響應方式,使用戶單擊某熱文字便可跳轉到相關的頁面中去。本例主要應用了如下技術:
l 用框架圖標與導航圖標實現頁管理設計
l 超文本鏈接的設計
l 同一類型的熱文字鏈接到不同頁的設計
新聞熱點
疑難解答