Wow! That`s cool. But…

Combining,  minimization and deploying  of this dozens of files would become larger and larger problem.

Gradle is popular and modern build system that can solve such problems for you with help of JavaScript Gradle plugins.

Специально для комбинации и минимизации JS файлов существует два Gradle плагина – https://launchpad.net/gradle-jslib и https://github.com/eriwen/gradle-js-plugin.

По состоянию на декабрь 2011 года первый обладал хорошими возможностями по комбинации файлов в модули, однако не работал с последней версией Gradle. Рассказ в статье пойдет о втором плагине – он прост в освоении, надежен и снабжен неплохой документацией.

Начнем с установки gradle – она достаточно проста. Качаем свежий пакет с http://gradle.org/downloads . Распаковываем на диске и добавляем подпапку bin в path. Как добавить переменную в path – можете почитать тут http://stackoverflow.com/questions/7703041/editing-path-variable-on-mac.

Проверить работоспособность Gradle мы можем выполнив команду gradle в терминале.

Следующий шаг – написание непосредственно Gradle скрипта.

buildscript {
repositories {
mavenCentral()
}
dependencies {
//Устанавливаем плагин из Maven репозитория
classpath 'com.eriwen:gradle-js-plugin:0.3'
}
}

Применяем плагин
apply plugin: 'js'

Таск плагина на склеивание, задаем inputs и outputs
combineJs {
file1 = fileTree(dir: "${projectDir}/src/Core", includes: ['Framework/core.js'])
file2 = fileTree(dir: "${projectDir}/src/Core", includes: ['Framework/strings.js'])
file3 = fileTree(dir: "${projectDir}/src/Core", includes: ['Framework/dom.js'])
inputs.files file1 + file2 + file3
outputs.file file("${projectDir}/min/corecombined.js")
}

Таск плагина на минификацию, задаем inputs и outputs
minifyJs {
inputs.files fileTree(dir: "${projectDir}/min", include: "corecombined.js")
outputs.file file("${projectDir}/min/core.min.js")
}


Для деплоя используем Ant таск, который опишем в отдельном файле – deploycore.xml
//По этому имени таск будет доступен из Gradle


Добавим последнюю строку в core.gradle, которая загрузит все файлы с маской *.min.js на FTP :
ant.importBuild 'deploy.xml'

И наконец – вызываем gradle из консоли:
gradle -b=core.gradle

Наши файлы скомбинированы, уменьшены и загружены на сервер.
Теперь вы можете уделить больше времени написанию кода.

Anyway it`s first dynamic raster mask in HTML I`ve ever heard.

For FlashJS users it just looks like:

objectA.mask = objectB;
objectB.graphics.drawCircle(x,y,r);

But how it looks like behind the scene?

There is -webkit-image-mask CSS property.

It can be set not only with file URL, but with data:URL as well.
And it`s possible to save any canvas to data:URL and set this string as mask.

In this demo you draw some circles on invisible canvas by moving mouse over scene, canvas converts it`s pixels to data:URL string which applies to -webkit-image-mask property (in case it has changes).

Hope this CSS property would be improved to catch JS vars directly and would be implemented in every browser.

I`ve spent a lot of evenings to prepare new playable installation. This time it is developed with WebGL (three.js by Mr.Doob)

Also i`ve developed gamepad Android application to control this installation.

As Android application starts it launches WebSocket server.

JavaScript application connects to it and listens for simple commands: up, down, left, right.

You can find video of result further.

I have to work with projector – orientation technique and look for more interesting surface.

P.S. May be you know building with squared texture at the wall?

First part of eyes-based interactive installation is done. First and easiest one (thanks to Alternativa 3D). Now it`s time for long work with details of visual appearence and motion detection.

TabBarNavigator does not fit because of difference in position and visual appearence. So i`ve started to search the way to solve the problem.

We would extend view class and describe it into xml respectively:

<?xml version="1.0" encoding="utf-8"?>
<view xmlns:android="http://schemas.android.com/apk/res/android"
class="com.pixelscommander.tabbarapp$iRelativeLayout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background = "#C5CCD4FF"
>
    <view

    android:id="@+id/Tabs"
    android:layout_width = "fill_parent"
    android:layout_height = "50px"
    android:layout_alignParentBottom = "true"
    />
</view>

There we can find two classes iTab and iRelativeLayout described into application activity. 
We would create TabBar with overriding view`s onDraw method for every iTab.
I`ll not describe listing in this article as it`s large enough. You can just look at comments into project that can be loaded here.

Ofcourse there are another ways to mimic iPhone tabbar but this not only looks like native, it allows the use of the same PNG icons with semitransparence so you have not to create new assets for android version of application.

Xavier Ducrohet and Tor Norbye presented newest Android Development Tools

Main features of upgraded ADT are:

• New layout editor
• New code editor
• New profiler and emulator improvements and optimizations (they even speak about fast Android emulator!)

vvvv.org presented interesting and frustratng interactive installation by german media artist Jannis Kilian Kreft.

Installation called POST MORTEM looks like stone table with LCD projector pointed to its top. Every part of body that would be placed at the table would be presented as it is body part after your death. Time of death and corresponding look can be tuned.

It`s fine technology demonstration that shows good possibilities of vvvv in field of shapes detection and make it interesting to learn it.

So I have to spend some time installing Windows to my MacBook as any other Mac owner who want to work with vvvv. It runs only in Windows.

P.S. vvvv – is a development enviroment for interactive graphics creation. It support visual development as well as C# coding.

Where do PNG files come from?

Assets are drawn by artists and designers. This guys love what they do but they don`t warn about delicate moments of development and some of them are filesize and ways of it optimization. Ofcourse in ideal world they would understand that it`s important to accelerate application`s loading as it`s possible. But in real world you have to teach them =)

May be you think that it`s not important enough to spend some time for PNG optimization, but belive me it`s so.

Is there any reason to optimize?

Usually optimization can give us from 20% to 1000% of filesize decreasing.

Just imagine that you develop farm game… Ordinal user of your application downloads 5 mb of PNG assets and you have 1 million DAO.

Even at 20% of optimization saving effect would be about 1 terrabyte per month. I think this reason is enough to start optimize PNG.

Effective ways of optimization

There are a lot of PNG optimisation methodics in the network, but i`ll describe two of them that are most effective:

1. Optimization with OptiPNG utility that can be downloaded here - http://optipng.sourceforge.net.. This small and free software is a looseless way to compress your PNG.  Just drag and drop files to utility.
2. Posterization in Photoshop(Levels: 40)  can decrease PNG filesize by 20-30% . Push “Layers palette” button in Photoshop and choose “Posterize”.

Details for Flash – projects

As soon as you insert PNG to flash project you have not to care of optimization. Flash IDE and Flex SDK have rather good optimization tools and there is no any advantage in additional optimization.

But ofcourse you can compress files any way you like and embed them into flash/flex project as byte array asset.

UPDATE, three monthes later

That is text from Apple iAd design guide:

If you need to use PNG images, you should use an image-optimizing utility (for example, PNGCrush) to compress them as much as possible.

You can further reduce a PNG image’s file size by applying a slight posterization effect to it. Doing so reduces the file’s color palette by converting similar colors that are contiguous. You should not posterize images with a gradient or images that need to match an exact color.

It seems amazing how this advice is close to my one!

Flash Dance is available for PC or Mac.