Schnuppertag | Workshop ActionScriptEine interaktive Weihnachtskarte

Programm

Workshop: Interaktive

Animationen m

it Flash

Vorstellung infcom.ch

Unterrichtsbesuch bei infcom.ch

Fragen zu infcom.ch?

Infos zu infcom.ch

zNüni

Mittag

Snack

Vorstellung

Ich: Nicolas Ruh Lehrer für Deutsch & Informatik (& infcom.ch)

Und Sie? Wie heissen Sie? Wie haben Sie von infcom.ch gehört? Wieso interessieren Sie sich für infcom?

BiG&

iWeeks

Akzentfach infcomInformatik. Kommunikation. Design.

• Animationen erstellen• Programmieren (ActionScript)• Spiel-Projekt

Animation & Interaktion

• Filmsprache• Videoschnitt • Filmprojekt (www.oneminute.ch)

Film

• Design & Funktionalität• Skriptsprachen (HTML, CSS)• CMS-Projekt

Webdesign

• Datenbanken, GUI• Programmieren (PHP, JS)• Web2.0-Projekt

Webtool

Sof

twar

e

S1

S2

S3

S4

iWeekFotographie

iWeekVektorgrafik

iWeekFilm

Impulswochefrei wählbar

Was erwartet mich im infcom.ch?

Die zeitgemässe Art, das Gymnasium zu absolvieren computerbasiert, projektorientiert, mit Teamgeist

Akzentfach mit Schwerpunkt auf digitalem Design Animationen, Programmieren, Film, Webdesign

iWeeks: Projektwochen im Klassenverband

Arbeiten am Laptop in den Grundlagenfächern

Freie Wahl von Schwerpunktfach & Ergänzungsfach wie wäre es mit EF Informatik?

Freie Wahl des PU- und Maturaarbeitsthemas wieso nicht etwas mit Digitaltechnik?In

form

ati

k. K

om

mu

nik

ati

on

. D

esi

gn

.

andere Klassen

AFAF

Lehrgang infcom.chInformatik. Kommunikation. Design.

SJ1

SJ2

SJ3

SJ4

Akzentfach infcom

iWeeks

iWeeks

iWeeks

iWeeks

iWeeks

Sonderwochen

Sonderwochen

Sonderwochen

Schwerpunktfach

Ergänzungsfach

Sonderwochen

Projektunterricht

Maturaarbeit

BiG&

iWeeks

Akzentfach infcomInformatik. Kommunikation. Design.

• Animationen erstellen• Programmieren (ActionScript)• Spiel-Projekt

Animation & Interaktion

• Filmsprache• Videoschnitt • Filmprojekt (www.oneminute.ch)

Film

• Design & Funktionalität• Skriptsprachen (HTML, CSS)• CMS-Projekt

Webdesign

• Datenbanken, GUI• Programmieren (PHP, JS)• Web2.0-Projekt

Webtool

Sof

twar

e

S1

S2

S3

S4

iWeekFotographie

iWeekVektorgrafik

iWeekFilm

Impulswochefrei wählbar

infcom.ch ist das Richtige für Sie, wenn ...

... Sie die digitale Welt kreativ mitgestalten wollen

... Sie interessiert sind an den technischen und gestalterischen Hintergründen der Neuen Medien

... Sie gerne am und mit dem Computer arbeiten

... Sie gerne eigenständig oder im Team an individuellen Projekten arbeiten

... Sie Teil einer besonderen Klassengemeinschaft sein wollen

Info

rmati

k. K

om

mu

nik

ati

on

. D

esi

gn

.

Workshop Animationen mit Flash

www.nicolasruh.wikispaces.com/Schnuppertag Weihnachtskarte_vorlage.fla

Dank an:Dario BreitensteinNico HauserDavid Schmid

Erste Animation

Neues Schlüsselbild in der Zeitleiste eines MovieClips

Neuer MovieClip (=Symbol)

MovieClips

Fast alles in Flash ist ein MovieClip – oder kann einer werden

Das ist praktisch, weil jeder MovieClip seine eigene Zeitleiste hat, und somit animiert werden kann

Bitmapz.B. ein geladenes JPG-Bild

Formz.B. direkt in Flash gezeichnet

MovieClipzeigt Bitmap oder Forms kann Zeitleiste abspielen„lebt“ in der Bibliothek

Viele Exemplare eines MCs können in die Bühne gezogen werden, zur Unterscheidung braucht man Instanznamen

Bild-für-Bild Animation

Vorschau mit RETURN, Abspielen mit CTRL-RETURN

In der Zeitleiste eines MovieClips

Formtweens

zwischen zwei Schlüsselbildern, die Formen enthalten

In der Zeitleiste eines MovieClips

Bewegungstweens

EIN MovieClip, genauer mit Bewegungseditor

In der Zeitleiste eines MovieClips

Mehr Tweens ...

Denken Sie sich weitere Animationen aus, die Sie in die Weihnachtskarte einbauen können

Erstellen Sie dafür ggf. neue MovieClips und Ebenen

Wählen Sie die richtigen Teile: Bild-für-Bild – geht immer Bewegungstween – geht nur mit MovieClip Formtween – geht nur zwischen Forms

Interaktion per Mausklick

function schalOnOff(e:MouseEvent):void {

schal.visible = !schal.visible;

}

knopf4.addEventListener(MouseEvent.CLICK,

schalOnOff);worauf geklickt werden muss

(= Instanzname)

Aufzurufende Funktion, Name muss

übereinstimmen (s.oben)

ein oder mehrere Befehle, nach dem Klick werden diese ausgeführt

Nützliche Befehle

meinClip.play(); //Zeitleiste abspielen

meinClip.stop(); //Zeitleiste anhalten

meinClip.nextFrame(); //ein Frame weiter

meinClip.x = meinClip.x + 10; //meinClip um 10 Pixel nach rechts

schieben

meinClip.visible = false; //unsichtbar machen

Sound abspielen

//Vorbereitung: Das Sound-Symbol in der Bibliothek ist exportierbar und hat den Klassennamen BellSound (Klassennamen gross schreiben!)

knopf_mc.addEventListener(MouseEvent.CLICK, playSound);

function playSound(e:MouseEvent):void {

//Instanz von BellSound aus der Bibliothek holen

var bell_snd:BellSound = new BellSound();

//der Instanz sagen, sie soll abgespielt werden

bell_snd.play();

}

Werbefilme

Welche auffälligen Stilmittel werden eingesetzt? Wie passen Inhalt und Form zusammen? Schnitte, Kameraeinstellungen – und Fahrten, Farben, Ton,

Szenen, Spannungsaufbau Subjektives Empfinden: wie wirkt dieser Spot auf Sie?

Zu schnell, zu langsam? Welche Gefühle weckt er? Was hätten Sie anders gemacht?

http://www.youtube.com/watch?v=S1ZZreXEqSY&NR=1 (Heinecken) http://www.youtube.com/watch?v=4rzQI1D1zPI (Audi) http://www.youtube.com/watch?v=Y0Caq4WYNZ8 (Migros Huhn) http://www.youtube.com/watch?v=kb_FAqY040U (Schwarzfahren)

Bildsprache

http://photography.worth1000.com/contests/30739/beginner-composition-golden-mean-2013

http://www.dpreview.com/challenges/?utm_campaign=internal-link&utm_source=mainmenu&utm_medium=text&ref=mainmenu

http://www.spiegel.de/suche/index.html?suchbegriff=bildkritik

http://photography.worth1000.com/contests

http://www.boston.com/bigpicture/

http://photo.net/gallery/

http://www.spiegel.de/netzwelt/web/drei-profi-tipps-fuer-bessere-fotos-a-897250.html

http://www.spiegel.de/netzwelt/gadgets/bildkritik-von-fokussiert-com-drei-profi-tipps-fuer-bessere-fotos-a-919878.html

http://www.spiegel.de/netzwelt/gadgets/fokussiert-com-drei-profi-tipps-fuer-bessere-fotos-a-914475.html

Flash Beispiele