If you haven’t tried the html5 canvas tag yet, I suggest you give it a try. It falls under the same category as ActionScript’s Graphics and BitmapData classes. It is however much much simpler. One great thing about it is it runs really fast on IOS5. Have a look at some of these demos to see what I mean: http://zreference.com/projects/graphics/
A few days ago I recorded this short video tutorial… it’s very simple, but it will get you started if you’ve never tried canvas before:
VIDEO
Actionscript:
[ SWF( width = 600 , height = 600 ) ]
var a:Number = 0.02 ;
var b:Number = .9998;
var xn1:Number = 5 ;
var yn1:Number = 0 ;
var xn:Number , yn:Number ;
var scale:Number = 10 ;
var iterations:Number = 20000 ;
var step:Number = stage .stageWidth / iterations;
function f( x:Number ) :Number {
var x2:Number = x * x;
return a * x + ( 2 * ( 1 - a) * x2) / ( 1 + x2) ;
}
var canvas:BitmapData = Bitmap( addChild( new Bitmap( new BitmapData( 600 ,600 ,false ,0xEFEFEF) ) ) ) .bitmapData ;
var circle = new Sprite( ) ;
with ( circle.graphics ) beginFill ( 0 , 0.3 ) , drawCircle( 2 ,2 ,1 ) ;
var dot:BitmapData = new BitmapData( 4 ,4 ,true , 0x00000000) ;
dot.draw ( circle) ;
var pnt:Point = new Point( ) ;
var txt:TextField = TextField ( addChild( new TextField ( ) ) ) ;
txt.text = "move mouse" ;
addEventListener( Event.ENTER_FRAME , onLoop) ;
function onLoop( evt:Event) :void {
canvas.fillRect ( canvas.rect , 0xEFEFEF) ;
a = mouseY / 1000 ;
xn1 = mouseX / 30 ;
yn1 = 0 ;
for ( var i:int = 0 ; i< iterations; i++) {
xn = xn1;
yn = yn1;
xn1 = b * yn + f( xn) ;
yn1 = -xn + f( xn1) ;
pnt.x = i * step;
pnt.y = 300 + yn1 * scale;
canvas.copyPixels ( dot, dot.rect , pnt, null , null , true ) ;
}
}
Try it out:
Gumowski Mira Pseudo-soundwave - wonderfl build flash online
By Zevan | August 31, 2011
So here is a javascript inspired snippet. It's also in javascript style with no typing really. To port to javascript would take less than 4 minutes:
Actionscript:
// 1D
function _( a, b) {
var c = { } ;
for ( var i in b) {
trace ( i) ;
a[ i] = b[ i] ;
}
return a;
}
// douglas crockfords create
function create( o) {
var F = function ( ) { } ;
F.prototype = o;
return new F( ) ;
}
// 1D
function obj( o) {
for ( var i in o) {
trace ( o[ i] ) ;
}
}
var Mover = {
ox : 0 , oy : 0 ,
x : 100 , y : 100 , radius: 10 , t : 0 , speed : 0.2 ,
run : function ( ) {
//namespace Mover;
this .x = this .ox + this .radius * Math .cos ( this .t ) ;
this .y = this .oy + this .radius * Math .sin ( this .t ) ;
this .t += this .speed ;
}
} ;
var SubMover = _( Mover,
{ ox : 200 , oy: 200 ,
draw : function ( ) {
this .run ( ) ;
graphics.beginFill ( 0 ) ;
graphics.drawCircle ( this .x , this .y , 10 ) ;
}
} ) ;
var m = create( SubMover) ;
setInterval ( function ( ) {
m.radius += 1 ;
m.draw ( ) ;
} , 30 )
for ( var i in m) {
trace ( i) ;
}
This makes use of Douglas Crockford's Object.create method. Just one of the many ways to do Object Oriented programming with flash or js. I use a combo of many methods depending on the project:
Actionscript:
function Thing( ) {
var x = 0 ;
return function ( ) {
x += 1 ;
// do stuff
}
}
...is one that comes to mind - just a simple closure can be used like an object.
Here is more info about Object.create() :
http://javascript.crockford.com/prototypal.html
By Zevan | August 30, 2011
Cross your eyes to see 3D third image:
Posted in 3D | Tagged papervision |
By Zevan | August 28, 2011
Who would like a zip of the folder I used when making this site fla files and all? If you want one, post a comment and I'll send it to you.
Actually have a little new content for the site coming, at least one new post.
If you don't get yours within a day of posting... just let me know.
By Zevan | January 17, 2011
Actionsnippet has been pretty inactive for the last few months. I took a short break from blogging, but I'm starting up again on a new site... go check it out: zReference
Posted in misc | Tagged zReference |
Found this today, not related to actionscript but rather nice. It allows you to take a screen shot of your website in IE... if your on a mac without windows this is a quick way to test in a pinch:
http://ipinfo.info/netrenderer/index.php
Actionscript:
var circs:Array = [ ]
var circNum:int = 600 ;
addEventListener( Event.ENTER_FRAME , onAdd) ;
function onAdd( evt:Event) :void {
if ( circs.length < circNum) {
makeGrowable( ) ;
}
}
function makeGrowable( ) {
var s:MovieClip = MovieClip ( addChild( new MovieClip ( ) ) ) ;
s.x = Math .random ( ) * stage .stageWidth ;
s.y = Math .random ( ) * stage .stageHeight ;
with ( s.graphics ) {
lineStyle ( 0 ,0 ) ;
drawCircle( 0 ,0 ,10 ) ;
}
s.scaleX = s.scaleY = 0 ;
circs.push ( s) ;
s.addEventListener ( Event.ENTER_FRAME , onScaleUp) ;
}
function onScaleUp( evt:Event) :void {
var c:MovieClip = MovieClip ( evt.currentTarget ) ;
c.scaleX = c.scaleY += 0.05 ;
for ( var i:int = 0 ; i< circs.length ; i++) {
var circ:MovieClip = circs[ i] ;
if ( circ ! = c) {
var amt:Number = circ.width / 2 + c.width / 2 ;
var dx:Number = circ.x - c.x ;
var dy:Number = circ.y - c.y ;
var dist:Number = Math .sqrt ( dx * dx + dy * dy) ;
if ( amt> dist) {
c.removeEventListener ( Event.ENTER_FRAME , onScaleUp) ;
if ( c.scaleX < 0.1 ) {
if ( contains( c) ) {
removeChild( c) ;
}
}
}
}
}
}
Circle fitting is one of those things I've never bothered to do... today I figured I'd give it a try and this is what I came up with. I posted it on wonderfl:
Actionscript:
var story:String = "Fill in the _____." ;
var txt:TextField = new TextField ( ) ;
txt.defaultTextFormat = new TextFormat ( "Georgia" , 20 ) ;
txt.width = stage .stageWidth ;
txt.multiline = true ;
txt.wordWrap = true ;
txt.text = story;
addChild( txt) ;
var alph:Array = "abcdefghijklmnopqrstuvwxyz" .split ( "" ) ;
var keys:Object = { } ;
for ( var i:int = 0 ; i< alph.length ; i++) {
keys[ 65 + i] = alph[ i] ;
}
stage .addEventListener ( KeyboardEvent.KEY_DOWN , onKeyPressed) ;
function onKeyPressed( evt:KeyboardEvent) :void {
if ( evt.keyCode == Keyboard.ENTER ) {
story = "Fill in the _____." ;
txt.text = story;
}
for ( var i:int = 0 ; i< story.length ; i++) {
if ( story.charAt ( i) == "_" ) {
var head:String = story.substr ( 0 , i) ;
var tail:String = story.substr ( i + 1 ) ;
var letter:String = keys[ evt.keyCode ] ;
if ( ! letter) return ;
story = head + letter + tail;
txt.text = story;
break ;
}
}
}
I needed to do a fill in the blank for a personal project that I'm working on and this is what I came up with. Have a look at the swf here:
(you need to click first so you can type with the keyboard):Fill in the blank
