Posted flash, processing, sourcecode on Thursday, November 15th, 2007.
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.
One Comment to “swfs and applets in wordpress”You can leave a response, or trackback from your own site.
Posted actionscript 3, flash, lab, sourcecode on Friday, November 9th, 2007.
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”You can leave a response, or trackback from your own site.
Posted flash, sourcecode on Friday, November 9th, 2007.
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 ]
2 Comments to “search engines and flash”You can leave a response, or trackback from your own site.
Posted actionscript 3, flash, lab, sourcecode on Sunday, November 4th, 2007.
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.
4 Comments to “Image Obfuscator”You can leave a response, or trackback from your own site.
Posted actionscript 2, arty, flash, sourcecode on Sunday, November 4th, 2007.
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)
You can leave a response, or trackback from your own site.
Posted actionscript 2, flash, lab, sourcecode on Sunday, November 4th, 2007.
All large car company pages has a rotating car on there site. They are either made of images put together in a rotation, a flv playing a rotation or in some rare cases papervision. Here is an idea about morphing between images. Its too CPU heavy to use in a real application unless some angles are pre-rendered and used instead of calculate in each frame.
The two images are faded and morphed together. If you move the mouse to the top of the application you will see the morphing grid.
One Comment to “Morph car”You can leave a response, or trackback from your own site.
Posted actionscript 2, flash, sourcecode on Sunday, November 4th, 2007.
the main purpose of this application is to show my 3D-engine. First I wanted to take movies directly from youtube or similar. But since you cant read bitmapdata from flv I had to convert to swf. There are some serverside tricks to make it possible but my cheep hotel don’t give me the opportunity.
It uses the now classical triangle trick together with the transform-matrix. It hangs ones in a while, specially when it lying down. I’m planing to fix it.
The flag effect is made by some sinus-functions. The engine don’t have a depth manager which must be implemented do be able to use it in more advanced applications. A more serious 3d-engine is the papervision3d engine. Or consider using processing
No Comments to “Videoflag”You can leave a response, or trackback from your own site.
Posted arty, processing, sourcecode on Sunday, November 4th, 2007.
To view this content, you need to install Java from java.com
This is an application to see the cross-section of a video. Its more then 4 mb so please be patient. Then the cpu will go up to max.
If you dont get the idea follow these simple instructions
1. click on the applet to focus
2. press r to reset to start value
3. press up-arrow to watch the video.
4. hold down space and move the mouse
5, watch the cube from the side. press up and down button to see the cube move through the plan
6. now hold down the mouse and move around to see the cross-section of the videoContact:
please send me comments.
Source code: MovieCube_img.pde, complete source with images MovieCube_img.zip
You also need to convert a video to an image-sequence and place in the data folder. An easy way if you got mplayer is:
mplayer video.avi -vf scale=240:180:0 -vo jpeg
Built with Processing
Look at similar applications at Golan Levins excellent Informal Catalogue of Slit-Scan Video Artworks
No Comments to “Cross-section of video”You can leave a response, or trackback from your own site.
Posted arty, flash, work on Sunday, November 4th, 2007.
I made the programming for this one some years ago. Its received the Content Fusion Award at Europrix Top Talent Award 2004 and an Honorary Mention at Prix Europa 2004.
english version:
Let them sing it for you
swedish version:
Låt dem sjunga det åt dig
You can leave a response, or trackback from your own site.
Posted arty, processing, sourcecode on Sunday, November 4th, 2007.
First click the applet to focus then press any key to grow. Click and drag for rotation
This is an really old applet form the push()- pop() time. If you want to try the code you have to update the source or downgrade to 0.68alpha or something.
Source code
Built with Processing;
You can leave a response, or trackback from your own site.