subpixels.com | SPXL.TVblog | contactgallery | videoflash | processingmyspace | facebook

Category / Flash and Actionscipt

pb-embedflash tests 18 August, 2008 at 3:34 pm

This post is for testing the pb-embedflash plugin for WordPress. Expect nothing to work, be surprised if it does. At the moment it seems that IE can display stuff and Firefox can’t… maybe a version problem. I’ve had issues with the Adobe Flash Player install, and there are possibly issues with Firefox 3.

-G.

Test #1 – Locally hosted SWF file

Tag contents: flash http://subpixels.com/flash/pigeon_patrol.swf w=400 h=400preview={http://subpixels.com/flash/pigeon_patrol_screenshot.jpg|400|400}

This should show an interactive flash animation below.

test 1 start

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

test 1 end

Test #2 – YouTube video

Tag contents: flash http://www.youtube.com/watch?v=HXBhR2OgzVk

This should display a YouTube video with a turtle in it below.

test 2 start

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

test 2 end

Test #3 - Vimeo video

Tag contents: flash http://www.vimeo.com/1360800

This should display a Vimeo video of a vjlondon.org meetup.

test 2 start

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

test 2 end

Site upgrades, photo galleries and more 17 August, 2008 at 8:33 pm

There should be an image gallery just above this: some still captures of the visuals I mix. There should also be a couple of random images in the sidebar.

Over the past few days I’ve been tidying up the contents of my webserver. The other day I noticed that the gallery was broken, and it took a little while to sort out whatever the problem was. Changed some directory permissions and server settings, and upgraded to the latest version of the software. I’ve deleted some unused CMS’s and their databases, made some database backups, and upgraded WordPress. I’ve had a play with some WordPress settings, like running a second blog off the same content folder (containing plugins and themes, etc), changing themes, using Widgets, and installing some new plugins, most notably a gallery plugin – something I really needed to get sorted to be able to post photos in some sort of nice manner. I managed to wreck the second blog for a while, and delved into some PHP programming to see what was going wrong. It sorted itself out in the end.

I’ve also revised some tags and categories for existing posts in this blog: the Subpixel category should now take you to all posts that are about me, gig’s I’ve performed at (subcategory Subpixel’s Gigs), or that have creations (subcategory Creations) to show such as photos, graphics, videos, and software (eg Flash, Processing).

There is something wrong with the Flash plugin I’m testing out (pb-embedFlash), which I was rather hoping to use to embed videos and Flash animations. I might try working on a filter to embed (or at least link to) Processin sketches… but one thing at a time – first I need to create some more Processing examples! I’ve come up with a simple solutions for what to do with multiple hosted sketches (applets) to get around the problem I mentioned earlier of there being a heavy download for the OpenGL libraries: just have everything in one directory, with the index.html file from the generated applet folder renamed to have the sketch name. So simple it might just work.

-G.

Springback 21 May, 2008 at 7:01 am

If you don’t do technical, you probably want to tune out right about now. Follow the link to play with things on springs, and press space to randomise the configuration. *boing!*

Flash Link: springpixel_02.swf

I spent some time over the weekend reacquainting myself with the spring simulation Flash project I displayed in an earlier post. I wanted to try out a new effect from the next part of the book, but ended up getting heavily bogged down in trying to work out how to make an object (a class) have it’s presentation (a MovieClip) as a member, rather than have the class itself inherit from the MovieClip class. Up to this point, all of the little balls and boxes were instantated at design time in the Flash editor, which is clearly not The Way Things Should Be, and was seriously limiting my options for creating arbitrary (randomised) configurations.

Other soon started to pop up, such as how to access configuration information for the simulation, such as the acceleration due to gravity and the friction constant. The original design allowed my spring items (things on the end of springs) and springs to ‘globally’ access that information by virtue of them being static class members, but I decided that the SpringSimulation objects should be allowed to vary these values between instances… not that I really expect to be running multiple separate simulations, but it could be interesting for “side by side” type comparisons.

One of the main reasons I wanted to see if I could get this to work without having to inherit from MovieClip is the question: how do you instantiate an object of a MovieClip subclass? MovieClip objects come to life by using the attachMovie() method, not by calling a constructor. Hang on a minute… hold the phones, Batman! Maybe the answer is to just override the attachMovie() method in the subclass! D’oh! I will have to try that later! For now, on with my solution, which was to create a new, simple subclass of MovieClip, with the single added member, handle (of type Object), which can be used to refer back to the main object for which the MovieClip derivative is the “display” of. I needed that because when I started wanting to do things like add an onClick() handler to drag items around, the handler had no way of otherwise referring back to the object it needed to update – big problem!

Here are some snips of code (note: numerous details not related to the issues discussed, such as the physics calculations, are left out):

class SpringItem
{
    public var dragging:Boolean;
    public var sim:SpringSimulation; // Parent simulation
    public var mc:SpxlMovieClip; // Visual depiction of item

    public function init(simulation:SpringSimulation, movie:SpxlMovieClip, ...)
    {
        sim = simulation;
        mc = movie;
        dragging = false;
        mc.onPress = doDrag;
        mc.onRelease = mc.onReleaseOutside = doDrop;
        mc.handle = this;
    }

    public function doDrag():Void
    {
        //NOTE: "this" is the movieclip instance, not the SpringItem object.
        var mc:SpxlMovieClip = SpxlMovieClip(this);
        mc.startDrag();
        var si:SpringItem = SpringItem(mc.handle);
        si.dragging = true;
        si.vx = 0;
        si.vy = 0;
    }

    public function doDrop():Void
    {
        //NOTE: "this" is the movieclip instance, not the SpringItem object.
        var mc:SpxlMovieClip = SpxlMovieClip(this);
        mc.stopDrag();
        var si:SpringItem = SpringItem(mc.handle);
        si.dragging = false;
        si.vx = si.sim.vxm; // The SpringSimulation object has vxm and vym members
        si.vy = si.sim.vym; // ..that are updated with "mouse velocity" for each frame
    }
}

It seems like a lot of hassle, but it works. There is probably a better way! The SpringItems don’t update themselves, the SpringSimulation object is in control – it processes all the springs in one pass (adding per-component accelerations to each involved SpringObject’s vx and vy values), then updates the positions of the items in a second pass, ‘all at once’, as it were.

The MovieClips (eg the red balls) need a reference to the parent SrpingItem object, and each SpringItem needs a reference to the SpringSimulation object for various constants, and the SpringSimulation object actively manages the SpringItems. Curiously, the Spring class has no dependency on the SpringSimulation object: for it’s calculations it needs only the the two ends (SpringItem objects, which do contain references to the SpringSimulation, but these are not used or required), the relaxed spring length and the spring constant. I guess that means I could have two separate “simulation” environments running with a spring connecting across both of them… Synchronisation will likely be an issue, but I’m sure it always is when you are affecting objects in parallel universes! ;o)

Anyhow, the new version likely behaves similarly (if not identically) to the original, so it might seem that a major refit of the plumbing was a waste… only now I can generate objects on springs from code (yay!) and easily create randomised arrangements and “chains” (springs made out of lots of little springs) which have some pretty cool play-with factors, though I think the nature of the simulation means things are far from smooth, and changing some settings (like making the masses quite small) really makes the simulation wig out with unacceptable crazy highspeed superwobbles (yeah, that’s the scientific term!). I didn’t quite get around to implementing the next effect/idea from the book, but maybe that, too, will be easier now that some things have been fixed up.

In any case, space resets, only now with a completely new set of spring connections instead of only varying the strengths, weights, item locations, etc, up and down arrow keys increase and decrease the gravitational effect, and z sets “zero-G”. :o)

Enjoy!

New version: springpixel_02.swf

Original: springpixel_01.swf

-G.

The spring is sprung 17 April, 2008 at 7:21 am

More Flash fun, this time with balls on springs chained together. The example code in the book I’m reading suggested using trigonometric functions to calculate the ‘spring target’, but I thought I could do it with similar triangles.

Physics-ish based flash animationImagine two items (A and B) connected by a spring of a certain relaxed length (not stretched or compressed). It will help to think of item B as a fixed point and item A as the ‘free’ end of the spring. The item A will tend towards a point that is the relaxed length from B, in a straight line between A and B; it will be drawn towards B if pulled far away, and pushed away from B if it is too close. I’m assuming, of course, a massless spring and a whole bunch of other things – this is only a simple approximation of the very complex real world!

Here is the code:

var dx:Number = itemA._x - itemB._x;
var dy:Number = itemA._y - itemB._y;

if (dx || dy)
{
  var d:Number = Math.sqrt(dx*dx + dy*dy);
  var r:Number = springLength / d;

  var targetX:Number = itemB._x + r * dx;
  var targetY:Number = itemB._y + r * dy;

  // ... other fun bits about the same
}

A diagram would probably help! :o)

Basically I’m using the fact that we have similar right-triangles, and am using a ratio of the relaxed length of the spring to the length of the hypotenuse instead of using atan2() to find an angle then sin() and cos() to extrapolate a position. I don’t have any sort of performance metrics on it (hey, Flash is generally pretty slow for anything), but I’m supposing it could help a bit.

The hardest parts of this little project have been trying to figure out how to get Flash to actually do something… or at least tell me why it isn’t doing something, and moving code into some custom classes proved quite painful. The result is quite nice, though, and I’ll build on the techniques developed here in later projects.

I noticed an increase in size with almost exactly the same functionality when I started moving code in to classes, which I was a little surprised by given that the classes allowed me to reduce code repetition. I’m supposing that using classes (accessing object methods, etc) impinges on performance, but even with only a few balls on springs things were starting to get ‘messy’. The new code breaks things down a lot better and will hopefully allow for integrating new ideas as I make my way to the next chapter…

The Flash movie is roughly five and a half kilobytes. You can grab the boxy handles, and ‘throw’ the balls around. Use the UP, DOWN, 0 (zero) and Z keys to change the gravitational constant used (a little anti-gravity can be fun!), and hit SPACE to assign random masses and positions to the balls, as well as random spring lengths and stiffnesses to the springs. You can’t change the connections just yet – maybe next time!

Flash link: springpixel_01.swf

-G.

Space invasion 8 April, 2008 at 4:08 am

More like <em>Asteroids</em> than <em>Space Invaders</em>I’ve been reading a couple of books on Actionscript (Flash) programming, but not managing to get much hands-on time. Here is a tiny sample of a ‘spaceship’ simulation. Many spaceships, even. Try pressing the up, left and right arrow keys! :o)

Link: spaceship.swf

NB: You might need to click on the animation before the keypresses register.

-G.