Archiv der Kategorie: Flash

Liebe deinen Coder wie dich selbst!

HTML Code 1Der just diesen Morgen ins Postfach geflatterte t3n-Newsletter enthält im Titelthema einen Beitrag über den Xing-Gründer Lars Hinrichs. Sein Credo: “Programmierer sind die Künstler des 21. Jahrhunderts”. Passender könnte diese Aussage nicht sein, haben wir doch gestern mit dem Schreiben (nicht programmieren) von HTML begonnen.

Die Zeit des Bling Bling ist nun vorbei – jetzt wirds ernst! Nunja, zumindest für die meisten der Teilnehmer dieses Kurses. In diesem (auch von WBS fälschlich als “Webprogrammierung” bezeichneten) Abschnitt der Weiterbildung beginnen wir nun mit dem eigentlichen “developen” – sprich Entwickeln von Internetseiten. Schöne Bilder wie aus Photoshop oder interessante Flash-Animationen wird es auf meinem Blog zunächst also nicht mehr geben. Lediglich die noch nicht hochgeladenen Flash-Dateien werde ich evtl. noch kurz in einem separaten Post zusammenfassen – zumindest jedoch in meine Flash-Galerie einbinden.

Wie gesagt liegt der Flash-Bereich hinter uns und trotz keiner Vorkenntnisse meinerseits konnte ich beide Prüfungen mit Bravour absolvieren. Vergangenen Mittwoch hatten wir die zweite und letzte Prüfung darin und somit auch den letzten Unterrichtstag bei unserem Lieblingsbayern Manfred Karg. Auch wenn ich bei ihm anfangs Schwierigkeiten hatte, nach Ablenkungen akustisch herauszufinden, wann es für mich wieder interessant wird, werde ich ihn irgendwie vermissen. Ein toller, ehrlicher und vor allem authentischer Typ!


Nun also ein neuer Bereich. HTML steht an. Ein neuer Dozent. Jens Suhr.
Manchmal ist aller Anfang schwer sagt man. Ohne jemandem auf den Schlips treten zu wollen, war es doch recht seltsam und für mein Verständnis von Seriösität auch nicht ganz angebracht, gleich zu Beginn und während der Vorstellungsrunde erneut mehrfach zu erwähnen “den Herrn Willi kenn ich ja schon; … sein Gesicht habe ich schon gesehen; … hier aus dem Kurs führt jemand einen Blog; … etc.” (Kein Zitat; Gedächtnisprotokoll).

Klar ist, dass dieser Blog Aufmerksamkeit erzeugt und auch hoffentlich noch weiter erzeugen wird. Ich bin ein fairer, aber kritischer Mensch. Vieles in der heutigen Welt läuft schief und ich sehe es als eine Art “Aufgabe” bei Bedarf für Aufklärung zu sorgen. Jedes Unternehmen muss sich in dem heutigen, digitalen Zeitalter darüber im Klaren sein, dass gute und schlechte Dinge für jeden jederzeit zugänglich sein können. Wie ein Unternehmen damit umgeht, ist die Kunst. Ob nur “Bling bling” nach außen dargestellt oder auch in der Realität praktiziert wird, kann schnell ans Licht kommen.

In diesem Sinne also war es doch etwas unangenehm von einer Person die man nicht kennt, welche in einem Unternehmen arbeitet über das man durchaus schon Kritik geäußert hat, darauf hingewiesen zu werden, das man einen doch schon “kennt”. Als ich an der Reihe war (als Letzter, bedingt durch die alphabetische Reihenfolge) ging ich jedoch sogleich in die Offensive und es klärte sich rasch auf, dass die Kenntnis über meinen Blog und meine Website laut Jens (er fragte gleich zu Beginn ob wir uns alle per Du ansprechen möchten) wohl rein zufällig durch die Internetsuche einer Teilnehmerin aus einem vorigen Kurs herrührt. Somit wäre das fürs Erste geklärt und ich bin gespannt über den weiteren Verlauf meiner Weiterbildung.


Nun aber genug der Berichterstattung. Es geht ums Coden!
Nach einer überaus ausführlichen und ausladenden Erläuterung zu HTML und deren Hintergrundgeschichte gestern morgen haben wir dann gestern mittag mit dem Schreiben der ersten Zeilen HTML-Quellcode begonnen. Anfangs ziemlich gelangweilt, da ich HTML schon sehr gut kann kamen dann doch schon die ersten “Aha”-Ereignisse bei mir auf. Man merkt eben doch, ob man sich das Ganze selbst beigebracht hat oder fundiert erläutert bekommt. Nicht, dass meine HTML-Kenntnisse nicht auch durch langjährige Arbeit mittlerweile umfangreich wären, aber alles benötigt man nicht immer unbedingt in der Praxis. Jens weis von was er spricht. Das merkt man und das finde ich auch gut, wenn es um die Erweiterung meiner Kenntnisse geht. Ich werde also höchstwahrscheinlich hier wie auch zuvor im Photoshop-Teil das ein oder andere mitnehmen können.

Nachfolgend der von uns gestern geschriebene HTML-Code für alle interessierten:
So sieht es im Browser aus: 01 HTML Grundgerüst

<html> <!-- Kommentar // <html> umschließt das gesamte Dokument-->
	<head> <!-- Kopfbereich des HTML-Dokuments, welcher u.a. den Titel enthält -->
		<title>Das ist (nicht) mein erstes Dokument in HTML</title> <!-- Titel des Dokuments -->
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<!-- Innerhalb des head-tags können weitere Angaben zum Dokument stehen. JavaScript, CSS, meta, etc. -->
	</head>
	<body> <!-- Enthält den Inhalt eines HTML-Dokuments, welcher im Darstellungsprogramm (Browser) angezeigt wird -->

		Freude sei mit dir!
		Diese Zeile Text wird nicht so im Browser dargestellt,<br /> <!-- erzwungener Zeilenumbruch -->
		erst mit z.B. br -> brake wird ein Zeilenumbruch erzeugt.

		<p>Das ist ein Absatz, der in der nächsten Zeile fortgesetzt wird und automatisch einen Umbruch zum nachfolgenden Text bewirkt.</p>
		<!-- <p></p> kennzeichnet einen Absatz im Inhalt. Auch innerhalb von <p></p> kann <br /> verwendet werden. -->
		<p>Das ist ein Absatz, der in der nächsten Zeile fortgesetzt wird, automatisch einen Umbruch zum nachfolgenden Text bewirkt und einen <br />
		manuell erzwungenen Zeilenumbruch enthält.</p>

		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br /> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br /><br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br /> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

		Diese Zeile hat kein Absatzelement.

		<p align="right">Dieser Absatz wird rechtsbündig ausgerichtet</p>

		<p align="justify">Hier ein weiterer Textblock, der als Blocksatz formatiert ist:<br />
		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

		<p>&nbsp;</p> <!-- Leerzeile mit Inhalt -->

		<h1 align="center">Text als größte Überschrift markiert (H1)</h1> <!-- größte Überschrift in HTML -->

		<p>...</p> <!-- Absatz im Dokument oder auch mehrere Absätze können folgen -->

		<h6 align="center">Kleinste Überschrift in HTML (H6)</h6>

		<p>&nbsp;</p>

		<div align="center"> <!-- Einen definierten Bereich im Dokument erzeugen -->
			<p>Das ist der erste Absatz...</p>
			<p>Das ist der zweite Absatz...</p>
			<p>Das ist der dritte Absatz...</p>
		</div>

		<h3>Zeilenumbruch verhindern</h3>

		<p>Gestern Abend habe ich am Sternenhimmel <nobr>48 Sterne</nobr> gezählt.</p>
		<p>Gestern Abend habe ich am Sternenhimmel 48&nbsp;Sterne gezählt.</p> <!-- Aktuell bessere Variante -->

		<!-- Nicht zu viele Leerzeichen hintereinander, um große Abstände zwischen Wörtern zu ergeugen -->
	</body>
</html>

 

Oh look! There´s a hidden button!!

flash_hidden-button“Do you see it?” – “No! Where is it?” – “Oh it´s invisible!”

Lange Rede, kurzer Sinn. In Flash kann man sogenannte “hidden buttons” erstellen – Bereiche, die Aktionen auslösen ohne selbst sichtbar bzw. erkennbar zu sein. In diesem Beispiel ein einfacher Bildaustausch.

PeopleWithOpenMouth.com

PeopleWithOpenMouth.com – oder die Website eines Chors.
In diesem kleinen Projekt widmeten wir uns erneut der Erstellung einer einfachen Website in Flash. Diesmal haben wir zudem jedoch einen kleinen Einblick in Sachen Workflow und Einbettung des Flash-Films in HTML behandelt.

Recht interessant finde ich den Effekt der über dem Header-Bild liegt. Mit äußerst simplen Mitteln (lediglich ein einfaches Movieclip mit Bewegungstween) lässt sich durch geschickte Kombination ein ansehnlicher Effekt erzielen.

Flash - Chor-Website

Flash Grundkurs glänzend beendet

Gestern stand sie an – die Prüfung vor der wir uns alle so gefürchtet hatten! Unsere im Flash Grundkurs erlernten Fähigkeiten wurden aufs Härteste auf die Probe gestellt! Die Vorgaben waren klar, eindeutig und herausfordernd!


Simpel animierter Glanzeffekt in Flash

Nach der Prüfung haben wir uns dann noch mal mit dem Thema Maske beschäftigt und neben anderen, kleineren Übungen einen “animierten Glanz” über eine Wortmarke gelegt.

Wann wir die Ergebnisse unserer Prüfung erhalten werden, ist uns noch nicht bekannt. Ob wir danach den Kurs noch auf diesem Level fortführen können, wird sich zeigen… ;-)

 

Navigationselemente in Flash

Flash - NavigationFlash - Website SchwedenActionScript 2.0 und ActionScript 3.0 unterscheiden sich deutlich und in vielen Aspekten. Das haben wir heute beim Scripten von Navigationselementen bemerkt. Was in AS2 funktioniert, geht in AS3 im Prinzip gar nicht mehr – und umgekehrt. Das Skripten erfordert einiges an Übung und logisches Verständnis.

Weiterhin haben wir heute noch den Import aus einer PSD-Datei behandelt, welcher von Flash sehr gut unterstützt wird.

Und ich entschuldige mich für den äußerst schlechten Schreibstil heute :P

Sammelwerke in Flash

A Wahnsinn! Diese Einleitung ist nicht nur passend zum Dialekt unseres derzeitigen Dozenten, sondern auch für die aktuellen, vielen Kleinprojekte die wir hier täglich in Flash erstellen.

Dass das kontinuierliche Führen eines Blogs durchaus auch “stressig” sein kann, war mir in dem Zusammenhang so nicht klar und daher gab es die letzten Tage auch keine Einträge. Ab kommendem Wochenende wird sich aber auch meine Pendelsituation in Luft auflösen womit mir dann auch mehr Zeit zum Schreiben bleibt.

Wir haben wie gesagt etliche, kleinere Projekte die Tage erstellt. Manche davon waren etwas umfangreicher und lohnen sich hier zu zeigen. Seit Dienstag arbeiten wir zudem in ActionScript 3.0, haben hierin aber noch nichts gescriptet bzw. sind aktuell dabei.

ActionScript 2.0-Projekte:
Flash - Pfad-Demo Flash - Einfacher Preloader

 

 

 

 

ActionScript 3.0-Projekte:
Flash - Kameraschwenk mit Maske und SoundFlash - Bildergalerie AS3Flash - FliegeFlash - Animiertes "ciao!"-Logo

Einfache Bildergalerie in Flash

Flash - Einfache BildergalerieAls bisheriger “Nicht-Flasher” bin ich positiv überrascht und beeindruckt, wie relativ rasch wir doch ganz tolle Sachen erstellen können.

Derzeit arbeiten wir noch mit Actionscript 2.0 und eben damit haben wir heute schon Bekanntschaft gemacht.

Bildergalerie? Timeline, on (release), gotoAndStop sag ich da nur!

Masken und Effekte

Flash - Animierte ZeichnungDritter Tag Adobe Flash. Gestern bereits haben wir uns die Masken angeschaut und etwas damit herum gespielt. Hinzu kommen heute noch die Effekte und deren Wechselwirkung untereinander – je nach Anordnung.

Durch die bisher einfachen Elemente ergeben sich schon vielfältige Möglichkeiten. Faszinierend. Hier ergeben bspw. die Kombination einer Maske mit mehreren Schlüsselbildern und Ebenen eine (einfach) animierte Zeichnung.

Flash Part Two: Hüpfende Bälle

Grundlagen Flash. Immer noch. Alles doch “leicht verwirrend” da sich Flash in vielen Fällen und bei vielen Werkzeugen anders verhält als bspw. von Photoshop gewohnt. Zudem gibt es ähnliche Funktionen aber die Tastaturkürzel sind anders…

Während wir momentan an einer Animation einer Grafik arbeiten und unser Dozent Herr Karg leider immer wieder – und für meinen Geschmack doch etwas zu häufig – manchen Teilnehmern einfachste Sachen erläutern muss nutze ich die Zeit und präsentiere (natürlich diesmal mit etwas mehr Stolz) meine hüpfenden Bälle: ;)