Portfolio Application

 

 
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.

Launch Flash!see it

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.
  • Deep Linking: Using Asual SWFaddress, you can link directly to individual portfolio items such as the Slideshow example: https://arnoldbiffna.s3.amazonaws.com/asd001/index.html#/id43
  • 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.

INSERT INTO `portfolioFlex` (`ID`, `p_order`, `active`, `p_category`, `p_title`, `p_description`, `p_imgswf`, `p_link`, `swflink`, `launchtext`, `launchbutton`, `skills`, `width`, `height`, `previewID`, `notes`, `creationdate`, `features`, `lockroot`, `blogkey`)
VALUES
	(2,250,'y','1','MP3 Player','Playlist is generated from directory contents, using AMFPHP Flash Remoting. Live volume and balance control. Stereo spectrum display.','mp3player.png','','mp3Spectrum.swf','','','1',345,400,2,'','','4,15','','/2011/02/13/mp3-player/'),
	(106,275,'y','1','Vandalize','Vandalize! is an app that allows you to doodle on pictures and save your artwork. Saved artwork is available for everyone else to see and comment on. Features drawing, saving to JPEG, JPEG quality, and more. It uses a combination of ActionScript, PHP, Flash Remoting, mysql, and XML.','v.png','','vandalize/vandalizeASD.swf','','','',430,400,0,'','','','','/2014/05/04/vandalize/'),
	(43,451,'y','1','Slide Show ','An XML based slideshow viewer with page numbers and a magnify link to the full size image.','slides.png','','myTravelSlideShow.swf','','','1,14,16',480,360,0,'','','1,2,7,11','','/2014/05/04/dynamic-slide-show/'),
	(107,612,'y','','MyTube','Flash remoting based video viewer. Finds .flv files in a folder and allows you to view them as well as comment and see other people\'s comments.Also uses a hit counter from my remoting services.','videocam.png','','MediaBrowserFB4pv.swf','','','',700,600,0,'','','','','/2014/05/04/flex-video-folder-browser/'),
	(41,450,'y','1','Flickr Search Tool','Uses Flickr\'s RSS API to search public images. Each new run starts up with a random feed. Type a word, or words seperated by commas to get specific images. Enter a blank search to get another random feed.','flickr.png','','flickrSearch.swf','PHP programming is used to find all the jpegs and resize them when loading them into flash.','','1,14,16',640,480,0,'','','1,2,3,7,11','y','/2014/05/04/flickr-api/'),
	(108,680,'y','','Frequency Generator','Uses a sine wave to generate a sound that you control. Sound generation is a new AS3 feature in Flash Player 10.','speaker.png','','soundgen1.swf','','','',300,150,0,'','','','','/2014/05/04/frequency-generator/'),
	(100,585,'n','','FaceBook Connect','Uses the Facebook API for AS3 to connect to your facebook account. Demonstrates using GetInfo, GetFriends, and GetAlbums. Login is secure via facebook\'s web site.','facebook.png','','facebook1.swf','Under Construction','','1',550,400,0,'','','7,14','','/2014/05/04/facebook-connect/'),
	(46,300,'y','1','YouTube Search','Uses the YouTube RSS API for searching, and a Google\'s AS3 Chromeless Player API to display video. Searches for videos as you would on YouTube, but renders in a custom way. ','YouTube.png','','http://as3.actionscriptdude.com/YouTubeR.swf','','','1,16,12',800,420,0,'','','1,7,13,14','','/2014/05/04/youtube-flash-api/'),
	(48,575,'y','','Google Map Search','Uses Google Maps Flash API. Geocoder client searches for addresses and shows current address of center. Drag the map to see addresses change. Interactive radius component uses Map API to get correct LAT LONG and distance for calculations.','earth.png','','http://as3.actionscriptdude.com/minimap.swf','Under Construction','','1',460,460,0,'','','7,14','','/2014/05/04/google-maps-api/'),
	(109,700,'n','','SpaceAttack Game','[UNDER CONSTRUCTION]','cube.png','','space-attack.swf','','','',800,600,0,'','','','','');