Grant Skinner #tweetcoding Contest 140 lines of AS3 to Win

tweetcoding

Grant Skinner who recently began using the twitter microbloging  service ( @gskinner )  has started on the twitter world with right foot, what started as a personal experiment of him has grown quickly into  a contest #tweetcoding, The idea of the contest is as follows.

You are provided with a framework of 140 characters of “gimme” code. To this, you can add up to 140 characters of additional AS3 code. You submit your entry via Twitter, and if your work is judged as the best, you win a full copy of Flash CS4 courtesy of Adobe and a copy  of “AdvancED ActionScript 3.0 Animation” by Keith Peters, courtesy of Friends of Ed..

So if you have a twitter account there’s no time to lose start coding right away,  the first round closes on March 1.

Read the  rules below as listed in the   #tweetcoding page :


What?
#tweetcoding: code something cool in <=140 characters of AS3

Who?
organized by @gskinner, open to anyone

When?
starting now, first round closes March 1

Why?
fame, fun, recognition of your peers, and some great prizes (see below)! I might also work a couple cool entries into one of my talks.

How?
paste the 140 characters of “gimme” code into Flash.
turn off strict mode (Publish settings > Flash > AS3 settings…
add your own 140 characters where it says /*src*/.

submit it via Twitter by sending two tweets: the first is the code you added, the second is a title for your entry, the #tweetcoding tag, and a link to the first tweet.

Gimme code.

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
g=graphics;
mt=g.moveTo;
lt=g.lineTo;
ls=g.lineStyle;
m=Math;
r=m.random;
s=m.sin;
i=0;
o={};
function f(e){/*src*/}
addEventListener("enterFrame",f);

Tip #1: use i as a frame counter to vary behaviour over time.
Tip #2: use o to store persistent data (ex. o.x=7).
Tip #3: use m.PI & g.drawRect to save characters.

Rules.
you cannot modify the “gimme” code.
your entry must be submittable as a single 140 character tweet.
no additional assets.
AS3 strict mode should be off, targeting player 10.
anyone should be able to compile your entry with just your tweet, Flash CS4, and these instructions.

Prizes. Winner receives a copy of Flash CS4 courtesy of Adobe.

The winner and two runners-up will receive “AdvancED ActionScript 3.0 Animation” by Keith Peters, courtesy of Friends of Ed.

Sample.
here’s a very simple sample in 110 characters. Simply paste this code at /*src*/, test movie, and it will draw a colorful spiral.

?View Code ACTIONSCRIPT3
1
2
3
4
5
if(i&gt;400)return;
if(i++&lt;1){x=275;y=200}
ls(3,r()*1e7,1);
mt(s(i/9)*i,m.cos(i/9)*i);
lt(s(i/9)*200,m.cos(i/9)*200);

Credit.
much love to Adobe for providing the awesome grand prize (a copy of Flash CS4)!
a big thank you to Friends of ED for providing 3 copies of Keith Peter’s “AdvancED ActionScript 3.0 Animation” as prizes!
thanks to @kevinSuttle for sparking the idea.
thanks to my lovely wife for putting up with me spending time on this, when I should be doing other things.

Links.
link – track #tweetcoding, and view compiled entries online
link – simple utility to compress and check the length of your code

Cheers and happy #tweetcoding.

Follow Me on twitter @swfgeek

Español:

Grant Skinner quien recientemente comenzó a usar el servicio de microblogin  twitter ( @gskinner )  ha empezado con el pie derecho en el mundo de twitter, lo que comenzó como un experimento personal se convirtió rápidamente en un concurso llamado  #tweetcoding. La idea de tal concurso es la que sigue.

Se te provee con un framework de 140 caracteres de código “gimme”. A este tú le puedes agregar hasta 140 caracteres adicionales de código ActionScript 3.  Envía tu participación vía twitter, y si  tu trabajo es juzgado como el mejor, podrás ganarte una copia del Flash CS4 cortesía de Adobe y  una copia del libro “AdvancED ActionScript 3.0 Animation” por Keith Peters, cortesía de la editorial Friends of Ed.

Así es que si tienes una cuenta en twitter no pierdas el tiempo y empieza a  programar, la primera ronda del concurso se cierra en Marzo 1.

Gracias  a  Héctor Padilla quien muy amablemente  me ofreció las reglas ya traducidas al español  tal y como aparecen en  la  página de #tweetcoding :

¿Qué?
#tweetcoding: programa algo interesante con <=140 carácteres de AS3

¿Quien?
Organizado por @gskinner, abierto a todo el mundo

¿Cuando?
empezando ahora, primera ronda termina el 1 de Marzo

¿Por qué?
fama, diversión, reconocimiento de tus compañeros, y buenos premios (mencionados abajo). Podría mostrar un par de entradas en una de mis pláticas.

¿Cómo?
pega los 140 carácteres de “gimme” code en Flash
apaga el modo estricto en tu Flash (Publish settings > Flash > AS3 settings…)
incluye tus 140 carácteres donde dice /*src*/.

manda tu entrada por medio de Twitter mandando dos tweets: uno con el código que hiciste, y el otro con el título de tu entrada, la etiqueta #tweetcoding, y un link a el tweet con tu código.

Gimme code.

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
g=graphics;
mt=g.moveTo;
lt=g.lineTo;
ls=g.lineStyle;
m=Math;
r=m.random;
s=m.sin;
i=0;
o={};
function f(e){/*src*/}
addEventListener("enterFrame",f);

Tip #1: usa i como un contador de frames para cambiar el comportamiento en el tiempo.
Tip #2: usa o para guardar datos persistentes (ej. o.x=7).
Tip #3: use m.PI & g.drawRect para ahorrar carácteres.

Reglas.
no puedes modificar el “gimme” code.
tu entrada debe de ser mandado como un único tweet de 140 cáracteres.
no puedes usar assets extras.
AS3 “strict mode” (modo estricto) debe de estar apagado, y pensado en el Flash Player 19.
cualquier persona debe de poder compilar tu entrada simplemente con acceso a tu twett, Flash CS4, y estas intrucciones.

Premios El ganador recibirá una copia de Flash CS4 – Cortesía de Adobe.

En ganador y los siguientes dos lugares recibirán copias de “AdvancED ActionScript 3.0 Animation” por Keith Peters, – Cortesía de Friends of Ed.

Ejemplo.
Aquí hay un sencillo ejemplo de algo hecho con 110 carácteres. Pega este código donde dice /*src*/, prueba el proyecto, y verá una espiral siendo dibujada.

?View Code ACTIONSCRIPT3
1
2
3
4
5
if(i&gt;400)return;
if(i++&lt;1){x=275;y=200}
ls(3,r()*1e7,1);
mt(s(i/9)*i,m.cos(i/9)*i);
lt(s(i/9)*200,m.cos(i/9)*200);

Creditos.
Gracias a Adobe por proveer el premio (Copia de Flash CS4)!
Muchas gracias a Friends of EDpor proveer 3 copias de su libro “AdvancED ActionScript 3.0 Animation” para los primeros 3 lugares.
Gracias a @kevinSuttle por detonar la idea.
Gracias a mi adorable esposa por soportar el hecho de que le estoy dedicando tiempo a esto en lugar de hacer otras cosas.

Links.
link – Sigue #tweetcoding, ve todas las entradas
link – programita para hacer tu código más compreso

Saludos y feliz  #tweetcoding.

Sigueme en twitter @swfgeek

Happy Holidays from .SWFGEEK

If you happen to celebrate this holidays ( or not ) I wish you the best with your families and friends, 2008 was a year full of new stuff for me, new job, new city, new friends it was a good year overall and hope 2009 gets just as much exiting as 2008 was

This movie requires Flash Player 10

Merry Christmas and Happy New Year from .swfgeek !!!

If you happen to celebrate this holidays ( or not ) I wish you the best with your families and friends, 2008 was a year full of new stuff for me, new job, new city, new friends it was a good year overall and hope 2009 gets just as much exiting as 2008 was, I plan to add more examples and tutorials on this site just entering the year so keep tuned in ( any topic suggestions for the examples and tutorials are welcome).
( By the way the swf above is using the great Flint Particles Library ( Version 2.0 ) by Richard Lord ) if you haven’t, go check it at http://flintparticles.org/

My best wishes to you all and thanks for reading.
Dave Gamez (.swfgeek)

Wonderfl code and compile Actionscript in the Browser

WonderFL

Wonderfl Build Flash Online is a  tool that let’s you write and compile as3 ( actionscript3 ) code right in your browser,  the compiler version it currently uses is  ActionScript Version 3.2.0 build 3794 , and lets you use the following libraries:

The people behind this project are:

KAYAC Inc.‘s lab team: BM11.
Director: sugimasa
Designer: hashimoto
Markup Engineer: sakakibara
Programmer: ohtsuka
**KAYAC Inc.’s Flash Developer team blog: level0

Besides  writing and compiling as3 code in your browser the site has  some  community features that let’s you view and remix other people’s code and you can also embed your code on your blog.

I’ve written and compiled one of my examples there , and have plans to add some more :)

Check it  at Wonderfl

Google Analytics Tracking for Adobe Flash

A new API for using  Google Analytics Tracking in Flash/Flex projects this API is developed in ActionScript 3.0 and can be used as a component or called in your ActionScript code, Google Analytics Tracking for Adobe Flash seems to solve a lot of troubles and the needed workarounds for making consistent user tracking in your Flash projects, keep reading for a more detailed explanation extracted from the implementation overview.

The Google Analytics Tracking for Adobe Flash component makes it easy for you to implement Google Analytics in your Flash-driven content. This component contains all of the functionality of the Google Analytics Javascript code, and is 100% compatible with the latest ga.js tracking code. The Flash Tracking component is a compiled tracking object native to ActionScript 3, making Analytics implementation intuitive in Flash, and Flex development environments.

You can develop Analytics Tracking for Flash in either Adobe Flash or Adobe Flex environments. Each environment requires a different component, which you can download from http://code.google.com/p/gaforflash/. These components are based on ActionScript 3 and can be set up in one of two ways for each environment:

In Adobe Flash

  • Add and configure a simple component in the component inspector and drag it to the stage.
  • Import the Flash Tracking libraries directly into your library and start coding.

In Adobe Flex

  • Include an MXML component that you configure from am MXML file.
  • Import the Flash Tracking libraries into your script tags/AS3 files.

How to use the Component in Adobe Flash

In order to use the Flash tracking component in your environment, you either use the visual tools inside Flash, or you set up the tracking object directly in your code. Regardless of whether you are setting up the component visually or via code, you provide the following elements:

  • the web property ID—This is also known as the UA number of your tracking code and looks like UA-xxxxx-yy, where the x’s and y’s are replaced with the numbers that correspond to your account and profile information for the object you are tracking. See Web Property for more information.
  • the tracking mode—Choose either bridge mode or AS3 mode. This mode determines how your tracking communicates with the Analytics servers and is described in detail below.
  • the debugging mode—No matter which environment or tracking mode you use, you can turn debugging on to validate and test your tracking.

Installation for Flash CS3

Before you begin to use gaforflash to add Analytics tracking within Flash CS3,
you first need to add the gaforflash SWC to Flash CS3.

To do so:
1. If you have Flash CS3 currently open, quit the application.

2. Navigate to the location where you unzipped the Google Analytics zip
and find the swc (e.g. lib/analytics_flash.swc).

3. Create a “Google” directory in one of the following locations
and copy the SWC file there:
– (Windows) C:\Program Files\Adobe\ Adobe Flash CS3\language\Configuration\Components
– (Mac OS X) Macintosh HD/Applications/Adobe Flash CS3/Configuration/Components

Flash CS3 is now set up to support Google Analytics Tracking For Adobe Flash.

Alternatively if you want to use gaforflash in code-only mode
you can do the same as the above and add the lib/analytics.swc,
you will then need to drag the “AnalyticsLibrary” component in your Library.

Installation for Flex Builder 3

Before you can compile your code, you will need to link it to the gaforflash SWC file.

To do so:
1. select Project->Properties.
A Properties dialog box will appear for your project.
Click on Flex Build Path and then select the Library Path tab:

2. Click Add SWC… within the Library Path pane.
An Add SWC dialog box will appear.
Navigate to the location where you unzipped the Google Analytics zip
and select lib/analytics.swc file and click OK.

or

Just drop the analytics.swc file into your Flex project /libs directory

Here’s the link for the Google code project

The gaforflash direct download

More info on the API

Flint Actionscript 3 Particle System Example

.swfgeek Logo Particles

Richard Lord has recently released the Version 0.9.4 of Flint.

I made this example
using Flint particle system is an Actionscript 3.0 Open Source project with the aim of create a library that handles the common functionality for all particle systems. To see it work just click anywhere on stage and it will make a nice Firework out of my “Logo”

I just tried it myself and i must say it’s super easy to use and to extend. You can find Flint source on the google code page of Flint with working examples in the downloads section there’s also some very good examples and tutorials on Flint Particle System Site and you can keep track of Richard on his blog.

The latest version comes packed with all kind of particles goodies like:

* Access all properties in Actions, Initializers, Counters and Activities so they can be modified while the emitter is running.
* AlphaInit initializer sets the initial alpha value for all particles
* ImageClasses and SharedImages initializers set the particle image to one selected from a group, with weighting to adjust the selection
* MouseExplosion action pushes particles away from the mouse
* MouseGravity action pulls particles towards the mouse
* TurnAwayFromMouse action causes particles to turn away from the mouse
* GreyscaleZone uses a greyscale image to define a zone, with weighting based on the luminence of each pixel
* Pulse counter emits particles in regular bursts
* PerformanceAdjusted counter adjusts the rate of particle emission if the frame-rate drops
* TwoWay energyEasing functions have an energy peak half-way through the particle’s lifetime

Heres the link to my example using Flint, and Flex 3 as much as I would love to add the code right below my post the IG Syntax HighLighter seems to not be getting very well with the latest update of wordpress so to get the code just right click on my example and it will take you there.

Update you can now view the code right here:

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
package {
 
    import flash.display.Bitmap;
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.filters.BlurFilter;
    import flash.filters.ColorMatrixFilter;
    import flash.geom.Point;
 
    import org.flintparticles.actions.*;
    import org.flintparticles.counters.*;
    import org.flintparticles.emitters.*;
    import org.flintparticles.energyEasing.Quadratic;
    import org.flintparticles.events.FlintEvent;
    import org.flintparticles.initializers.*;
    import org.flintparticles.zones.*;
 
    [SWF( frameRate='61', backgroundColor='#000000')]
 
    public class LogoFireworks extends Sprite
    {
        [Embed(source="assets/sgw.png")]
 
        public var Logo:Class;
        public var bitmap:Bitmap = new Logo();
        public var ev:FlintEvent;
        private var emitter:PixelEmitter = new PixelEmitter();
 
        public function LogoFireworks()
        {
            ViewSource.addMenuItem(this, "srcview/index.html");
            stage.scaleMode = "noScale";
            stage.align ="TL";
            init();
        }
 
        public function init():void
        {
            stage.addEventListener(MouseEvent.MOUSE_DOWN,startFlint);
            stage.addEventListener(MouseEvent.MOUSE_UP,stopFlint)
        }
        public function prepareToFlint(event:MouseEvent):void
         {
          stage.addEventListener(MouseEvent.MOUSE_DOWN,startFlint);
          stage.addEventListener(MouseEvent.MOUSE_UP,stopFlint)
 
         }
 
        public function startFlint(Event:MouseEvent):void
        {
            emitter.addFilter( new BlurFilter( 2, 2, 1 ) );
            emitter.addFilter( new ColorMatrixFilter( [ 1,0,0,0,0,
                                                        0,1,0,0,0,
                                                        0,0,1,0,0,
                                                        0,0,0,0.96,0 ] ) );
            emitter.setCounter( new Blast( 1500 ) );
            emitter.addInitializer( new ColorInit(Math.random()* 0xFFFF3300,Math.random()* 0xFFFFFF00 ) );
            emitter.addInitializer( new Lifetime( 7) );
            emitter.addInitializer( new Position( new DiscZone( new Point( 0, 0 ), 10 ) ) );
            emitter.addInitializer( new Velocity( new BitmapDataZone( bitmap.bitmapData,-211, -550 ) ) );
            emitter.addAction( new Age( Quadratic.easeIn ) );
            emitter.addAction( new Fade( 1.0, 0 ) );
            emitter.addAction( new Move() );
            emitter.addAction( new LinearDrag( 0.5 ) );
            emitter.addAction( new Accelerate( 0, 70 ) );
            addChild( emitter );
            emitter.x = stage.stageWidth/2;
            emitter.y = stage.stageHeight -(5);
            emitter.start( );
            emitter.addEventListener( FlintEvent.EMITTER_EMPTY, restart);
        }
 
        public function stopFlint(Event:MouseEvent):void
        {
            stage.removeEventListener(MouseEvent.MOUSE_DOWN,startFlint)
        }
 
        public function restart( ev:FlintEvent ):void
        {
            mouseEn();
        }
 
        public function mouseEn():void
        {
            stage.addEventListener(MouseEvent.MOUSE_DOWN,startFlint);
        }
    }
}

Drawing API and Mouse Events

DrawingAPI
Click on the image to see the example and get the code.

A pair of days ago I found the blog of Sorin Haidan in wish he post some very useful tutorials on Flash and Actionscript 3.0 in a very understandable way, I found one that caught my attention called Draw Custom shapes with ActionScript 3.0. In this tutorial he explains how to make a “Ball” appear on screen every time you click and move your mouse on the screen by using the Drawing API and MouseEvents, the change of the color on the ball was achieved doing a loop in a 10 frame movie clip with a ball of different gradient fill on each frame, so occurred to me to wrap that code on a class on a Flex 3 Actionscript Project and get rid of the Flash assets by drawing the ball in a dynamic way and this let me Change the color of the Ball more than the 10 times of Sorin example, so check the example be sure to check Sorin’s blog .
In my example if you right click on the file you get to see the source that it’s also included below this text here’s what I got: Drawing API Ball Example.

Thanks Sorin for letting me mess around with his code keep up with those good tutorials.

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/*
/////---- Class by Dave Ga?mez (.swfgeek) 24-February-2008 http://www.swfgeek.net----\\\
///---- Original Example by: Sorin Haidan in his  Draw Custom shapes with ActionScript 3.0. Tutorial ----\
///---- Found on his blog http://biochimistu.blogspot.com/ ---- \
*/
 
package {
 
    import flash.display.GradientType;
    import flash.display.SpreadMethod;
    import flash.display.Sprite;
    import flash.display.StageScaleMode;
    import flash.display.StageAlign;
    import flash.events.MouseEvent;
    import flash.geom.Matrix;
    import com.adobe.viewsource.ViewSource;
 
    [SWF(backgroundColor="0x000000",frameRate="31")]
 
    public class DrawingAPI extends Sprite
    {
        private var sprite:Sprite;
        private var holder:Sprite;
        private var myCircle:Sprite;
        private var fillType:String;
        private var colors:Array;
        private var alphas:Array;
        private var ratios:Array;
        private var matr:Matrix;
        private var spreadMethod:String;
        private var focalPointRatio:Number;
 
        public function DrawingAPI()
        {
            init();
        }
 
        private function init():void
        {
            ViewSource.addMenuItem(this, "srcview/index.html");
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
            stage.addEventListener(MouseEvent.MOUSE_DOWN,prepareToDraw);
 
        }
 
        public function prepareToDraw(event:MouseEvent):void
         {
          stage.addEventListener(MouseEvent.MOUSE_MOVE,drawGraphics);
          stage.addEventListener(MouseEvent.MOUSE_UP,stopDrawing);
 
         }
 
        public function drawGraphics(event:MouseEvent):void
        {
         fillType = GradientType.RADIAL;
         colors = [0xFFFFFF, Math.random()*0xFFFFFF];
         alphas = [1, 1];
         ratios = [0x37, 0xFF];
         matr= new Matrix();
         matr.createGradientBox(100, 100, Math.random()*360, -40, 0);
         spreadMethod = SpreadMethod.PAD;
         focalPointRatio = 1;
         holder = new Sprite();
         addChild(holder);
         myCircle = new Sprite();
         myCircle.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr,spreadMethod);
         myCircle.graphics.drawCircle(0,0,40);
         myCircle.graphics.endFill();
         holder.addChild(myCircle);
         holder.x = mouseX;
         holder.y = mouseY;
         holder.scaleX = holder.scaleY = Math.random()*2+0.5;
         holder.rotation = Math.random()*360;
         holder.alpha = Math.random()+0.7;
       }
 
        public function stopDrawing(event:MouseEvent):void
       {
        stage.removeEventListener(MouseEvent.MOUSE_MOVE,drawGraphics)
       }
    }
}

Adobe Flex 3 and AIR 1 are here

Adobe Flex 3 and AIR 1

That’s it the new version of Adobe Flex is here and with it the new AIR 1 runtime, for details visit Mike Potter’s post. Congrats to all the people involved in this release Adobe is really pushing its open source side by making the Flex compilers source available.
Be sure to check Flex SDK page on Adobe Open Source and the product pages of Flex 3 and AIR 1.

ColorMatrixFilter Fun in Actionscript 3.0

ColorMatrixFilter

Based on the great tutorial of Lee Brimelow, called Advanced Filter Effects I started messing around with the ColorMatrixFilter(); an Actionscript 3.0 Class that lets you apply a 4×5 matrix transformation in the RGB color and alpha values to the pixels of an image, and produce a new RGBA alpha value this can be applied to any display object.
So it’s quite addicting messing around with those values and get different results, this example is not at all finished it’s quite buggy still you can get some nice waving effects anyway check it out here:
ColorMatrixFilterExample and be sure to stop by www.gotoandlearn.com Lee has an unique way of explaining things very good and make difficult things look like is a piece of cake.

Papervision3D 2.0 Pixel Effects

Here’s a little try on the new Papervision3D Branch Effects based on the tutorial/example of Andy Zupko, the new pixel effects added to the branch look great, this was made using Flex 3 Beta 3.

3D Cube Pixel

Check it here.
Download Source here

Flex 3 and AIR Beta 3 Available on Labs

The new Flex 3 and AIR betas are available on labs this is the last public beta releases, the new betas resolve various bugs from beta 2, so if you haven’t already give it a try.

Here’s The info on Adobe Labs:

Flex 3 beta 3

This final beta release focuses on overall quality and performance, providing a final look at Flex Builder 3 prior to launch. Please use this opportunity to further explore the new features, communicate any final feedback, and test your existing Flex applications using the Flex 3 framework.

Adobe Air Beta 3

This download provides the beta 3 version of Adobe AIR. This runtime is required to run any Adobe AIR application. The Adobe AIR beta 3 was released on December 12, 2007 and contains a timeout that will cause it to stop working on November 1, 2008.

Visit Adobe Labs for more info
AIR on Labs
Flex on Labs