logga


1 physics tetris

I think most variants of the classic tetris game has been built already for about 10 years ago. But I thought I could give it a try and build one with a physics engine.

you control the blocks with the mouse, I assume you know the rules. There are some differences with the deletion of rows and there are some bugs with row checking, its made with collision detection of points in columns and rows which means it can be tricked. I also had some problems with destruction of objects. An effect of that is some memory leakage.

some source

One Comment to “physics tetris”

xml reading in as2

Xml reading with the built-in functions in as2 is not the funniest things to do. In as3 it’s a lot better as you probably know. To make it easier in as2 I made a xmlparser that makes it possible to read the xml as a dom-tree. There are a lot of similar classes and some of them are probably better then mine or at least more advanced. This class is only for reading since you almost never alter xmls and seldom write them. The class is about 4 years old but I use it in almost every as2 project I thought I could share it.

source:
xmldomdemo.rar

usage:
import se.superkrut.util.XMLDom;
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = function(){
var xmldom:XMLDom = new XMLDom(this);
trace("first:"+xmldom.root.language.swedish.text.bye.value);
trace("second:"+xmldom.root.language.swedish.text[1].value);
trace("attribute:" + xmldom.root.language.attributes.id);
}
xml.load("language.xml");

where language.xml is:

<?xml version="1.0" ?>
<root>
<language id="swedish">
<text id="hello">hej</text>
<text id="bye">hej då</text>
</language>
</root>

all instances have a __resolve function that maps unknown calls to the first position in the child array. Example
xmldom.root.language is the same as xmldom.root[0].language

the attribute id is automatically mapped to a property in the instance. Example:
language.swedish is mapped from the id attribute.

No Comments to “xml reading in as2”

8 Flex ampache player

[update2: I made a new page for the player, here, go there instead ]

I installed ampache awhile ago to be able to listen to my music from different locations. But I didn’t like the html front to browse the music and started to build one in flex 2 and amfphp instead. It fetches all the songs from the database first. 2000 songs becomes about 500kb in an amf collection which is almost nothing compare to one mp3. There are some really nifty things built into flex as dragdrop, column sorting, search with keyboard and so on.

[update: I made some changes during the week. The are no visual changes but a lot behind.
- Rewrote the code to use the Cairngorm framwork.
- enabled login
- catalog cache on clientside. The database is now stored as a local shared object and is not downloaded again unless requested. Later the update procedure could be automatic and only download the differences from the cache.
- some double click features. double click to add to playlist and play.
- a settings view. Its not really enabled that much but its there. ]

The sound spectrum visualization is a separate swf-file and is very easy to change to something nicer. Right now it’s a copy-paste of the adobe example.

You can see the result here, the username is here prewritten. It’s still very beta but it got the basics. browsing and listening to music. The music in the example are fetched from hype machine and lies public on the net. If you send me a mail I can delete them.

player.png

There are some things that need to be fixed to make it better:

- better integration with ampache. I disabled the login procedure and wrote some new files to be able to access the music and covers without login. The plan is to use the flexplayer without changes in the ampache code. [update: The login is enabled now and everything should be safe ]

- there are some security issues. [update: see above ]

- rewrite code to the Cairngorm framework. The code is about to grow. [update: done! the code is a lot bigger now in rows but simpler to follow]

- Include more of the ampache features. There is a lot missing in this version.

- Dragdrop of folders to the playlist doesn’t work perfect. When you drag something from the tree structure a request to the server is made to get the information about the tracks. If the result is not received before the drop, the playlist is not populated.

- better player, the buttons are not updated correct all the times.

- nicer stylesheet. need to sit down with the Flex2StyleExplorer.

- installation could be simpler, and an installation and compilation guide could be written

source:
ampache_player_02.rar
ampache_player_03.rar

[update2: newer verision here ]

if you never used flex before it can be a little tricky to get started. But if you not planing to change the code then you don’t have to compile. You can change the stylesheet without compiling. It can be built with “free” (not opensource) tools, the flex SDK, but flex builder 2 makes it a little bit easier.

There is also a thread in the ampache forum about the player. http://ampache.org/forums/viewtopic.php?pid=9273

8 Comments to “Flex ampache player”

155 computeSpectrum exploit

You are listening to:

A lot of music and videos on Internet is delivered through a flashplayer as myspace, youtube, lastfm, deezer, ampache etc. That is not a coincidence since its a good way to deliver music and video. With as3 a new function SoundMixer.computeSpectrum() was put in the toolbox. Its the only function I can think of that add a functionality that could not be archived with as2 and some serverside tricks.

If you are listen to Internet music and at the same time surf around to watch fancy spectrum visualisations the debug dialog will popup once in a while. The debugger explains that you are violating the sandbox and writes out which files the cross domain violation concerns.

Some posts on Internet explains that you could use try catch to avoid the debug dialog, that’s not working but you could use it to catch the error. I wrote a little code which can be used to track the sound the user is listening to. The code is only useful for the debugger player since it writes a human-readable error message together with the short errorID.


try
{
SoundMixer.computeSpectrum(new ByteArray());
}
catch(e:SecurityError)
{
var message:String = e.message;
var startStr:String = "cannot access ";
var start:int = message.indexOf(startStr)+startStr.length;
var end:int = message.indexOf(". A policy file is");
var sounduri:String = message.substring(start, end);
tf.text = sounduri;
}

The uri can be used to identify the source of the sound if you want to download it, A process possible but boring with http-proxies as fiddler or livehttpheaders. If you have the uri you can get the sound but in most cases its not possible due to other security measurements as cookies, the referheader, and/or one-time only uris. In some more cases its not legal.

The exploit can also be used to track behavior on internet which is big business . There is nothing preventing me from posting what you are listening to or watch at youtube right now to my big brother database.

The exploit is only tested successfully on the debugger player for firefox for winxp (fp 9.0.47) and linux (fp 9.0.48), and its only working sometimes.

155 Comments to “computeSpectrum exploit”

7 inputfields and transparency in firefox for windows

There are alot of bugs related to wmode= transparancy or opaque for firefox in windows, in linux it doesn’t seems to work at all. This particular bug is that you can’t write @ on a swedish keyboard in input textfields. Normaly you write @ with Alt Gr+2, but if you try a normal 2 is written. Faults happends for most Alt Gr codes as £${[]}. A quick workaround is to use the english Shift+2 but most people don’t know that. Or you can paste it in from elsewhere. Another workaround a friend of mine gave me is to pretype the @ in the textfield and let the user write his email around it. There are some other workarounds, but none of them was nice enough.

without the fix

with the fix

My solution registers a keyListener if a textfield is Selected and stores the key-code sequences in a keybuffer. If 17, 18, 50 is pressed an @ is written instead of the 2. 17, 18 is for Alt Gr and 50 is for the 2 key. Other key-code sequences are mapped to other signs. If another textfield or something else is in focus the listeners are removed. The class might need some localisation changes to work on different keyboard layouts.

The class has a very simple setup.

InputFix.initialize();

Once initialized it works on all textfields in the application. One important thing is that you have to import the font for the numbers even if you not is going to use them. It the chars are missing the onChanged event on the textfield are not executed.

A preferred solution is to send the browser as a flashvars and only initialize it for firefox for windows.

source: text, package

7 Comments to “inputfields and transparency in firefox for windows”

4 swfs and applets in wordpress

I use kml_flashembed to embed flash content to my page. Its a really good plugin and I recommend it. But since the this page has a lot of swf sand some of them are really CPU-heavy I don’t want them to load directly. One way of doing it is to change the swf to have an inactive state but that needed some boring code changes. Instead I decided to activate them on click. So I made some small changes to the plugin to be able to send in either a url to an image or an explanation text. the parameters are optional and the plugin is 99% backwards compatible with the origional plugion. If you have javascript enabled but no flashplayer plugin the alt-text is not shown.

The embed text is now:

[ kml_flashembed movie="data/displaceview/displaceView.swf" height="400" width="600" fvars="load_url=data/displaceview/start.swf" clicktext="click to activate"/ ]

or

[ kml_flashembed movie="data/displaceview/displaceView.swf" height="400" width="600" fvars="load_url=data/displaceview/start.swf" clickimg="data/displaceview/displaceView.jpg"/ ]

Without the extra spaces at the start and end. The changes are not perfect, a style is written to an inner divtag

style="width:'.$width.'px; height:'.$height.'px;border: solid 1px #555;"

You will need an extra div if you want to control the border style with css since the dimensions are written to the div.

Since there are some old, really CPU intensive applets written in Processing on the site I also added a primitive form of applet embedding to the plugin. It only adds the applettags and are not supporting other parameters or check for existence of JRE. The parameters are the applet variable:

[ kml_flashembed movie="data/moviecube/MovieCube_img.jar" height="400" width="700" applet="MovieCube_img" clicktext="click to activate"/ ]

updated source of kml_flashembed.php. The rest of the plugin is kept as it is. All the changes are within lines 160-242. search for $clickimg, $clicktext, $funcmode or $applet.

4 Comments to “swfs and applets in wordpress”

4 displacement window

This is a demo of a way to use the displacementmap-filter to distort a movieclip in a controlled way. In most cases the displacementmap-filter is used together with some kind of random functions to create flag or liquid wave distortions. It also a experiment on how to use a physics engine as a tween engine.

You can drag the physics point but if you do to fast motions the physics grid can be messed up.
press “p” to show the physics points. Wait until new random points are set.
press “d” to show a preview of the displacementbitmap

Every 150th frame new destination points are calculated. The physics points are then moved to the new location and anchors are attached in the corners. Then the physics points are dragged to the old location and released. The result is a motion tween made of physics springs.

The circles are controlled by the physics engine and the distance to the original positions are calculated. The points are then the input for creation of a two quadratic bezier-surfaces, one for x-axis and on for the y-axis. I found the surface page on wikipedia after I made the application, which was good since its a little bit over my head, but the curvepage is good and have nice ani-gifs. A bitmapdata is created from the surfaces and used as the displacement filter. If simpler linear instead of quadratic bezier curves are used a perspective effect can be archived in a simple way.

The original clip is masked away, otherwise it shows up behind the filter during heavy displacement.

The performance is not that great. Its not that strange since its a lot of calculations. The displacement bitmapdata has the dimensions of the bounding box of the physics points. If the box is 200×200 px the displacement calculations and setpixel() in every frame is made 2×200x200 = 80000 times.

I made some small attempts to rescale the window before the calculation to be able to make a smaller displacement filter but I didnt succed.

An alternative way to archive the same effect could be to use the same triangle distortion trick as 3d engines uses. But if you want the same degree of smothness you will need a lot of triangles. Another advantage over the triangletrick is that the mouseevents on the clip still works like clicks and rollovers. That can be archived with the MovieClipMaterial in papervision3D but that’s a little bit trickier.

I’m a little bit confused why transparency and dropshadow filter on a filter works. Its a good thing here but a little bit unexpected.

The source needs some refactoring and documentation maybe. The drawings and calculations have to be separated from the physics part to make it useful. If you can use it and make something cool let me know.

4 Comments to “displacement window”

10 search engines and flash

One of the biggest arguments against flash is problems with search engines. The content of the swf is not searchable. After some search I found this text that suggest that you should use the swfobject-replace-div-tag to place the content in and then load the flash. The search engines indexes the text and everyone is happy. You can even style it if you want with css.

The problem with this is that you loads the content twice. One when you load the html and one time when you loads the swf. Thats not a big problem since the files are often small and everyone has a fast connection, but its not nice. I made this javascript thats takes the content och the div-tag and sends it to the swf as a flashvar. Another great thing about this is that you dont have to wait until the xml i loaded since its already there in _root.texts. One limitation to this approach is the 65kb -limit on flashvars, but that is a lot of xml.

Before it send the text it replaces the div tags to simpler xml-nodes. Div tags are used in the replace-div to make the html valid xhtml. The class attribute is used to store the note name and the id is kept as a id-attribute.

<div id="swf">
<div class="text" id="text2">This is a two
line text, åäö å</div>
<div class="choice" id="useFlash">true</div>
</div>
<script type="text/javascript">
// <![CDATA[

var div_id = "swf";
var div_txt = document.getElementById(div_id).innerHTML;
var xml_txt = div_txt.replace(/<div class=\"(\w+)\" id=\"(\w+)\">([^<]*)<\/div>/g, "<$1 id=\'$2\'>$3</$1>");
var so = new SWFObject("flash.swf", "flashmovie", "400", "200", "8", "#FFFFFF");
so.addVariable("texts", "<root>"+xml_txt+"</root>");
so.write(div_id);
// ]]>
</script>

the result i can be shown below, its only an example, the code is not used in the example due to wordpress editing possibilities. A plugin has to be written to make it possible to use.

The flash only contains a textfield and the code
txt.htmlText = unescape(_root.texts);

There is a bug somewhere with special characters as åäö. They are not sent to the swf even if utf-8 is used. I have to investigate that further. [update: found a solution, see comment below ]

10 Comments to “search engines and flash”

1 Image Obfuscator

Soon the face recognition tools will expand into the search market. And since everyone putting everything on the Internet and nothing disappears, integrity problems will increase.

A solution to that could be something like this application. It transforms a image to something that is harder to read. and then when you want to look at it it transforms back to the original. Of course you can make a printscreen and crop out the image but that is quite boring.

There are a lot of other uses of a application like this. Photgraphers afraid of people stealing there photos and so on, you don’t need the waterstamp.

This is not a usable product right now but more like a proof of concept.


original


encrypted


decrypted

There are some problems to fix before the application can be used more serious:
1. use of jpeg. An obfuscated image can not be compressed destructive, as jpeg, and still work,
2. keep the compression rate. The example changes every pixel depending on there value and the distorted image cant be compresses since there are no large areas of the same color.
3. add a real encryption algorithm. for example TEA. That would make it almost impossible for an computer do transform back with brutal-force since the result is not plaintext.

Most of them are easy to archive if you instead of images use swf. But one of the main purpose of the application is to be able to continue to use the same channels for images that exist today. People don’t understand the swf format. The example above can be cropped and in some cases rescaled and still be able to be decrypted.

source

One Comment to “Image Obfuscator”

soundscape

Every dot has an own beat and the application plays the sounds of the five closest dots to the mouse. I have a lot of more ideas on this concept but I don’t have the time to code them. So instead of waiting I publish this early beta instead. Thanks albin for the sounds.

source: soundscape0.5.zip
compile with: /usr/bin/mtasc -header 800:600:25 -main -swf deploy/soundscape.swf -cp /media/sda3/www/soundscape/source soundMix/Initializer (or similar)

No Comments to “soundscape”