---
title: Multimedia Making MTP Report
tags: multimedia-making
---
# $$\text{多媒體製作 期中專案 書面報告}$$
> 小提醒：若您是以書面形式閱讀本報告，我們極度建議您轉為使用瀏覽器線上閱讀，並使用筆記型或桌上型電腦，以取得最佳的閱讀體驗。使用手機瀏覽排版可能會跑掉。
> https://hackmd.io/@ruby0322/Hkaaoc8PF
## $$組別資訊$$
### $$\text{成員}$$
<div style="display: flex; align-content: center; justify-content: center;">
<div>
| 系級與姓名 | 學號 |
| -------- | -------- |
|資管一顧寬証|$\text{B10705016}$|
|物理一黃聖哲|$\text{B10202066}$|
</div>
</div>
---
## $$\text{專案簡介}$$
### $$\text{專案題目}$$
內容
利用學校計中提供的網頁空間，製作個人或所屬單位之網頁，並利用影像處理軟體合成影像或是利用類似MediaShow工具將多張相片合成一個視訊檔。
說明
網頁請使用框架的模式，可使用CSS、Flash、Java script…等
開發的工具不限定(可用SharePoint Designer、Dreamweaver…等)
以下二者選擇一項功能
(1) 利用圖層(Layer)功能合成數張照片，影像處理軟體的不限定(可用PhotoShop, PhotoImpact…等)
(2) 利用類似MediaShow工具將多張相片合成一個視訊檔(檔案不宜過大)
報告務必詳細 (包括開發時工具所使用的功能，在製作網頁、合成影像、製作幻燈影片時的構想，所遇到的問題，以及在此作業中的心得，若使用一些現成的模組或程式請務必附上參考時的網址)
### $$\text{作品連結}$$
[網站連結](https://im-ruby.herokuapp.com/)
<!-- ### $$\text{專案最終成績}$$
最終成績：班級排名第一
[成績證明](https://drive.google.com/file/d/1URgYq9A3UvXMeR8VJ8JNuOoH1-Y-eYBd/view?usp=sharing) -->
---
## $$\text{完整書面報告}$$
### $$\text{伺服器架設}$$
#### $\text{伺服器選擇}$
這次選擇使用Heroku作為我們網頁的伺服器
#### $\text{實作方法}$
首先需要安裝的軟體有
1. git
2. Heroku CLI
安裝好後要先在terminal輸入`heroku login`指令，
並按照指示登入。
登入後，在工作目錄先初始化repository。
打開terminal輸入`git init`，
再輸入`git add .`
最後輸入`git commit -am.`
這時就可以`heroku git:remote -a "app名稱"`
以將著個git repo綁訂到你的app
以上這些環境設置好後，
還有一些基本必備的檔案才可以讓app正常運行
1. Procfile(Process File)
- 註明app種類及運行方式
2. requirements.txt
- 註明需要用到的Python package(module)
3. runtime.txt
- 註明Python版本
準備完成就可開始做routing
首先我透過flask這個framework來搭建各路線(route)
完整程式碼如下：
```python
import flask
app = flask.Flask(__name__)
@app.route('/')
def redirect_to_index():
return flask.redirect(flask.url_for('index'))
@app.route('/index/')
def index():
return flask.render_template('index.html')
@app.route('/ruby/')
def rubys_page():
return flask.render_template('ruby.html')
@app.route('/sage/')
def sages_page():
return flask.render_template('sage.html')
if __name__ == '__main__':
app.run()
```
值得注意的是因為flask本身對於工作目錄的整理方式有規定
例如：
1. html template要放在命名為templates的folder中
2. 圖片、css、js等等要放在static folder中
如果沒有正確地整理檔案，可能造成檔案讀取失敗。
我們的工作目錄長這樣：
---
### $$\text{首頁網頁設計}$$
#### $\text{IDE & Debug}$
IDE: VSCode
Debug: live server(VSCode Extension)
----
#### $\text{斜直分隔線 Slanted Separation Line}$
##### $\text{靈感來源}$
[MineNTU](https://minecraft.myntu.me/)
##### $\text{設計理念}$
在我們小組進行介面構想及設計時，我們受到近期流行的斜切割線風格影響。
我們認為利用斜直線將畫面一分為二，乾淨俐落且一點也不單調。
此外，分割線將畫面切成兩部分恰好與我們的組員數相符，
因此將我們的首頁設計為被一斜直線分為左右的版面，
兩側皆個代表我們中的一個組員。
左右兩側緊密接合，代表我們合作無間。
但割線的俐落也代表我們各司其職。
##### $\text{實作辦法}$
我們透過CSS做出Slanted Division
參考了以下影片
[影片連結](https://www.youtube.com/watch?v=6-s8YBfPdKI)
----
#### $\text{介面配色 Color Palette For Interfaces}$
##### $\text{事由}$
我們明白，一個網頁的外觀和諧與否，與配色有極大的關係。
然而，對於兩個二類組男生，選擇一組和諧的配色並非如此容易。
##### $\text{解決方案}$
於是我們透過網路，參考了許多現成的色彩盤(Color Palette)。
最後透過觀摩，領悟了其中的精隨。
目前的網站首頁兩種配色(亮/暗)，以及個人網頁主題色
都是由手動挑選出來的。
##### $\text{首頁}$
亮配色 左`#e4ffff` 右`#fffff1`
暗配色 左`#2a2929` 右`#313336`
##### $\text{個人網頁主題色}$
主要色調 一`#313336` 二`#2a2929`
次要色調 一`#ff7d27` 二`#ffffff`
----
#### $\text{互動式開關 Interactive Toggle Switch}$
##### $\text{靈感來源}$
[Linggle](https://linggle.com/)
##### $\text{事由}$
因為曾經在某網站上看過這樣的功能：可以透過開關切換主題色，
當時看到非常心動，因此藉由這次機會嘗試實踐。
首先遇到的問題是：按鈕的種類選擇，在HTML中，`<input>`有[這些種類](https://www.runoob.com/tags/att-input-type.html)。
我們認為以切換主題色為目的應該使用開關(Toggle Switch)最為適切。
但其中卻找不到開關這個種類，原本還因此考慮捨棄此選項。
##### $\text{解決方案}$
經過一番搜尋，我們找到適合我們的工具--bootstrap。
透過以下程式碼，搭配bootstrap提供的階層樣式表(CSS)，
就可以達到我們所期望的結果。
```html
<label class="switch">
<input type="checkbox" id="switch">
<span class="slider round"></span>
</label>
```
呈現樣式
##### $\text{開關牽動實作辦法}$
首先，當DOM物件載入完成後，在開關上新增一個`EventListener`，
並綁定`changeTheme`函式
片段程式碼如下
```javascript
function main(event) {
if (localStorage.getItem("isBrightTheme") != null) {
isBrightTheme = localStorage.getItem("isBrightTheme");
} else {
isBrightTheme = true;
localStorage.setItem("isBrightTheme", isBrightTheme);
}
document.getElementById('switch')
.addEventListener('click', changeTheme);
document
.getElementById('switch').checked = !isBrightTheme;
}
window.addEventListener('DOMContentLoaded', main);
```
以下是`changeTheme`函式
```javascript
function changeTheme(event) {
isBrightTheme = !isBrightTheme;
if (isBrightTheme) {
document.getElementById('right').style.background = "#fffff1";
document.getElementById('left').style.background = "#e4ffff";
document.getElementById('right').style.borderLeft = "8rem solid #e4ffff";
let names = document.getElementsByClassName('name');
for (let i = 0; i < names.length; i++) {
names[i].style.color = "black";
}
} else {
document.getElementById('right').style.background = "#313336";
document.getElementById('left').style.background = "#2a2929";
document.getElementById('right').style.borderLeft = "8rem solid #2a2929";
let names = document.getElementsByClassName('name');
for (let i = 0; i < names.length; i++) {
names[i].style.color = "#cad5a7";
}
}
localStorage.setItem("isBrightTheme", isBrightTheme);
}
```
我們將目前的主題狀態儲存在全域變數`isBrightTheme`，
並且在其更新後儲存至localStorage，
如此使用這下次回到網站，仍可沿用之前設定。
----
#### $\text{橢圓相框 Oval Photo Frame}$
##### $\text{靈感來源}$
[LuckyAnthonyAn's Blog](https://hakkaz.github.io/)
##### $\text{事由}$
單單是展示一張照片，就是一門大學問。
我們希望透過最簡單卻又不單調簡陋的方式呈現我們的個人照。
首先我們希望照片是橢圓的，其次希望照片外緣能有一細框。
##### $\text{橢圓實作辦法}$
橢圓的實作相對簡單，只需要將`border-radius`屬性設為`50%`即可
片段程式碼(CSS)如下：
```css-
.img-border {
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
height: 20.9rem;
width: 15.75rem;
background: #e3dee4;
opacity: .92;
-webkit-transition: all .3s ease-in-out;
margin-bottom: 2rem;
}
```
##### $\text{相框實作辦法}$
我們透過重疊兩個大小不一的橢圓Division製造出相框的感覺。
```html
<div class="img-border">
<div id="right-img" class="img">
<img src="../static/images/sage_image_fliped.jpg" alt="Sage's Image">
</div>
</div>
```
----
#### $\text{當屬標停留，放大物件 Scale When Hovered}$
##### $\text{實作辦法}$
透過CSS中的`transition`屬性搭配`hover`pseudo element，
達到此目的，以下為片段程式碼：
```css
.img-border {
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
height: 20.9rem;
width: 15.75rem;
background: #e3dee4;
opacity: .92;
-webkit-transition: all .3s ease-in-out;
margin-bottom: 2rem;
}
.img-border:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
-webkit-transform: scale(1.1);
}
```
---
### $$\text{個人網頁設計}$$
#### $\text{主頁設計、風格選擇}$
##### $\text{簡約風格}$
對於個人網站的風格我們思考了許久，
也嘗試了各種不同的風格，
最後決定沿用首頁的簡約風格，
讓使用者整體的感受一致，不會有突兀的感覺。
##### $\text{善用對比}$
在製作首頁遇到配色問題後，
我看了許多有關配色及字體排版等等的教學影片，
這次算是把所學完整的用了出來，
透過簡單的黑灰色調打底，
將想要凸顯的文字或物件塗上橘色。
散發出一種低調卻有質感的氣息。
##### $\text{模糊背景}$
在個人網站的第三、四部分，
我使用了經過模糊處理(透過PS的高斯模糊)的真實風景照。
利用與前兩部分之鮮明對比，
吸引使用者注意，
如此可以促使使用者認真觀賞作品。
----
#### $\text{頁面滑動}$
##### $\text{靈感來源}$
[AOS](https://michalsnik.github.io/aos/)
----
#### $\text{主頁See More按鈕}$
這個相對簡單，片段程式碼如下：
```html
<div class="primary-button">
<a href="#info">See More</a>
</div>
```
----
#### $\text{側邊導航欄 Side Navbar}$
側邊固定的導航欄，
放置了整個網站四部分的連結。
```html
<div class="fixed-side-navbar">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#home"><span>Intro</span></a></li>
<li class="nav-item"><a class="nav-link" href="#info"><span>Info</span></a></li>
<li class="nav-item"><a class="nav-link" href="#works"><span>Works</span></a></li>
<li class="nav-item"><a class="nav-link" href="#our-story"><span>Our Story</span></a></li>
</ul>
</div>
```
`fixed-side-navbar` 的CSS原始碼：
```css
.fixed-side-navbar {
position: fixed;
top: 50%;
right: 0;
z-index: 99999;
margin-top: -100px;
text-align: right;
padding: 30px 0;
-webkit-transition: all .3s;
transition: all .3s;
}
```
##### 滑動動畫實作辦法
透過jQuery的Animate使得Scroll變得順暢自然
```javascript
$(document).ready(function(){
// Add smooth scrolling to all links
$(".fixed-side-navbar a, .primary-button a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}
});
});
```
----
#### $\text{作品呈現方式 - 旋轉木馬 Carousel}$
##### $\text{靈感來源}$
[mdbootstrap](https://mdbootstrap.com/docs/standard/components/carousel/)
##### $\text{遇到的問題}$
在這座旋轉木馬的過程中，我發現因為我們有些作品尺寸較大，
導致只顯示部分圖像，原本透過直接在`img`tag加上`height: 62rem;`
的style，但發現其結果如我原本預想不一。
最後透過用一個`div`包住`img`，在`div`加上`heightL: 62rem;`的style，
並且在`img`加上`height: 100%`的style就完美地解決了這個問題。
##### $\text{實作辦法}$
我參考了[bootstrap的官方docs](https://getbootstrap.com/docs/4.3/components/carousel/)
----
#### $\text{作品簡介玻璃面板}$
##### $\text{靈感來源}$
##### $\text{實作辦法}$
```css
.tabgroup-title {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 25px;
border-bottom-right-radius: 10%;
border-bottom-left-radius: 10%;
backdrop-filter: blur(5px);
}
.tabgroup-description {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 25px;
border-radius: 30%;
backdrop-filter: blur(5px);
}
```
##### $\text{參考影片}$
[影片連結](https://www.youtube.com/watch?v=O7WbVj5apxU)
---
### $$\text{影像編輯與合成}$$
> 作者：顧寬証
#### 校園飛行員
##### 成品
##### 素材
##### 工具
Adobe Photoshop
##### 創作理念
透過影像編輯，
將不可能做到的事化為可能。
我認為影像編輯，
是一個滿足人類難以達成的慾望的好管道。
在台大駕駛F35？
也許這輩子做不到了...
但我也能透過影像編輯，
使我的奇葩心願在自己的世界被實現。
我將乘坐台大號F35衝向世界，如入無人之境，屢戰屢勝。
##### 創作過程
此作品有全程錄影
製作過程紀錄影片如下
{%youtube pKQxb_sx488 %}
[影片連結](https://www.youtube.com/watch?v=pKQxb_sx488)
----
> 作者：顧寬証
#### 轟隆隆 隆隆隆隆 衝衝衝衝 拉風
##### 成品
##### 工具
Adobe PhotoShop
##### 創作理念
>轟隆隆 隆隆隆隆 衝衝衝衝 拉風
引擎發動 so come on 引擎發動 so come on
一瞬間 踩下油門 催乎盡磅(台) 乘風 衝 衝
讓窗外的
風 吹動每一個毛孔 我是今夜 最 稀有的品種
讓 看到的人以為是夢 還沒醒來 就已經無影無蹤
風 敲醒每一個面孔 我是明天 被 讚嘆的驚悚
讓 看到的人全部感動 零到一百K only四秒鐘
[name=卜學亮(阿亮)《超跑情人夢》官方MV (Official Music Video)]
我想像中的超跑情人夢！！！
這是當初聽太多超跑情人夢，
被洗腦後，作夢夢到的畫面，
我盡我所能地重現了腦中的畫面：
情人坐在超跑上回頭看向我...
然後就開始唱超跑情人夢了...
##### 創作過程
這張相對簡單，只是把一個女性P在車上，
再用橡皮擦把被擋住的身體部分擦掉。
最後加上一些漂亮字體的字。
----
> 作者：顧寬証
#### 飛行荷蘭人
##### 成品
##### 素材
##### 工具
Adobe Photoshop
##### 創作理念
透過倒轉大片蔓延的雲海形成無邊的烏雲，
搭配上放大過後的雲海作為兇猛的波濤，
整體的黑灰色調加上閃電在船後劃下，
使得飛行荷蘭人氣勢磅礡且格外陰暗。
雖然環境險惡，他卻堅持前行。
可以說是我的目前的境遇寫照：
黑暗無邊無境，大浪永無止盡，
看不清東西南北，數不盡未知凶險，
仍依然勇往直前，追求卓越，勇敢追夢。
##### 創作過程
天空->雲海倒轉+暗色濾鏡
海量->雲海放大+暗色濾鏡
荷蘭人的船->船+暗色濾鏡
閃電->加亮+手繪
----
> 作者：黃聖哲
#### 夜空中最亮的星
##### 成品
##### 素材
##### 工具
Adobe Photoshop
##### 創作理念
疲憊的身軀從總圖自習室走出，無意間抬起頭，映入眼簾的不是孤寂的黑夜，而是漫天繁星閃爍，在這不斷努力的我們，為的就是在將來的某一天，能像夜空中最亮的星一樣，盡情閃爍著耀眼的光芒。
##### 創作過程
初步構思後，在網路上抓了夜空和台大總圖(白天)兩張圖片。
先匯入總圖照片作為基底，再匯入夜空作為第二個圖層，
調整至適當位置並將夜空隱藏，將總圖的天空用區域逐步選取的方式裁切掉，
後與夜空圖層疊合。
其後是將總圖原本白天的色調調暗，利用顏色查詢，
在3DLUT檔案載入NightFromDay.CUBE，
再將圖層色彩增值，就可以營造出夜晚的色調。
----
> 作者：黃聖哲
#### 跳脫舒適圈
##### 成品
##### 素材
##### 工具
Adobe Photoshop
##### 創作理念
大家都知道派大星住在海中的比奇堡，但此圖中的派大星卻站在一望無際的沙漠之中，其中看似充斥矛盾，實則隱含著深意，水生動物派大星勇於跳脫舒適圈，以開朗樂觀的心態面對各種挑戰，效仿他積極向上的精神吧!
##### 創作過程
初步構思後，在網路上抓了沙漠和派大星兩張圖片。
先匯入沙漠照片作為基底，再匯入派大星作為第二個圖層，
將派大星以區域逐步選取的方式將派大星原圖的背景去掉，
將兩圖疊合。
另外使用畫筆功能，以RGB數值配出適當顏色並調整適當粗度，
在圖片右上方點出太陽的效果，最後再細部調節整體圖片色調。
---
### $$\text{組員心得}$$
#### $\text{B10705016 顧寬証}$
先前有淺淺地碰過web programming，但鮮有真正的實作機會。
因為第一沒有動力，第二缺乏內容。
但這次多媒體製作的期中報告，給了我實作的動機，也給了我們內容。
我很高興能有這個機會與體驗，讓我把先前所學實際應用在自己的網頁上。
雖然說看過不少前端的教學影片，但是紙上談兵還是無法與實作相比擬。
這次的期中報告，讓我發現自己許多技術上的盲點。
有些漏學，有些忘了，也有些無法變通。
雖然網頁設計幾項常見的Component種類也不多，
但要如何透過這些零件組裝成一個吸睛的網頁確實是一大學問。
我趁著這次期中報告製作期間，大量觀摩優秀的網頁，也得出不少心得。
雖然還是無法寫得像前端工程師一樣，但我確定此次的期末報告，
讓我有了大幅的進步，不僅是在技術上，美感上也小有增進。
雖然這次期中報告中的內容基本上都是邊學邊做，
一開始甚至只能用複製貼上的，到最後進步至能夠融合自己的想法，
並用自己喜歡的方式重現他人的程式碼。
我認為我在這過程中進步非常多，理由有三
一、有效率且精準地查找想要的資料也是一門學問，
這次寫網頁過程中遇到的問題大概有數十個，
我得到很多實際訓練自己查資料以及過濾無關自料的能力。
二、大多數情況，他人的程式碼直接複製貼是不一定會有效的，
常見的原因有：css class未定義、未import style sheet(例如bootstrap)、
程式碼架構不同導致物件被parent element的屬性影響等等。
為了能夠有效利用他人的程式碼，我們必須學習解決這些問題。
三、雖然許多component都是有現有程式碼，很多只需稍作修改即可使用，
但因為我們沒有使用完整模板，而是到處蒐集喜歡的component，
並自己設計再組裝。
如何不突兀地且無違和地組裝來源不同的物件也是一個課題。
最後，這次的報告製作的過程也算是比先前所有經驗來的穩重，
我們在學期初就有先做了一些簡單的紙本規劃及spec file等等，
雖然有些feature在實作過程中才發現能力不足，
但大體上的架構都與先前計畫的非常接近。
製作過程中因為有事前的計畫而不會毫無頭緒地亂做，
讓我明白事前規劃的執行效率是肯定比邊做邊想來的高。
我們也體驗到一個專案從口頭討論到紙本計畫，
到最後實做出來的整個流程。
這次的影像編輯作業也讓我對PS技巧有進一步的熟悉機會，
可以透過影像編輯，將自己的想法具現化，我覺得是一件很快樂的事。
----
#### $\text{B10202066 黃聖哲}$
在這次網頁製作、合成修圖的練習中，真的費了我們好大一番功夫，不過也因為如此，我得到了很多有趣的收穫，在網頁製作方面，我們自行架設網頁於外部伺服器，並以html、CSS、Javascript等語言工具編寫網站，起初我們花了一段時間在構思理想的網頁樣貌，初步規劃後，開始靠不斷網路搜尋的方式一點一點的學習需要的技術，這個漫長的學習過程讓我領悟到學會搜尋的能力真的非常非常重要，我們並不需要也不可能會所有的東西，然而，若是有足夠的搜尋能力與技巧，每次遇到問題我們總能找出適當的解決方法，我認為這才是最重要的。
另外在合成修圖方面我們也是第一次接觸，從什麼都不懂到漸漸學會使用修圖工具，當中也學到了很多的新知識，我是使用Photoshop來合成修圖，靠著一步步在網路上爬文、看教學影片，現在終於對於圖層疊合、裁切、亮暗對比、調色等等都有一定的概念基礎。
整體感覺下來這次做的東西挺扎實的，製作過程中真的學不少，多媒體製作果然十分有趣。
Sign in with Wallet
Connect another wallet