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.

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!

Related posts:

1. New Tool: Flex PMD

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 )

Adobe has created an official blog of the Flash Platform, which seems, are going to publish all the hot news!!!

enjoy this link: blogs.adobe.com/flashplatform/

Related posts:

1. Blog Upgraded!

This Monday I was hired in Flumotion, a company that is expanding and which are going to develop major projects.

I am very excited with this new job in which I hope to learn and give everything I can.

No related posts.