tag:blogger.com,1999:blog-80514248604925254552024-03-18T20:46:35.414-07:00LightningbeamLightningbeamSkylerhttp://www.blogger.com/profile/05204748074117265269noreply@blogger.comBlogger10125tag:blogger.com,1999:blog-8051424860492525455.post-4243885768303403132013-01-19T22:56:00.001-08:002013-01-19T22:56:39.325-08:00Platform compatibiltyLately, I've been doing a lot of Lightningbeam development on Mac OS X, with the result that changes were not being ported to all platforms. However, today I spent a while fixing bugs in Linux and Windows, and they now build and run fine. One check off the checklist, 20 to go.Skylerhttp://www.blogger.com/profile/05204748074117265269noreply@blogger.com2tag:blogger.com,1999:blog-8051424860492525455.post-1440942608420792972013-01-04T19:59:00.000-08:002013-01-04T19:59:10.690-08:00Major useful features addedI have had a fair amount of time to work on Lightningbeam the past few days, and here's what I've added:<br />
<ul>
<li>Undo + redo. Unlimited, but it just stores edits rather than re-copying the entire file every time you do something like SWIFT did.</li>
<li>Scaling. It's still buggy, but much better than it was before, and the scales now apply when you export to either HTML5 or SWF.</li>
<li>Images. So far this has only been implemented on Mac OSX, because I need to tweak PyGUI to add support for each platform; but you can now import, scale, and export images, and also use them as fills once I add them to the paintbucket tool.</li>
<li>Text editing working properly. If you add text to the stage, you can now edit it, and you can also click in the ActionScript window and select text (something which was really bugging me until I fixed that.)</li>
<li>Automatic installation of Flash Debugger. Lightningbeam requires a Flash debugger to run SWF files, and while I could just point people at the download site, I gave it the option to automatically download the debugger instead if it is missing.</li>
<li>Sound support; you can now import WAV files to the stage, and they can be exported to both SWF and HTML5 animation.</li>
<li>Selection of multiple objects.</li>
</ul>
And thoughts for the future: I had attempted to add an Android GUI backend about a year and a half ago, but the state of Python on Android at the time was really rather horrible and you had to do everything via a web page and server requests, so I gave up. However, I have recently started experimenting with <a href="http://kivy.org/">Kivy</a>, which uses Python and OpenGL(ES) to provide a cross-platform environment that runs not only on desktops but on Android, and also on iOS, so perhaps I will make apps for Android and the iPad.Skylerhttp://www.blogger.com/profile/05204748074117265269noreply@blogger.com1tag:blogger.com,1999:blog-8051424860492525455.post-7268312261453308462012-10-13T17:30:00.002-07:002012-10-13T17:30:24.215-07:00Menu fixed in Ubuntu!For a while I was doing all of the development of Lightningbeam on Mac OS X, because Ubuntu Unity has a bug which causes the menus to disappear. However, I finally found a workaround, so it should now be just as usable as on other platforms. I will follow up with more testing to confirm this.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhpIELoFIGc7zfI8FvOjXiLN3ID85er35_hZg6yxgzKZDwwqg8nnaEtsBHp8CPg1k3G5zSJ7zc7_RG32UZUkYdoO6iRFy8WT5HgoJ1akyZ-hlxEGDCtI5Dk77duOzzqMPyqrVNwgUapBw/s1600/lightningbeam_menus.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhpIELoFIGc7zfI8FvOjXiLN3ID85er35_hZg6yxgzKZDwwqg8nnaEtsBHp8CPg1k3G5zSJ7zc7_RG32UZUkYdoO6iRFy8WT5HgoJ1akyZ-hlxEGDCtI5Dk77duOzzqMPyqrVNwgUapBw/s640/lightningbeam_menus.png" width="640" /></a></div>
<br />Skylerhttp://www.blogger.com/profile/05204748074117265269noreply@blogger.com0tag:blogger.com,1999:blog-8051424860492525455.post-6499330190450521192012-07-24T18:36:00.002-07:002012-07-24T18:36:44.876-07:00Oddities in ChromeI was testing HTML5 export, and tried exporting the default file (currently a simple ellipse). Nothing was showing up in Chrome, so I did a bit of hunting around. I tried drawing lines, which all showed up. I finally figured out that bezierCurveTo was not working, because lineTo commands in the same place worked fine. Then, it occurred to me to try another browser, and I discovered it ran just fine in Firefox and Opera. But why wasn't bezierCurveTo working in Chrome? I did a bit of Googling and found out that this is actually <a href="http://stackoverflow.com/questions/10633455/canvas-context-beziercurveto-has-a-bug-under-chrome-16-safari-5">a bug in Chrome</a>, which crops up when curves begin and end on the same point. I added the fix mentioned in the Stack Overflow post, and here's where things get a bit weirder: the ellipse now shows up, but only the fill. Nothing will persuade Chrome to actually stroke the curves around the edges. The Chrome team seems to be ignoring the bug report, and I don't want to slow HTML5 drawing down any further by constructing the Beziers out of lines, so I'm just going to leave this one in for now. Outlines will show up as long as shapes have straight edges, but for ellipses you'll need another browser - or Flash, which of course Chrome comes bundled with by default, and which has no problems with curves.Skylerhttp://www.blogger.com/profile/05204748074117265269noreply@blogger.com0tag:blogger.com,1999:blog-8051424860492525455.post-45922753874219534052012-02-09T08:02:00.000-08:002012-02-09T08:02:29.693-08:00SharedObjects added!One of the useful features of Flash is its ability to save data to the user's hard drive with the SharedObject class. I have now mostly implemented this class in JavaScript (in terms of localStorage), so things can be done like saving high scores. Still to be implemented is SharedObjects that communicate with a server, as that will be a bit more complicated.Skylerhttp://www.blogger.com/profile/05204748074117265269noreply@blogger.com1tag:blogger.com,1999:blog-8051424860492525455.post-73526707840646123972012-01-21T14:15:00.000-08:002012-01-21T14:15:58.416-08:00New release: Alpha 2!I have implemented enough features in Lightningbeam that I feel it is ready for the second release. I have <a href="http://lightningbeam.blogspot.com/p/downloads-and-installation-instructions.html">packages for Linux, Mac and Windows users,</a> and on most systems they should work as-is.<br />
<br />
Known package bugs:<br />
<br />
<ul>
<li>There is no package for OSX Tiger. This is because there is a problem installing PyObjC which I haven't found a workaround for.</li>
<li>If using a newer version of Ubuntu:</li>
</ul>
<ol><ol>
<li>It may complain that it is a badly formed package. This is because I put pre-compiled binaries in a multi-architecture package. It will still work (unless you have an Itanium system or something), and I will look into fixing that.</li>
<li>Unity causes a bug in GTK which makes it render some content (notably, the Timeline) outside the window. A workaround for now is to use Gnome instead.</li>
</ol>
</ol>
<div>
This is still an alpha release, so features may be broken/unusable. However, it should be relatively stable with respect to crashing.</div>Skylerhttp://www.blogger.com/profile/05204748074117265269noreply@blogger.com0tag:blogger.com,1999:blog-8051424860492525455.post-44538371217014814082012-01-19T18:30:00.000-08:002012-01-19T18:30:00.093-08:00Import FLA?I have wanted Lightningbeam to be able to import .fla files for a while, as it would make it relatively easy to access old projects. The problem? While the .swf file format is a well known format, the .fla format is virtually undocumented. It is also a binary blob file, which is completely incomprehensible except for some strings of ActionScript. Following is the progress I have made on this.<br />
<a name='more'></a><br />
After some research, I found that there are in fact <i>two</i> completely different types of .fla file: the new CS5 .fla, and the old Flash MX - CS4 .fla. The new format is <a href="http://www.leebrimelow.com/?p=1986" target="_blank">in fact just a simple zipped folder structure</a>, with attributes in XML. The old one is the undocumented binary blob. Sadly, the vast majority of .fla files in existence are old-type, and not having any new-type files to work with, I decided to start with the old version.<br />
After a good bit of research, I discovered a vital piece of information: <a href="http://benjaminwolsey.de/node/49" target="_blank">Old-style .fla files in fact use the Microsoft Compound Binary File format</a>. That page suggests using 7zip to extract the .fla; however, the Mac/Unix version of 7zip (p7zip) refuses to do so. I suppose it is a special feature compiled into the Windows version.<br />
After some more research, I found <a href="http://www.decalage.info/python/olefileio" target="_blank">a Python module for interacting with MCBF (also apparently called OLE2) files.</a> Installation was painless, so I decided to run some tests on the first .fla I had lying around:<br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;">$ python</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">Python 2.6.1 (r261:67515, Jul 7 2009, 23:51:51) </span><br />
<span style="font-family: 'Courier New', Courier, monospace;">[GCC 4.2.1 (Apple Inc. build 5646)] on darwin</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">Type "help", "copyright", "credits" or "license" for more information.</span><br />
<div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;">>>> import OleFileIO_PL</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;">>>> assert OleFileIO_PL.isOleFile('exp.fla')</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;">>>> ole = OleFileIO_PL.OleFileIO('exp.fla')</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;">>>> print ole.listdir()</span></div>
</div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div>
<span style="font-family: 'Courier New', Courier, monospace;">[['Contents'], ['Media 1'], ['Media 2'], ['Media 3'], ['Media 4'], ['Page 1'], ['Symbol 1'], ['Symbol 2'], ['Symbol 3'], ['Symbol 4']]</span></div>
<span style="font-family: 'Courier New', Courier, monospace;">
<div>
>>> f = open('Contents.bin', 'w')</div>
<div>
>>> f.write(ole.openstream('Contents').read())</div>
<div>
>>> f.close()</div>
<div>
>>> f = open('Media1.bin', 'w')</div>
<div>
>>> f.write(ole.openstream('Media 1').read())</div>
<div>
>>> f.close()</div>
<div>
>>> f = open('Page1.bin', 'w')</div>
<div>
>>> f.write(ole.openstream('Page 1').read())</div>
<div>
>>> f.close()</div>
<div>
>>> f = open('Symbol1.bin', 'w')</div>
<div>
>>> f.write(ole.openstream('Symbol 1').read())</div>
<div>
>>> f.close()</div>
</span></div>
<div>
I now had four files, acting as representatives for the different types I was likely to encounter. I opened up the 'Contents' file, and found...binary gobbledegook. But it wasn't all gobbledegook; it had some things that were definitely resource links ('<span style="font-family: 'Courier New', Courier, monospace;">Media 1???bottledwater.png???A/Users/greenandsave/Public/Drop_Box/recycling/#1/bottledwater.png??rL??sL???????????????????????2?</span>'), some that were some sort of property list pair ('<span style="font-family: 'Courier New', Courier, monospace;">:Quality???4???Vector::FireFox???0???"PublishRNWKProperties::exportAudio???1??? PublishRNWKProperties::speed384K???0???!PublishRNWKProperties::exportSMIL???1???"PublishGifProperties::DitherOption??????-PublishFormatProperties::generatorDefaultName???1???</span>'), and at the end: XML. Not very much though.</div>
<div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><?xml version="1.0" encoding="UTF-16" standalone="no" ?></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><mobileSettings></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <contentType id="standalonePlayer" name="Standalone Player"/></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <testDevices/></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></mobileSettings></span></div>
</div>
<div>
The first resource link led me to guess that Media1.bin contained some sort of PNG file. Unfortunately, it wasn't just a png file, as I discovered after changing the extension to .png and trying to open it. Or at least it was either not a pure PNG or it was missing some headers. More research on that to follow.</div>
<div>
<br /></div>
<div>
Abandoning the media for the time being, I opened up Symbol1.bin. It was a good deal smaller, in mostly-pure binary:</div>
<div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;">?CPicPage??<span class="Apple-tab-span" style="white-space: pre;"> </span>CPicLayer??<span class="Apple-tab-span" style="white-space: pre;"> </span>CPicFrame????6b?-Z+?[?@?@4???l???????(??O????<</span><span style="font-family: 'Courier New', Courier, monospace;">T?</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;">z?0??=??????^?π???\????O4??4?,9?p??8?_f?Z.zF?3u?.??jp?Q;?04W?u??h41?4?????)wC?</span><span style="font-family: 'Courier New', Courier, monospace;"> ?e?H??????????Y????????</span><span style="font-family: 'Courier New', Courier, monospace;"> ???Layer 1????O?O???</span></div>
</div>
<div>
I am guessing that that "Layer 1" in there refers to the name of the layer and not the layer itself, as Flash allows you to rename layers and it would make sense if it stored the names in plain text. This file is small enough that it should be possible to reverse-engineer.</div>
<div>
Lastly, I opened up Page1.bin, from which I had no idea what to expect. It starts off with a mixture of binary and XML:</div>
<div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;">?CPicPage??<span class="Apple-tab-span" style="white-space: pre;"> </span>CPicLayer??<span class="Apple-tab-span" style="white-space: pre;"> </span>CPicFrame????????????kD????????</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> ???Layer 4?????O??????</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;">CPicBitmap</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;">?<span class="Apple-tab-span" style="white-space: pre;"> </span>M???,???(????a???????????????m?;*?0(?0?m0???????????Ky?????????<span class="Apple-tab-span" style="white-space: pre;"> </span>CPicShape???E@?|>????|????3??????????s??U?>0?0??0?U<span class="Apple-tab-span" style="white-space: pre;"> </span>???????????????????????</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> ???Layer 1????O?O?????</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;">CPicSpritet<span class="Apple-tab-span" style="white-space: pre;"> </span>-</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;">}???????<component metaDataFetched='true' schemaUrl='' schemaOperation='' sceneRootLabel='Scene 1' oldCopiedComponentPath='1'></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></component></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;">??<span class="Apple-tab-span" style="white-space: pre;"> </span>???O??????m</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;">}???????<component metaDataFetched='true' schemaUrl='' schemaOperation='' sceneRootLabel='Scene 1' oldCopiedComponentPath='7'></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></component></span></div>
</div>
<div>
And then there are about 8 KB of mostly blank spaces and newlines, with one character per line. A sample:</div>
<div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> ?</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> K</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> ?</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> X</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> !</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> X</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> 5</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> X</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> 5</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> X</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> X</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> 0</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> ?</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> ?</span></div>
</div>
<div>
I have no idea what it indicates.</div>
<div>
Finally, it ends with more binary/XML:</div>
<div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;">}???????<component metaDataFetched='true' schemaUrl='' schemaOperation='' sceneRootLabel='Scene 1' oldCopiedComponentPath='6'></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></component></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;">????????????????????</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> ???Layer 2?????3????<span class="Apple-tab-span" style="white-space: pre;"> </span>????$????????????1???stop();??????~?????????????'?<Y?P??<8H???q8o?Z<??V??<V?T?$?8???q</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> ??q???%?P?????????????}???stop();?????</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> ???Layer 3??????O???</span></div>
</div>
<div>
So, to wrap this up: The .fla file format is quite complicated. But it has a structure, and I believe I can recover many attributes from it. The format of the "Media X" files is something I need to try and find, which I will try by comparing them with the original images.</div>
<div>
Is FLA import coming to Lightningbeam? Probably, but not right away.</div>Skylerhttp://www.blogger.com/profile/05204748074117265269noreply@blogger.com7tag:blogger.com,1999:blog-8051424860492525455.post-77727197841935689672012-01-16T08:12:00.000-08:002012-01-16T08:12:41.500-08:00Packaging for Mac OS XI have built a package for Mac OS X. This should make things a bit easier to test. This one requires at least Snow Leopard, as Apple made some changes to their Cocoa library that prevents it from linking correctly under Leopard. I am working on creating a Leopard-compatible build for those with PowerPC Macs.<br />
Windows packaging is a bit more of a pain; I have made a executable but I am witholding it for now while I fix some rather fatal bugs on that platform.<br />
I will create a .deb package for Linux tonight; I <i>might</i> make an .rpm, but I haven't made rpms before so I don't know how hard that will be.<br />
<br />
You can download the app at:<br />
<a href="https://github.com/downloads/skykooler/Lightningbeam/Lightningbeam.zip" target="_blank">https://github.com/downloads/skykooler/Lightningbeam/Lightningbeam.zip</a>Skylerhttp://www.blogger.com/profile/05204748074117265269noreply@blogger.com0tag:blogger.com,1999:blog-8051424860492525455.post-41611038538556973782012-01-12T13:12:00.000-08:002012-01-12T13:12:09.661-08:00HTML5 export working!I now have HTML5 export working. All shape drawing works, and a <a href="http://lightningbeam.blogspot.com/p/supported-actionscript-classes.html" target="_blank">(currently very small) subset of ActionScript</a> can be used.Skylerhttp://www.blogger.com/profile/05204748074117265269noreply@blogger.com0tag:blogger.com,1999:blog-8051424860492525455.post-37947521039301581322012-01-10T16:31:00.000-08:002012-01-10T16:31:28.395-08:00Introducing Lightningbeam!If you haven't already heard of S.W.I.F.T., here is the basic idea:<br />
To create interactive web content, there are a few options: Flash, Java, Silverlight or HTML5. Java has problems with the web: any java applet comes up in a window marked as 'unsafe', and it doesn't work very well for anything graphics-intensive. Silverlight is Windows-only. That leaves Flash and HTML5. There are two ways to create Flash content: in a GUI (Adobe Flash) and by hand, as text (Adobe Flex, swfc, ming etc.). In HTML5, you only have the latter option. Adobe Flash is a very good tool for this, with two problems: one, that it won't run on Linux; and two, that it costs $700.<br />
Lightningbeam aims to address this, by providing a free and open-source editor for dynamic web content. As some platforms support Flash but not HTML5 (e.g. Internet Explorer), and others support HTML5 but not Flash (e.g. the iPhone), Lightningbeam allows you to seamlessly create both from a single project.<br />
<br />
If you have heard of S.W.I.F.T., here is what is new:<br />
Lightningbeam is a complete rewrite, based on lessons learned from SWIFT. It runs on other platforms than Linux, without installation. The HTML5 "engine" has undergone vast improvements in performance (running nearly 100 times as fast in FireFox). The underlying system is now much cleaner, making it easier for Python plugins to run.<br />
Lightningbeam is still under heavy development: it is incomplete, but many new features are being added every day. To see the latest features added, visit <a href="https://github.com/skykooler/Lightningbeam">https://github.com/skykooler/Lightningbeam</a>.Skylerhttp://www.blogger.com/profile/05204748074117265269noreply@blogger.com7