Tutorial: Radiales Menü mit JavaScript

Radiales Menü mit JavaScript

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinbergeinige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Technisches Konzept für ein radiales Menü

Autor: Julian Hundertmark

Als Ziel gesetzt wurde ein Menü mit verschiedenen Funktionalitäten und Animationen welches als individualisierbare Grundlage für weitere Nutzer zur Verfügung gestellt werden soll. Hierzu soll es leicht in eine bestehende Seite integrierbar, intuitiv und vielseitig einsetzbar sein.

Begonnen wurde damit, ein bereits vorhandenes Menü als Grundlage einzubauen. Dieses wurde nachfolgend sowohl in der Funktion als auch im Design und Animation abgeändert und erweitert.

Das Menü lässt sich mithilfe einer Javascriptfunktion aktivieren. Dies triggert die Menüknöpfe welche animiert in den Vordergrund verschoben werden und wodurch diese nun anwählbar sind. Weitere Javascriptfunktionen wurden als Beispielfunktionen hinzugefügt. So lässt sich exemplarisch die Schriftgröße der Webseite oder auch die Hintergrundfarbe per Mausklick verändern. Zusätzlich wurde das Menü in einem ziehbaren Div-Container eingegliedert sodass es für Nutzer frei auf der Webseite zu bewegen ist. Diese zweckmäßige Annehmlichkeit soll die Usabillity der Menüs erhöhen. Auch die animierten Tooltips sollen zukünftigen Nutzern weitere Möglichkeiten geben das Menü intuitiv auf einer eigenen Seite anzubieten. So könnte das Menü auf One-Pagern eine alternative Steuer- und Anpassungsmöglichkeit bieten. Die Möglichkeiten weiterer Veränderungen und Individualisierung in Form von weiteren Funktionen bietet sich an.

Auch das Design des Menüs lässt sich leicht den Funktionalitäten anpassen. So können wie bereits durch meinen Entwurf gezeigt Knöpfe hinzugefügt oder entfernt werden. So habe ich die Positionen einzelner Knöpfe wieder in eine Symmetrische Position gebracht und Hover-Effekte nachgebaut.

Link zu Codepen : https://codepen.io/hundertj/pen/YxwmpJ

Tutorial: Ein mobiles Hamburger Menü

Hamburger Menü

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinbergeinige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Konzept: Ein mobiles Hamburger Menü

Autorinnen: Katharina Suhr, Anna Ratzke

Als funktionale Animation wurde ein Hamburger-Menü für eine mobile Ansicht mit Unterstützung von Codepen.io erstellt. Zudem wurde ein rotierender Pfeil zum Einblenden für das Untermenü mit Hover-Effekt programmiert.

Das Hamburger-Menü ist eine Variante der versteckten Navigation. Zunächst sind nur drei horizontale Striche zu erkennen. Die Elemente des Hauptmenüs sind erst durch eine gezielte Nutzeraktion sichtbar. Im Vergleich zu Desktop-Bildschirmen sind Smartphone Displays deutlicher kleiner und somit sollten auch die Menüs angepasst und schnell auffindbar sein. Das Hamburger-Icon kann weniger schnell zwischen den anderen Seitenelementen untergehen, dem Nutzer fällt es sofort ins Auge. Viele App-Anwendungen auf Smartphones nutzen bereits dieses Menü, dadurch entsteht beim Nutzer ein bestimmter Wiedererkennungswert, der erahnen lässt, dass sich hinter dem Hamburger-Icon eine Navigation befindet. Das Hamburger-Menü besitzt drei verschiedene Zustände. Wenn auf das Hamburger-Icon geklickt wird, erscheint kurzzeitig nur ein horizontaler Strich. Der Schließen-Button (in Form eines X) ist der dritte Zustand. Dieser Schließen-Button führt den Nutzer durch Erfahrungswerte zu der Intention, dass sich durch Anklicken das Menü wieder schließen lässt.

Ist das Hamburger-Menü angeklickt, erscheint das Hauptmenü. Die Seiten “HOME”, “ABOUT”, “BLOG” und “CONTACT” sind zu sehen. Rechts neben dem Menüpunkt “ABOUT” ist der Pfeil zu erkennen. Wird der Pfeil angeklickt, erscheint das Untermenü. Der Pfeil besitzt zwei Zustände. Wenn das Menü geschlossen ist, zeigt der Pfeil nach unten, dabei wird unbewusst der Instinkt beim Nutzer ausgelöst, dass sich etwas hinter diesem Pfeil versteckt und es wird angeklickt. Im zweiten Zustand, wenn das Untermenü geöffnet ist, zeigt der Pfeil nach oben, um zu symbolisieren, dass das Menü wieder geschlossen bzw. versteckt werden kann. Beim ersten Anklicken bewegt sich der Pfeil nach rechts oben, dies war eine bewusste Entscheidung, da z.B. auch beim Öffnen des Deckels einer Flasche diese Richtung verwendet wird. Also handelt es sich um eine instinktive natürliche Bewegung. Beim zweiten Anklicken zeigt der Pfeil eine rotierende Bewegung nach rechts auf. Dies wurde ebenso mit Absicht so gestaltet, denn der Mensch schreibt von links nach rechts und somit handelt es sich auch um eine natürlich zu erwartende Bewegung.

Technische Umsetzung

Zu Beginn wurde ein passender Hamburger-Button ausgewählt, dieser bildet das Grundgerüst für die funktionale Animation. Die Größe des Hamburger-Menüs wurde für eine mobile Ansicht optimiert sowie oben links platziert. Anschließend wurde das Hauptmenü so animiert, dass beim Anklicken des Hamburger-Icons, das Menü von links eingeflogen kommt. Als nächsten Schritt wurde der Pfeil programmiert sowie im Menü integriert.

Folgender Quellcode ist nur ein Ausschnitt aus der funktionalen Animation

HTML
<li class="has-children">About <span class="icon-arrow"></span>
  <ul class="children">
    <li><a href="submenu1.html">Submenu #1</a></li>
    <li><a href="submenu2.html">Submenu #2</a></li>
    <li><a href="submenu3.html">Submenu #3</a></li>
  </ul>
</li>
CSS
.icon-arrow {
  position: absolute;
  display: block;
  font-size: 0.7em;
  color: black;
  top: 5px;
  right: 10px;
  transform: rotate(0deg);
  transition: .6s;
}
.icon-arrow:after {
  content: "\25BC";
}
.icon-arrow.open {
  transform: rotate(-180deg);
  transition: .6s;
}
JavaScript
$('.has-children').on ('click', function() {
  $('.icon-arrow').toggleClass('open');
});

Das Attribut transform: rotate lässt den Pfeil drehen. Mit den Angaben  0deg und  -180deg wird die Endposition der Drehung bestimmt. Die Dauer der Animation wird mit dem transition: .6s bestimmt. Die JavaScript Funktion ToggleClass lässt den Nutzer zwischen den zwei Zuständen hin und her gewechseln. Die Gestaltung des Pfeils wurde in CSS festgelegt.

Tutorial: Registrierungs- und Loginformular mit jQuery

Login und Registrierungsformular

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinbergeinige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Registrierungs- und Loginformular

Autoren: Felix Struckmann, Yannik Wissner

Codepen-URL: https://codepen.io/wappsify/pen/zdYjZV

Ziel der im Rahmen der Veranstaltung erstellten funktionalen Animation war es, ein Registrierungs- oder Loginprozess einer Webseite darzustellen. Dafür wurde ein Formular erstellt, welches die benötigten Eingaben abfragt.

Das Formular verzichtet fast gänzlich auf externe JavaScript-Bibliotheken, jQuery ausgenommen, hat also einen geringen Overhead. Stattdessen werden die Animationen größtenteils über CSS-Transitions definiert, sodass sowohl Ladezeit als auch Performance besser abschneiden, als Lösungen, die die Animationen komplett über JavaScript steuern.

Die Implementierung prüft den Inhalt der Felder nicht und die Animation des Ladevorgangs geht immer über einen fixen Zeitraum, um zu zeigen wie dieser animiert ist.

Bei einem tatsächlichen, praktischen Einsatz des Formulars würde sich nach Klick auf einen der Knöpfe nach kurzer Ladezeit das Formular schließen oder eine neue Seite laden, weshalb die Animation an dieser Stelle endet.

Wechseln des Reiters

Es wurden zwei Container erstellt,  welche jeweils die nötigen Felder und den korrekten Button für die Formulare enthalten. Damit diese später ein- bzw. ausgeblendet werden können, werden sie absolut positioniert:

#login-main-container,
#register-main-container {
 position: absolute;
 width: 460px;
}

Außerdem gibt es die beiden Tabs mit dem Namen LOGIN und REGISTER. Diese Elemente können jeweils aktiv oder inaktiv sein und erhalten für beide Fälle einen Style:

.active-tab {
  width: 70%;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 0.2em;
  color: #0ea7b5;
  cursor:default;
}

.inactive-tab {
  width: 30%;
  cursor: pointer;
  font-size: 20px;
}

Ein aktiver Tab nimmt mehr Platz in Anspruch, die Schrift ist dickgedruckt und bekommt eine neue Farbe.

Wenn man nun auf den inaktiven Tab klickt, so wird das eine Formular ausgeblendet und das aktive eingeblendet. Hinzu kommt das Festlegen der Variabel myButton, welche jeweils entweder den Login- oder Registerbutton enthält, da diese Information für eine spätere Funktion benötigt wird. Außerdem werden die active und inactive Klassen vergeben. Dies geschieht mithilfe von jQuery:

$('.tab-l').click(function() {
  theButton = $('#login-button');
  $(this).addClass('active-tab');
  $('.tab-r').removeClass('active-tab');
  $(this).removeClass('inactive-tab');
  $('.tab-r').addClass('inactive-tab');
  $('#register-main-container').fadeOut(250, function() {
    $('#login-main-container').fadeIn(250);
  });
});

$('.tab-r').click(function() {
  theButton = $('#register-button');
  $(this).addClass('active-tab');
  $('.tab-l').removeClass('active-tab');
  $(this).removeClass('inactive-tab');
  $('.tab-l').addClass('inactive-tab');
  $('#login-main-container').fadeOut(250, function() {
    $('#register-main-container').fadeIn(250);
  });
});

Das aktiv werdende Formular wird durch eine simple jQuery Animation eingeblendet, nachdem das inaktive Formular ausgeblendet wurde.

Ausfüllen der Felder

Bei den Feldnamen handelt es sich nicht um klassische Placeholder, sondern um Label, welche im Input positioniert sind:

label {
  position: absolute;
  top: 0;
  left: 0;
  color: #757575;
  font-size: 24px;
  font-weight: 300;
  line-height: 60px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}

Wählt der Nutzer nun einen Input aus, so verschiebt sich das Label nach oben. Sobald der Nutzer etwas im Feld eingetragen hat verweilt das Label auch an dieser Position:

input:focus ~ label,
input:valid ~ label {
  color: #0ea7b5;
  font-size: 15px;
  top: -20px;
}

Außerdem heben sich Inputs, die gerade aktiv sind sowie Inputs, deren Inhalt ausgefüllt wurde, ab, indem der Balken unterhalb von ihnen sich mit der Akzentfarbe füllt. Dieser Balken wird nicht etwa durch ein border-bottom erstellt. Stattdessen gibt es nach jedem input-Element einen div-Container, dem die Klasse .balken zugewiesen ist. Diese hat folgende CSS-Eigenschaften, durch die sich der Balken aus der Mitte horizontal heraus füllt, sobald das vorausgehende input-Element den Fokus erhält.

.balken {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #757575;
  width: 100%;
  height: 1px;
}

.balken:before {
  left: 50%;
}

.balken:after {
  right: 50%;
}

.balken:before,
.balken:after {
  content: '';
  position: absolute;
  background: #0ea7b5;
  width: 0;
  height: 2px;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

input:focus ~ .balken:before,
input:focus ~ .balken:after {
  width: 50%;
}

Formular abschicken

Die Loadinganimation wird durch jQuery gesteuert. Zunächst wird der Submitbutton an sich verändert:

$('#login-button, #register-button').click(function(){
	i = 0;
	$(this).css({'border-color':'#0ea7b5','color':'#0ea7b5'});
	$(this).animate({'font-size':'16px'},500,function(){
		$(this).html('');
		$(this).css("background-color",'#0ea7b5');
		$(this).animate({'border-radius':'100px','width':'0px','height':'0px','border-width':'0px'},{complete:function(){
			$(this).animate({'margin-top':'30'},500,animateLoading);
		}});
	});
});

Die Farbe des Buttons wird auf die Akzentfarbe geändert, der Inhalt des Buttons wird geleert, der Button verkleinert sich und nimmt eine Kreisform an. Danach bewegt sich der Button etwas nach unten. Im Anschluss wird eine weitere Funktion aufgerufen, die für den nächsten Teil der Animation zuständig ist.

var i = 0;
var loadingCycles = 3;
var animateLoading = function(){
	if(i<loadingCycles){
		if(i==0){
			clone = theButton.clone();
			clone.id = theButton.name+'-copy';
			theButton.parent().append(clone);
			$(clone).css('opacity','0.6');
			$(theButton).css('opacity','0.6');
		}
	$(clone).animate({'margin-top':'60'},750,function(){$(clone).animate({'margin-top':'0'},750);});
	$(theButton).animate({'margin-top':'0'},750,function(){$(theButton).animate({'margin-top':'60'},750,animateLoading);});
	i+=1;
	}
}

Da nicht auf eine “echte” Antwort eines Servers gewartet wird, gibt es eine feste Anzahl an Wiederholungen, welche hier mit loadingCycles beschrieben wird. Die Variabel theButton beinhaltet den gerade aktiven Button, also entweder den Login- oder den Registerbutton, je nach dem welcher Tab gerade aktiv ist. Beim ersten Durchlauf der Schleife wird der Button zunächst kopiert. Dann wird die ID der Kopie verändert, da eine ID einzigartig sein muss. Anschließend wird der erstellte Klon in das Document Object Model (DOM) direkt nach dem originalen Button eingepflegt. So erhält man zwei identische kreisförmige Buttons. Nun werden die Buttons gegensätzlich bewegt, welches durch die Veränderung vonmargin-top geschieht. Sobald diese Animation fertig ist wird i um eins erhöht und die Funktion erneut aufgerufen solange bis die Anzahl an nötigen Wiederholungen erreicht ist.

Videos rundum IM: Was ist eigentlich die Fernleihe?

Fernleihe in der Bibliothek

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet.

Die besten Videos stellen wir euch hier in den nächsten Wochen nach und nach vor.

Was ist eigentlich die Fernleihe?

Autorinnen: Isabelle Sawatzki und Sina Kirchhoff

Unser Erklärvideo beschäftigt sich mit der Dienstleistung „Fernleihe“ in Bibliotheken.

Da viele Medien in der eigenen Bibliothek, vor allem in öffentlichen Bibliotheken, zu speziellen Themen oft nicht vorhanden sind, bietet die Fernleihe die Möglichkeit diese Medien aus anderen Bibliotheken zu bestellen.

Um diesen Service zu nutzen, muss der Kunde sich an eine Bibliothek in seiner Umgebung wenden. Diese Bibliothek übernimmt die nötigen Recherchearbeiten, leitet die Bestellung weiter und stellt das Material nach dessen Eingang dem Kunden zur Verfügung.

Leider wissen immer noch wenige Bibliothekskunden über die Existenz dieses Services. Um hier der Unwissenheit entgegen zu wirken, erklärt der Film kurz und anschaulich, was eine Fernleihe ist und wie diese praktisch für den Kunden funktioniert.

Das Video zeigt einen jungen Studenten (Max), der im Fach Philosophie eine Hausarbeit schreiben muss. Das Thema ist Traumdeutung. Um Literatur zu diesem Thema zu finden, geht er in die nahe Stadtbibliothek. Er fragt die junge Bibliotheksmitarbeiterin (Emma), die für diesen Fachbereich zuständig ist, nach Literatur zu diesem Thema. Nach kurzem Blick in den Bibliothekskatalog und den Bestand, stellt Emma fest, dass es zu diesem Thema keine, oder nicht genügend Literatur in der Stadtbibliothek gibt.

Sie schlägt dem Studenten die Bestellung von Büchern und Aufsätzen über die Fernleihe vor. Dieser nimmt die Idee gerne an. Daraufhin recherchiert Emma über den Verbundkatalog und wird in anderen Bibliotheken fündig. Es wird Literatur aus verschiedenen Bibliotheken über die Fernleihe bestellt und an die Stadtbibliothek verschickt.

Max kann die Bücher und Aufsätze nun in seiner Bibliothek abholen und so seine Hausarbeit schreiben. Anschließend werden die Bücher wieder über den Leihverkehr zu der besitzenden Bibliothek zurückgeschickt.

Der Film wurde komplett digital am Computer erstellt, die verwendeten Bilder sind lizenzfrei und der Webseite Freepik entnommen worden. Die im Hintergrund abgespielte Musik konnte bei Evermusic lizenzfrei heruntergeladen werden.

Nachdem das Storyboard angefertigt war, wurden mit Hilfe von PowerPoint die entsprechenden Grafiken und Bilder erstellt und in eine sinnvolle Reihenfolge gebracht.Einige der Grafiken wurden vorher mithilfe des Programms Paint bearbeitet und freigestellt und /oder auch zusammengefügt. Die Audiospur wurde im Tonstudio der Stadtbibliothek Mülheim von Isabelle Sawatzki eingesprochen und anschließend mit EasyCutXP verarbeitet und geschnitten.

Mit Quicktime wurde der Film via Bildschirmaufnahme/Screencast erstellt und dann mit iMovie geschnitten sowie die beiden Audiodateien (gesprochenes Wort und Hintergrundmusik) eingefügt.

Storyboard

Videos rundum IM: Highlight des Hochschulalltags

Hochschulalltag_hsh_hannover_im

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet.

Die besten Videos stellen wir euch hier in den nächsten Wochen nach und nach vor.

Highlight des Hochschulalltags

Autoren: Maleen Lorenzen, Michelle Orthmann, Kendra Wulf

Konzept, Software, Techniken und Besonderheiten unseres Stop Motion Films

Allgemeine Aspekte des Animationsfilms:

Bei unserer Projektarbeit für das Fach „Entwicklung von Multimediasystemen 1“ im fünften Semester Informationsmanagement haben wir uns entschiedenen ein Stop Motion Video zu erstellen. Behandelt werden sollte ein Thema aus unserem universitären Alltag.

Nachdem wir uns zusammengesetzt haben und ein erstes Brainstorming durchgeführt haben, hatten wir eine ungefähre Vorstellung davon, welches Thema das Video behandeln sollte, welche Settings in dem Video zu sehen seien sollen und einen ungefähren Ablauf der Geschichte.

Thematisiert haben wir letztendlich die Essenauswahl in der Mensa „Große Pause“ der Hochschule Hannover. Wichtig war uns, dass das Video witzig und ironisch werden, und den Zuschauer am Ende amüsierten sollte.

Wir begannen mit der konkreten Produktion des Videos, indem wir ein karikaturistisches, abstraktes Storyboard erstellt haben, welches den ungefähren Verlauf der einzelnen Szenen darstellte. Da wir nun den ungefähren Ablauf und eine Idee für die Darstellung der Szenen festgelegt haben, begannen wir damit den Weg zur Mensa zu „filmen“ bzw. Bild für Bild aufzunehmen. Die Aufnahme der einzelnen, aufeinanderfolgenden Bilder war sehr zeitaufwändig, erforderte gute Lichtverhältnisse und eine gute Kamera. Die Bilder mussten exakt aufeinander passen, es durften keine zu großen Sprünge entstehen und die Bilder durften nicht verwackeln. Während des Drehs kamen uns noch einige besondere Ideen, die in den Film eingefügt werden sollten. So sollte es am Ende zum Beispiel so aussehen, als würde Michelle die Treppen zur Bahnstation hinaufrutschen und den Weg über die Brücke fliegen. Besonders schwer war es Michelle im Sprung aufzunehmen.

Technische Aspekte des Animationsfilms:

Der Film wurde mit dem Programm „iMovie“ erstellt, welches auf allen Apple Geräten installiert ist. Zunächst ergab sich ein Problem, da das Programm nicht mit allen Bildern arbeiten konnte. Die ca. 1000 Einzelbilder mussten in einzelne Sequenzen eingeteilt und bearbeitet werden. Der Film besteht insgesamt aus zehn Sequenzen, die aneinander gefügt und mit verschiedenen Tempostufen bearbeiten wurden. Die Bilder wurden an einem sonnigen Tag aufgenommen, daher wurden die Bilder kaum bis gar nicht bearbeitet. Teilweise musste lediglich die Helligkeit angepasst werden.

Der Film enthält zwei Tonspuren. Hauptsächlich zu hören ist das Lied „Way to Success“ von Addict Sound, dieses geht zum Ende des Film über in das Lied „Happy“ von Alexey Anisimov. Beide Songs stammen aus der Gema-freien Bibliothek von Jamendo Music.

Storyboard Highlights des Hoschullebens

Videos rundum IM: Der Campus an der Hochschule Hannover – Fakultät III

hsh_informationsmanagement_expo_campus

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet.

Die besten Videos stellen wir euch hier in den nächsten Wochen nach und nach vor.

Der Campus an der Hochschule Hannover – Fakultät III

Autorin: Hagira Mohmand

Für die Veranstaltung “Entwicklung von Multimediasystemen I” war uns das Thema „Hochschule Hannover“ vorgegeben.

Als Idee kam mir bereits sehr schnell: der Campus an der Hochschule (Fakultät III). Bevor ich mit dem Storyboard angefangen habe, habe ich mir die in der Vorlesung zugestellten Folien sorgfältig angeschaut, um mir nicht nur Gedanken zur Umsetzung und der Technikmethoden zu machen, sondern um mich auch inspirieren zu lassen. Beim studieren der Folien hat mir die Methode mit dem Aufnehmen des Desktops sehr gefallen, welches ich mir dann auch als Ziel gesetzt habe.

Um mir selbst gut im Klaren zu sein, wie und was ich genau umsetze, habe ich dann auch vorerst mit der Umsetzung meines Storyboards begonnen. Hierfür habe ich die klassische Variante gewählt, nämlich dem schlichten aufzeichnen auf Papier. Nach mehreren unterschiedlichen Ideen die hierbei rauskamen, hat mir ein Storyboard besonders gut gefallen. Diesen habe ich mir dann auch schließlich als Ziel gesetzt. Bei der Umsetzung, habe ich vorher mit dem filmen und Fotografieren begonnen, um so auch überhaupt Material zu haben, welche ich dann digital bearbeiten kann.

Hierfür habe ich neben meiner Digitalkamera+Stativ auch meine Drohne zum filmen genutzt. Die Aufnahmen mit der Drohne (DJI Mavic Air Flammenrot) haben allerdings viel zu sehr gewackelt, da der Wind zu stark gewesen ist. Daher musste ich leider auf diese Aufnahmen verzichten. Nach mehreren Versuchen, gescheites Material zu sammeln bzw. zu drehen, habe ich dann doch gutes „Rohmaterial“ gesammelt. Zwei Videoaufnahmen und 1895 Bilder habe ich insgesamt gemacht. Die Bearbeitung habe ich an meinem Macbook Air und dem Videobearbeitungsprogramm „iMovie“ durchgeführt. Bevor ich mit dem Schneiden und bearbeiten begonnen habe, habe ich das Programm SCREEN CAPTURE – CAMTASIA STUDIO installiert. Mit diesem Programm habe ich mein Desktop zusammen mit der Website der Hochschule Hannover gefilmt.

Für die Bearbeitung einer Zoomeinstellung dieser Aufnahme habe ich das Programm „Photogrid“ benutzt und mit „iMovie“ passend bearbeitet bzw. geschnitten. Für gute und anschauliche Übergänge habe ich anhand des Programms „iMovie“ unter der Einstellung „Trailer“ ein Trailer-Video erstellt. Hierfür musste ich die Überschriften alle pro Sequenz eingeben und ausrichten. Diese von mir fertig bearbeitete Trailer-Datei habe ich anschließend, zusammen mit der Hintergrundmusik „Soundtrack-Retro“, die mir ebenfalls von „iMovie“ zur Verfügung gestellt ist, in eine Film-Datei umgewandelt. So konnte ich für meine aufgenommenen Videos und Fotos, diesen Trailer ideal als Vorspann, Abspann sowie Zwischenübergänge einsetzen. Nachdem ich diese Sequenzen zusammen mit der Aufnahme durch Capture-Camtasia Studio eingefügt habe, fügte ich die Bilder in Bilderreihen zusammen. Hier musste ich die Dauer in 0,2 Sekunden pro Bild ändern. Eine Videoaufnahme am Campus habe ich unter anderem „rückwärts“ und in einem verlangsamten Tempo bearbeiten und einfügen lassen. Die laufende Uhr habe ich zusammen mit dem Programm Photoshop CS4 erstellt.

Den Soundton der tickenden Uhr habe ich bei „AppleMusic“ heruntergeladen. Unter „Videoüberlagerung“→„Bild-in-Bild“→„Blenden“ habe ich sowohl die tickende Uhr, als auch die roten Kreise und Pfeile in die Foto- bzw. Videosequenzen eingefügt.

Die roten Kreise und Pfeile habe ich von Pixabay legal heruntergeladen.

Insgesamt habe ich sowohl Videos gekürzt, geschnitten, Bilderreihen erstellt, Desktop-Aufnahmen gedreht, Geschwindigkeiten eingestellt, Audiodateien eingesetzt, Audiodateien geschnitten, überblendet eingesetzt und oder auch stummgeschaltet, Fotos überblendet oder auch als „Bild-in-Bild“ eingesetzt, Überschriften bzw. Texte eingefügt, Überblendungen eingesetzt und einen Vor- und Abspann erstellt und eingefügt. So kam ich zu meiner Fertigstellung meiner Animation als Hausarbeit für mein Studium Informationsmanagement, zum Thema „Der Campus an der Hochschule Hannover Fakultät III“.

Zusammenfassung

Storyboard

Endpräsentation bei Prezi