Archive
Zoom/Pan a big Movie Clip
Ok, so let’s say you have a big Movieclip to display in a Flex application. Something like a map for example. You want to be able to zoom an pan it.
You don’t want an image (jpg, png, bmp, etc…), you want to use the SWF to keep the information of your Movieclip (symbols, interactivity, etc…).
No much of information on the web about that. Seems no much of people are doing such crazyness…
Anyway, I needed to do that because I wanted to display a world map, and each country will be highlighted when the mouse is over.
Colors of each countries could be changed, effects can be applied, etc…
So few things to make work the zoom and pan properly.
Better if you SWF file is not too heavy. I have a wolrd map with hundreds of layers (countries, lakes, seas, islands). It has a great precision even after a zoom per 50, and it’s only 300K. And thank to the few tips I am giving down, it zooms and pans perfectly !
First, for panning your swf, avoid working on it’s x/y. Use instead it’s scrollRect.
Set the cachasBitmap to true. Those two things will increase the performance of your pan so much !
Second, use Tweener to make your zoom and panning fluid.
Here you can download the tweener migrated to flex :
http://candymandesign.com/share/source/LinkTweenerSimple.zip
The tweener is bloody efficient. Just drop a line like this where you want your zoom to be done:
Tweener.addTween(yourSWF , { zoom:zoomSlider.value, time:.4, transition:"easeoutquad"});
or to make you SWF pan :
Tweener.addTween(this , { scrollY:-contentRectangle.y, time:.4, transition:"easeoutquad"})
Tree personalized icons
I tryed those last days to use the Flex Tree, and set my own icons for the folders and leaves. But seems a bit funky with the Tree function setIcons. So I ended-up writing this code to do so, it works well :
package
{
import mx.controls.Tree;
public MyTree extends Tree
{
[Embed(source='assets/itemleaf.gif')]
[Bindable]
public var ItemLeaf:Class;
[Embed(source='assets/itemfolder.gif')]
[Bindable]
public var ItemFolder:Class;
[Embed(source='assets/itemfolder-o.gif')]
[Bindable]
public var ItemFolderO:Class;
public function MyTree()
{
super();
}
override public function itemToIcon(item:Object):
{
if (item.children == null)
setItemIcon(item, ItemLeaf, ItemLeaf);
else
setItemIcon(item, ItemFolder, ItemFolderO);
return super.itemToIcon(item);
}
}
}
All cities/countries in your database
I need a database with all the countries and cities of the world, and hopefully geolocalized cities.
I thought it would be difficult to find that for free in internet, till I googled it !
The most interesting I found are those ones :
1) http://earth-info.nga.mil/gns/html/namefiles.htm
2) http://biogeo.berkeley.edu/bgm/gdata.php
After a while trying them, here my comments :
1) Comes from the american national geospatial intelligence agency. so it’s quite reliable and complete. but no way to get the information hierachically. if you need to have the information that a city is part of a country/department which is part of a region/state, forget this database.
2) Comes from an university. This one provide the information to extract the data according to the administrative hierachy, but it’s not UTF8, and doesn’t contain that much of cities. And some countries are missing.
3) This is the most popular one on the web. Quite complete and with a dynamic community. But some problems : a lot of duplicates cities and the hierarchy is sometimes wrong or incomplete.
I found this week gazetteer.de/ , it doesn’t contain as many cities as geonames.org, but it’s doesn’t contain duplicates and wrong hierachy. With a mix between both source i am building a reliable world places db for my system.
I will put in somewhere once I finish.
Disable MouseWheel on Flash/Flex only
I have a map, with a zoom function on the MouseWheel. Somy problem is to disable the MouseWheel only when the mouse is over a the map.
The map was created in Flex. After a little bit of searching on internet I found a Javascript file which does perfectly the job.
You just put this in your webpage :
<script type="text/javascript" src="disablescroll.js"></script>
And here the script disablescroll.js :
function hookMouseWheel(){
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', onMouseWheel, false);
window.onmousewheel = document.onmousewheel = onMouseWheel;
}
function isOverSwf(mEvent)
{
var elem;
if (mEvent.srcElement) {
elem = mEvent.srcElement.nodeName;
} else if (mEvent.target) {
elem = mEvent.target.nodeName;
}
if (elem.toLowerCase() == "object" || elem.toLowerCase() == "embed") {
return true;
}
return false;
}
function onMouseWheel(event)
{
var delta = 0;
if (!event)
event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail/3;
}
if (isOverSwf(event)) {
return cancelEvent(event);
}
return true;
}
function cancelEvent(e)
{
e = e ? e : window.event;
if (e.stopPropagation)
e.stopPropagation();
if (e.preventDefault)
e.preventDefault();
e.cancelBubble = true;
e.cancel = true;
e.returnValue = false;
return false;
}
hookMouseWheel();
UTF8 / PHP / MySQL/ Flex
My web application has to be able to handle any language of the world. So for that I needed to make it fully UTF8 compliant. Sounds easy first, even though it wasn’t difficult to manage, but it took some time to figure out what was missing !
– first, I declared as utf8_unicode_ci my database, and all my table, and checked all my fields to be sure there were on utf8_unicode_ci too.
– I use AMFPHP to interface my PHP server side code with my Flex application. So I edited my gateway.php and edited the setCharsetHandler function setting this : $gateway->setCharsetHandler(“utf8_decode”,”UTF-8″,”UTF-8″);
– the in my PHP code, after openning my DB connection I called this : mysql_query(“SET NAMES ‘utf8′”);
With all of that, I get everything in displayed properly in any language.
Weflex's Blog 