November 10, 2020 Training

Creative Video Editing by Ashley Kennedy on Lynda.com (cont.)

Parallel Edit — two shots filmed at different times are cut together as if they are concurrent

Invisible Cut — when the cut is treated as if it didn’t occur

Whip/Swish pan — continuity editing, where the camera is moved so quickly that you can see the cut

Jump — complexity edit, two sequential shots of the same subject are cut together w/out considering continuity

Montage —

Eisentein’s Five Methods of Montage — Metric, Rhythmic, Tonal, Overtonal, Intellectual

Classic narrative montage, compress the story to make it cinematic and compressed

Rhythmic Montage — cutting to specific time/tempo while prioritizing action in frame

Intellectual Montage — two independent shots can be combined to create new meaning

Smash cut – one shot abruptly cuts to another different shot

Learning Web Audio and Video by Joseph Labreque on Lynda.com

Code below is basic HTML page setup and includes code for linking media, including download

Only includes minor CSS instruction

<!doctype html>

<html land=”en”>

<head>

    <meta charset=”utf-8”>

    <title>Audio and Video</title>

    <style>

        a {color: aliceblue;

        }

        iframe {border: none;

        }

</style>

</head>

<body>

   <figure>

        <figcaption> Listen to the audio file:</figcaption>

    <a href=”/file.name”>File Name</a>

        <a href=”/file.name” download=”/file.name>Download File Name</a>

        <hr>

        <iframe src=”/file.name” width=”500px” height=”auto”>

        </hr>

    <audio src=”file.name” controls></audio>

OR (the following version is handy for including multiple versions of the same file in order to have fallbacks if one file type does not work.

    <audio loop controls>

        <source src=”file.name” type=”audio/mpeg”>

        <source src=”file.name” type=”audio/ogg;codecs=vorbis”>

        Sorry, your browser does not support the audio element.

    </audio>

   </figure>

    <video id=”videoelement” src=”file.name” poster=”newfile.png”  preload=”metadata” controls>

poster attribute will insert file listed as thumbnail

    <div id=”mediacontrols>

        <div id=”controlbarrail”> inserts timeline

            <div id=”controlbarfill”></div>

        </div>

        <button id=”playbutton”>Play</button>

        <button id=”pausebutton”>Pause</button>

        <div id=”timedisplay”>

            <time id=”positiondisplay”>00.00</time> shows current time

            <time id=”durationdisplay”>00.00></time> shows total time

        </div>

    <track default label=”English” kind=”captions” srcland=”en” src=”file.vtt”>

</video>

including javascript at end will allow all former elements to load and indicate that they can be manipulated with javascript, uses Media API

<script>

    var media = document.querySelector(‘#videoelement’);

    var play = document.querySelector(‘#playbutton’);

    var pause = document.querySelector(‘#pausebutton’);

    var position = document.querySelector(‘#positiondisplay’);

    var duration = document.querySelector(‘#durationdisplay’);

    var rail= document.querySelector(‘#controlbarfill’);

    var fill = document.querySelector(‘#controlbarfill’);

    play.addEventListener(‘click’, playMedia); clicking the playbutton plays the media

    function playMedia() {

    media.play();

}

    pause.addEventListener(‘click’, pauseMedia); clicking the pausebutton will pause

    function pauseMedia() {

        media.pause();

}

rail.addEventListener(‘click’, seekMedia); this makes the timeline work functionally

    fill.addEventListener(‘click’, seekMedia);

    e here equals event

    function seekMedia(e) {

        media.currentTime = e.offsetX / rail.offsetWidth * media.duration;

}

    media.addEventListener(‘loadmetadata’, updateTime); this updates the timeline

    media.addEventListener(‘timeupdate’, updateTime);

    function updateTime() {

        position.textContent = timeDisplay(media.currentTime);

        duration.textContent = timeDisplay(media.duration);

        var currentlength = rail.clientWidth * (media.currentTime/media.duration);

        fill.style.width = currentlength + ‘px’;

}

This will update the times in the clock

function timeDisplay(t) {

    var minutes = Math.floor(t / 60);

    var seconds = Math.floor(t – minutes * 60);

    var minutevalue;

    if (minutes < 10) {

minutevalue = ‘0’ + minutes;

} else {

    secondvalue = seconds;

}

var mediatime = minutevalue + ‘:’ + secondvalue;

return mediatime;

}

</script>

</body>

</html>

VTT File (used for linking video captioning)

WEBVTT

00:01.000 → 00:04.00

These are English language captions.

00:07.000 → 00:12.000

Insert first caption.

Teaching Techniques: Creating Multimedia Learning by Renaldo Lawrence on Lynda.com

Asses what is most important to include, so that you can spend all your time on what would work best and what information is most valuable (and therefore most engaging) to your users

Try to use what students are already using in their own time, consider learner types

Software: Adobe Captivate, Adobe Presenter, Reallusion CrazyTalk Animator, Screenflow

Project Workflow

  1. Identify your students learning styles and needs
  2. Decide what multimedia materials you want to include
  3. Decide what devices you will design for, prototype
  4. Decide what software you want to use
  5. Create and test

Ask what are you trying to accomplish? Be specific.

Establish Constraints. Be respectful of the time of the people building the project

Decide what you’re going to create before you decide how your’re going to do it

    -Remember the potential fun found in limitations

Important question to ask: can most students learn the material without any assistance?