各位你不用會剪接軟體
你也可以製作出像這樣子的影片
你現在看到的這段高質感的影片
是不用任何剪輯軟體制作的
它的底層呢
只是一行行寫網頁的HTML原始碼
而這個東西叫做
HyperFrame的全新開源框架
將會顛覆你的認知
嗨各位又是我AJ
今天我們要教各位如何使用
OpenAI Codex
來串聯這個最紅的影片生成工具
HyperFrame
簡單來說呢
它把影片的軌道變成了網頁的結構
只要你懂這個邏輯
接下來呢
我們就可以請AI幫你把一張圖片
一份產品的PDF
甚至丟一個網站網址給它
只要一小段時間
AI就可以直接幫你生成
完成度極高的品牌宣傳影片
如果你每天還在為了解析度啊
轉場動畫啦
對齊軌道來抓狂啊
今天這支影片
會徹底重構你的工作流程
那話不多說我們就開始吧
來到了這個Codex之後呢
你可以開一個專案
比如說從零開始
然後你這個專案比如說就叫
HyperFrame
然後把它儲存起來
好那開一個獨立的專案之後呢
接下來我們要來到外掛程式這個地方
搜尋HyperFrame
然後這邊會有一個加號
OK
然後按下去
然後它就問你說
安裝HyperFrame by HayGen 按下去
這樣就裝好了
非常的簡單
裝好之後呢
你就可以進到HyperFrame的這個
剛剛你那個專案裡面
然後按開始聊天
那你要做什麼事情呢
比如說呢
我剛剛有抓了一個這個官網的這個截圖
我們有新的官網啦
如果你還沒有去過的話呢
我相信這支影片看完
你等一下就會去到那個官網
因為今天影片的提示詞
我們把它在官網裡面免費送給你
所以呢
我們把官網的這個截圖放在這個地方
然後呢
你只要很簡單的跟他講說
請使用HyperFrame
製作一個7秒鐘的
9比16的影片
這樣子送出
那它會用HyperFrame做一個7秒的直式短片
它會先理解專案結構還有HyperFrame的規範
然後建立修改那個Composite
確保是驗證
HyperFrame這個有趣的工具
你給它的格式非常非常的多
最最最簡單就是你直接給它一個圖片
它就可以照著做了
但是呢
它說目前資料夾看起來是空的
技能路徑跟清單不一致
我定位實際HyperFrame的技能跟
CLI 可用狀態
再決定初始化專案還是在系統結構上補齊
它就會自己去想辦法去把HyperFrame的這個
CLI 的這些相關的技能找到了
它就會去初始化一個專案
然後呢
截圖的這個深藍 金色 白色
星羽會去建立一個設計基準
它在設計的時候
它會去建構一個叫做Design.
md的一份文件
那這個部分當然你都不用管它
反正總之Codex就會幫你搞定了
所以如果你不用Codex的話
那你就得下很多Prompt
但是呢
它會自己去建構所謂的這個設計的準則
然後來去幫你去做這樣的一個設計
所以 如果HyperFrame你要去生成一支短片的話
你可能就是真的只要很簡單的給它一張圖片
然後請它幫你生成一個影片
然後規格你可以下
比如說這個1080x1920
比如說就是直式的Short
那如果你今天是要做簡報
你就是橫式
那你就是16比9
這種橫式的
或是什麼1比1之類
你就直接提示值下給它
然後它就會開始幫你建立一個HTML
那這個地方就是它有趣的地方
它其實是在做網頁動畫
這件事情其實讓我想到就是
早年 不知道
各位有沒有學過像Flash之類的東西？
其實就是在一個畫布上面去
然後加上一些元件
然後去設定一些什麼關鍵幀之類的東西
然後把它拉來拉去有沒有
然後去設定說從這個地方要移動到這個地方
所以其實它就是在用網頁的方式
去把元件讓它飛來飛去
本質上是這樣子
所以裡面的細節你不用管
反正它會自己去處理這件事情
你只要等就好了
所以說我們使用Codex這樣一個工具
來去使用Hyperframe這樣的一個技能
那好處就是
反正Codex會幫你處理掉那些
你不知道怎麼樣下指令這樣的一個情境
當然 如果你熟悉的是使用
比如說像Cloud Code
CLI等等這些工具
基本上也是都可以通用的
只是你得自己下指令
那Codex這塊就做得比較Fancy一點
沒有那麼的可怕
所以它幫你建立了這個出版的
Composition已經建立完成
它會跑一個Hyperframe檢查視覺
然後找文字溢出尺寸或Timeline等等的問題
所以它會先生成一個Draft
然後會自己做這個Self-check
自檢品質檢查
然後檢查完了之後
看看有沒有問題
然後有問題它會自己再做一次修正
所以基本上你也不用管它
最終最終它會直接圖一個MP4的影片給你
所以沒有錯誤
然後它用了這個
然後正在編輯
然後它Logo對比時偵測偏低
把動畫移到GSAP
GSAP是一個去年開源
現在是免費的一個網頁動畫執行的方案
這支影片在做研究的時候
其實我們還要找到業界另外一個很有名的
叫做Remotion的架構
那不過Remotion跟這個Hyperframe
它實作的方式不太一樣
Hyperframe它是用HTML這個方式來去做實作
那目前看起來效果我個人測下來
我覺得Hyperframe這邊在這個成功率
是比Remotion再高一些的
如果您對Remotion感興趣
或者是你本身有在用Remotion
你可以在影片下面留言跟大家分享一下
所以現在看起來它已經檢查完了沒有問題
然後要準備輸出MP4這個格式
所以這一切的一切
基本上都是在你的電腦裡面執行
你能想像它就是用網頁的形式去做動畫
然後再把網頁的那個動畫錄起來
變成一個MP4輸出過去給你
所以解析度還蠻不錯的
所以各位可以來看一下
好啦那做好之後呢
它會彈一個這個編輯視窗出來
那你可以在這個地方去做一些額外的調整
不過我建議如果你覺得不滿意
你就直接回去用提示詞的方式
叫它重做就好了
在這個地方最重要的事情是要把它下載下來
那下載在這個地方
左上角這個地方按一下下載
然後你可以在這個右邊的Inspector裡面
看到這個Render的這個狀態
就是它會去幫你把你的那個預覽的那個影片
真實的把它算成一個MP4的格式
那如果你有成功算出來的話呢
這個檔案你就可以直接把它下載下來
然後你就會看到這支影片
所以我給它一張橫式的圖片
它幫我重新塞進了直式的這個內容裡面
所以基本上如果你今天有一張簡報
你想要讓這張簡報變得活潑一點
那你只要把那張簡報截個圖丟進來
使用HyperFrame加Codex
基本上你
那個簡報就會變得非常非常的華麗了
這個是HyperFrame的一個最簡單的用法
後面還有一個非常酷炫的東西要跟各位分享
就是HyperFrame其實除了直接下指令
叫它做影片之外呢
那我們還準備了一個HyperFrame的參考文件
這裡面密密麻麻寫了HyperFrame超過50幾種
各種各式各樣影片製作的動畫
首先先把這份資料喂進去給Codex
去確保它 校準它
然後讓它可以不用出去查資料
你就可以去做更多的事情
那我們就把那份文件打開來
看一下HyperFrame到底可以做哪些事情
HyperFrame基本上 它的整個流程
我們就不講了
我們就直接看一些實際上的案例
HyperFrame可以做什麼事呢
它有50幾種 各種 各式各樣
它叫做Blocks的東西
那這裡面可以做什麼
它可以做IG的追蹤卡
TikTok的追蹤卡
TwitterX的貼文卡
Reddit的貼文卡
Spotify的卡
YouTube訂閱的這個圖像卡
然後還有一些轉場
各種各式各樣的轉場
然後這是投影片用的
然後還有這是程式碼片段
如果你今天要秀程式碼要逐行顯示
你就可以帶這個程式碼這個主題
還有就是資料視覺化的
比如說有這個Data Chart
Flow Chart
美國地圖
西班牙自治區地圖
世界地圖等等
然後還有一些就是UI類的東西
比如說iOS 16的這個玻璃
液態的這個畫面等等
然後還有一些各種各樣的什麼有機液體模擬
然後還有一些主題範例等等
這個答案 其實是我們從HyperFrame的官網
把它整理下來的一個
中文的這個提示詞的這個東西
是讓你的腦袋知道說
其實你還可以下哪些提示詞
然後關鍵字就在這個地方
第二個Demo
我們把這個東西作為參考之後
我們可以把一份文件
比如說最近Google Cloud
他們出了一份這個所謂的AI代理手冊
那我們就可以把這個
AI代理手冊的PDF把它丟進去
我提供了一份產品形錄
那用HyperFrame幫我做
一支20秒的橫式宣傳影片
然後每一頁轉成高解析度圖片傳到Assets
然後每頁停留4秒依序播放
所以基本上這個東西就是
我們基於這個提示詞
然後我給他一份PDF
所以我不一定要手動解給他
我可以把我的
這個簡報直接匯出成PDF的格式
然後把它丟進去
他就會自己去處理這件事情
所以他會讀了這個我們給他這個規則
然後他帶了HyperFrame、HyperFrame CLI
然後他去建所謂的這個獨立的專案
然後去動到原本的這個Video不要動它
然後他就去檢查PDF頁數
然後把PDF轉成圖片
然後再把這些圖片逐一的去生成影片
好啦經過了一小段時間呢
我們已經獲得了這個
那我就不匯出了
匯出剛剛講過了
我們就來看一下這次的成果如何
你看我給他一份PDF
我什麼都沒有幹嘛
然後他就自動的幫我做成了很漂亮的這個
有帶下面這個很漂亮的彩色時間軸這個功能
然後他會自動幫我放大一下
然後把我滑下一頁
就做成了一個非常非常漂亮簡單的
這個把簡報變成了動畫的這樣的一個形式
那我們進最後一個Demo
我們最近的這個官網上面
各位除了來索取提示詞之外呢
我最近其實也很認真的在更新AI學習筆記
會把我看到的一些學習心得
把它做成這個部落格文章
那這個黃仁勳黃爸爸也開了新的發表會啦
所以我又馬上談AIPC這個主題
所以呢我們就可以把
官網上的部落格的這個文章
比如說呢我們在這個地方
把這個部落格文章放進來
請幫我把網站上的部落格文章卡片
製作成1比1的動畫
抓進前五篇文章
用途是給LINE朋友快速理解
段落直接有切換特效動效樣式自選
所以各位可以看到
因為我們用了Codex
所以Codex可以幫你去抓網路上的資料
所以你可以直接跟我一樣
就丟一個網址進去
然後把你的願望寫一寫
那Codex就會幫你去抓
拿到部落格列表啦
前五篇都是六月下發表的
AIPC、AI簡報工具
Codex工作系統啦
教育 AI企業的策略啦
幫你做一個正方形動畫專案
內容壓縮成LINE的朋友
可以快速掃讀的節奏
所以你只要很簡單的去交代你的用途
比如說
你今天是要做這個YouTube的short啦
IG啦 TikTok啦
因為它後面其實是有一些相對應的模組
可以去實作的
那這個設計的細節
你就可以留給HyperFrame去做這樣一個發想
那其實結合Codex
我自己試過像Codex啦
AntiGravity啦
或者是Cloud Code
我之前用Cloud是用4.
7的時候
那時候我覺得Cloud沒有Codex這麼厲害
但是Cloud現在有4.
8了
聽說Cloud 4.
8做出來的效果
會比GPT的Codex還要再好一點點
所以 如果你手上有付費的
這個Cloud 4.
8的額度
用不完的話
你可以考慮用一下HyperFrame來去
try try看
搞不好你會獲得這個意料之外的這個驚喜
好啦不到五分鐘呢
它就幫我做好一支影片啦
我們來點出來看一下吧
近期五篇
中文字都正確
第二篇
第三篇
第四篇
第五篇
還幫你把五大重點都整理回來
然後就變成一支22秒的影片
真的是了不起
以上就是我們這一集的教學影片內容
那如果你有一些很有趣的
HyperFrame的這個應用跟玩法
歡迎你在影片下面留言跟大家討論交流一下
那我們就下支影片見囉
掰掰