Smart Gradient API

Honestly flash’s default Gradient API is kind of crap. Therefore I made alternative methods that enables you define gradient easily. Instead of nasty gradient box matrix, my api use more human friendly parameter, Point and Number specified radius. So you can easily create gradient as if you use flash IDE.

//API for Linear Gradient Fill
beginLinearGradientFill([0x000000,0xfffffff],[1,1],[0,255], startPoint:Point, endPoint:Point);

//API for Radial Gradient Fill
beginRadialGradientFill([0x000000,0xffffff],[1.0,1.0],[0,255], centerPoint:Point, radius:Number);

Below is snipets.
Click here to read more »

Monthly Spark Meeting #09

Every month, the Spark Project has a meeting to study some topics about Flash and ActionScript at the Adobe Japan office in Osaki, Tokyo Japan. Yesterday, we had our ninth meeting. Yesterday was special because Geoff Stearns of the SWFObject attended our meeting! The following is a short report.

Hot news from Adobe by Mariko Nishimura

First in every meeting, we listen to hot news from Adobe. Today, Mariko introduced a report of the FITC Toronto 2009 on the Adobe Edge Newsletter and a seminar about Scaleform GFx that will be held on 18 June at Adobe.

History of the SWFObject by Geoff Stearns

Next, is Geoff. We requested earlier for him to give us a presentation and he gladly OKed (Thank you!). So he introduced the history of the SWFObject. It was a very interesting story! After the story, we had time to question stuff like: “Which is your favorite camera: Canon or Nikon?” “Canon.” ;) Thank you for a great time Geoff!

News of the Spark project by me

Same as the Hot news from Adobe, we had time to hear about recent news of the Spark Project. Today, I introduced Spark67 Part2 Edge ActionScript Libraries. It’s a workshop about FLARToolKit and JSFL that will be held on 19 June.

Next, I introduced what libraries were committed in this month. (Sorry many libraries have documentation only in Japanese…)

  • mouseZoom by tngar – A library to realize zoom by mouse wheeling or pan by dragging.
  • JPPScrollBar by alumican – A scrollbar that simply works if you drop it on the stage.
  • WP-Al-SWFObject by alumican – A WordPress plugin to embed SWF in an article.
  • StreetViewManager by uranodai – A library to communicate with Flash and Google Maps Street View.
  • SiON by keim – An integrated sound library that supports PSG, FM, WaveTable and PCM sound module emulations, MML (Music Macro Language) compiler with a sequencer and sound effectors.
  • QRCodeReader by LOGOSWARE – A library to recognize and decode QRCode within a specified image.
  • LCDBitmap by me – A class to display BitmapData like a LCD display.
  • Psycode by psyark – An enchanced TextArea for code input and editing.
  • MyGameLib by asahiufo – Some utilities (collision detection, map tip, etc) for game development.
  • LiveChromaKey by kawanet – A library for chroma key without blue-back.
  • JSARToolKit by kawanet – A JavaScript version of the FLARToolKit.
  • TweenerTransitionPanel by kaede – Flash CS4 panel to list Tweener transitions.
  • RealPub by kaede – Enables real-time publishing (like action coding) by using JSFL.
  • TLife by uwi – A twitter client for advanced twitter users made by AIR.

JSFL by Yusuke Kamo

Yusuke really loves JSFL. So he Introduced some useful JSFL he created: insertLabel (Insert sequencial label to key frames), AllClassLinkageReplace (Replace linkage name in all documents) and RealPub (Real time publishing). He showed not only JSFL but also a useful SWF panel too.

JSARToolKit and LiveChromaKey by Yusuke Kawasaki

Yusuke is basically Perl or JavaScript programmer. He ported the FLARToolKit to JavaScript as the JSARToolKit and showed it. And recently, he has started to use ActionScript3. Then he created the LiveChromaKey and LivePointers. He introduced these libraries with his awsome presentation that looked like the Minority Report!

Psycode by Keiichi Yoshikawa

Keiichi has created awsome TextArea called Psycode for coding. It provides syntax hilighting, auto indenting, undo/redo, etc and works very fast! In addition, he created a function to record code within Psycode. He showed recording and replaying his code with his custom development enviroment!

Special Event

Special topic: few days ago was Geoff’s birthday! So some creators told him Happy Birthday with their own Flash demos!

  • Kenichi Ueno presented a Flash that would automatically generate a birthday cake printed a photo of Geoff’s face taken by Web Camera!
  • Izukawa Takanobu presented this movie. It finds a text string “Happy Birthday ;) ” from SWFObject’s code!
  • Yusuke Kamo presented a JSFL command that would show a text string “SWFObject” on grided key frames in the timeline!
  • Shunsuke Ohba presented an empty box…? no! “AR” birthday cake inside it!!
  • I presented an “AR” message card. “Happy Birthday” would be shown on the card by particles.

It was a great time. Thank you for all speakers, participants and Geoff! :)

SWFWheel on Gaia Framework

New Gaia Framework ver 3.1.3 integrated SWFWheel of spark project.
SWFWheel is developed by Takanobu Izukawa( twitter id = soundkitchen ) helps mousewheel event of .swf for all the major browser. You will see a great advantage to use SWFWheel.

SWFWheel of Spark project

This is Keisuke Fukuda

Hello everyone!

Nice to meet you, welcome to JActionScripters.
I’m Keisuke Fukuda a.k.a madmp, please call me Keisuke or madmp.

I’m working as Flash Developer for DWANGO Corporation in Tokyo, Japan.
My major work is develop multimedia for a mobile phone.

introduction:
I worked at flash event in 2003-2006,
then I participated as a technical lecturer for volunteers in one event.
(ex. “how to use flash?” and “how make a motion graphics?” etc

Recent work:
You can watch some gallery in my website’s portfolio.

Contact:
website – http://www.madmp.net/
twitter – madflash
(Please follow me, and talk with me in english. :D

Thanks and regards!

BeatTimer: Synchronize with the beat

In the previous my entry, I introduced the dotFes Clock. I used some tricks to synchronize with the BGM strictly in it. One is a BeatTimer.

It is a timer to synchronize with the beat. If you create an instance of the BeatTimer and call the start method with a tempo by BPM, it starts time counting since the current time.

var timer:BeatTimer = new BeatTimer();
timer.start(140);

And it updates some properties based on the time lapsed since the time of the timer has started if you call the update method.

timer.update();

Then, you can get some useful values.

  • beatPosition: Indicates how many beats have been passed. For example, when three quarter notes and an eighth note are passed, the property returns 3.5.
  • phase: Indicates a position on the beat. If the new beat started, it indicates 0.0 and if the beat finished, it indicates 1.0.
  • isOnBeat: Indicates whether it has been in the new beat by the update method call this time.

For example, you can trace a message with 4 beat kicks by the following code:

if (timer.isOnBeat) {
    trace('Kick!');
}

In the dotFes Clock, I used it to change motion parameters synchronizing the rhythm. :)

Porting a few Max/MSP Objects

randomgroove

I started to port a few Max/MSP Objects such as “groove~” “waveform~” “buffer~” “dac~” to ActionScript Classes.

It’s not been completed yet but here is the first sample.

Random Groove
(you can cut up synchronized two audio files randomly)

These API is something like below.

dac = new DAC();
buffer = new Buffer(2000);  // buffer length(ms)

groove = new Groove(buffer);
groove.loop = true;

waveform = new Waveform(buffer);
addChild(waveform);
waveform.addEventListener(Event.CHANGE, waveformChangeHandler);

private function waveformChangeHandler(event:Event):void
{
    begin.text = String(int(waveform.range.x));
    end.text = String(int(waveform.range.y));

    groove.range(waveform.range);
    dac.play(groove.data);
}

dotFes Clock

dotFes Clock

In Octorber 14 2008, dotFes, a creative event for the web designers and developers presided by the web school and creation company cshool and the famous magazine for web design WebDesinging, was held at Tokyo Japan. There were technical sessions, talk shows, live peformances, exhibitions and more. Because it was held at the closure of a school, it was like a school festival for the web persons.

Before the event, leader wanted a movie for the break time. So I created dotFes Clock with Naoki Mima (Rightning, Inc).

It’s an interactive clock. All motions are controled by ActionScript based on the BGM. There are 5 musics for every minutes and different motions for each music. Illustration is always same, but you may have a different impression if the music is changed. This is one of the my favorite work. :)

  • P, D: Naoki Mima (Rightning, Inc)
  • Fl: Yoshihiro Shindo (BeInteractive!)
  • So: Yasuhiro Tsuchiya (DENTSU INC. KANSAI)
  • Il: 2g
  • Introduction of QR Code Reader Library

    For people who want to use QR Codes within the Flash environment, LOGOSWARE (the company I work for) has released a QR Code Reader into the Spark Project.

    It is essentially a library that recognizes and decodes any QR Code from any image source.

    Click here to read more »

    Optimize iteration for Particle

    Few weeks ago, Particle was a trend in Japanese Flash guys. Many works were posted to the Wonderfl with a tag “パーティクル祭 (Particle Matsuri)” (means Particle Festival).

    In one of them, there is “100,000 particles” posted by bkzen. I think it’s pretty cool! but I need more speed. :p So I posted a quick optmized one. It brings 33% faster (21fps -> 28fps) in my Mac. ;)

    You can see what did I changed by clicking “diff” link in above page. In short, I changed an iteration method from Array to LinkedList. Because array index access and calculating and checking an index (variable i) are pretty slow.

    // Slow
    while (i > num) {
        p = particles[i];
        // do something
        i++;
    }
    

    But accessing an member variable is fast because it's optimized by AVM2. So it causes fast iteration.

    // Fast
    while ((p = p.next) != null) {
        // do something
    }
    

    Please use this optimization if you need fast iteration especially in case you have a large data.

    This is Yosuke Doke from Kamakura in Japan.

    Hello

    I’m Yosuke Doke.
    I’m a Flash developer belonging to KAYAC Inc. in Kamakura.

    KAYAC is a very unique company which sends new, interesting projects out into the world.

    Some of the services we made are Wonderfl in which you can build Flash online, the plant that writes a blog named “Midori-san”(we use Flash Lite installed in Chumby) and YUREX that is device that measures knee jiggling when you are irritated, or nervous (Adobe AIR is used) and more…

    My recent client work is here that used FLARTookKit & Papervision3D.

    I was very stimulated by the cool Japanese Flash projects presented at the FITC, so I myself would like to challenge broadcasting to the world, in English.

    Please follow my Twitter.
    and my Wonderfl is here. ( I’m trying to keep up “One Wonderfl A Day”. )

    Thank you.

    ASReflect: Java like reflection in AS3

    flash.utils.describeType is an only way to do reflection in AS3 but it’s annoying to work with XML! So I created a library called ASReflect to manipulate the result of describeType more instinctively. ASReflect has some Java like reflection classes.

    The following is an example. If you have a class MyClass like:

    package
    {
        public class MyClass
        {
            public var a:String;
            public var b:Number;
    
            public function func():void
            {
            }
    
            public function add(arg1:int, arg2:int):int
            {
                return arg1 + arg2;
            }
        }
    }
    

    You can get type information as an instance of Type class by ASReflect.getType method.

    var type:Type = ASReflect.getType(MyClass);
    

    Then, for example, you can output "class name", "property name and type" and "method name, parameter count and return type" by the following code:

    trace('ClassName:', type.name);
    trace('Properties:');
    for each (var prop:Property in type.properties) {
        trace(' ' + prop.name, prop.type);
    }
    trace('Methods:');
    for each (var method:Method in type.methods) {
        trace(' ' + method.name, method.parameters.length, method.returnType);
    }
    

    Output of above code:


    ClassName: MyClass
    Properties:
     a [class String]
     b [class Number]
     length [class int]
    Methods:
     add 2 [class int]
     func 0 null

    There is ASDoc only in Japanese (sorry...), but I think you can guess what does property or method provide by its name. Please ask me if you have any question.

    Source was committed to the Spark project. And also you can get a SWC package or a source code archive.

    Study – Long Exposure-Like Visual Effect

    One of my professions is a professional photographer. Of many techniques,
    I love to take long exposure photos and often like to light-paint within them.

    2006_HNY_card
    This is a real photo taken with a Nikon DSLR, 30secs, drawn with two LED penlights (blue/white) for a new year's card in 2006.
    Click here to read more »

    Color your Google Maps flash monochrome.

    coloryourgooglemaps

    Japanese cool Flash sites containing Google Maps map parts have been recently colored by a cool tone.

    Check out these sample sites below.

    Hey don’t you think they look so cool?
    It’s just a color , but each color produces a different feeling effect right?
    So today is the day that I show you how you can color that map part for all of you “JActionScripters” followers.

    I know that its an unofficial technique!!

    First of all, you will need to get Google Maps API for Flash from here to create your Google Maps Flash!!

    Next, begin to edit a new fla file of AS3 and then put the Google Maps component onto the stage.
    Then you are ready to go coding actionscript for Google Maps.

    In the process of coding actionscript you must define a Map Class Instance to be ready for Google Maps.
    And that Map Class instance has the map part so define a getter function referring to the map point.

    Here is the example getter function.

    
    public function get mapArea():*
    {
     var mapPart:* = gMap.getChildAt(1);
     return mapPart.getChildAt(0);
    }
    //※Replace "gMap" to a Map instance on your code 
    

    Try to change the alpha property when you get ready to go.
    So from this stage, you can now color the map part!!

    Todays sample used a ColorMatrixFilter so you can easily change the color.
    Just try this sample function to color the map part monochrome.

    
    public function setMapColorMonoChrome():void
    {
     var R:Number = 0.299;  var G:Number = 0.587; var B:Number = 0.114;
     var matrix:Array = [
      R, G, B, 0, 0,
      R, G, B, 0, 0,
      R, G, B, 0, 0,
      0, 0, 0, 1, 0];
    
     var CMF:ColorMatrixFilter = new ColorMatrixFilter(matrix);
     mapArea.filters = [CMF];
    }
    //※Replace "gMap" to a Map instance on your code
    

    You finally did it right?

    You can now make your Google Maps colored by your own colors from today onwards!

    Stay Flash Freaky!!

    *Adding note.

    For official permission to re-color the map tiles in your mashup, please fill out this form:https://spreadsheets.google.com/viewform?formkey=cm0zMDkzOHZWMjJneEl2RVdkNFZRb0E6MA

    LCDBitmap: A class version of Saburin’s LCD effect

    LCDBitmap

    The previous Saburin’s post is very impressive for me. But his code is a little difficult to use in my projects. :(

    So, I created a class LCDBitmap based on his code to use a great effect more handily. :D You can use it like:

    addChild(new LCDBitmap(bitmapData));
    

    A bitmapData is an instance of BitmapData you want to display. You can get same result by this simple code. In addition, you can customize a size or a margin of tiles displaying the RGB by passing 2nd or 3rd parameter.

    addChild(new LCDBitmap(bitmapData, 4, 2));
    

    In this case, the size is 4px and the margin is 2px.

    Source was committed to the Spark project. And a Quick Demo was posted to the Wonderfl. Please check it out!

    Fractal Study02

    fractalrect2-0

    Another fractal visual sketches. Now I’m cleaning up the code.
    May upload moving demo later.

    Soucr Code: fladdict_fractalrectangle2.zip

    Click here to read more »