indieas

Recently we were talking about stop motion animations when I though, that should be pretty easy to do in flash. So I gave it a try  to see how far I get in one evening. Accessing the cam and taking snapshot is easy so I made a simple array of images and played through them with the timer. Result:

You can also flip through the images by sliding over the image region. To delete the image when flipping through simply click.

Now thats good and nice but you can’t save. Even better would be a rendered mpeg movie as a final result. To do so I used the new AIR 2.0 NativProcess to call ffmpeg that turns a serie of images into a movie. The images are stored in a tmp directory using the PNGExporter. Voila finished is the StopMotion application that can render images to a mpeg movie.

I like the new NativeProcess as it allows to break out of the AIR container and runs other apps. So if somebody wants to play around with the StopMotion app feel free to download it:

AIR StopMotion (DMG)

As announced I optimized the usage of Buttons in the indieas library.

SimpleButton with disabled state

So the first I create a MovieClip with the different states:

As you can see there is an additional disabled state compared to the normal SimpleButton. So one way to use this MovieClip now as a Button in my Actionscript project is to export it as a Class:

Now when I use the exported swc file as a library in my Actionscript project I can easily create a Button like that:

var but:Button = Button.FromClass( DemoButton );
but.enable = false; // to jump to the disabled state.
addChild( but );

Another way to create a Button is to turn an already placed DemoButton MovieClip into a Button. So you don’t have to add it as a Child and it just turns it into a Button instance:

var but:Button = Button.FromMC( myDemoButton ); // where myDemoButton is an instance of the DemoButton

Adding scripting animations

This is the simplest usage but more often I like to add scripting animations on mouse events. So for example you have an icon on the button that should pop-up on roll-over. The Button class provides an easy way to access MovieClips placed on the timeline. So lets enhance the DemoButton with an icon:

As this Button is special we create an IconButton class:

package {

	import org.indieas.tween.easing.Bounce;
	import org.indieas.tween.easing.Elastic;
	import org.indieas.tween.property.Scaler;
	import org.indieas.widget.button.Button;

	public class IconButton extends Button {

		public function IconButton() {
			super();
		}

		protected override function onOver():void {
			Scaler.To( stateManager.icon, 0.7, 1.5, 1.5, Elastic.easeOut ).start();
		}

		protected override function onUp():void {
			Scaler.To( stateManager.icon, 0.3, 1, 1, Bounce.easeOut ).start();
		}
	}
}

The animation is now done by the indieas tween engine, but you can use any tweening engine you like. The stateManager handles the access to the icon MovieClip that we placed earlier.

To instantiate the IconButton we can again do it with a MovieClip or the class:

var but:IconButton = new IconButton();

but.buildFromClass( DemoButton );
addChild( but );

// or
but.buildFromMC( myDemoButton );

This results in a button like this:

One big advantage of this approach is that you can have different MovieClips with other assets that uses the same Button class. For example to create another IconButton that just looks different you can call the buildFrom* method with another MovieClip/Class.

Buttons with labels

There is another handy class called LabelButton, where you place a TextField into the Button called label. You have now methods where you can style the Text with CSS. For example:

var label:LabelButton = LabelButton.FromMC( draft.labelButton );
label.setStyle( upFormat ); // set the style for all states.
label.setStyle( overFormat, Button.OVER_STATE ); // specific style for over state.
label.embedFont = true;
label.antiAliasType = AntiAliasType.ADVANCED;
label.gridFitType = GridFitType.SUBPIXEL;

So thats it, if you like to use these classes too,  go to the libary page and download the latest classes.

Its been a while since I was working / improving the indieas library. But as I lately had a new idea to improve my workflow I realized, that i should clean up the library and fix the upload script again so that you can download the latest version again.

Thats now all fixed. So make sure you test out the latest revision.

Furthermore I give you small preview on what I’m working at the moment. My actual problem where Buttons. Yes, it sounds too simple – but i was never really satisfied with my solutions. I actually like the SimpleButtons with the framelabels – but there is no way to extend them or add a disabled state. So thats useless in 70% of my use. Thats why I came up with a solution where I easily can create a Button in Flash with frame labels but also can simply extend them to control animations by script.

So soon there will be a post about how I work with Buttons in Flash and Flash Builder.

Diesmal gibts was für die schweizer Flasher unter euch oder die es noch werden wollen. Ich habe wieder einen Abendkurs an der Schule für Gestaltung in Bern ausgeschrieben. Dies ist die Weiterführung meines im Frühling durchgeführten Grundkurses und wird sich vorallem der Umsetzung von Projekten mit Actionscript widmen. Die Ausschreibung sowie die Anmeldung findet ihr hier.

Ich freue mich auf ein volles Schulzimmer…

I proudly announce the release of my modular framework now under the zLib license. I finally decided to change to a open source license so that all of you can use it. I also finished the documentation of the core elements and made an short movie about the main features of modular.

So I hope you can use it as I do in many of my projects…

In the last weeks I was thinking about open sourcing my modular framework. So far I kept it closed source and got some money if somebody used it in commercial projects. But I’m not very happy with this solution as it costs quite an effort to use a commercial framework.

That why I though it would be better to distribute it for free and open source.  My major problem is that I spent many hours in developing modular and earning some money to redeem would be great. So to help me making a decision I made my own list of advantages for going open source;

Advantages:

• everybody can use it for free.
• can use open source platforms for advertising.
• other programmers may join the development.
• higher possibility for viral marketing without to much effort.
• same level with other open source frameworks. No “why should I paid for this” questions.
• ?maybe? get some money by donations
• possibility to sell commercial modules to companies.

I’m wondering if there is somebody with experience with donations? Does this really work? Or maybe other inputs for changing to open source? Just let me know…

Right now i am working on the next release of my modular framework. The main change is in the terminology as there were too many Module* names which made it a bit confusing. But there are also some nice new features like a clean Font registration and a new singleton flag to reuse modules instead of rebuilding them in every page. Its now also possible to use modular in your own application in its own container sprite.

If somebody can’t wait to see the new version you can contact my for a pre-release version. Otherwise I will announce here the new release. Stay tuned.

In one of my last projects I had to develop an air application with an onscreen keyboard that is working with flash as with the internal html browser of air.

I realized pretty quickly that this isn’t that easy as it seams. There are multiple problems especially with the html view:

• how do i get the focus in the html view to add letters.
• how do i get the selection to add chars on the right position.
• how do i know when a user clicks and inputfield/textarea.
• how do i prevent that flash do set the focus on the keyboard when I click on a letter sprite.

After some experiments I discovered the really nice javascript support of the internal browser. So my first problem was already gone, when I found the javascript command:

var webView:HTMLLoader = new HTMLLoader();
//...later, to get the element with the focus call:
var element:Object = webView.window.document.activeElement;

I wasn’t really into javascript so I was surprised to discover even more possibilities. Now with the focus I can place an onscreen keyboard made with flash and get the activeElement of the htmlloader and add characters to it. something like this:

var inputField:Object = webView.window.document.activeElement;
if( inputField != null ) {
   var select:Number = addScreenBoardText( e.char, inputField, "value", "selectionStart", "selectionEnd" );
   inputField.setSelectionRange( select, select );
}

The function where I add the char and return the selection where the cursor should be set:

private function addScreenBoardText( insert:String, object:Object, textAttribute:String, selectionStartAttribute:String, selectionEndAttribute:String ):Number {
  var selectionStart:Number = object[ selectionStartAttribute ];
  var selectionEnd:Number = object[ selectionEndAttribute ];
  var original:String = object[ textAttribute ];
  var newText:String = original.substring( 0, selectionStart ) + insert + original.substr( selectionEnd );
  object[ textAttribute ] = newText;
  return selectionStart + insert.length;
}

Why I make this weird looking function is because I can use it also for the flash TextField just with different parameters. So now we can add letters to a textfield in a html view as a flash TextField. But one big problem is that we loose the focus every time we click on our on screen keyboard. And there is a way to prevent the change of the focus which is very handy in this situation:

 // in our main application class we listen to the mouse focus change event.
addEventListener( FocusEvent.MOUSE_FOCUS_CHANGE, onMouseFocus );

// in the listener we check if the relatedObject is a Key,Screenboard ( these are my classes for the Keyboard that get mouseclicks )
// then we prevent the default behaviour of the event. which means no focus change is triggered.
private function onMouseFocus( fe:FocusEvent ):void {
if( fe.relatedObject is Key || fe.relatedObject is ScreenBoard ) fe.preventDefault();
}

We saw earlier that is was possible to write to javascript objects as normal in actionscript. I was even more surprised as its possible to listen to javascript events with actionscript functions. That allows me to listen to javascript focus changes and hide/show the keyboard. This way I can make an overlay keyboard that is only visible when I click in a textfield which I find is a very nice solution. So this is how I listened to the javascript events ( keep in mind that this is all actionscript ):

// register everytime the page has loaded!
private function onPageLoaded( e:Event ):void {
  webView.window.addEventListener( "focus", onJavaScriptFocusIn, true );
  webView.window.addEventListener( "blur", onJavaScriptFocusOut, true );
 }

// if we get a focus in event from js, check if its a inputfield or a textarea. then show the keyboard.
private function onJavaScriptFocusIn( e:Object ):void {
  if( e.target.localName == "input" || e.target.localName == "textarea" ) {
    dispatchEvent( new JavaScriptEvent( JavaScriptEvent.FOCUS_IN ) );
  }
}

// we lost focus - hide keyboard
private function onJavaScriptFocusOut( e:Object ):void {
  dispatchEvent( new JavaScriptEvent( JavaScriptEvent.FOCUS_OUT ) );
}

With all this you can build your onscreen keyboard that is working in flash as in html. I made a quick flexbuilder air project that you can download with a keyboard, textfield and htmlloader.

Please have a look at our new project that is online now: http://www.drucklive.ch.

You can order canvas and in a few days wallpapers of your own pictures. It is made with away3d for the 3d preview of the room and the modular framework for the website architecture.

I know there are so many different tweening engines out there and it makes really no sense program another one. But as I always had my one version from the sfug library I thought it would be the time to port that to the indieas library. Further more I not just copy it and adapted the package name I tried to improve it once more. So in the new version when you apply another tween on the same object it checks the tweened properties and takes over only the properties defined by the new tween and let the old tween running with the other properties. So no more flickering when to tweens are acting on the same target/property.

As always feel free to download the library: http://www.indieas.org/library/