Posts Tagged ‘as3’

NodeXL: Network Visualizations in Excel (Visual Business Intelligence)

Thursday, February 25th, 2010

[Editor's note: Visualizing complex connection topologies is made easier with a new plugin for Microsoft Excel. Now someone needs to port it to Flash ActionScript 3!]

Republished from Visual Business Intelligence.

This blog entry was written by Bryan Pierce of Perceptual Edge.

The chances are good that you’ve seen network visualizations before, such as the one below in which the circles and octagons represent large U.S. companies and each connecting line represents a person who sits on the board of both companies.

(This image was created by Toby Segaran: http://blog.kiwitobes.com/?p=57)

While these types of graphs have become more common in recent years, there’s still a good chance that you’ve never created one yourself. This is because, traditionally, to create network visualizations, you’ve either needed specialized (and often unwieldy) network visualization software or a full-featured (and usually expensive) visualization suite. That’s no longer the case. A team of contributors from several universities and research groups, including the University of Maryland and Microsoft Research, recently released NodeXL, a free add-in for Excel that allows you to create and analyze network visualizations.

Using NodeXL you can import data from a variety of file formats and it will automatically lay out the visualization for you, using one of twelve built-in layout algorithms.

Continue reading at Visual Business Intelligence . . .

Flash AS3 versus HTML 5+ (Mike @ Teczno)

Tuesday, December 15th, 2009

canvasmappingtag[Editor's note: Even with Adobe's open sourcing the Flash ActionScript 3.0 compiler, the HTML community continues to push for abandoning the platform in favor newer markup languages that center around the canvas tags. Slowly this is becoming more of a reality as the markup becomes more powerful and the rendering engines faster. We're still not their yet, and I'll be programming in AS3 for a while more yet. But something to ponder.]

Republished from Teczno.

the future is staring us in the face

That’s the line we use around the office whenever the subject of HTML and canvas comes up – we use Adobe Flash for most everything now, but we don’t expect that situation to last forever. The work done by Mozilla on Gecko and Apple on WebKit is one possible future for online design and visualization, and it’s turning slowly to face us right about now.

A few developments during recent years have brought us here.

One of the first widespread demonstrations of canvas viability as an interactive medium came from legendary Javascript developer John Resig, who ported the popular educational / artistic Processing environment to Javascript and released Processing.js to the world in May 2008 or so, just about 1 1/2 years ago. At the time, the library was lauded as an “amazing hack” (Andy Baio). Christopher Blizzard said:

The web is going to win, filling the market niche where Flash and other similar technologies found their hold. And John’s little project can hopefully act as a great catalyst to take us there. Thanks, John!

Continue reading at Teczno and play with live mapping demo . . .

Introducing a new OSM editor… Potlatch 2 (Open Geo Data)

Monday, December 14th, 2009

[Editor's note: This tool from the OpenStreetMaps.org cohort is open source and written in ActionScript 3.0. It displays OSM information in vector format for editing and tagging. Use it in concert with the MapZen iPhone app for capturing points of interest (POI) in the field.]

Republished from OpenGeoData. Nov. 30, 2009.

OpenStreetMap users will know all about Potlatch, the online editor that appears when you click the ‘Edit’ tab on the site. Well, there’s a whole new version coming soon!

Potlatch 2 is a complete rewrite still with the same principle in mind: an editor which hits the right balance between speed, ease-of-use, and flexibility. It’s under very active development at the moment and I’ll include a link at the end of this post where you can have a look.

But there are four big new features – and one behind-the-scenes change – to tell you about first.

New feature – friendly tagging system

Potlatch 2 has a friendly, intuitive tagging system. The mapper can use graphical menus, dedicated fields, and icons to get the tagging just right – without the need to remember tag names and values.

For example, you can choose highway types from a set of icons, then add a speed limit by selecting the appropriate restriction sign.

Potlatch 2 tag editor

All this is fully customisable using a straightforward presets file. Using this, you can create your own favourite tag combinations.

New feature – WYSIWYG rendering

Potlatch 2 has an all-new rendering engine far in advance of the current one.

With road names, patterned fills, rotated icons, and much more, the editing experience can be like working live on the familiar Mapnik rendering, the cyclemap, Osmarender, or anything you like -making it much more approachable for the beginner.

The Halcyon renderer used in Potlatch 2

Just like the tagging, the rendering is easy to customise. It uses a special form of CSS, called MapCSS, which lets you create wonderful-looking maps with just a few lines of text. The tagging and rendering together make Potlatch 2 ideal for ‘vertical’ mapping applications, such as a cycle-specific editor or a building/addressing editor. Stylesheets aren’t just about making the map look pretty: you can create stylesheets to help your mapping, such as one that highlights roads without names.

The rendering engine (Halcyon) is available as a compact (<100k) standalone component which you can embed in webpages, so your custom maps can be used outside Potlatch 2.

Continue reading at OpenGeoData . . .

Unemployment rate by county (Kelso via Wash Post)

Monday, December 7th, 2009

[Editor's note: Kudos to Kat Downs for wiring up this interactive, zoomable map of the United States showing unemployment rate by county. There's a slider to see data back in time. I did the base map using my map generalization skills honed on Natural Earth. Using data that is appropriately generalized for the display scale cuts down on file size and reduces lag before data display.]

Republished from The Washington Post. Dec. 3, 2009

unemploymentmap
SOURCE: Bureau of Labor Statistics; GRAPHIC: Kat Downs, Mary Kate Cannistra and Nathaniel Vaughn Kelso – The Washington Post, December 3, 2009

News Dots (Slate)

Wednesday, September 9th, 2009

slatenewsdots

[Editor's note: This is one of the first tools I've seen that links topics, people & places into a network of graduated circles based on their ranking in the news. The circles are arranged based on their edge connections within the overall topology using the Flare visualization package in Flash AS3. As seen in the above screenshot, Germany is linked to Afghanistan, NATO, the Taliban, The Washington Post, and 20 other nodes. This project is one step forward in the vision I outlined in Topology and Projections: 21st Century Cartography. Disclosure: Slate is owned by the Washington Post Company, my employer, but I was not involved in this project.]

Republished from Slate.

Introducing News DotsAn interactive map of how every story in the news is related, updated daily.

Like Kevin Bacon’s co-stars, topics in the news are all connected by degrees of separation. To examine how every story fits together, News Dots visualizes the most recent topics in the news as a giant social network. Subjects—represented by the circles below—are connected to one another if they appear together in at least two stories, and the size of the dot is proportional to the total number of times the subject is mentioned.

Like a human social network, the news tends to cluster around popular topics. One clump of dots might relate to a flavor-of-the-week tabloid story (the Jaycee Dugard kidnapping) while another might center on Afghanistan, Iraq, and the military. Most stories are more closely related that you think. The Dugard kidnapping, for example, connects to California Gov. Arnold Schwarzenegger, who connects to the White House, which connects to Afghanistan.

To use this interactive tool, just click on a circle to see which stories mention that topic and which other topics it connects to in the network. You can use the magnifying glass icons to zoom in and out. You can also drag the dots around if they overlap. A more detailed description of how News Dots works is available below the graphic.

Interact with the original and learn more at Slate . . .

3D Perspective in the Maps API for Flash! (GoogleGeoDev)

Friday, August 14th, 2009

[Editor's note: This seems kinda odd given the poor image resolution, but I'm sure there's a use for it and someone will figure out how to sample higher res tiles. Thanks Laris!]

R

2-D maps are great, but sometimes it’s cool to gaze into the distance. Today we’re happy to announce support for perspective in the Maps API for Flash. We’ve taken the regular API, added pitch and yaw, borrowed the look-around control from Google Earth, and thrown in some nifty camera trajectory support. The opportunity to see the world from a chosen point of view is now in the hands of a user!

perspectivemapgooglemapsapi

Here’s a perspective map in action. Sit back and watch or dive in and drag the view. Try holding down the zoom plus (+) or minus (-) buttons to see the new smooth continuous zoom.

Play with demos and the possibilities emerge. Shadows stretch out as the land tilts back. Foreground detail blends with background context. Movement through the world becomes first-person in nature and distant features can rapidly be dragged to the fore. On a regular map a cluster of markers might only confuse. Spin a perspective map and their pattern becomes clear as nearer markers pass in front of their more remote partners.

A key strength of Flash is its ubiquitous nature and we’ve taken care to develop an API that preserves this advantage. While supporting the latest, greatest Flash players, the API requires only Flash 9. Build a single target and API runtime code matches implementation library to player version. Flash 10 users gain the benefits of the native 3-D graphics support–rendering speed and accuracy–but Flash 9 users won’t be left out.

So how do you create a 3-D map? If you’ve not used the Maps API for Flash before here we’ve got lots of documentation to help you get up and running. For those who’ve used the API and have an existing map to hand, three quick changes should suffice:

  • Replace Map with Map3D
  • Turn on perspective:
    Map3D.viewMode = View.VIEWMODE_PERSPECTIVE;
  • Replace the old position and zoom controls with the new navigation control:
    addControl(NavigationControl);

While this new functionality is aimed at Flash developers, we also have the Earth plugin and API for those of you working with JavaScript and the JS-based Maps API. For developers using the Maps API for Flash, today’s release is just an extension of the existing Flash API; where it makes sense, we have borrowed some learnings from the Earth API (and will continue to do so). From a user’s viewpoint, if you’ve used the Earth plugin or Google Earth, the controls will all be familiar. We’ve kept the same basic key mappings. Add SHIFT to tilt the map, or CTRL to tilt your view and you’re ready to go. More features are hidden just under the surface. Animate a flight from A to B, or apply perspective scaling to your markers. See the new API reference documentation for details.

As always, for those of us working on APIs, the most rewarding aspect is of seeing what developers do with it. Here’s what some of our trusted testers have done to date:

UK Weather Tour ArcGIS Services PaperVision3D Scene
Ian Watkins Nianwei Liu Satoshi Ueyama
Eiffel Tower KMZ 3D Driving Simulator Weather Radar GroundOverlay
Masashi K Katsuomi.K Andrew Trice

Check out some more demos, have a play, make some maps, and let us know what you think!

MarkerClusterer in an All New Flavor – ActionScript! (GoogleGeoDev)

Friday, August 14th, 2009

[Editor's note: An AS3 Flash / Flex library for auto-clustering near map location markers into groups symbols. This speeds map rendering and groups points all within the same neighborhood, avoiding "red dot fever" marker overload. An AS3 implementation of existing JavaScript extension. Still needs to account for geographic region clustering (not just within a grid). Thanks Laris!]

Republished from Google Geo Developer Blog.
Monday, July 27, 200. 

My name is XIAO Juguang – just call me Juguang. I am a freelance software developer based in Beijing, China. Technically speaking, I’m double sided. On one side, I specialize in knowledge management and business modeling, traditionally using LAMP and now experimenting with offerings like Google App Engine. On the other side, I love visualization in time and space, with charts, trees, graphs, and maps, always using the power of ActionScript/Flex, with the help of open-source projects like Degrafa, Axiis, and Birdeye, and of course, APIs like the Google Maps API for Flash.

A few month ago, Xiaoxi Wu (also from China!) created the MarkerClusterer library for the Google Maps JavaScript API v2 and released it in their open source utility library. This library did automatic clustering of markers placed on a map, so that a large amount of markers wouldn’t overcrowd the map or overwhelm the user. This is a great technique for having a better performing map (see this talk for more tips on improving map performance), and the Flash map community immediately rushed to port the code to ActionScript. Developer Sean Toru posted the first port, a version that was only Flash-compatible, Ian Watkins modified that port to use Flex packages, and then I refactored the code to be more ActionScript-friendly and released it into the open-source library. It’s great when random strangers can collaborate together on a common code goal. :)

To see how the AS3 MarkerClusterer works, try out the demo (shown above). As you zoom and pan the map, you can witness how the markers are clustered and re-clustered. To learn how to use MarkerClusterer on your own map, view the source code of the demo. To use the library, check out the source code and import it into your project.

The current algorithm is quite simple, just clustering markers in a grid and using static images for the cluster markers. Future extensions could include support for regional clustering or using arbitrary DisplayObjects for the cluster markers. If you’re interested in extending the library, join the project.

Simple shapefile drawing in ActionScript 3 (Cartogrammar)

Wednesday, July 29th, 2009

Shapefile + magic = map in Flash!

[Editor's note: Andy Woodruff explains how to use his quick and easy implementation of Edwin van Rijkom's AS3 classes for loading SHP files and their DBF attributes into Flash/Flex. This library DOES NOT PROJECT your shp files, you might consider doing that first.]

Recently I’ve heard two friends independently inquire about some sort of basic guide for loading and drawing a shapefile in Flash. The only real tutorial/example I can recall is here, dealing with Google Maps. But these guys are looking for something more bare-bones. Being a regular user of Edwin van Rijkom’s invaluable code libraries for reading shapefiles, and usually forgetting the process myself, I thought it would be a good idea to put together a very simple set of AS3 classes that load a shapefile and throw a map on screen.

So to get those jerks off my back, I wrote a little thing called ShpMap, which supplements van Rijkom’s classes by loading and drawing a shapefile. It’s nothing fancier than that. Sometimes all you need is to get your base map on screen. (Update: just to round it out a little more, I’ve added basic loading and parsing of a shapefile’s accompanying DBF file, which contains attribute data. This also uses classes by van Rijkom.)

I hope that this class (and the several associated classes) can both be directly usable for some projects and serve as a basic guide to using van Rijkom’s classes to load shapefiles.

Dig it:

  • An example that loads and displays a US states shapefile (and then puts a square on my house and colors the state of Wisconsin green). View the source code here.
  • Download the source code. (My classes plus van Rijkom’s, as well as a demo US States shapefile.)

Advanced Text Layout Framework for Flash Open-Sourced (Adobe)

Thursday, July 23rd, 2009

advancedflashtextengine1

[Editor's note: Finally, Adobe's purchase of Macromedia is bearing fruit! The fine-control that Illustrator and InDesign have over typography (text layout) is now available in Flash and Flex as an ActionScript 3.0 framework. There are even a few controls I wish would make it back to Illustrator, like where in the text container the text starts from (not always the top-left hand corner) and allowing images and graphics to be embedded in the text frame, ala Freehand. Also note the Photoshop style numerical control scrubbers!]

Republished from Adobe Labs.

Welcome to the beta release of the Text Layout Framework for Adobe® Flash® Player 10 and Adobe AIR® 1.5. The Text Layout Framework is an extensible library, built on the new text engine in Adobe Flash Player 10, which delivers advanced, easy-to-integrate typographic and text layout features for rich, sophisticated and innovative typography on the web. The framework is designed to be used with Adobe Flash CS4 Professional or Adobe Flex®, and is already included in the next version of Flex, code named Gumbo. Developers can use or extend existing components, or use the framework to create their own text components. Source code and component library for TLF are now available as open source at no charge under the Mozilla Public License at www.opensource.adobe.com.

Together with the new text engine in Flash Player 10 and AIR 1.5, the Text Layout Framework delivers multi-lingual, print-quality typography for the web, including support for:

  • Bidirectional text, vertical text and over 30 writing systems including Arabic, Hebrew, Chinese, Japanese, Korean, Thai, Lao, the major writing systems of India, and others
  • Selection, editing and flowing text across multiple columns and linked containers, and around inline images
  • Vertical text, Tate-Chu-Yoko (horizontal within vertical text) and justifier for East Asian typography
  • Rich typographical controls, including kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens
  • Cut, copy, paste, undo and standard keyboard and mouse gestures for editing
  • Rich developer APIs to manipulate text content, layout, markup and create custom text components.

For a complete list of features and more information regarding this beta, please see the release notes. Please help us ensure that the final release of the Text Layout Framework will be of the highest quality by installing and using this beta version and sending us your feedback on the Text Layout Framework forum.

Open Source

The Text Layout Framework is now an open source project.

Yahoo! Geo Technologies

Monday, June 22nd, 2009

[Editor's note: Yahoo! provides advanced mapping capabilities including GeoPlanet, a Web 2.0 gazetteer of world placenames (see also GeoName's post on the relational ontology / the semantic web).]

Republished from Yahoo!

Yahoo! wants to connect the Web to the World; here you can access our increasing portfolio of platforms to help you geo-enrich your applications and make the Internet more location-aware:

GeoPlanet™: Provides the geographic developer community with the vocabulary and grammar to describe the world’s geography in an unequivocal, permanent, and language-neutral manner. (Blog post)

GeoPlanet Data: Tab-delineated files containing WOEIDs and the corresponding place-names that underlie GeoPlanet.

Placemaker™: Identify, disambiguate, and ‘extract’ places from unstructured and structured textual content to help create local- and location-aware applications. (Blog post)

Fire Eagle™: Allows users to share their location with sites and services through the Web or a mobile device.

Maps: Embed rich and interactive maps into your web and desktop applications.