With the emergence of Epic Citadel in Apple’s conference last September 1st I thought about doing a fast review of 3D ‘engines’ you can use / buy to develop applications for the iPods / iPhones.

UDK – Unreal Development Kit
The website makes no mention if this engine is available for iPhone and iPod Touch but seeing the demo of Epic Games may soon have news.

iTorque 3D?
Apparently this engine should have been released in 2009

Unity iPhone 1.7
One of the engines are doing more noise lately, multiplatform, has a great editor.
Licensing from 220 € ( 300 $ ) using Unit Basic

Shiva 3D
Licensing from 169€ – 1199
A big unknown at least for me, the games shown look a bit far from what we see in Unity3D or UDK

Sio2
Licensing 0 – 49.9$
A very affordable alternative

No related posts.

A Conceptual Component design made in one afternoon

I decided this weekend to be a code weekend. That means I will spend a lot of hours in front of my Mac developing conceptual stuff I have on my mind.

One if this ideas was to develop a marketing tool for online video. There is a lot of companies producing it’s own TV series. This companies already have ways to monetize content on the TV ( ads and ‘subliminal’ products ) and monetize online content ( overlays, prerolls, etc… ) But I would like to add a new one, how to buy stuff that appears on this TV series?
It’s usual in this series to find cool flats perfectly decorated, people dressed cool, etc… Why not selling directly from the video, pointing you to the next shop or website where you can find all this?
From that question I develop the ‘conceptual’ tool you can see and use below. It’s quite easy to use, you only must roll over the tags and the ad will appear on the right.

How did I do it?

Well, since is just a conceptual idea I didn’t spent much time on architecture and ‘doing things right’. I just created a video player and a dock from scratch, then I put a Pin Manager over it with a collection of pins inside. Every Pin has instructions of when and how to move or hide, and ad related info.

To store the instructions I used a Dictionary, using the start time as the key, this would mean I only have one action per second, but I solved it by passing an array of actions.

Example of the pin instructions:
color = 0xFF9900
_image = “assets/images/GreyTop.jpg”;

instructions = new Dictionary();
instructions[ 10 ] = [ { type:'move', duration:0, properties:{ x:218, y:106 } }, { type:'show' } ];
instructions[ 11 ] = [ { type:'hide' } ];
instructions[ 13 ] = [ { type:'move', duration:0, properties:{ x:213, y:92 } }, { type:'show' } ];
…

Every time the video change the time ( update per second ) every pin looks inside the dictionary to see if has any action to do.
At the very beginning I was moving and testing every move step by step, but this was taking me so long, then I decided to create my Pin Editor.

How it Works?

Is very simple, I reproduce the video, when I press the mouse button on the video I trace the code of move on the specified mouse position, when I release the button I trace the hide code.

Mouse Down:
instructions[ 10 ] = [ { type:'move', duration:0, properties:{ x:218, y:106 } }, { type:'show' } ];

Mouse Up:
instructions[ 11 ] = [ { type:'hide' } ];

The only work left is to copy and paste the generated code into the class without any modification

Note: By default all the generated instructions has a duration of 0, this means a direct positioning, but in order to have a smooth positioning the duration can be change, as an example you can see the first seconds of the video looking at the cup Robin Williams is holding on his hand.

So for each pin I reproduce the video once to generate the instructions for each pin, and one last play for correcting any wrong move for any pin.

To correct the position I just pause the video and since I put the current time on the fake scrubber and when I move the mouse over the screen I get the current mouse position, it’s very easy to find and correct the wrong pin position

Where to go from here?

First of all this is only a conceptual component, so in case of developing it for real, I should spend a lot more time on it.

There is a lot of things to improve this component, a more precise timing for the instructions would be great.

Finally and obviously sharing in social networks is essential in order to maximize the success of any campaign.

No related posts.

My first steps in HTML5 will be redesigning www.riatrends.com. Flash is a technology that lets you create and animate any component with surprising ease. But with the introduction of the HTML5 Canvas I’m starting to see some examples that teach us Flash is no longer alone.

In the following example I will create an animated graphic from an old design using CAKE ( Canvas Animation Kit Engine – google code – demo site )

Design:

Component ( click on the image to see a live demo ):

No related posts.

First of all, I am (or was) one of those fanboys, who was aware of each of the rumors about this new device that Apple unveiled last 27 of January. Such was the excitement that me and some colleagues bought some food and drink to see (f5 refreshing tactic ) the live event.

In my opinion, Apple is one of the companies that generates more speculation in the technology world, most of them are inventions or desires of what the community really wants to see, and some of them come from the same company (this is a assumption but I have no doubt on it). From my point of view, this strategy has always worked well for the company, is free advertising, increases the impact of events and even directly influences the stock market, but this time, was exaggerated to the point that the people left people left the Convention Center Yerba Buena in an atmosphere of disappointment.

The truth is that according to Apple the iPad will be a revolutionary device, but according to the fan community, that idea was hyped ad nauseam.

I admit that I was very disappointed to see the new device, largely because I had thought much of the rumors. But now that I saw again the keynote (this time the video), I believe that all is not as bad as I thought. This is, from my point of view,  good and bad thoughts about the iPad:

Bad:

- The name (iPad) I don’t like it

- The device is completely closed to standards (The only way the device is connected via connectors of the same company), I think is a very serious mistake not to put a SD or USB port.

- It’s not multitask (at the moment, although I feel that this will change with some SDK)

- The dark margins, while writing this post on my iMac, it seems some branding issue.

Good:

- The size, is a big iTouch

- Speed, seems the chip is quite fast.

- Backwards Compatibility, All iPhone programs can run on this device ( using pixel doubling technology or compiling again ).

- Uses, becomes a tool not only to play, but to work, browse the web, etc … I really see this device in schools, businesses and homes.

- Autonomy, 10 hours seems pretty good (if it’s true)

- The price is cheap considering what I mentioned above.

Not sure:

- No flash, why I’m still undecided being a flash developer? From the standpoint of Apple, Flash never has worked well in their products, they argue that HTML5 will be a revolution on the web, is a firm commitment to them, but it is losing many developers that are going to go to Android.

- No camera, I consider essential in a device like this, but is likely to take out a connector for it, which would mean two things: Pay more for a connector, but also saves put two cameras in exchange for an orientable one.

In terms of presentation, I thought they failed in many details.

Steve Jobs unveiled the device as a revolutionary and magical product, and in fact is only a big iTouch. They lacked focus device to a wider sector, do you remember the keynote for the SDK 3.0? applications for teachers, medical staff, etc … This device would be incredibly useful in business, medicine and education! Why not aim to present it as such!?

The truth is that it presents a Google vs. Apple battle quite interesting, the Cupertino company has been the big winner in front of giants like Sony, Samsung, Nokia, etc … we’ll see the result of fighting a Titan…

No related posts.

These are the set of tools I use in my daily job ( Flumotion ) and in my projects:

1. Adobe’s Flash Builder Beta ( Standalone or Eclipse plugin )
You have multiple solutions for flex developers some are free ( you can use your notepad and compile the code using command-line instructions ) but for me, the best tool is Adobe’s Flash Builder.
Inside Flash builder you have and amazing set of tools like Flash Debugger and Flash Profiler, and a new addition in the last version, the Network Monitor.
Maybe I should mention FDT, but I had the opportunity to see it in action and Adobe’s tool is still the best.

2. Firebug ( Firefox plugin )
If you are developing a flex application you probably will be developing for web too. For this reason you need a web browser that let you control and monitorize what’s going on. Firefox with firebug plugin will help you with this.

3. Web Developer ( Firefox plugin )
I use this plugin mainly for two purposes. The first one is disable cache ( very important ). Sometimes when you are developing for web you realize you’ve been testing a cached application for 5 minutes ( or more ), or you must clean the cache every time you want to test some change, this option will avoid this common problem and will help you saving some time. Another interesting option is resize, which let you resize the browser to custom sizes.
This plugin have another options I don’t use.

4. Monster Debugger ( AIR application )
Monster Debugger is an interesting tool for remote debugging. You can print messages remotely and this messages can not only be strings but objects.
Note: I’m currently using Monster Debugger but from my point of view the best practice would be ( and will be ) remote debugging.

5. Charles ( Standalone application )
Are you working with the AMF format? ok, if you are a firefox user, if you try to see what’s going on in the AMF communication to server you won’t be able to see anything because it’s in a binary raw format. ( OK, maybe you’ll see the name of the method ) I didn’t find any firebug plugin to deserialize this, but I found a cool and cheap application called Charles. This application monitorizes all the http/https requests from my computer and deserializes all AMF requests if any.

6. Flex Formatter ( Eclipse plugin )
If in your development team there’s more than one developer the code tends to be a mess in terms of coding conventions ( every developer has it’s own criteria! ). With this tool you’ll be able to establish a set of rules for different aspects of the code ( inline / newline brackets, spaces after / before parenthesis, etc… ) You can export this settings to other machines / developer’s too.
Note: If you hire a freelance you can pass the set of rules to him/ her to ensure the code follows the company coding convention guidelines once he / she finishes the job

7. Adobe Flex PMD ( Java classes, runs with Ant, Automator and command-line )
Finally, a new tool I’m investigating and it’s already giving me some results. Flex PMD is a set of java scripts that examines your code and tells you which part of the code can be improved.

8. Alchemy ( Standalone application )
Sometimes you can have a good product, but you always can do it better. Alchemy is the tool to achieve this, by converting C and C++ code into a valid Flash code. You must know you cannot do anything you wouldn’t be able to do directly in Flash. The generated code it’s faster than Flash Builder’s compiler generated code.

9. Pixel Bender ( Standalone application )
The same way alchemy can help you optimizing code, Pixel Bender can help you optimizing mathematical operations. Pixel Bender runs in a different thread than Flash Player, for this reason you can accelerate logic calculations using this software.

10. Adobe Flash Catalyst Beta ( Standalone application )
From my point of view is still a not fully formed tool in terms of optimization, but keep an eye on it because this tool establishes a very thin but strong line between the designer and the developer.

I hope this post help you improving your development!

P.S: If you know another wonderful tools, please tell me!

No related posts.

I just finished upgrading my Blog and I’m quite satisfied, althought there are some colors I’ll change I added some cool plugins which will improve it for sure.

If you see some errors on the posts please tell me and I’ll fix it.

Thanks.

X

Related posts:

1. Official Flash Platform Blog

If you are aware of the news on the Adobe labs you may know about a new tool called Flex PMD. This tool will help you improving the quality of our code and at the same time you’ll learn about “best practices” developing with Flex. This tool studies the code of an application and generates a XML report which, for better understanding, you’ll see it on any Flex PMD report viewer. You’ll find a list of possible viewers on the FlexPMD webpage.

Inside the downloads site you can access to a violations viewer made for the same labs. I just downloaded the swf for local use.

OSX setup ( once downloaded ):

To install FlexPMD on mac you can do it like this:

1- Working with the terminal, adding the downloaded library to the system path ( or executing it locally ), editing ./profile and following the instructions on the web ( this is How I do it and works pretty fine )

2- Using Automator ( I didn’t try it )

3- Using Ant ( I didn’t try it either )

Related posts:

1. Flex swf optimization ( I )
2. Tools every flex developer should know ( My TOP 10 )
3. Hiding the Secret API Key with Flex using Alchemy

Hello everyone,

Related posts:

1. First thoughts on iPad device ( after the deception )

Probably someday you’ll need to embed your own fonts to a project because you don’t want to use the usual secure fonts ( Arial, Verdana, etc… ). You may know that when you embed a font to your project the swf size will be increased with the size of the whole font. To avoid the increase of the file you can use only the unicode range of the characters you need and you can find a wonderful amount information on the Lee Brimelow’s http://www.gotoandlearn.com website.

In this case you may be interested in this video.

To save you some time, I thought this could help you saving some time:

[English]——————————————————–

letters lower: abcdefghijklmnopqrstuvwxyz ( U+0061-U+007A )

letters upper: ABCDEFGHIJKLMNOPQRSTUVWXYZ ( U+0041-U+0059 )

numbers: 0123456789 ( U+0030-U+0039 )

arithmetic: %*+-/<=> ( U+0025,U+002A,U+002B,U+002D,U+002F,U+003C,U+003D,U+003E )

syntactic: ,:;. ( U+002C,U+003A,U+003B,U+002E )

emphasys: !¡? ( U+0021,U+00A1,U+003F  )

symbols: º ª | @  · ” # & ‘ ( ) ( U+00BA,U+00AA,U+007C,U+0040,U+00B7,U+0022,U+0023,U+0026-U+0029 )

currency: $ ( U+0024 )

all: [U+0061-U+007A,U+0041-U+0059,U+0030-U+0039,U+0025,

U+002A,U+002B,U+002D,U+002F, U+003C,U+003D,U+003E,U+002C,

U+003A,U+003B,U+002,U+0021,U+00A1,U+003F,U+00BA, U+00AA,

U+007C,U+0040,U+00B7,U+0022,U+0023,U+0026-U+0029,U+0024]

[ Spanish ]——————————————————–

accents lower: áéíóú ( U+00E1,U+00E9,U+00ED,U+00F3,U+00FA )

accents upper: ÁÉÍÓÚ ( U+00C1,U+00C9,U+00CD,U+00D3,U+00DA )

special: Ññ ( U+00D1,U+00F1  )

emphasys: ¿ U+00BF

currency: € U+20AC

all: [ U+00E1,U+00E9,U+00ED,U+00F3,U+00FA,U+00C1,U+00C9,

U+00CD,U+00D3,U+00DA,U+00D1,U+00F1,U+00BF,U+20AC ]

[Catalan]——————————————————–

accents lower: àèò ( U+00E0,U+00E8,U+00F2 )

accents upper: ÀÈÒ ( U+00C0 U+00C8 U+00D2 )

special: çÇ ( U+00E7,U+00C7 )

all: [ U+00E0,U+00E8,U+00F2,U+00C0, U+00C8, U+00D2,U+00E7,U+00C7 ]

No related posts.

*little decompilation challenge

SWF file

Related posts:

1. Flex, Amazon S3 and custom headers