Ich hab die Tage eine kleine ToolTip Klasse geschrieben. Nachdem mir fertige ToolTips nicht gefallen haben oder nicht die benötigten Eigenschaften besaßen hab ich eine für mich gut funktionierende Lösung gescriptet. Wer einen ToolTip sucht kann sich gerne meine Lösung anschauen. Ich hab alles in eine Klasse gepackt. Hier ist der Download-Link. Für die Animation hab ich die TweenLite Engine von Greensock verwendet. Ladet euch einfach die AS3 Version runter und schon habt Ihr fast alles beisammen was man braucht. Der ToolTip braucht noch ein Asset. Legt dazu einfach einen MovieClip an und packt eine Grafik mit einem Textfeld rein das die Texte anzeigen soll. In dem Beispiel unten ( neues Browserfesnter öffnen ) seht Ihr einige der möglichen Einstellungen. Alles in der Klasse ist recht umfangreich dokumentiert und mit Beispielen versehen, was an dieser Stelle eine genauere Erklärung überflüssig macht. Man kann z.B. den Abstand zur Maus einstellen, die Schriftgröße und Farbe anpassen, den Hintergrund einfärben, automatisch schließen aktivieren, die Ausrichtung vorgeben, Filter und Blendmodes anwenden, bestimmen ob der ToolTip animiert sein soll und vieles mehr.
FITC Amsterdam 2010
Dieses Jahr findet wieder die FITC in Amsterdam vom 22.- 23. Februar statt. Wie in den Jahren zuvor gibt’s wieder ein super Line-up von Speakern und ein Besuch in Amsterdam lohnt sich immer. Unter anderem mit dabei sind dieses Jahr Lee Brimelow, Mike Chambers, Jim Corbett, Koen De Weggheleire, Joa Ebert, Hoss Gifford, Ralph Hauwert, Mario Klingemann, Seb Lee-Delisle, André Michelle, De Monsters, Erik Natzke, Grant Skinner, Carlos Ulloa und mein Kollege Frank Reitberger.Leider kann ich dieses Jahr aus zeitlichen Gründen nicht an der FITC teilnehmen, aber ich freu mich dieses Jahr zumindest schon mal sehr auf die FFK10.
3D Tag cloud V2
Hier wie bereits angekündigt eine weiterentwickelte Version der 3D Tag cloud V1. Wie gehabt werden die Daten aus einer XML Datei geladen.
Neu hinzugekommen bei dieser Version sind diverse Features wie das Laden von Bildern um z.B. eine Fotogalerie/Thumbnail-cloud erstellen zu können. Klickt zum betrachten einfach in der Anwendung auf „Test Photogallery“.
Mehr eine Spielerei, aber ich fand den visuellen Effekt sehr schön, ist der Effektmodus der sich rechts unten über die Checkbox auch wieder deaktivieren lässt, falls es jemanden zu viel wird oder die Performance drunter leiden sollte.
Die wichtigste Neuerung ist jedoch die, dass es nun möglich ist in der XML Datei Inhalte zu verschachteln. So kann ein Tag innerhalb der cloud wie gewohnt ein link auf z.B. eine externe Webseite sein, oder jetzt zu einer weiteren Tag cloud führen von der man aus wieder zurück gelangen kann, oder weiter in die Struktur eintauchen kann. Mit dieser Neuerung ist es nun möglich sehr komplexe Inhalte darzustellen und nicht einfach nur eine einzige Tag cloud.
Zum starten der Tag cloud klickt einfach auf das Bild, bzw. den Start Button und ein neues Browser Fenster öffnet sich.
Zum betrachten der SWF braucht Ihr auch hier wieder die neueste Version vom FlashPlayer 10!
Neu hinzugekommen bei dieser Version sind diverse Features wie das Laden von Bildern um z.B. eine Fotogalerie/Thumbnail-cloud erstellen zu können. Klickt zum betrachten einfach in der Anwendung auf „Test Photogallery“.
Mehr eine Spielerei, aber ich fand den visuellen Effekt sehr schön, ist der Effektmodus der sich rechts unten über die Checkbox auch wieder deaktivieren lässt, falls es jemanden zu viel wird oder die Performance drunter leiden sollte.
Die wichtigste Neuerung ist jedoch die, dass es nun möglich ist in der XML Datei Inhalte zu verschachteln. So kann ein Tag innerhalb der cloud wie gewohnt ein link auf z.B. eine externe Webseite sein, oder jetzt zu einer weiteren Tag cloud führen von der man aus wieder zurück gelangen kann, oder weiter in die Struktur eintauchen kann. Mit dieser Neuerung ist es nun möglich sehr komplexe Inhalte darzustellen und nicht einfach nur eine einzige Tag cloud.
Zum starten der Tag cloud klickt einfach auf das Bild, bzw. den Start Button und ein neues Browser Fenster öffnet sich.
Zum betrachten der SWF braucht Ihr auch hier wieder die neueste Version vom FlashPlayer 10!
iPhone controls flash 3d graphics
Mit einem iPhone, der neuen Flash CS5 Demo und zu viel Zeit würde ich auch gerne mal rumexperimentieren.
3D Tag cloud
Beim entwickeln mit Away3D lite ist mir die Idee gekommen eine 3D Tag cloud zu scripten.
Die so entstandene 3D Tag cloud unten ist noch ein früher Prototyp der seine Daten zumindest schon einmal aus einer XML Datei lädt.
In der XML Datei können die einzelnen Tags gesetzt, und über Parameter entsprechend gestaltet werden. So kann z.B. die Schriftgröße frei bestimmt werden, oder man nimmt eine andere Textfarbe. Genauso werden in der XML Datei auch die Textinhalte und Links gesetzt.
Als einziges Beispiel für eine mit Flash erstellte 3D Tag cloud hab ich bisher nur das „WP-Cumulus“ Wordpress-Plugin von Roy Tanck finden können, dass aber recht gut verbreitet zu sein scheint.
Ich werde an meiner Version noch was weiterentwickeln und dann ggf. hier die Source-Files veröffentlichen.
Zum betrachten der 3D Tag cloud braucht Ihr die neueste Version vom FlashPlayer 10.
Die so entstandene 3D Tag cloud unten ist noch ein früher Prototyp der seine Daten zumindest schon einmal aus einer XML Datei lädt.
In der XML Datei können die einzelnen Tags gesetzt, und über Parameter entsprechend gestaltet werden. So kann z.B. die Schriftgröße frei bestimmt werden, oder man nimmt eine andere Textfarbe. Genauso werden in der XML Datei auch die Textinhalte und Links gesetzt.
Als einziges Beispiel für eine mit Flash erstellte 3D Tag cloud hab ich bisher nur das „WP-Cumulus“ Wordpress-Plugin von Roy Tanck finden können, dass aber recht gut verbreitet zu sein scheint.
Ich werde an meiner Version noch was weiterentwickeln und dann ggf. hier die Source-Files veröffentlichen.
Zum betrachten der 3D Tag cloud braucht Ihr die neueste Version vom FlashPlayer 10.
YouTube Chromless API VS. Flashplayer 10,0,2
Nach der ersten Begeisterung folgt die große Ernüchterung. Nach diversen kleinen und erfolgreichen Tests wollte ich mit der „Youtube Chromless API“ einen kleinen Schritt weiter gehen. Zeitgleich mit der Youtube API hab ich mir die neue Away 3D Engine für den Flash Player 10 angeschaut, die dank Pixelbender mächtig mehr Speed unter der Haube hat als die aktuelle Version der Papervision Engine. Die Idee war das Youtube Video in ein BitmapData zu zeichnen um dieses als Texture für eine Sphere zu benutzen… Und genau hier bin ich das erste mal auf das Problem, oder besser gesagt, die für mich bisher unbekannte Fehlermeldung gestoßen: „Fehler: http://xyz konnte nicht geladen werden, da als Content-Disposition "attachment" festgelegt war.“ Mit dieser Fehlermeldung konnte ich zunächst gar nichts anfangen und zudem kam noch das Problem hinzu, dass ich den nahezu identischen Code aus der „YouTube Flash Player API Reference“ bereits erfolgreich getestet hatte. Allerdings hatte ich zu Begin aus Bequemlichkeit in der Flash CS3 IDE für den Flash Player 9 gescriptet. Bei „größeren“ Projekten hingegen schreib ich meinen Code am liebsten mit FlashDevelop und kompiliere ihn über die Flex SDK (Ver.: 3.4) entweder für v9 oder v10.
Und genau hier entsteht das Problem. Sobald man für den Flash Player 10 entwickelt wird man spätestens ab Player Version 10,0,2 mit den geänderten Sicherheitseinstellungen konfrontiert. Manch ein HTTP Server sendet einen so genannten „response header“, der wie folgt aussehen kann: „Content-Disposition: attachment“. Das verhindert, dass das zu ladende File abgespielt, bzw. korrekt eingeladen werden kann. Und genau diesen Header scheint der Youtube Server auch zu senden, denn die Youtube API ist nicht mehr in der Lage irgentwelche Videos zu laden. Der Player (+Logo) ist zu sehen und die Methoden kann man auch ansprechen, aber das Laden ist wie gesagt unmöglich.
Der onPlayerError Handler gibt mir zudem die Fehlermeldung „player error: 0“ aus. Laut Referenz sollte es aber nur diese Fehlermeldungen geben: „The possible error codes are 100, 101, and 150.“
Das ganze funktioniert also nur für den Flash Player 9, nicht aber für den 10er Player wegen der geänderten Sicherheitseinstellungen. Das ganze gibts hier schwarz auf weiß!
Bitte korrigiert mich falls ich daneben liegen sollte.
Und genau hier entsteht das Problem. Sobald man für den Flash Player 10 entwickelt wird man spätestens ab Player Version 10,0,2 mit den geänderten Sicherheitseinstellungen konfrontiert. Manch ein HTTP Server sendet einen so genannten „response header“, der wie folgt aussehen kann: „Content-Disposition: attachment“. Das verhindert, dass das zu ladende File abgespielt, bzw. korrekt eingeladen werden kann. Und genau diesen Header scheint der Youtube Server auch zu senden, denn die Youtube API ist nicht mehr in der Lage irgentwelche Videos zu laden. Der Player (+Logo) ist zu sehen und die Methoden kann man auch ansprechen, aber das Laden ist wie gesagt unmöglich.
Der onPlayerError Handler gibt mir zudem die Fehlermeldung „player error: 0“ aus. Laut Referenz sollte es aber nur diese Fehlermeldungen geben: „The possible error codes are 100, 101, and 150.“
Das ganze funktioniert also nur für den Flash Player 9, nicht aber für den 10er Player wegen der geänderten Sicherheitseinstellungen. Das ganze gibts hier schwarz auf weiß!
Bitte korrigiert mich falls ich daneben liegen sollte.
YouTube Chromless API Developers Interview
Hier noch ein kleines Interview mit einigen Entwicklern von Youtube/Google über die YouTube Chromless API. Dabei ist auch Geoff Stearns, der Flash Engineer vom Youtube Player.
YouTube Chromless API in Aktion
Endlich ist es möglich ohne größere Umwege Youtube Videos in sein AS3 Projekt zu laden. Auf Google Code gibt es seid kurzem die „YouTube Chromless API“ die dies ermöglicht. Dank der ausführlichen Referenz und 2 kleinen, aber ausreichenden Beispielen fällt der Einstieg sehr einfach.
Ich hab zum testen direkt ein kleines Beispiel gebaut mit einer minimalen Videosteuerung. So kann man das Video abspielen/pausieren lassen und auf lautlos stellen. Natürlich wären alle vom Youtube Player bekannten Steuerelemente möglich, wie sich in der Referenz nachlesen lässt, aber für dieses kleine Beispiel muss das Vorhandene reichen.
Zum testen hab ich noch die Möglichkeit Youtube Videos zu laden mit eingebaut. Man kann das Video entweder über die Video ID, oder die Video URL in den Player laden.
Um ein anderes Video in den Player zu laden müsst Ihr also einfach entweder wie im Bild zu sehen die Video URL kopieren, oder die rot makierte Video ID nehmen und diese unterhalb des Fernsehers in die entsprechende Textbox einfügen und auf „LOAD“ klicken.
Wer mit dem Beispiel aus der Referenz nicht klar kommt und Security Fehler wie „Sandbox-Verletzung“ usw. erhält, der sollte folgende zeile code mit in sein Projekt einfügen:
flash.system.Security.allowDomain( "http://www.youtube.com" );
Ich hab zum testen direkt ein kleines Beispiel gebaut mit einer minimalen Videosteuerung. So kann man das Video abspielen/pausieren lassen und auf lautlos stellen. Natürlich wären alle vom Youtube Player bekannten Steuerelemente möglich, wie sich in der Referenz nachlesen lässt, aber für dieses kleine Beispiel muss das Vorhandene reichen.
Zum testen hab ich noch die Möglichkeit Youtube Videos zu laden mit eingebaut. Man kann das Video entweder über die Video ID, oder die Video URL in den Player laden.
Um ein anderes Video in den Player zu laden müsst Ihr also einfach entweder wie im Bild zu sehen die Video URL kopieren, oder die rot makierte Video ID nehmen und diese unterhalb des Fernsehers in die entsprechende Textbox einfügen und auf „LOAD“ klicken.
Wer mit dem Beispiel aus der Referenz nicht klar kommt und Security Fehler wie „Sandbox-Verletzung“ usw. erhält, der sollte folgende zeile code mit in sein Projekt einfügen:
flash.system.Security.allowDomain( "http://www.youtube.com" );
Footprints in the sand
Bei der Entwicklung eines kleinen Spiels gab es die Grundidee, dass der Spieler eine Linie zu einem bestimmten Ziel zeichnen muss. Hat der Spieler sein Ziel erreicht folgen der gezeichneten Linie Fußabdrücke und das Level ist beendet.
Genau diesen Part aus der Engine für das Spiel hab ich jetzt dazu benutzt, um mit der Maus Linien in den Sand zu malen und im Anschluss von Fußabdrücken nachgehen zu lassen.
Sieht ganz lustig aus wie ich finde. Zeichnet einfach bei gedrückter Maustaste in den Sand rein. Lasst Ihr die Maustaste los wird die von Euch gezeichnete Strecke abgegangen.
Genau diesen Part aus der Engine für das Spiel hab ich jetzt dazu benutzt, um mit der Maus Linien in den Sand zu malen und im Anschluss von Fußabdrücken nachgehen zu lassen.
Sieht ganz lustig aus wie ich finde. Zeichnet einfach bei gedrückter Maustaste in den Sand rein. Lasst Ihr die Maustaste los wird die von Euch gezeichnete Strecke abgegangen.
drawSketchedLine
Eine kleine Spielerei die sicher für den einen oder anderen interessant sein könnte.
Mit den Zeichenmethoden (movoTo und lineTo) der Graphics Klasse kann man nur durchgehende und gleichmäßige Linien zeichnen. Im Netz gibt’s schon sehr viele Lösungen um gestrichelte bzw. gepunktete Linien zu erstellen, aber ich konnte im Web nichts finden um „gemalte“, oder anders gesagt nicht ganz korrekt gezeichnete Linien zu erstellen.
Im Flashforum kam jetzt genau die Frage nach einer solchen Methode/Funktion auf. Die kleine Funktion war schnell geschrieben und kann natürlich auch sehr einfach in eine Methode umgeschrieben werden. Den Actionscript Code und ein paar erklärende Worte zum zeichnen der „sketched lines“ gibt’s hier.
In dem Beispiel unten könnt Ihr einfach mit der Maus wild rumklicken um Linien zu zeichnen. Unten könnt Ihr diverse Parameter verstellen und somit das Aussehen der Linien beeinflussen.
Mit den Zeichenmethoden (movoTo und lineTo) der Graphics Klasse kann man nur durchgehende und gleichmäßige Linien zeichnen. Im Netz gibt’s schon sehr viele Lösungen um gestrichelte bzw. gepunktete Linien zu erstellen, aber ich konnte im Web nichts finden um „gemalte“, oder anders gesagt nicht ganz korrekt gezeichnete Linien zu erstellen.
Im Flashforum kam jetzt genau die Frage nach einer solchen Methode/Funktion auf. Die kleine Funktion war schnell geschrieben und kann natürlich auch sehr einfach in eine Methode umgeschrieben werden. Den Actionscript Code und ein paar erklärende Worte zum zeichnen der „sketched lines“ gibt’s hier.
In dem Beispiel unten könnt Ihr einfach mit der Maus wild rumklicken um Linien zu zeichnen. Unten könnt Ihr diverse Parameter verstellen und somit das Aussehen der Linien beeinflussen.
Abonnieren
Posts (Atom)
