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!
Ich jedenfalls erlaube mir 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:
- Open Source Flash Karussell V2.4
Aktuelle Version; Changelog 15.02.2010: die Angabe des Tooltipps in der XML-Datei kann nun weggelassen werden oder es kann ein leerer String übergeben werden. In beiden Fällen wird die Tooltipp Sprechblase nicht angezeigt. - Open Source Flash Karussell V2.3.1
Alte Version; Changelog 10.10.2009: Korrektur FlashVars Variabelübergabe im Object Tag und Embed Tag der HTML-Datei, Korrektur XML-Struktur - Open Source Flash Karussell V2.3
Alte Version; Changelog 09.04.2009: nun können auch deutsche Umlaute im Tooltip verwendet werden - Open Source Flash Karussell V2.2
AlteVersion; Changelog 09.04.2009: nun kann auch die Maximalgeschwindigkeit in der XML-Datei angepasst werden - Open Source Flash Karussell V2.1
Alte Version; Changelog 06.03.2009: die XML-Datei und die Bilder müssen nun nicht mehr im gleichen Ordner vorliegen - Open Source Flash Karussell V2.0
Alte Version
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 du 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
Ich beschäftige mich professionell mit der Erstellung von einfachen
#1 von mike am Januar 6, 2011 - 7:33
Hallo,
ich finde es toll, dass dieses tolle Karusell für alle zur Verfügung gestellt wird!
Ich habe die Version 2.0 verwendet, da alle anderen Versionen für mich nicht funktioniert haben, leider.
Es gibt Probleme mit der Spiegelung. Ein Karusell funktioniert ohne Probleme -http://www.team-electronic.de/german/produkte/pmrhandf/pmrhandf.htm – hier wurde die Spiegelung in den Fotos erstellt.
Bei der Erstellung eines anderen Karusells gibt es Probleme – http://www.team-electronic.de/hauptseite/index.html – mit der Spiegelung. Die Spiegelung wird hier im Skript erzeugt, teilweise jedoch fehlerhaft. Frage: wo kann im Skript die Spiegelung deaktiert werden bzw. wo können die Parameter eingestellt werden?
Vielen Dank,
Mike
#2 von mike am Januar 7, 2011 - 8:59
Hallo,
Frage: warum werden meine Anfragen im Forum ohne Kommentar gelöscht? Die Einträge #49 und #50 wurden am 05.01. und 06.01.2011 gestellt.
Gruß,
Mike
#3 von Marco am Januar 7, 2011 - 2:32
Hallo Leute,
Also das Problem ist folgendes ich arbeite im Moment an der Homepage meiner Firma auf der hab ich jetzt folgendes Flash-Produktkarusell eingebunden : flash-karussell-v2.4.
Nun habe ich die Bilder im Karusell verlinkt, so dass wenn man auf ein Bild des Produktes klickt, man die passende Beschreibung dazu bekommt.
Dies habe ich so gemacht, dass ich einfach für jede Beschreibung eine eigene Seite erstellt hab.
Jetzt will mein Chef aber das nur die Beschreibung sprich der Text geladen wird, wenn man auf ein Bild eines Produktes klickt.
Habt ihr eine Ahnung wie ich das bewerkstelligen kann? Er meinte nur, dass man das mit Java machen könnte hab aber über Google nix passendes finden können!
Ich hoffe ihr könnt mir dabei weiterhelfen!
LG Marco
#4 von Webmaster am Januar 10, 2011 - 6:35
Hallo mike,
leider habe ich zur Zeit keien Zeit mich mit dem Karussell zu beschäftigen, darum muss ich dir nur so vom Gedächtnis raus antworten. Soweit ich mich erinnere kann man die Spiegelung nicht deaktivieren. Bzgl. deiner Problems würde ich mal versuchen die Bilder die du verwendest anders zurecht zu schneiden…
#5 von Webmaster am Januar 10, 2011 - 6:36
Das hier ist ein moderierter Blog d.h. Kommentare werden erst nach Begutachtung frei geschaltet
#6 von Webmaster am Januar 10, 2011 - 6:39
Das kannst du mittels Flash Programmierung lösen. Dem ZIP Archiv liegt die Flash Datei (CS4) bei. Damit kannst du dann einfach weiter programmieren…
#7 von Natallia am Januar 20, 2011 - 7:05
Vielen Dank für das Flash! Es ist leicht anpassbar und die Anleitungen sind ausführlich und verständlich
Ich habe es angepasst und auf meine Webseite als Header eingefügt. Es sieht gut aus, bin ich happy und bin dankbar dass es solchen Leuten gibt, die anderen kostenlos helfen wollen!
Meine Webseite.wo man mein angepassten Flash ansehen kann: http://www.spainshop24.net
Vielen Dank!
#8 von Webmaster am Januar 26, 2011 - 9:09
#9 von daniel am Januar 27, 2011 - 12:26
Hallo Dietmar,
vielen Dank für das Karussell. Ich kann mich den anderen Schreibern nur anschließen. Prima.
Gibt es noch eine Möglichkeit die Textgröße für den Tooltip anzupassen? Ich finde, na ja eigentlich die anderen
, ihn recht klein.
gruß
daniel
#10 von boris am Februar 11, 2011 - 4:36
kann man auch festlegen, dass sich das wheel nur in eine richtung dreht?
vielen dank für eine Antwort
#11 von Webmaster am Februar 13, 2011 - 9:38
@daniel und boris:
Man kann alle Parameter festlegen, die in der XML Datei hinterlegt sind. Anderes muss über Flash gemacht werden, d.h. die beigelegt Flash Datei editiert werden. Vorraussetzung: Flash CS5 (erinne mich nicht mehr so ganz mit welcher Version ich die datei abgespeichert hatte) und entsprechende Kentnisse.
#12 von Gerhard Schaider am März 10, 2011 - 10:23
Hallo.
baue grade ein Karussel als Startseite in eine Firmen-Homepage ein und habe dabei das Problem, dass der Karusselhintergrund immer schwarz ist,wie bringe ich bei der Version 2.4 den Hintergrund transparent?
schönen Tag noch
gerhard
#13 von Webmaster am März 14, 2011 - 8:31
@Gerhard:
Schaue dir den HTML Teil mal genauer an. Da gibt es ein: bgcolor
#14 von steiner am März 28, 2011 - 4:45
der schatten bleib klein wenn das Bild größer als 128×128 ist.
Die größe des schatten kann man nicht verändern oder.
Die fla Datei ist scheinbar geperrt In meiner master collection css4 kann ich die Datei jedenfalls nicht bearbeiten?
THX
#15 von Webmaster am März 29, 2011 - 4:46
Das Bild ist in der FLA Datei als 128×128 verankert. Van daher kommt auch der Schatten. Du müsstest die fla-Datei bearbeiten. Mittlerweile wahrscheinlich CS5.
#16 von Alfred am Juni 6, 2011 - 4:43
#17 von Jango am August 4, 2011 - 3:29
Erst mal ein Dankeschön für die gute Arbeit.
Ich benötige den Tooltip mit
1) “return Zeichen” wegen Mehrzeilern
(Vieleicht könnte man
somit auch
2a) entweder konfigurierbarem Breite / Höhe
2b) oder konfigurierbarem Breite und generischer Anpassung in die Vertikale
Sicherlich wäre das hilfreich auch für andere Anwender. Danke
#18 von Webmaster am August 9, 2011 - 4:21
Hallo Jango,
zur Zeit habe ich leider keine Zeit mich mit dem Karussell zu beschäftigen. Bleibt dir also nur die Möglichkeit selbst per Flash zu coden.
Grüße
#19 von G.Kreutzmann am September 9, 2011 - 12:40
Hallo,
gibt es eine Möglichkeit das Karussel bei einer Ebay-Auktion zu integrieren. Ich habe so etwas schon gesehen, nur wie funktioniert das ? Gibt es vielleicht dazu eine Anleitung irgendwo ?
Vielen Dank im voraus,
mfg
G.Kreutzmann
#20 von Webmaster am September 12, 2011 - 11:12
Darauf weiß ih leider keine Antwort….
#21 von Ulrich am November 1, 2011 - 3:05
…also ich habe null Ahnung von Action-Script, ganz wenig Ahnung von Flash und etwas Ahnung von Photoshop. Nun habe ich dieses Karusell schon zwei mal verwendet und bin ÜBERGLÜCKLCH, dass alles so klappt, wie ich mir das vortstelle. Sogar kleine .swf’s werden angezeigt – der HAMMER. VIELEN DANK und nochmal VIELEN DANK – an wen auch immer.
#22 von Marcus Schulz am November 2, 2011 - 12:21
hallo, ich habe das karussell als Intro für unsere Muttergesellschaft installiert, sieht5 sehr gut aus und funktioniert auch prächtig, bis auf die Spiegelungen, die nerven manchmal, zwar nicht auf dieser Seite, aber z.B. bei Fotos von Menschen, wenn sich die Hände spiegeln und dir plötzlich von unten einer an die Hose fasst
Aber deshalb schreibe ich nicht, denn mir gefällt das Karussell supergut und man kann es überall einsetzen.
Schön wäre noch einen Code zu haben um Musik mit einzuspielen, habe das bei einer anderen Flash Slideshow, da is einfach nur der kurze html code und der embed für die mp3-Datei.
Gibt es so etwas für das Karussell?
mfg
Marcus
#23 von Webmaster am November 9, 2011 - 10:41
Musik aus der Flashdatei heraus abzuspielen ist nicht geplant. Sorry.
#24 von Merle am Januar 9, 2012 - 3:02
Hallo,
ich versuche mich gerade mit dem Flash-Karussell auseinander zu setzen und habe für mich schon den halben Code übersetzt, damit ich verstehe, was ich tue. Dennoch…funktioniert es nicht. Gar nicht oO
Ich bin der Anleitun gefolgt, jedoch wird bei mir nichts angezeigt… gar nichts. Es ist nicht einmal so, dass ich es an falscher Stelle einbinde oder noch für meine Zwecke modifizieren müsste: ich kann es nicht auf die Seite bringen.
Daher habe ich versucht, einfach das von dir einzubinden…-nicht einmal das klappt.
..Vergesse ich irgendwas? Gibt es noch einen geheimen Trick, der im Tutorial nicht beschrieben wurde? Ich verstehe das einfach nicht… :/
Merle
#25 von Webmaster am Januar 9, 2012 - 7:41
Nein kein geheimer Trick… am besten Schritt für Schritt vorgehen. Zuerst nur mal versuchen ein normales Flash Objekt einzubinden, dann das Karusell, dann …
#26 von Merle am Januar 10, 2012 - 9:59
Ich komme – an einem neuen Tag, ausgeschlafen und mit neuem Geiste – der Sache schon näher. Erst einmal waren die Verzeichnisse leicht falsch beschrieben; durch diverse Unterordner sind Zugriffe verloren gegangen und ohne Daten, kann auch kein Karussell dargestellt werden. Außerdem gab es Probleme bei den div-Containern für das Karussell im Body. Musste ordentlich gucken, wo ich was öffne und schließe.
Müsste bald klappen, melde mich dann nochmal
P.S.: In deinem super-Tut ist überings ein kleiner Tippfehler “Dateinamen kannst di –> DU vergeben wie du möchtest. ”
#27 von Merle am Januar 10, 2012 - 10:02
und das wichtigste! In den neueren Versionen deines Karussells fehlt die swfobject.js
#28 von Webmaster am Januar 16, 2012 - 5:33
Danke für den Hinweis zum Tippfehler. Bzgl. swobject.js: Die Anleitung bezieht sich auf die erste Version, da wurde noch das swfobject für die Einbindung von Flash benutzt. Ab irgend einer Versionen habe ich s auf die AC_RunActiveContent.js umgestellt. Die swobject.js braucht man in diesen Versionen nicht. Ich gebe zu, dass die Anleitung diesbzgl. missverständlich ist….
#29 von Merle am Januar 24, 2012 - 2:55
Ich hab’s jetzt mit dem swobject.js gemacht, weil es für mich einfach zu verstehen war
Allerdings bekomme ich bis jetzt nur ein richtig abgemessenes und gefärbtes Feld, jedoch ohne Bilder/Karussell hin. Mist
#30 von Ulrich am Januar 28, 2012 - 6:48
Ich kann das alles nicht, wovon hier geschrieben wird, ABER: Das Teil ist einfach KLASSE, schluckt alles.
Guckt Ihr hier: http://www.vergez.de
Bin ÜBERGLÜCKLICH und DANKE!!!!
Ulrich
#31 von Webmaster am Februar 1, 2012 - 8:18
Freut mich
P.S. Hab mal einen Link aus der URL gemacht, damit man die Website leichter anschauen kann.
LG
Dietmar