Ein Bild sagt mehr als tausend Worte. Und ein bewegtes Bild ist noch viel sprechender. So ist es kein Wunder, dass sich in den letzten zwölf Jahren mit Adobes Flash ein Format durchsetzen konnte, das das Gegenteil eines offenen Standards repräsentiert. Die neue jCS Media Library ermöglicht nun die Erstellung flash-ähnlicher Animationen auf der Basis von jQuery. Der Entwickler verspricht sogar Kompatibilität für den Internet Exploder ab Version 7.
jCS Media Library: Der Anfang ist gemacht
Kommen wir gleich zu Beginn zum größten Nachteil der jCS Media Library (jCSML) im Vergleich zu Flash. jCSML muss von Hand gescriptet werden, während Flash bekanntlich über eine aufwändige GUI verfügt, die Standardaktionen ohne manuelles Coding ermöglicht. Der Entwickler verspricht allerdings, bereits an einer Web-App zu arbeiten, die zum einen kostenlos, zum anderen in der Lage sein wird, jCSML-Animationen per Drag & Drop zusammen zu klicken, sowie die entstehende Codebasis zu exportieren und in die Zielwebsite einzubauen.
jCSML kommt in drei Varianten, von denen zwei kostenpflichtig sind. Die auch für kommerzielle Zwecke kostenlose Free-Edition treibt alle Demos auf der Produktwebsite an und kann für JavaScript-Enthusiasten sicherlich als völlig ausreichend gelten. Die beiden kostenpflichtigen Varianten ermöglichen weitere Animationstypen, bringen aber im Wesentlichen vorgefertigte Codeblöcke für Standardanimationen, sowie generische PNG-Dateien, wie Bilder von Wolken, Gras oder Blasen mit. Diese beiden Pakete richten sich also an Entwickler, die den zeitlichen Aufwand der Eigenprogrammierung scheuen oder solche, die nicht über das entsprechende Know-How verfügen und es sich auch nicht aneignen wollen.
jCSML setzt auf jQuery und dem jQuery Easing Plugin auf. Zu animierende Bilder sollten als PNG mit Alpha-Kanal angelegt sein. Der Entwickler verspricht volle Funktionalität auch im IE 7. Zwingend ist dabei allerdings die Verwendung des transparenten Ein-Pixel-Gifs, das Webdesigner seit Ende der Neunziger kennen. Wer sich nicht auf die korrekte PNG-Darstellung im IE verlassen will, kann JPG verwenden, muss dann allerdings mit den immanenten Einschränkungen, etwa der fehlenden Transparenz umzugehen wissen.
jCSML: Dreistufiger Animationsprozess
Animationen mit jCSML werden dreistufig gebaut. Zunächst definiert man einige Media Objects. Hierbei handelt es sich um einzelne Animationsteile, die es gilt, zum Zusammenspiel zu bewegen. Zu diesem Zweck erstellt man eine sog. Media Sequence. Eine Media Sequence definiert die eigentliche Animation eines oder mehrerer Media Objects. Sollen nun Media Sequences mit reinen Media Objects gemeinsam genutzt werden, so bedarf es des Einsatzes der dritten Komponente von jCSML, dem Media Launcher. Der Media Launcher sorgt desweiteren dafür, dass zunächst alle Animationsteile geladen sind, bevor die Bewegung startet.
Endzustand der Animation, die zwei Objects mit einer Sequence kombiniert
Natürlich ist die Syntax etwas, das es zu erlernen gilt. Wer Kenntnisse in JavaScript hat, wird sich indes damit recht leicht tun, zumal das eigentliche Scripting der jCSML-Engine weitgehend mit natürlichsprachlichen Begriffen erfolgt.
Der Entwickler stellt ein knapp viertelstündiges Trainigsvideo zu jCSML Free auf YouTube bereit:
[youtube]http://www.youtube.com/watch?v=PFYHJcwfj0k[/youtube]
Fazit: Wer die zweifellos erforderliche Einarbeitung nicht scheut oder nicht auf die Verfügbarkeit der Drag & Drop Webapp warten will, kann mit jCSML schon heute Animationen erstellen, die in weiten Bereichen den Vergleich mit Flash nicht scheuen brauchen. Schöner Nebeneffekt: Diese Animationen funktionieren auch auf iPhone und iPad.
0 Antworten zu „jCS Media Library: Komplexe Animationen mit jQuery“
— was ist Deine Meinung?
Hello Curtis,
i can confirm the display errors Dieter experienced on the jCSML demo pages in IE8 x64.
IE 8.0.7600.16385 ( 64-bit Edition)
OS: Windows 7 Ultimate x64
1. ) I visited the link http://www.jcsml.com/pageshell.html?root=Tutorials&target=MediaLauncher from Dieter’s article.
2.) IE indicated a script error at the bottom left.
3.) i reloaded the page: script error still there but didnt look into it (sorry)
4.) navigated to „Rotation“ demo page
5.) script error gone! – not reproducable
6.) .. but animation demos arent neither showing nor loading corretly – no images shown … on none of the demo pages – strange behaviour: sometimes no images , sometimes black boxes only
7.) another page reload didnt fix the animations
8.) switched to Firefox , surfed a while -> switched back to IE to close it
9.) reloaded the page once again … surprise: animations working, images loading correctly on nearly all demo pages … except for the blurred images and starship hangar demo.
10.) closed IE , reloaded the page -> no script error … but all demo animations failing again. the images arent lodaed correctly: sometimes black boxes , sometimes nothing shown.
Hope you’ll be able to fix those display errors on your demo pages before too many others experience them aswell. your project has great potential … but if i hadn’t seen your comments here stating it might be an ajax failure not the lib itself causing these behaviours – i wouldn’t even have downloaded the lib for trying it out, thinking it wouldnt be production-ready and has never really been tested… and probably never will be.
i doubt you put a lot of effort in testing and making the script stable. it would be sad if jcsml was somehow thwarted before having the chance of releasing its full potentical and a wider acceptance because of such a little bug on your page – maybe preventing a lot of developers from downloading,trying and spreading it.
Hope this helps.
keep up the good work!
Greets,
Nico
Would you mind a correspondence over email? I spent the last 8 hours fixing two major bugs I found in the 1.7.2012 version. Sadly, I have spent literally hundreds of hours testing this on every machine I could get my hands on many weeks prior to public release. But, I am going to press on because I believe in it and I won’t quit or give up on it. It’s not in my nature to stop because it got tough, it just makes me work harder. 🙂
That said, I just released v1.8.2012 about 30 minutes ago. If you could give it another go (Ctrl-F5 the site or clear the cache) and let me know it would be greatly appreciated. I also
removed the nested $.getscript calls I used to dynamically build the website in the hopes that will help.
If there are script errors, it would be so helpful if I could get a screenshot of the error.
Thanks you so much for the time you spend responding to me. I visit this page several times a day hoping for comments such as yours.
I’m getting good responses now from peer testers that it is working much better (and faster) in IE7/IE8 with the latest changes. Also, we literally just verified that on Windows Server platforms, IE ESC is sometimes defaulted to ON. This apparently causes problems with the retrieval of the animations on the website and has nothing to do with the library. When we turn IE ESC off, the site works perfect in IE7 on Windows Server 2003. So, progress is being made.
I’ve reproduced some problems in an old IE7 I found on a server. Fortunately, it appears unrelated to the jCSML library and instead appears to be related to the jquery ajax calls I am making to create the pages on the website and load the scripts which initialize the animations. I will dig in and find the root cause this week. Thanks for the help. I think I’m onto something now….
Also ich muss ja sagen, der Weg den „jCS Media Library“ geht ist für mich sehr interessant. Ich würde mich nicht soweit aus dem Fenster lehnen um zu sagen das es Flash ablösen könnte, auch Flash hat seine Berechtigung, aber für mich um weiten interessanter als Flash.
Ich habe bereits selbst schon einmal ein kleines Animationsplugin entwickelt für komplexere Animationen und bereits da gemerkt wie viele Probleme es in den Unterschiedlichen Browsern gibt, nicht nur zum IE, auch zu Browsern wie Chrome, Firefox oder Opera. Dies aber meist eher im Detail.
Die Entwicklung sollte im Auge behalten werden.
By chance, you you email me any script errors you saw? Not being able to reproduce this despite sincere attempts is leaving me blind. It should either work or not work. I will work tirelessly to address this because it is unacceptable to me that it does not work flawlessy on IE8. I hope to hear from you, and thank you for the testing so far. I appreciate it!
I would send you error-messages but it didn´t produce any script-errors. Animations run, but just not as intended. On first run of the girl-animation the shadow which moves in behind the picture of the girl takes the whole browserwindow and colours it gray. Eventually it clears away and the next run would work perfectly. Unfortunately the animation doesn´t stick to its intended end position.
Again, on iPad and Android as well as Chrome and Firefox everything works smoothly…
OK, that is good news then about having no script errors. That cuts a big part of the problem out of the way. I have several friends locally here that have IE8 machines stood up and we are going to execute additional systematic tests of each animation and map out the OS version, service packs, and browser versions. I am going to also try it with different internet connection speeds to revalidate it. Out of curiosity, are all animations on the site having this issue with IE8 or just that particular one? That may also help me isolate if it the issue is situated on that specific animation. Thanks again for your help and insight. I will get this resolved, you can count on that.
Hello,
I translated using google and it appears that there are issues being reported with IE8. If possible, can you please tell me the browser sub-version of IE8 and the service packs installed? I spent several months testing IE7/IE8 animations on virtually every machine I could get my hands on (old and new) and all animations executed nominally prior to release in early May so this is very disturbing news to me. I am using a Windows XP (SP3) machine right now with IE8 (8.0.6001.18702) and the media Launcher animation works correctly so I am curious to see if there is a service pack difference.
To help further the platforms support for IE8, your feedback is exactly what I need to know to make it better! I appreciate any feedback, positive or negative. I only care that it works as I have stated and tested. Note that it does not work in IE9 browser emulation modes for IE7/8. IE9 emulation of IE7/8 does not interpret the use of IE7/8 filters correctly.
Please feel free to respond here or email me directly at jcsml2012@gmail.com. Thank you!
Sincerely,
Curtis Socha
Creator of jCSML
Hello Curtis.
That´s exactly what´s being reported. I´ll try to get my hands on some older versions of IE to see if I can prove that.
Regards
D. Petereit
Dr. Web Team
Unfortunately, the issue-reports have proven to be true. I´ve tried the animations on two machines, one on XP and one on Windows 7. The latter is equipped with an IE 8 64bit. The animation starts correctly after it fails on first load. Once ended the parts of the animation go stray somewhere around the screen. Same behavior with an XP-powered IE 8 32bit. Almost unbelievable, that you´ve not run into these issues as they are perfectly replicable across devices …
OK. that is good to know. If the animation is at least starting correctly, (with rotation, etc), then that moves the issue I think higher up in the engine, possibly the media launcher which is odd. I have not been able to reproduce this yet and spent a good part of last night testing in IE7 and IE8 again on a few machines I have around the house. Everything worked great unfortunately. I cleared the cache, etc. I’m going to see if I can hunt out a machine that has never visited jCSML that has IE7 and see if I can reproduce it there. I’ll let you know…
Das wär‘ doch was: Videos mit HTML5, Animationen mit jCS Media Library, und endlich Flash in die Ecke stellen.
Leider nur »wäre«. 🙁
Die Demo http://www.jcsml.com/pageshell.html?root=Tutorials&target=MediaLauncher
mit dem IE8 in der VM (Parallels auf OSX Lion) versagt kläglich. Und auch andere Beispiele.
Sollte es tatsächlich nur die VM sein?
Interessant. Ich habe den IE nicht getestet, sondern das iPad. Darauf laufen die Demos einwandfrei.
Update:
I found three major problems and have addressed them. The site should be performing significantly better now in IE7/IE8.
1) The DISCUS Comments plug-in was screwing up my web pages intermittently, especially when it took a long time to load the DISCUSS comments. I have removed the DISCUS comments plugin. It’s much much faster now.
2) I had several errors in my own jCSML animations where I fell victim to my own advice. Extra „,“ at the end of an object definition makes IE7/8 not run the animation. Those have all been fixed.
3) Images with a starting width and height of 0,0 seem to incorrectly have their css position attributes applied. I’m not sure why that is yet, but after updating all animations to at least start off at 2×2, that seemed to fix the problem.
I will be creating a new build of the library that will resolve the dimension/attribute issue this week. Thank you for the heads up on the problems that you were encountering.
Can you give it another whirl and let me know? This is the first real feedback I’ve had despite having many thousands of developers visit and download the library so I really appreciate it!
Die Demos laufen tatsächlich nicht unter IE8, also mit großen Darstellungsfehlern. Getestet auf einem XP System. Glaub der IE-Support ist sehr eingeschränkt bzw. noch unausgereift …
Ich habe hier eben einen IE 9 testen können. Darauf funktioniert alles einwandfrei. Ich werde mal schauen, ob ich im Gebäude noch irgendwo wat älteres auftreiben kann.