*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2013年8月18日 星期日

想要表現的影音/圖像,按一下文字就跑出來



Attention & Click ↓
影音、圖像,隨按隨出
除非是某些特定的影片,例如院線電影、熱門電影等等。網路上的影音往往不宜太長,以我個人上課的要求,60秒是最後的底線。
因之把長影音打散成數支短影音,或是甘脆直接拍成很多支短影音,再讓讀者自行去選擇要看那一支,是重要的網路影音排版原則。
那麼,按一下某文字就在特定編輯區域跑出影音、圖像,就是重要的多媒體互動寫作技能。


範例 1:按字就可以換影音
愈來愈多的場合,透過各式螢幕的展現,多媒材並置的數位文本呈現形式已成主流。隨便逛逛,都可在各種場合看到這種新文本形式:
馬告國家公園內的螢幕閱讀形式【video ↓】
國家音樂廳內的螢幕閱讀形式【video ↓】
桃 園機場內的螢幕閱讀形式【video ↓】



語法

jquery程式,請放在<head>xxx</head>之間或<body>之後:
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>

要按下去互動的文字部分:
$('#a001').attr( 'src', '影片網址');

影音部分:
<iframe width="560" height="315" src="https://www.youtube.com/embed/bGo1qGATfn4?rel=0" frameborder="0" allowfullscreen></iframe>

一、請記得為影音設上id。本例為 a001 ,「#」字號不用寫入哦。
二、紅色字部分是影音的網址,請在youtube 分享/嵌入內找到。


範例 2:按字就可以換照片內容

馬告國家公園【gallery ↗】
人們最耳熟的大概是棲蘭【^】及明池【^】。但,馬告的美就不僅是只於此而已,森林中的光影,沈穩的綠意,樹本的線條,花朵的顏色……。這些都讓人的思緒銳利於對大自然的驚奇。
驚奇是重要的!這讓人對活生生的日子才能有活生生的感動。感動是人趨向於藝術的最大動力。



語法

jquery程式,請放在<head>xxx</head>之間或<body>之後:
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>

互動文字部分語法:
$('#b002').attr( 'src', '照片網址');

像片語法:
<img src="https://lh6.googleusercontent.com/-saPz8nE5QKs/UgeJUl8KJ0I/AAAAAAAAN08/a8eY5aqbW0o/w1159-h773-no/IMG_9305.JPG" style="width: 540px;" />




jQuery UI 進階:照片表現出互動變化樣態


呈現範例:<img id="b003" xxx>,按我復原




請在< head>xxx</head>間寫入下列程式碼:

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


在「互動文字部分語法」 這地方,增加程式選項,如下紅字:

$('#b003').attr( 'src', '照片網址').effect('fade', {easing: 'linear'}, 600);

互動時,照片就會以 fade 的形式來呈現互動。請按這裡看變化
如果想看文字部分的語法,請 按此看語法
<span onclick="$('#b003').attr( 'src', '照片網址').effect('fade', {easing: 'linear'}, 600);" style="text-decoration: underline; font-style: italic;">請按這裡看變化</span>


也可以再改寫成bounce 這種互動樣態,語法如下:

$('#b003').attr( 'src', '照片網址').effect('bounce', {distance: 10, easing: 'linear'}, 600);

互動時,照片就會以 bounce 的形式來呈現互動。請按這裡看變化



沒有留言:

張貼留言