Get Adobe Flash player

Kostenloses Open Source Flash Karussell mit XML-Konfiguration


Auf der Suche nach einem Flash Karussell bin ich auf die Seite gotoandlearn von Lee Brimelow gestoßen. Lee hat ein tolles Lernvideo erstellt, welches demonstriert wie du dir selbst eine tolle Flash Präsentation deiner Produkte in Form eines Karussells programmieren kannst. Lee erklärt in seinem Post, dass das Ergebnis von jedem genutzt werden darf auch für kommerzielle Zwecke. Ja es darf sogar behauptet werden, das Karussell selbst gemacht zu haben. Aber Achtung, wenn du das Flash-Tool weiterverkaufst und somit den Open Source Gedanken untergräbst, dann riskierst du dass er dir deine Arme bricht *g* Ich muss aber dazu sagen, dass ich des Englischen nicht sonderlich mächtig bin. Könnte auch sein, dass ich da was falsch verstanden habe. Also bitte selbst lesen!

Diese Animation benötigt den Adobe Flash Player 8

Ich jedenfalls erlaube mir ebenfals hier das nützliche Open Source Flash Karussell etwas zu erweitern, sodass weitere Einstellungen über die XML-Datei machbar sind. Damit sollte es für Webmaster, die nicht über das relativ teure Adobe Flash Professional verfügen, trotzdem möglich sein, das kostenlose Tool für ihre Zwecke zu nutzen.

Das Flash Karussell ermöglicht nun folgende Einstellungen direkt in einer XML-Datei ohne dabei die Flash-Datei bearbeiten zu müssen:

  • Ändern der Bilder, Bilder hinzufügen, Bilder entfernen
  • Ändern der Hyperlinks
  • Ändern der Zielfenster (gleiches Fenster, neues Fenster)
  • Ändern der Größe des Flash-Objektes in dem sich das “Carousel” befindet
  • Ändern der Hintergrundfarbe des Flash-Karussells bzw. Einstellen von Transparenz
  • Bestimmen der Breite des Karussells innerhalb des Flash-Objektes
  • Bestimmen der Höhe des Karussells innerhalb des Flash-Objektes
  • Ändern der Perspektive des Karussells
  • Ändern der Startgeschwindigkeit des Karussells

Installation Flash Karussell:

Einfach diese Zip-Datei: kostenloses Open Source Flash Karussell herunterladen und entpacken. Darin findest du folgende Dateien:

  • karussell.swf
  • karussell.html
  • karussell.xml
  • Javascriptdatei
  • Bilder
  • karussell.fla (wird nur benötigt wenn du das Karussell selbst weiterentwickeln bzw. verbessern möchtest)

Downloads:

Die Datei karussell.html zeigt dir wie du eine Flash-Datei in HTML einbinden kannst. Ich habe dafür das swfobject benutzt. Das ist eine einfache benutzerfreundliche Methode um Flash in eine Website einzubinden. Nähere Informationen dazu findest du unter: http://code.google.com/p/swfobject/. Selbstverständlich kannst du aber auch eine andere traditionelle Methode zum Einbinden des Flash-Objektes verwenden. (Im IE7 scheint es damit noch Probleme zu geben.)

Öffne die Datei karussell-2.0.html mit einem Editor oder mit deinem WYSIWYG-Editor deiner Wahl. Du siehst dann folgenden Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<script type="text/javascript" src="swfobject.js"></script> 
<script type="text/javascript"> 
var flashvars = {
 bgcolor: "#000000",     //Hier die RGB Farbe des Karussell-Hintergrundes angeben. Wirkt nur wenn wmode nicht "transparent" ist!
 wmode: "windows"        //Hier "transparent", "opaque" oder "windows" angeben. Bei "transparent" wird z.B. der Hintergrund auf transparent gesetzt, sodass der HTML Hintergrund sichtbar wird.
};
var params = {};
var attributes = {};
swfobject.embedSWF("karussell-v2.0.swf", "myAlternativeContent", "800", "400", "8.0.0", "#00FF00", false, flashvars, params, attributes);
</script> 
</head> 
<body> 
<div id="myAlternativeContent"> 
 <a href="http://www.adobe.com/go/getflashplayer"> 
 <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> 
 </a> 
</div> 
</body> 
</html>

Mit bgcolor kannst du die Hintergrundfarbe des Flashkarussells bestimmen. Gib hier einen RGB-Wert in der Form: #FF0000 an.

Mit wmode bestimmst du ob der Hintergrund des Flash-Karussells farbig oder transparent dargestellt werden soll. Entscheide dich für die Optionen: “transparent”, “opaque” oder “window”. Bei einer transparenten Einstellung wir die zuvor eingestellt Hintergrundfarbe natürlich nicht berücksichtigt. Bei window wird das Flash-Objekt gegenüber anderen HTML Objekten immer im Vordergrund liegen, mit opaque kann die Reihenfolge der Objekte in HTML bestimmt werden.

Nun änderst du noch die beiden Werte 800 und 400 in der Zeile 24. Bedenke, dass die beiden Werte die Breite und Höhe des Flash Objektes in Pixel angeben. Das Karussell innerhalb des Flash Objektes hat ein vordefiniertes Breite:Höhe-Verhältnis von 2:1. Du kannst aber ohne weiters ein anderes Verhältnis für die Größe des Flash Objektes wählen. Das Karussell wird dann das Flash-Objekt in einer Richtung nicht zu 100% ausfüllen.

Mehr Anpassungen brauchst du in der karussell-v2.0.html nicht machen.

Wenn du den Code in deiner eigenen HTML-Seite integrieren möchtest, dann kopiere diesen Teil:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript" src="swfobject.js"></script> 
<script type="text/javascript"> 
var flashvars = {
bgcolor: "#000000",             //Hier die RGB Farbe des Karussell-Hintergrundes angeben. Wirkt nur wenn wmode nicht "transparent" ist!
wmode: "windows"                //Hier "transparent", "opaque" oder "window" angeben. Bei "transparent" wird z.B. der Hintergrund auf transparent gesetzt, sodass der HTML Hintergrund sichtbar wird.
};
var params = {};
var attributes = {};
swfobject.embedSWF("karussell-v2.0.swf", "myAlternativeContent", "800", "400", "8.0.0", "#00FF00", false, flashvars, params, attributes);
</script>

in den HEAD-Bereich und diesen Teil:

1
2
3
4
5

<div id="myAlternativeContent"> 
<a href="http://www.adobe.com/go/getflashplayer"> 
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> 
</a> 
</div>

in den BODY-Bereich deiner HTML Seite. Weiters kannst du den Inhalt des DIV-Containers myAlternativeContent deinen Wünschen entsprechend ändern. Dieser Teil wird visualisiert, wenn der aufrufende Browser keine Javascript unterstützt oder wenn das notwendige Flash-Plugin nicht oder in einer zu niedrigen Version vorliegt.

Bereite nun einige Bilder in der Größe 128 Pixel x 128 Pixel vor. Du kannst die Bilder im JPG-, GIF- oder PNG-Format abspeichern. Speichere sie in denselben Ordner in dem du die HTML-Datei abgelegt hast. Dateinamen kannst di vergeben wie du möchtest. Am besten du verzichtest aber auf Sonderzeichen.

Nun öffnest du mit einem Editor die Datei: karussell-v2.0.xml. Hier kannst du innerhalb des Abschnittes <icons> </icons> für jedes Bild eine Zeile einfügen bzw. die bestehenden Zeilen entsprechen ändern oder löschen.

1
2
3
4
5
6
7
8

<icons> 
<icon image="1.gif" tooltip="Websites" href="http://www.compusol.it/leistungsspektrum/dynamische-website/dynamische-website.html" ziel="_blank" /> 
<icon image="2.gif" tooltip="CMS" href="http://www.compusol.it/leistungsspektrum/content-management-system/" ziel="_self" /> 
<icon image="3.gif" tooltip="Weitwinkelfotos" href="http://www.compusol.it/leistungsspektrum/weitwinkelfotos/" ziel="_blank" /> 
<icon image="4.jpg" tooltip="Rundumfotos" href="http://www.compusol.it/leistungsspektrum/panoramafotos/panoramafotos.html" ziel="_self" /> 
<icon image="5.gif" tooltip="Workshops" href="http://www.compusol.it/kursunterlagen/" ziel="_blank" /> 
<icon image="6.jpg" tooltip="Wandertipps" href="http://weblog.dietmar.biz/wanderungen-sudtirol-sudtirol-karte" ziel="_self" /> 
</icons>

Bei image gibst du den Dateinamen des Bildes an, bei tooltip kannst du ein zwei beschreibende Wörter hineinschreiben, bei href gibst du die URL des gewünschten Links an und bei ziel gibst du _blank an, wenn der Link sich in einem neuen Fenster öffnen soll oder _self, wenn der Link sich im gleichen Fenster öffnen soll.

Im Abschnitt <options> </options> kannst du noch verschiedene Grundeinstellungen.

1
2
3
4
5
6

<options> 
<einst radiusx="100" />					<!-- Breite Karussell in Prozent bzgl. Breite des Flash-Objektes, wenn das Flash-Objekt eine Proportion von 2:1 aufweist. Einfach mit diesem Wert "spielen" --> 
<einst radiusy="100" />					<!-- Höhe Karussell in Prozent bzgl. Höhe des Flash-Objektes, wenn das Flash-Objekt eine Proportion von 2:1 aufweist. Einfach mit diesem Wert "spielen" --> 
<einst perspektive="100" /> 			<!-- Perspektive zwischen 0 und Unendlich. 0 max. Perspektive, Unendlich keine Perspektive. In der Praxis für Unendlich einfach eine große Zahl z.B. 10000 angeben! --> 
<einst geschwindigkeit="0.01" />		<!-- Erstgeschwindigkeit zwischen 0.001??????Ö?????? und 1. Achtung Punkt für Komma! --> 
</options>
  • radiusx: Breite Karussell in Prozent bzgl. Breite des Flash-Objektes, wenn das Flash-Objekt eine Proportion von 2:1 aufweist. Einfach mit diesem Wert “spielen”
  • radiusy: Höhe Karussell in Prozent bzgl. Höhe des Flash-Objektes, wenn das Flash-Objekt eine Proportion von 2:1 aufweist. Einfach mit diesem Wert “spielen”
  • perspektive: Perspektive zwischen 0 und Unendlich. 0 max. Perspektive, Unendlich keine Perspektive. In der Praxis für Unendlich einfach eine große Zahl z.B. 10000 angeben!
  • geschwindigkeit: Erstgeschwindigkeit zwischen 0.001 und 1. Achtung Punkt für Komma!

Lade nun folgende Dateien auf deinen Webspeicher in den selben Ordner:

  • karussell-v2.0.swf
  • karussell-v2.0.html
  • karussell-v2.0.xml
  • swfobject.js
  • Bilder

Die Datei karussell-v2.0.fla musst du nicht hochladen, die habe ich nur beigelegt, damit du eventuell selbst Änderungen am Actionscript Code des Flash-Karussells vornehmen kannst. Selbstverständlich benötigst du dafür aber Flash. Wenn du die eine oder andere sinnvolle Erweiterung machst, würde es mich freuen dies zu erfahren.

Achtung:
Der Code ist auf keinem Fall als frei von Fehlern anzusehen. Jegliche Nutzung erfolgt auf eigene Gefahr. Bedenke auch, dass das Flash Karussell den Prozessor des Besucher deiner Website nicht unerheblich belastet!

Viel Spaß mit dem Open Source Flash Karussell und Dank an Lee für sein: Creating 3D Carousels II Tutorial

Flash Karussell als Contenido Modul

Contenido Forum

, , , ,