Stroep » actionscript

Actionscript 3 to vector graphic

Mark Knol — Mon, 03 Aug 2009 19:57:14 +0000

I like to generate art and objects with Flash/actionscript. Mostly I use a bitmapdata for that and export this as a PNG-24. This works perfect in most cases. But sometimes I wish there was a simple way to export my art to a scalable vector graphic. This would save a lot of data, and I’ll be able to create unlimited large and sharp prints.

I started searching and found some nice-to-know options.

Save as PDF
If you have a PDF-printer installed, you could save the vectors as PDF (drawed with lineTo, curveTo etc). Just right-click on your flashmovie, and choose ‘print..‘. Then choose ‘Adobe PDF‘ or another PDF printer. This is very simple!
Downside; My flash movie is becoming very slow when I create a lot of shapes.. After all; That’s the reason I use BitmapData objects. Sometimes I let Flash render a whole night before saving it and maybe it create more then a million shapes. To be realistic; I think a million shapes wouldn’t be cool as vector graphic, I guess my Illustrator doesn’t like that or the printshop-dude starts crying However.. I think there are tools to optimize/clean shapes that could be helpful too.

Open vector formats
I didn’t know this exist (because I never searched for something like this), but there is a lot information about a SVG file format. A lot of vector programs support it already and even modern browser could show SVG file formats too.
I found this and this link. The opposite would be an great idea; It could be cool if we could export SVG. While rendering we could write/add into a file. Then I could use a small bitmapdata object, just show it and render it real-time. Downside; I think SVG doesn’t support blendmodes or filters.

I really think there is a lot more to explore. If anyone have some other suggestions or ideas, feel free to post it.

AS3 ValueObject generator – beta

Mark Knol — Sat, 18 Apr 2009 15:21:59 +0000

Since I am using actionscript 3 and an external actionscript editor with nice code completion (FlashDevelop in my case), I am using a lot of value objects.

Flashdevelop has no value object generator tool, so I’ve build one myself. It is beta.

ValueObject generator
http://projects.stroep.nl/ValueObjectGenerator/

Generative art – The sky isn’t the limit

Mark Knol — Tue, 03 Feb 2009 18:26:13 +0000

We all love the sky. We make millions of pictures of it, because it different every second. It is inspirational, every time you look at is, whenever it is day or night. Inspired by the sky, which is a little bit gray in Holland right right now, I created these images. I actually love the color palette, there is a little winter and some spring feeling in it.

I did something different this time; there are some typographic elements added. Just a few words that describe the feeling I have when looking at it.. What do you think about adding text to it?

Created with actionscript. Render size: 10.000×10.000 px.

Generative art – wild.colorcurves

Mark Knol — Mon, 26 Jan 2009 10:21:25 +0000

Feeling creative; created a new serie with wild but odd colors. It has a happy abstract smoke-like feeling. It is hard to create good ribbons, but now I have find out a new way I kinda like. When I was experimenting with my ‘curved series’ (previous post), I already had the engine. But in this serie I left the borders, left the fade and added better movement and connection between the lines. It’s getting better every time. The curves and movements are based on a perlin noise. It took a lot of time till I get these four. The engine was right, but I have to deal with randomness. Mostly it doesn’t work and sometimes it does and now I have this:

I’ve created this one at 6000 x 6000 px. What do you think of it? if you are interested in buying one, please contact me info[at]stroep.nl.

Generative curved series

Mark Knol — Sun, 25 Jan 2009 23:05:22 +0000

New experiments with movements, curves, lines and perlin noise. Most movements are created using this function (this is pseudo code)

 sprite.point1.x += ( -128 + noiseColor.green) / 5;
 sprite.point1.y += ( -128 + noiseColor.blue) / 5;           
  

noiseColor is the colorvalue of getPixel() from the perlin noise.

Some curves with gradient fills and 2 different stroke sizes. I found in the Matrix-class a createGradientBox() function, witch actually is a very cool and handy function. The colors are based on photos with cool colors, this gives a nice natural look.

Fun – Fur engine

Mark Knol — Thu, 04 Dec 2008 22:08:32 +0000

I was working on a fur engine for images just for fun, inspired by a post on Andre Michelle’s blog. Yes, his engine looks better, but with mines you can create your own images. This is a funny way to create more detailed images. I’m happy with the application I created.

Since today you can see and use it.

The idea is very simple; Add a link to an image (jpg/png/gif) and the engine will create a furry image for you It automatically saves your hairy image, so you can send it to your friends or set it as desktop.

More info: Fur generator

Have fun! Please share your hairy images (but keep it clean please)

Process rendering Actionscript to PNG to Video

Mark Knol — Thu, 20 Nov 2008 23:31:48 +0000

I’ve created a new video, and this one isn’t rendered like I said in the previous post (using flash > export movie > .mov), but I used the ImageSaver class every frame. I added an event listener to the class. So I started rendering frame 1. When frame 1 is completed, I call the save function. The ImageSaver class saves the images and dispatches an Event. When this Event.COMPLETE is being dispatched, I just render another frame. After rendering I call the save function again and wait till the Event.COMPLETE is being dispatched again. etcetera. Well, I think I’ve got my own mini-render engine. It works perfect for creating sequences of images (or just videos which use a lot of CPU or cannot be displayed at real-time). While rendering I counted the frames and stopped saving after 1000 frames.

So, now we can render more heavy effects and create videos, right? In this video 1000 images are rendered by actionscript, using additive blending and a BlurFilter. The movements are based on a Perlin noise. Not very heavy, but when running it in the FlashPlayer, I’ve cannot reach more than 11fps. The full version is 800×600 with transparency, 30fps.

Single image:

Video output:
Yes, this video is created with actionscript

I used Premiere to merge all those images into a video.

Perlin noise – more experiments

Mark Knol — Fri, 07 Nov 2008 23:00:42 +0000

After writing this post of using perlin noise, I’ll did some more experiments making cool things. I draw lines using Perlin noise as input. Check this out:

I was also experimenting/figuring out how to convert a actionscript generated movie to video. I never knew it was possible (or that easy) with the Flash CS3 (maybe because I never tried). Just choose file > export movie > and choose .mov extension. The video isn’t smooth, because (when I save it) it is not really rendering, it’s just like an invisible screencapture, I guess. So I can’t use more heavy CPU things. Thats a pity.

But maybe I could use my ImageSaver Class to create a movie-sequence by saving frame by frame as PNG.