Axure教程:原型實戰(zhàn)之模擬拼圖效果(變量、動態(tài)面板、參數(shù)…全面實戰(zhàn)應(yīng)用)

文章分享的這個原型設(shè)計涉及到了許多Axure的核心知識模塊,對于Axure的使用有了非常深層次的認知,本案例適合Axure高級使用者觀看學(xué)習(xí)。
背景介紹
這是一個可玩性不高的拼圖游戲,但是貴在用Axure做出來,中間涉及到了許多Axure的核心知識模塊,比如:中繼器、各類函數(shù)、時間、動態(tài)面板等等,對于Axure的使用有了非常深層次的認知,本案例適合Axure高級使用者觀看學(xué)習(xí)。
實現(xiàn)步驟
一、準(zhǔn)備工作
準(zhǔn)備工作,主要分為幾個模塊:
1.1、準(zhǔn)備原材料
準(zhǔn)備拼圖的原始圖片,自己上網(wǎng)下載(也可下載本文提供的材料附件)。
1.2、切割分區(qū)
將原圖均勻的切割為9宮格(利用Axure自帶的切割工具即可完成切割)
1.3、正確排布圖制作
將原圖縮小為150×150(大小可自定義),然后按照九宮格的形式,標(biāo)記上數(shù)字,分別為1、2、3、4、5、6、7、8、9,圖片下方寫上提示文字(文本控件),命名為point(用來展示拼圖結(jié)果),在提示文字的下方做一個文本計時器,默認初始值為120S,命名為time-count(計時器通過控制動態(tài)面板的顯示和隱藏來實現(xiàn)),控制計時器的動態(tài)面板命名為d-command。
1.4、制作實時位置表
首先創(chuàng)建9個新的全局變量,分別代表九宮格的九張圖片,依次為num1=1、num2=2、num3=3、num4=4、num5=5、num6=6、num7=7、num8=8、num9=9,默認num1+num2+…num3=45,拼圖完成,成功。(不理解這段話,請看排布成功的圖)
1.5、創(chuàng)建拼圖區(qū)域
將原圖切割為九宮格,并按照排布正確的縮略圖進行標(biāo)號,將圖8刪除,拖入一個同樣大小的矩形框,用來代替圖8.
1.6、設(shè)置拼圖規(guī)則
圖8為空白色塊,請拖動其他色塊朝色塊8移動。色塊8本身不能移動。拼圖的時長為120S。
二、實現(xiàn)效果
2.1、倒計時鐘表+實時位置表
當(dāng)動態(tài)面板d-command顯示時,兩種情況:1、如果time-count>0時,設(shè)置time-count每隔一秒自動遞減1,用到公式[[LVAR1-1]]。2、如果num1=1…num9=9,設(shè)置提示文字point內(nèi)容為“恭喜你,拼對了!”
2.2、拖動效果實現(xiàn)
首先搞明白一點,九宮格的每一塊都有四種拖動可能:向左拖動、向右拖動、向上拖動、向下拖動,因此除了圖8,對于其他幾塊圖形,都要進行邏輯判斷,判斷的依據(jù)就是拖動結(jié)束后,被拖動的色塊位于什么位置,位于哪個位置,代表色塊的變量的值就等于幾,依據(jù)此,實現(xiàn)對拖動效果的判斷。
以色塊6為例進行說明,色塊6拖動的過程中,可能出現(xiàn)在九宮格的任何地方,因此就要對所有的情況進行條件判斷,同時無論色塊6出現(xiàn)在什么地方,色塊8肯定是和它相鄰的,因此依據(jù)此,就可以判斷拖動的結(jié)果是否和正確的排布相同。(條件非常多,有點復(fù)雜,這里就不一一截取了,具體可以下載原文件查看)
向左移動條件判斷如下:
向右移動條件判斷如下:
向上拖動條件判斷如下:
向下拖動條件判斷:
還有很重要的一點,就是1,4,7不能向左拖動,1,2,3不能向上拖動,3,6,9不能向右移動,7,8,9不能向下移動。
源文件下載:拼圖game.rp
本文由 @神奈川00 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
作者你好,這個rp文件錯誤,無法下載
你好
我是新手求帶,這些有點看不懂
打不開
我居然學(xué)會了 哎媽呀
可以,厲害????????????????
rp文件不能下載,作者,能發(fā)一份嘛
請教個問題 那種三位數(shù)是啥意思 像什么696,581
這有啥用?炫技?
實現(xiàn)的確實挺好的,但是個人覺得不要只局限于畫原型,它只是一個表達工具。不要在工具上花費太多的時間。
這有啥用?
倪馬海 倪馬海~~~
6到飛起~~~~~~~~~ ??
666
666666
666
666
999