Kleine Wunder geschehen …

… ich hab die Noten fertig. Sie landen nach Ostern im PSSO, anbei schon mal ein Preview.

Wischgeste in Flash

Hallo zusammen,

ich habe hier mal ein kleines Beispiel gebaut, wie man die Wischgeste des iPads in Flash realisieren kann.
Das ganze kann natürlich nicht nur, wie in dem Beispiel, mit Bildern realisiert werden, sondern auch mit MovieClips. Wichtig ist dabei nur, dass alle exakt die gleiche Breite haben.

Viel Spaß beim Ausprobieren.
wischgeste.zip

Alles zu Tweenings aus dem Praktikum

Hier das Beispiel welches ich zum Thema Tweenings im Praktikum gezeigt habe (natürlich CS3-kompatibel ):
tweening_beispiel.zip
Die Bibliothek die ich verwendet habe, findet ihr auf folgender Seite: http://www.greensock.com/
Hier gibt es drei verschiedene Bibliotheken (TweenNano, TweenLite und TweenMax) die sich in ihrer Größe und Fähigkeiten unterscheiden. Meiner Erfahrung nach dürfte die TweenLite-Platform ausreichend sein. Wie ihr die benutzt, könnt ihr aus meinem Beispiel entnehmen. Auf der Website selber gibt es auch ausführliche Erklärungen und eine sehr gute Dokumentation.
Mit TimeLineLite und TimeLineMax könnt ihr eine Sequenz aus Animationen erstellen. Auch das ist auf der Website von Greensock sehr gut dokumentiert.
Auf der Seite http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html findet ihr eine gute Übersicht über die verschiedenen Transition Types, die das Beschleunigungsverhalten des Tweenings definieren. Diese Übersicht gehört zwar zu einer anderen Tweening-Bibliothek, jedoch sind die Transition-Types identisch, werden nur bei den Bibliotheken von Greensock etwas anders geschrieben.
Falls ihr dazu Fragen habt, könnt ihr mich per E-Mail erreichen oder Donnerstag im Praktikum.

Beispiel zum Thema “Digitale Mappe” aus dem Praktikum

Hier das Flash-Projekt aus dem letzten Praktikum zum Thema “Digitale Mappe”:
muster_mappe.zip
Und hier einmal für Flash CS3:
muster_mappe_cs3.zip

Die Bulk-Loader-Bibliothek, die ich verwendet habe, findet ihr hier zum Download: http://code.google.com/p/bulk-loader/.
Es ist zwar möglich mit Flash-Boardmitteln Daten aus externen Dateien zu laden, aber dieser Weg ist deutlich unkomfortabler als über die Bibliothek.

Termine Präsentationsprüfung GdvK

Es stehen Termine an zwei Tagen zur Auswahl: 02. und 03. März 2011. Bitte buchen Sie sich Termine im Wiki.

Kurzprojekt

Problemfeld (Workshop)
Das Webangebot www.atomausstieg-selber-machen.de soll gestalterisch aus der links-alternativen Anmutung gelöst und etwas seriöser ausgerichtet werden. Unterstützend soll für den Bereich Stromwechsel eine interessante und attraktive iPad App entwickelt werden, die das entsprechende Wissen interaktiv vermittelt und visualisiert.

Aufgabe
Entwickeln Sie eine iPad App, die das wesentliche Wissen von www.atomausstieg-selber-machen.de spielerisch vermittelt. Siedeln sie die App gestalterisch in entsprechend der Vorgaben einer der Gruppen des Workshops. Erweitern Sie die visuelle Sprache falls es nötig ist. Bitte dokumentieren und begründen Sie etwaige Erweiterungen. Visualisieren Sie die wichtigsten Funktionen und Funktionsabläufe auf einem Plakat und entwickeln Sie ein funktionsfähigen Prototypen/ Mockup in Flash, der die wichtigsten Funktionen und Übergänge enthält.

Zeitplan und Deliverables

• Entwicklung von drei Konzeptvorschlägen, diese müssen (Pflichtveranstaltung) im Rahmen der Vorlesung am 20. Januar 2011 präsentiert werden.
• Visualisierung des bevorzugten Entwurfs als hochwertiger non-funktionaler Prototyp bis zum 27. Januar 2011. Auch dieser muss in der Veranstaltung präsentiert werden.
• Implementierung des Entwurfs bis Ende Februar 2011. Das Ergebnis muss im Rahmen einer mündlichen Prüfung, die sich auf den ganzen Stoff bezieht präsentiert werden. Das Miniprojekt + Prüfung macht 50% der Gesamtnote aus, die anderen 50% resultieren aus der digitalen Mappe.
• Abgegeben werden muss: Prototyp im HTML eingebettet als *.zip Archiv, Plakat, Kurzdokumentation

Kurzdokumentation
Die Kurzdokumentation sollte enthalten:

• Eine kurze Beschreibung des Gestaltungskontextes
• Die ersten drei Entwürfe mit Kommentaren, Erklärung, etc.
• Eine Begründung für den bevorzugten Entwurf
• Den finalen Enfwurf mit Kommentaren, Erklärung, etc.
• Screenshots der implementierten Version mit Kommentaren, Begründungen, etc.
• Eine finale Beurteilung, Fazit zur eignen Arbeit.
• Bitte als *.pdf 4 Tage vor der Prüfung auf der Website bereitstellen
• maximal 10 Seiten

Hier stehen für eingeloggte Nutzer die Arbeitsergebnisse des Workshops bereit.

Digitale Mappe

Damit die Mappe gewertet werden kann, muss vom jeweiligen Studierenden eine Aufgabe in der Vorlesung präsentiert worden sein.

• In dieser Sammlung werden Arbeitsergebnisse aus der Veranstaltung „Grundlagen der visuellen Kommunikation“ pro Student oder Gruppe gesammelt und dokumentiert. Die Mappe wird benotet. Die Note macht etwa die Hälfte der Endnote aus. Die andere Hälfte wird durch das Kurzprojekt erbracht.
• Die Sammlung muss als eine Flash Datei (*.swf) oder HTML mit eingebetter *.swf Datei abgegeben werden. Der Dateiname sollte sein: gdvk_[semester]_[matrikelnummer]_([matrikelnummer]_[matrikelnummer]).swf
• Auf der Startseite der Sammlung müssen folgende Angaben stehen: Vorname, Name, Matrikelnummer, Fach, Semester, Versicherung der eigenständigen Arbeit. Darauf muss per Klick eine Navigationsseite erreichbar sein, von der alle Aufgaben angesprungen werden können.
• Jede Aufgabe enthält zunächst eine Seite mit der Aufgabenstellung. Von da muss man per Klick auf die Lösung(en) gelangen. Bei mehreren Lösungen müssen diese navigierbar sein. Nach JEDER Lösung folgt eine Seite mit einer Erläuterung zur Lösung: Was habe ich gemacht, welche gestalterischen Mittel habe ich warum eingesetzt, wo gab es Probleme, was könnte verbessert werden, welchen Gesetzmäßigkeiten oder Regeln folgt meine Lösung, oder welche werden bewusst durchbrochen.
• Auf der Erläuterungsseite müssen folgende Navigationsmöglichkeiten vorhanden sein: zurück zur zugehörigen Lösung, weiter zur nächsten Lösung oder Aufgabe, zurück zur Hauptnavigationsseite.
• Die Sammlung muss bis Ende Februar bei mir per Mail(unsicherer Weg) oder als CD ins Fach (sicherer Weg) abgegeben werden.

Folgende Aufgaben müssen enthalten sein:

• Aufgabe: Farbklima
• Aufgabe: Bildershow mit Gestaltungsraster
• Aufgabe: Typographie
• Aufgabe: Minilayouts
• Aufgabe: Layout mit Flächen
• Aufgabe: Linie

Hier finden eingeloggte Nutzer ein paar Beispiele für gute Mappen.

Aufgabe: Farbklima

Erzeugen Sie auf einer schwarzen Fläche von 800×600 Pixeln je ein warmes und ein kaltes Farbklima aus mindestens fünf Farben. Visualisieren Sie das jeweilige Klima in einem 300px hohen Farbband mit mindestens fünf Flächen.

Erzeugen Sie jetzt aus jedem Klima 10 Varianten, indem Sie die Proportionen der Flächen zueinander verändern. Position, Höhe und Breite des Farbbandes darf nicht variiert werden.

Aufgabe: Bildershow mit Gestaltungsraster

Gestalten Sie ein Interface für die Übersicht zu Auswahl eines digitalen Fotoalbums. Die Darstellungsfläche beträgt 480×320 Pixel, bzw. 320×480 Pixel. Es müssen zwei Darstellungsmodi möglich sein: Symbole und Details. Beim Modus „Symbole“ muss pro Album das Thumbnail und der Titel angezeigt werden. Beim Modus „Details“ müssen zusätzlich Autor und ein Kurztext angezeigt werden. Außerdem muss zwischen den beiden Modi umgeschaltet werden können und das Gestaltungsraster muss ein- oder ausgeblendet werden können. Verwenden Sie ausschließlich das über das Blog bereitgestellte Material (www.christiannoss.de). Und versuchen Sie eine möglichst einfache und reduzierte Umsetzung.

Beispiel zu Textfeldern und XML in Flash aus dem Praktikum

praktikum4.zip

Aufgabe: Typographie

Entwerfen Sie ein Layout für die vorgegebenen Inhalte. Die Fläche beträgt 800×600 Pixel. Entwickeln Sie ein zwei oder dreispaltiges Gestaltungsraster. Bitte achten Sie sorgfältig auf Ränder und Abstände. Setzen Sie die Inhalte und versuchen Sie die Regeln typographischer Gestaltung so gut wie möglich zu beachten. Sie können die Inhalte auf zwei Seiten verteilen. Finden Sie eine möglichst spannendes Layout. Setzen Sie die Inhalte dann in zwei Varianten:
a) in einer serifenlosen Schrift
b) in einer serifen Schrift

Bitte gehen Sie wie folgt vor:

entwickeln Sie 8 Entwürfe für das Layout und legen mir diese bis Sonntag per Mail vor
realisieren Sie nach meinem Feedback einen der Entwürfe in Flash in einer Variante und laden diesen Entwurf auf Ihre Projektseite
in der nächsten Woche werde ich in der Vorlesung Feedback zu diesen Entwürfen geben
optimieren Sie Ihren Entwurf, entsprechend meines Feedbacks
erzeugen Sie die zweite Variante mit der anderen Schrift

Material Typo Aufgabe

Aufgabe 5: Minilayouts

Realisieren Sie die 2 vorangegangen Aufgaben in Flash, aber jeweils nur zwei Varianten. Verzichten Sie auf ALLE Effekte (Transparenz, Schlagschatten, etc.). Das Ergebnis sollten also 4 Seiten sein, die sich blättern lassen. Dazu bitte kein fertiges Framework verwenden. Verwenden Sie bitte das von mir bereitgestellte Material.

Aufgabe 5: Minilayouts

Kleine Wasserstandsmeldung

Infos und Termine

04./05. November Feedback im Praktikum zu den Aufgabe 1-4, d.h. ich möchte einmal alle Lösungen gesehen haben.

11. November 13:00 Uhr, Studio Vortrag/ Workshop: wie baue ich ein Layout auf?

09. Dezember Vorbereitung des Ganztages Workshops. Bitte vollzählig im Praktikum erscheinen.

16. Dezember, 9:00 - 17:00 Uhr Ganztagesworkshop. Hier besteht Anwesenheitspflicht.

Aufgabe 4: Layout mit Flächen

Arrangieren Sie die auf dem Bild definierten Elemente auf einer weißen Fläche von 800×600px. Versuchen Sie fünf spannungsvolle Gestaltungskonzepte zu erarbeiten. Alle Elemente müssen verwendet werden. Animieren Sie die Übergänge. Beschreiben Sie das Gestaltungskonzept und bewerten Sie die Kompositionen.

Elemente Aufgabe 4

Beispiel für die dritte Aufgabe (Soundausgabe)

Ich habe das Beispiel aus dem Praktikum noch etwas erweitert.
Hier die entsprechenden Dateien in einem Zip-File:
praktikum3.zip

Folien von letzter und dieser Woche …

sind oben.

Aufgabe 3: Gestaltgestze

Finden Sie für die vorgestellten Gestaltgesetze je ein aussagekräftiges Anwendungsbeispiel. Erzeugen Sie einen Audiokommentar, in dem Sie die angewandten Gesetze benennen und deren Funktion beschreiben. Erzeugen Sie daraus ein navigierbares Flash Dokument.

Beispiel für die erste Aufgabe aus dem Praktikum

praktikum2.zip

Folien von letzter Woche …

… sind oben. Um sie herunterzuladen müssen Sie eingeloggt sein.

Aufgabe 2: Linie

Erzeugen Sie auf einer schwarzen Fläche von 800×600 Pixeln ein weißes Quadrat von 400×400 Pixeln. Stellen Sie auf dieser Fläche mit jeweils 7 schwarzen Linien die Begriffe: Beschleunigung, Fallen (im Sinne von herunter fallen), Stabilität, Flexibilität, Senden und Rückzug (6 Motive). Vermeiden Sie figürliche Darstellungen. Fügen Sie den Motiven den Begriff und eine Navigation hinzu.

Aufgabe 1

Erzeugen Sie auf einer schwarzen Fläche von 800×600 Pixeln ein weißes Quadrat von 400×400 Pixeln. Stellen Sie auf dieser Fläche mit jeweils 9 gleich großen schwarzen Punkten die Begriffe: Streuung, Ansammlung, Ausgrenzung, Flucht, Ankunft und Verdrängung dar (6 Motive). Bitte animieren Sie die Übergänge. Vermeiden Sie figürliche Darstellungen. Fügen Sie den Motiven den Begriff und eine Navigation hinzu.

Willkommen im neuen Semester

Warum ist diese Seite leer? Tja, weil die neue Vorlesungszeit noch so frisch und unverbraucht ist. Trotzdem hier ein paar Infos zur Veranstaltung “Grundlagen der visuellen Kommunikation”. Die Vorlesung findet jede Woche von 10:00 bis 12:00 Uhr im Raum 3.107 statt. Das Praktikum findet donnerstags von 12:00-14:00 Uhr, und freitags von 11:00 - 13:00 Uhr und von 13:00 Uhr bis 15:00 Uhr statt. Sie müssen in diesem Blog registriert sein, und wie in NBA eine Projektseite führen, worüber alle Ergebnisse aus den Entwurfsübung zugänglich sind. Am 16. Dezember findet ein ganztägiger Workshop statt. Diesen Termin bitte vormerken, denn die Teilnahme ist verfplichtend. Alle weiteren Informationen erhalten Sie in der Vorlesung.