Back in the early 80’s when I was a young teen, my dad bought me my first computer. It was a Commodore 64 sporting a [then] impressive 64K of memory ( compared to 16 million K in a 16GB computer today ). When you powered it on, you saw a command-line / Basic language interpreter. As a result, the first thing I learned was how to program in Basic. And the first program I wrote was generating sound frequencies, like say… 230hz.
For years I was dissapointed that ActionScript never had this ability, until Adobe finally released it in Flash Player 10. Generating raw frequencies is nothing exciting unless you want to annoy someone or their dog, but it’s the building block to something more exciting – synthesizers, drum machines, sequencers, and electronic music. I’ll post some links later of some developers who have taken this to a whole new level.
A video playlist with titles, descriptions, and commenting. Uses my MediaService in AMFPHP to accomplish the back end. Build in Flex 4 using standard components.
Type in and search for cities, addresses, and land marks within Flash
Different views including satellite imagery
Reverse Geo-coding: move the map and the address of where you are displays on the bottom
Added my own interactive layer “Drag Radius”
see it
The task at hand was to build an “Area Selector” in Flash. You could go to an address, drag a highlight over the area, and then get the coordinates and size. Future plans were to hook into databases with coordinate information and extract other data for marketing purposes.
Currently it shows LAT/LONG/area/radius. Adding the area and radius was not easy. It has to account for the zoom level. So, a 1″ radius could be 1/10 sq Mile, or it could span half of the planet, depending on your zoom level. The other feature I added was Reverse Geo-coding. The center point reveals the address of the building underneath (if there is one). Dragging the map more triggers address lookups on each move.
<?xml version="1.0" encoding="UTF-8" ?>
<slideshow date="09/28/2007">
<config>
<transitiontime>2</transitiontime>
<displaytime>5</displaytime>
</config>
<items>
<item>
<src><![CDATA[http://www.actionscriptdude.com/portfolio/content/photoviewer/california/Oxnard/oxnard2.jpg]]></src>
<type>image</type>
<link><![CDATA[http://www.actionscriptdude.com/portfolio/content/photoviewer/california/Oxnard/oxnard2.jpg]]></link>
<text>
<header><![CDATA[beach at Oxnard, CA]]></header>
<description><![CDATA[Just an hour from Los Angeles is a relaxing, uncrowded beach I love to visit.]]></description>
</text>
</item>
<item>
<src><![CDATA[http://www.actionscriptdude.com/portfolio/content/photoviewer/california/Mono%20Lake/tufaSunset.jpg]]></src>
<type>image</type>
<link><![CDATA[http://www.actionscriptdude.com/portfolio/content/photoviewer/california/Mono%20Lake/tufaSunset.jpg]]></link>
<text>
<header><![CDATA[Mono Lake]]></header>
<description><![CDATA[At the East entrance to Yosemite is a magical lake. The Tufa rock formations were once underneath the water level as volcanic springs created these amazing structures.]]></description>
</text>
</item>
I was looking for a way to display CS4, CS5, Flex 3, and Flex 4 content all in one contiguous Flash experience. Turns out Flex 4 (FlashBuilder) was the best choice! It has proven very stable compared to CS5 as a swf in swf container environment, and does not seem to have any issues with Flash components. Whenever I had free time, I added more items to the portfolio or more features to the portfolio application.
Perhaps the biggest piece of programming in my online portfolio is the portfolio application itself. It’s not described anywhere in the portfolio, so I’m doing it here.
Here’s a list of features it has:
Database Driven: All portfolio items are assembled in a mysql database with info such as title, description, swf path, etc. From the database, you can choose items in the sliding “accordion” component, or the 3D image wheel – both on the left side.
Data Services: Data is fetched using Flash Remoting, I wrote the PHP services that feed my ActionScript structured, binary compressed data
Integrated WordPress Blog: Portfolio Items described in the blog are linked to the items in the portfolio, and the blog entries can be read while in the site. Click the “W” icons to see.
XML Menu system: I can easily add links and items that trigger AS3 functionality. Also, items can be launched in a JavaScript LightBox just by populating the xml
Windowing system: Allows you to view multiple items at once and move them around
Layout Control: Sizes to any ( decent ) resolution and automatically adjusts the layout to compensate, even when you resize the browser during viewing
3D Item Selector: A custom PaperVision 3D component I built to select items. Selected items have a yellow 3D polygon above them, and highlighted items use a glow effect.
Shadowbox: Some portfolio items launch in a JavaScript box overlay. This allows it to launch html content in a separate window without “leaving” the site
Full Screen Mode: Click the “Max” button in the top right corner
Cascading Windows & Close All functionality: in the Appearance menu
Code Generated Wallpaper: in the Appearance menu. Uses a radial gradient
The structure of the portfolio could be reused to develop a large application where interactive modules are loaded and unloaded as needed. Floating windows and dialog boxes, along with the menu system are all elements of this. The code is an MVC ( Model View Controller ) structure that I find easy to update and build on.
The portfolio was rendered dynamically from the database, following a path of mysql -> PHP -> AMFPHP -> Flex.
This version was an extension to the original version I made, adding the spectrum display. To avoid copyright issues, I grabbed some royalty-free music clips off the web and put them in a folder. The PHP getDirectory call in PortfolioService grabs all the mp3s in a folder and returns info about them to generate the playlist and play the music. see it