On Wednesday, March 17, 2010 from 12:00 PM – 1:00 PM (GMT+0200) will be available online an interesting web seminar hosted by Adobe Systems.

Join Piotr Walczyszyn for this 30 minutes e-seminar followed by 15 minutes of Q&A. Learn how to define mutitouch, how to support it, and how you can handle multitouch events. Also explore new techniques for interacting with software and devices with the latest capabilities of the Flash Platform.

For registration please go to: multitouchflex.eventbrite.com.

Today we are attending Webstock 2009 at Raddision SAS Hotel in Bucharest. Lots of things will be presented, technologies, tools, trends, howtos, etc. Till now the most speaker was Bob Rapp, Head of Communities at Vodafone – his speech was enlightening. Stefan Tanase, Kaspersky Lab, had a nice speech and a very interesting top of social threatening and dangers that we did not knew. We are looking forward for Mihai Pricope’s (Adobe Evangelist) speech on collaborative web later on.

The agenda is bellow…

08:00 – 08:50
Registration

09:00 – 11:00
First Session

• A peek inside the Social Networks in Romania – Adina Madularea (Daedalus Millward Brown)
• Contradictions in Social Media – Bob Rapp (Vodafone Group)
• An user experience story – Michael Köster (Microsoft) &Todi Pruteanu (Microsoft Romania)
• Today’s hidden dangers – Stefan Tanase (Kaspersky Lab)

11:00 – 11:30
Break

11:30 – 13:00
Second Session

• Room raiders 24/7: How your social persona lets everyone peek into your personal life – Bogdana Butnar, MRM Worldwide
• Future of Social Media – Sharifah Amira (Frost & Sullivan)
• Internet on your mobile. Beyond news and games – Stephanie Jackson (Vodafone)
• Collaborative Web – Mihai Pricope (Adobe Romania)
• Brands and bloggers – Radu Ionescu (Kinecto)

13:00 – 14:00
Break

14:00 – 15:30
Third Session

• Workshop 1 – Web Design
• Workshop 2 – Blogging – Part 1
• Workshop 3 – Mobile

15:30 – 16:00
Break

16:00 – 18:00
Fourth Session

• Workshop 1 – Web Development
• Workshop 2 – Blogging – Part 2
• Workshop 3 – Microblogging

We will write another article with the ideas drawn from the whole Webstock 2009 conference.

You can visit also the Webstock 2009 site and watch the live stream at http://www.webstock.ro.

This week I’ve been working on a project that uses deep linking with SWFAddress library. SWFAddress is a useful tool that lets you go to a specified part of a flash site by changing the browser’s url.

Anyway this project was in part completed but had to do some changes and fix some bugs. Most bugs were found using Internet Explorer 6. If you wonder why IE6 in the era of Firefox and IE8, because today it has 25% of the market (but going down which is a very good thing) and the client needs to be compliant with it. IE6 is not working on Vista so I had to use a Virtual PC image of XP Sp3 to test with IE6.

The biggest bug found was related to SWFAddress Javascript classes. The site continued to jump from one page to another without no reason. I want to mention that this bug did not appeared on Firefox or IE8 or other browser and I have the following browsers for testing: Firefox, Opera, IE8, SeaMonkey and Google Chrome.

I did some research on Google and I found a comment, “Left by Niklas at Thu, 2 Nov 4:07 PM” on the following page: http://www.asual.com/blog/swfaddress/swfaddress-deep-linking-for-flash.html. That way I found that for IE6 the swfaddress.html file must be placed in the same folder where swfaddress.js resides. That didn’t resolved it then I started to test the examples from the SWFAddress zip file.

I’ve seen that in adobe folder is an approach like mine: use on Flash/Flex Javascript classes with SWFAddress. Tested it on IE6 and is working. Then i started comparing with my project. The difference was that in my project I used also the Flash/Flex history Javascript class. So I removed the following line from my project:

<script src="history/history.js" language="javascript"></script>

That fixed my bug. Two this I had to do:

1. add swfaddress.html
2. remove the Flash/Flex history Javascript libraries

As far us I noticed if you used SWFObject with SWFAddress this problem will not occur because, I think, SWFObject do not uses history.

I hope, in the future, to write an entire article dedicated to deep linking, but I need time for that.

Some resources bellow:
http://www.asual.com/blog/swfaddress/swfaddress-deep-linking-for-flash.html
http://www.asual.com/swfaddress/
http://code.google.com/p/swfobject/

Yesterday (21st Jan 2009) Sumo Paint version 1.0 was released. In my opinion this is the best online Photoshop. And it is FREE!

Just some of its features:

1. Layers with blending mode
2. Layer effects
3. Shape tools
4. Brushes
5. Clone stamp
6. Filters
7. Symetry tool
8. Gravity

More about features: http://sumopaint.com/web/#/features/

A new video with Sumo Paint in action can be viewed bellow:

You can access the application here: http://www.sumopaint.com/app
Sumo Paint website: http://www.sumopaint.com/web/

These days I was struggling with this problem: I needed to scroll the page (using javascript) to the embeded swf object. After some search and tests I used the following function (found here) to find the Y position of the object.

function findPosY(obj) {
    var curtop = 0;
    if(obj.offsetParent)
        while(1) {
            curtop += obj.offsetTop;
            if(!obj.offsetParent)
                break;
            obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
}

The next step was to use it with according to my need. So I taken the following steps:

1. get the object using getElementById (my object has an id set)
2. put the obtained object into the findPosY funtion to get its Y position
3. use scrollTo function to scroll the page to the desired Y position

But… big problem occurred. Firefox browser is returning a totally different Y position (afterward I found that it happens to all Gecko based browsers). The difference is approximately the height of the swf object. By trial and error I found that I have to substract the swf height and add 15 pixels.

Using embeds doesn’t give you the same problem. Instead of document.getElementById() function use document.embeds[] array and you won’t have this problem. You can test all these following this link.

The scrolling method is here:

function scrollToMovie(obj) {
    var cy = 0;
    // get the y position
    cy = findPosY(obj);
    // Gecko engine work arround
    // 
    // Gecko returns another value (when using the
    // object tag instead of embed tag) which is 
    // somehow equal with:
    //     y position + object height - 15
    // (this was found by trial and error)
    if (obj.tagName == "OBJECT") {
        if (navigator.userAgent.indexOf("Gecko")!=-1) {
            cy = cy - obj.height + 15;
        }
    }
    // scroll to the movie
    window.scrollTo(0, cy - 10);
}

Please notice that we check if OBJECT is used and if the browser is Gecko. This is it. Archive with the HTML file can be downloaded at the end. If you’ll open the HTML file from your desktop a notification window will appear regarding flash security issues.

The test page is here: http://www.flexer.info/wp-content/uploads/2008/10/test_object_embed.html.

In a previous article I presented Pixlr Image Editor. Now I found SumoPaint and is much better than Pixlr. Is faster, has more tools and the interface is much nicer.

Please enjoy it because is FREE. You can create an account if you want to save your work on the Sumo server but SumoPaint can be used without an account, just being Guest. You can save you work as JPG file to you machine, it has layers, filters, adjusments, brushes, etc… almost everything Photoshop has.

It was launched on 18.06.2008, had 6 updates and at this moment, the last version is 0.40.

Click here to enter directly in the editor or go here on the official web site.

Flower

Opening from server

Saving on Sumo server

 

For Pixlr I said “WOW! Amazing”… for this I say it twice.

New Rich Internet Application is out on the market – Pixlr, a web based image editor, was launched on 17th of August 2008! The most interesting thing is that is created by one person and is by far the closest image editor to Photoshop. Pixlr has layers, filters, adjusments, brushes, etc.

What can we say: WOW! Amazing!

The creator is Ola Sevandersson, a Sweden-based developer – he worked about 1 year in his spare time as he is full-time employed as development manager for a Swedish web community.

He used flash but had to rewrite a lot of it: “To get the performance up and keep the size down I have written all of the controls my self and not used the built in flash controls.” – as he said in this article.

pixlr

 

Table of contents

1. How To Use Yahoo! Maps in Flex
2. How To Add a Custom Marker On Yahoo! Maps

In the previous article I explained how to use Yahoo! Maps. Now I’ll explain how to create a custom marker and how to place it on the map. This is not an easy task because on Yahoo! Developer Network (YDN) there is not enough documentation regarding Yahoo! Maps API for AS3. Take a look at any function found in here and you’ll see that what is there is insufficient.

So… let’s start!

First you need to extend the normal marker class which is a hassle with this lack of documentation.

Secondly you need to add this custom mark to your map which is very simple so we will have two pieces of code: CustomMarker.as (our custom marker) and YahooMapsSimple.mxml (our main application).

Now we will focus on extending the marker class because this is the complex part. All display object will be created in the constructor like this:

1. set variables
2. add text object
3. recalculate the main object width and height based on text objects
4. reposition text object (centering them vertically)
5. draw the bubble
6. add all text objects

I’ll not post the CustomMarker class here but it will be available at the end for download and the code fully commented.

Now here is the application…

You will notice after taking a look at the code there is possible to position the marker separately from the map position. In our case we will see that we use the same coordinates for both.

And the code for YahooMapsSimple application.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
    width="600"
    height="600"
    creationComplete="init()">
    <mx:UIComponent id="mapHolder"
        width="100%"
        height="100%"/>
    <mx:Script>
        <![CDATA[
            import com.yahoo.maps.api.markers.events.MarkerEvent;
            import com.yahoo.maps.webservices.local.LocalSearchItem;
            import com.yahoo.maps.api.core.location.LatLon;
            import com.yahoo.maps.api.YahooMap;
            import com.yahoo.maps.api.YahooMapEvent;
            import com.flexer.CustomMarker;
 
            // our map
            private var _yahooMap:YahooMap;
            // our custom marker
            private var _yahooMarker:CustomMarker;
 
            // Yahoo API Id - take it from Yahoo!
            private var _appId:String = "__YOUR_YAHOO_MAP_API_KEY__";
 
            // initialization
            private function init():void 
            {
                // new yahoo map
                _yahooMap = new YahooMap();
                // setting its apiId, width and height 
                _yahooMap.init(_appId, mapHolder.width, mapHolder.height);
                _yahooMap.addEventListener(
                    YahooMapEvent.MAP_INITIALIZE, handleMapInit);
                // adding map object
                mapHolder.addChild(_yahooMap);
            }
 
            private function handleMapInit(e:YahooMapEvent):void
            {
                // adding controls
                _yahooMap.addPanControl();
                _yahooMap.addZoomWidget();
                _yahooMap.addTypeWidget();
                // centering map
                var latlon:LatLon = new LatLon(44.401314,26.073638);
                _yahooMap.centerLatLon = latlon;
                // setting zoom level
                // smaller means closer
                _yahooMap.zoomLevel = 1;
                // setting data for custom marker
                var xmlItem:XML = 
                    <listing>
                        <title>DesignIT Web Development</title>
                        <addr>Str. Florica, nr. 26, sector 5</addr>
                        <city>Bucuresti</city>
                        <lat>44.401314</lat>
                        <lon>26.073638</lon>
                        <state>Bucuresti</state>
                    </listing>;
                // creating a new local search item
                var myLocalSearchItem:LocalSearchItem = 
                    new LocalSearchItem(xmlItem);
                // creating our custom marker based on local search item
                _yahooMarker = new CustomMarker(0x26333b, latlon, 
                    myLocalSearchItem, "http://www.designit.ro");
                // aading it to the map
                _yahooMap.markerManager.addMarker(_yahooMarker);
            }
        ]]>
    </mx:Script>
</mx:Application>

Bellow are some resources from Yahoo!
http://developer.yahoo.com/maps/
http://developer.yahoo.com/flash/maps/
http://developer.yahoo.com/flash/maps/classreference/index.html
http://developer.yahoo.com/flash/maps/examples.html

HTML Editor in Flex? Can we say that squarespace has managed to do that? Although isn’t a complex one it is a start. What is next? We can think that in the future Dreamweaver may become a web RIA. Or some other HTML Editors will be created using Flex and AIR.

For some developers this sounds a little bit disturbing when we think that some may loose their jobs and businesses, but for the hundreds of millions of people this is awesome because they will be able to create their websites on the spot without worrying about HTML 4, XHTML, FTP and all other technologies involved there.

Squarespace can be tried out free for 14 days if the video clip is not enough for you.

Table of contents

1. How To Use Yahoo! Maps in Flex
2. How To Add a Custom Marker On Yahoo! Maps

This article will explain how to integrate the Yahoo! Maps into your Flex application. Is important to know that in this we are using Flex Builder 3 and that the example and the code won’t work in Flex Builder 2 (it seems that in Flex Builder 2 there are some compiling problems with the SWC file).

What you need? Just three things:

1. Adobe Flex Builder 3
2. Yahoo! Maps component/library
3. Yahoo! Maps API Key

Now that you got both copy the YahooMap.swc file from the downloaded archive and copy it into your /libs/ folder of you Flex application (the file is in /YahooMap/Build/Flex/ folder in your archive).

Now the code… is simple and commented that you may easy understand how to use Yahoo! Maps.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
    width="600"
    height="600"
    creationComplete="init()">
    <mx:UIComponent id="mapHolder"
        width="100%"
        height="100%"/>
    <mx:Script>
        <![CDATA[
            import com.yahoo.maps.api.YahooMap;
            import com.yahoo.maps.api.YahooMapEvent;
            import com.yahoo.maps.api.core.location.Address;
            import com.yahoo.maps.webservices.geocoder.GeocoderResult;
            import com.yahoo.maps.webservices.geocoder.events.GeocoderEvent;
 
            import mx.controls.Alert;
 
            private var _yahooMap:YahooMap;
            private var _address:Address;
 
            // Yahoo API Id - take it from Yahoo!
            private var _appId:String = "_REPLACE_THIS_WITH_YOUR_KEY_";
 
            // initialization
            private function init():void 
            {
                // new yahoo map
                _yahooMap = new YahooMap();
                // setting its apiId, width and height 
                _yahooMap.init(_appId, mapHolder.width, mapHolder.height);
                // adding controls
                _yahooMap.addPanControl();
                _yahooMap.addZoomWidget();
                _yahooMap.addTypeWidget();
                // adding map object
                mapHolder.addChild(_yahooMap);
                // searching for "Bucharest"
                geocodeAddress("Bucharest");
            }
 
            // geocoding address
            // from "Bucharest" to geocode coords
            private function geocodeAddress(value:String):void 
            {
                // new Address object
                _address = new Address(value);
                // aading success and failure events
                _address.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, 
                    address_geocoderSuccess);
                _address.addEventListener(GeocoderEvent.GEOCODER_FAILURE, 
                    address_geocoderFailure);
                // trying to geocode
                _address.geocode();
            }
 
            // handle event for successful geocoding
            private function address_geocoderSuccess(evt:GeocoderEvent):void 
            {
                // getting the result after geocoding
                var result:GeocoderResult = 
                    Address(evt.target).geocoderResultSet.firstResult;
                // setting the map to the found location
                _yahooMap.centerLatLon = result.latlon;
                // setting zoom
                _yahooMap.zoomLevel = result.zoomLevel;
            }
 
            // handle event for unsuccessful geocoding
            private function address_geocoderFailure(evt:GeocoderEvent):void 
            {
                // just display an alert
                Alert.show("Unable to get to the address: " + _address.address);
            }
 
        ]]>
    </mx:Script>
</mx:Application>

This is all for now.

Some resources:
http://developer.yahoo.com/flash/maps/
http://developer.yahoo.com/flash/maps/examples.html
http://developer.yahoo.com/flash/maps/classreference/index.html