iT邦幫忙

2023 iThome 鐵人賽

DAY 25
2
Software Development

再騙小心沒朋友🥵 用LIFF實作LINE整人工具系列 第 25

[Day25] 手把手帶你製作假的 LINE 禮物圖文訊息💔

  • 分享至 

  • xImage
  •  

昨天提到用 FLEX MESSAGE SIMULATOR 工具可以製作圖文訊息的模板,因為只有講到使用方法怕大家看不懂,剛好 LINE 禮物的贈送訊息改版了!!因此今天要手把手教大家製作假的 LINE 送禮物訊息~

  1. 登入 FLEX MESSAGE SIMULATOR ,用預設的模板來改版面
  2. 選擇圖文訊息版面(bubble)的大小(size),這邊目測大小先選 hecto,到時候傳測試訊息不對的話可以再改

    ⬆ size 大小選項很常更新,建議直接目測選一個大小最適合的。
  3. 把咖啡圖片取代成假的 LINE 禮物圖片連結。我是隨便找一張 LINE FRIENDS 插畫改成禮物圖片的形式,反正 LINE 送禮物有一堆背景可以選應該沒人會發現有詐(我會不會被告侵權阿😧)
    https://i.imgur.com/f55KnYX.png
    ⬆ 給大家我用的圖片和連結,如果不想動腦的話可以直接用這張
  4. 把不要的區塊刪光,新增要的物件

    ⬆ 刪除 box 區塊內的全部物件
  5. 把禮物圖片 box 區塊改成 horizontal,不然到時候排版會出問題
  6. 在 box 中各加入一個 image、text 物件,用來放禮物的圖片和文字,順便也把禮物的照片連結準備一下

    ⬆ Offset 是偏移量,要視情況調整文字和圖片的排列位置
  7. 製作按鈕,更改按鈕文字、按鈕樣式 (用 style 改)

  8. 增加 footer 區塊,把 box layout 改成 baseline (才能加小圖片)
  9. 在 box 區塊下增加一個 icon 、 text 和分割線 (seperate)

做出來的成品長這樣:

還蠻像的吧?!我個人是分不出來啦,但是點擊做出來的圖文訊息不會有任何反應,因為我沒有在 Action 裡面設定導向連結。之後會教大家如何讓點擊這個圖文訊息的人發送白目的訊息到聊天室~


上一篇
[Day24] 用 FLEX MESSAGE SIMULATOR 製作 LINE 圖文訊息
下一篇
[Day26] 傳播假圖文訊息網站完整程式碼
系列文
再騙小心沒朋友🥵 用LIFF實作LINE整人工具30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
arguskao
iT邦新手 3 級 ‧ 2023-10-10 14:22:30

太有趣了

lulu_meat iT邦研究生 5 級 ‧ 2023-10-10 15:31:28 檢舉

你說的對

我要留言

立即登入留言