JActionScripters

Today, the NTT DoCoMo has released some new products and services for this summer. One of them, “SH-07B” which is released from SHARP Corporation, has new function called “Standby Widgets” that was implemented by Yoshihiro Shindo (BeInteractive!, it’s me) and Yusuke Nakahara who belongs to the CD-IM. It was directed by Naoki Mima who belongs to the Rightninc, Inc. What I mentioned in my presentation at the FITC Toronto 2010 is about this.

“Standby Widgets” is a function that enables you to customize your standby screen. You can add, remove, or lay out built-in widgets as you like. There are some built-in widgets like bookmarks, calendar, and manner mode switch. Also you can change widget’s color to your favorite color. For phone and mail, it has a list that you can access recent calls or mails easily.

In all honesty, it’s not an amazing new function. However, a point is why the team has invited me. Can you make sense? Yes, it’s written by Flash (FlashLite). A special customized FlashLite engine has been provided by the device team, and all of “Standby Widgets” is running on it. This is our first answer of a question “Can we make better UI if we could use Flash?”.

Many Japanese mobile phone is high-spec actually, but its UI ruins the value of it, I think. In my view, this project is to improve it. Also I feel this project provides fun future to not only users of device but also Flash developers in the world.

BetweenAS3, fast, powerful and professional new tweening engine I’m developing (please see this page or this page), is still under development… But today, I announce “Alpha r3022″ version for early betweeners!

I don’t give assurance about quality, but many main features may works well. Please test and send feedback (bug report, request, etc) to me.

You can checkout BetweenAS3 Alpha r3022 via SVN from:

• http://www.libspark.org/svn/as3/BetweenAS3/tags/alpha-r3022/

or download as ZIP or SWC from:

• http://www.libspark.org/svn/as3/BetweenAS3/tags/alpha-r3022/release/

Did you find text “fp9″ in filename? There is good news. FlashPlayer9 version also available!!

Yesterday, version of BetweenAS3 in Wonderfl is r2505, but today, it was updated to r3022. You can enjoy new version in Wonderfl!! You can find BetweenAS3 samples in this “BetweenAS3Tutorial” tag page.

Changes from r2505 to r3022 is the following:

 * [r3021] Created FlashPlayer9 version based on r3019.
 * [r3018] Fix: Error occurred when stopping or playing tween in event handlers.
 * [r3017] Added property for frame tween (_frame) and utility for convert frames and time (TimeUtil).
 * [r3016] Added ITween.togglePause
 * [r3009] [r3010] Supported physical tween. (BetweenAS3.physical)
 * [r3007] Added shortcuts for BetweenAS3.tween and BetweenAS3.bezier
  * BetweenAS3.to
  * BetweenAS3.from
  * BetweenAS3.bezierTo
  * BetweenAS3.bezierFrom
 * [r3005] Fix: Function specified in BetweenAS3.func will be called many times.
 * [r2998] Supported bezier tween. (BetweenAS3.bezier)
 * [r2996] Supported parallel and serial by passing Array parameter. (BetweenAS3.parallelTweens, BetweenAS3.serialTweens)
 * Changed internal architecture and package.
  * Supported inheriting event handlers when processing tweens by this change.
  * [r2994] Created IUpdater interface.
  * [r2694] Renamed BetweenEvent class to TweenEvent.
  * [r2692] Moved ITicker interface and TickerListener class to Core package.
  * [r2688] Created Core package.
  * [r2688] Removed ITweenTarget interface, integrated it to ITween interface and created IObjectTween interface.
  * [r2688] Created ITweenContainer (now ITweenGroup) interface.
 * [r2618] Moved a delay setting to the BetweenAS3.delay method for more flexibility.
 * [r2617] Changed the timing of calculating tween parameters to the first time of start playing the tween.
    Now sequence of tween using related value works fine.
     BetweenAS3.serial(
       BetweenAS3.tween(mc, {$x: 100}),
       BetweenAS3.tween(mc, {$x: 100})
     );
 * [r2600] Fix: Sometimes ReferenceError has occured while creating a tween.

Here is FAQ:

 Q. How to do filter tween?
 A. Do the following:

     BetweenAS3.tween{mc, {_glowFilter: {blurX: 32, blurY: 32}}).play();

    The following properties for filter are supported.

     * _bevelFilter
     * _blurFilter
     * _colorMatrixFilter
     * _convolutionFilter
     * _displacementMapFilter
     * _dropShadowFilter
     * _glowFilter
     * _gradientBevelFilter
     * _gradientGlowFilter
     * _shaderFilter

 Q. How to do ColorTransform tween?
 A. Do the following:

     BetweenAS3.tween(mc, {transfrom: {colorTransfrom: {redOffset: 255}}}).play();

 Q. How to do SoundTransform tween?
 A. Do the following:

     BetweenAS3.tween(sc, {soundTransform: {volume: 0.0}}).play();

 Q. How to set delay?
 A. By using BetweenAS3.delay, add delay to tween.

     BetweenAS3.delay(BetweenAS3.tween(mc, {x: 100}), 1.0).play(); // Delay 1.0 sec

 Q. How to do bezier tween?
 A. Do the following. Pass control points in argument 4. Set Array of control points for each property.

     BetweenAS3.bezier(mc, {x: 385, y: 207}, null, {x: [58.05, 145.9, 246.7, 345.55], y: [61.4, 80.65, 167.05, 209.3]}).play();

It was difficult to find cool new Spark project stuffs becuase English front page (Project list) no longer maintained…

But now you can find some new stuffs because we updated the English front page today! It’s based on latest Japanese front page. Enjoy!

In the Spark meeting #09, I presented an ARMessageCard for Geoff. At first, a card on the marker seems to be white, but a message will be rose by particles moves if you tilt the card. It works like a sand painting.

ARMessageCard from Yoshihiro Shindo on Vimeo.

You can try it at here (Please use this marker). Of course, source code was uploaded.

A point of this Flash is calculating gravity from the inclination of the card to move particles.

If you defined variables like:

private var _mat:Matrix3D = new Matrix3D();
private var _rot:Number3D = Number3D.ZERO;
private var _v:Number3D = new Number3D();

*Matrix3D and Number3D are provided by Papervision3D.

You can get gravity by the following code:

_mat.copy(_baseNode.transform);
_mat.invert();
_rot = Matrix3D.matrix2euler(_mat, _rot);
_v.reset(0, 1, 0);
_v.rotateY(_rot.y);
_v.rotateX(_rot.x);
_v.rotateZ(_rot.z);
var gx:Number = -_v.x * 2.0;
var gy:Number = -_v.y * 2.0;

*_baseNode is provided by FLARToolKit.

First, invert the transform matrix calculated by the FLARToolKit to get a transform matrix of gravity about the marker. Next, apply only rotations from the transform matrix to a normalized vector for gravity. Finally, get x value and y value from it. If you move particles based on these values, it will work fine

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!

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.

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.

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.

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.

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. 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!

By default, Flash Player loads a movie as an instance of the AVM1Movie class if you load a SWF file with a version lower than 9 by the Loader class in AS3. This means you can’t touch any MovieClips in the such SWF file through the Loader. But sometimes we want to do it. I created a solution to this problem – ForcibleLoader

var loader:Loader = Loader(addChild(new Loader()));
var fLoader:ForcibleLoader = new ForcibleLoader(loader);
fLoader.load(new URLRequest('swf7.swf'));

This is how to use it. It loads every SWF file including files under version 9 into the Loader as a AVM2 movie. So now you can access MovieClips in the SWF file through the instance of Loader.

Note: It will not work well if the SWF file contains ActionScript2 because ForcibleLoader doesn't convert any scripts.

One thing I must introduce to you is the Spark project, because I founded it.

Be happy by sharing source code and knowhow with everyone!

…this is the slogan of the Spark project.

The Spark project is an open source community for the Flash/ActionScript developers. It is the biggest Flash community in Japan. There are over 200 committers are joining and over 130 projects, classes and libraries were committed.

One big project you may already know… is the FLARToolKit committed by Saqoosha, of course, one of the JActionScripters. FLARToolKit is an AS3 version of ARToolKit. I guess Saqoosha will introduce this in more detail.

There are many other libraries committed by members of the JActionScripters including me. I hope they will introduce thier work in future posts. Of course, I’ll introduce my projects in the near future.

You can find more information at website. Our SVN repository is here. Everyone can checkout all files committed in the repository. If you’d like to add new code, modify existing code, create branch and so on, please become a comitter. We always welcome to new comitters!

This is a short description of the Spark project. I’ll tell you more detail in the future posts. Thanks!

Hi ActionScripters! Can you see this? Nice to meet you! In the first article, I think it’s logical to introduce myself.

My name is Yoshihiro Shindo a.k.a. BeInteractive!. I am one of the JActionScripters, a freelance Flash/ActionScript engineer, 20 years old and an organizer of the Spark project (I’ll introduce it next time). Sometimes I create iPhone Apps too. I love ActionScript more than eating meals!! (but of course, I’ll eat if I feel hungry…) I’m not that good at English, but I decided to join this blog to learn English more intensively. Please watch me

BTW, I have my twitter account @beinteractive. I’m trying to write tweets in both English and Japanese in this account. Please follow!