flash presentation

Druplash & Druplex Building Content-Managed Flash/Flex Websites with Drupal Who are we? Brian McMurray Adjunct Faculty, Bradley University Web and Interactive Developer, The Iona Group Drupal since ~2005 Steven Merrill Faculty, Bradley University Webmaster, Slane College (at Bradley) Drupal since ~2006 cascadingStyle.net What is Flash? Flash is a file format (.swf), a browser plug-in for building multimedia animations and applications, and a vector-based tool which also supports integration of raster images, audio, video, embedded fonts. Flash is a layer- and timeline-based tool. Authors can produce animation by 'tweening' objects on the timeline, or programmatically using the ActionScript (AS) language. Many applications can produce Flash files. Adobe Flash is the main IDE, but Flex, Keynote and many others export to the .swf format. Why Use Flash? Designers love Flash. It allows for pixel-perfect design across all browsers. Authors can embed fonts. Flash is capable of embedding and streaming audio and video, as well as accepting live input of audio and video from a microphone or webcam. Flash is programmed in ActionScript. The current version, AS3, is based on ECMAScript 4. Adobe has open-sourced their AS3 runtime, code-named Tamarin. Mozilla will integrate it into future versions of Firefox. http://www.adobe.com/aboutadobe/pressroom/pressreleases/200611/110706Mozilla.html Who Can View Flash? The player is ubiquitous. 99% of first-world Internet users have a browser with Flash Player 6, the first Flash Player to support the FLV video codec. Flash's single, pervasive codec laid the groundwork for YouTube. Flash Player 9, the latest version (required to use Flex and AS3) has 96.8% penetration in North America. Flash Player 9 Update 3 supports better hardware acceleration and HD H.264 video in any container file (mov, mp4, or 3gpp). http://www.adobe.com/products/player_census/flashplayer/version_penetration.html What is Flex? Flex is an XML-based component framework that compiles down to Flash .swf files. Flex is to Flash as Rails is to Ruby. The term “Flex” encompasses Flex Framework, Flex Builder 3, and Flex Enterprise Services. It is a component library that allows greater (and faster) programmatic control of Flash. Flex is perhaps best described as a Rich Internet Application toolkit. Aren’t They the Same Thing? Flash (as an IDE) is far better for designers. The Flash authoring tool has sophisticated vector drawing and animation tools, layers and the timeline, the ability to embed fonts, and a decent ActionScript editor with a very nice language reference. Flex specializes in application-like functionality, and it has an Eclipse-based IDE. Eclipse is a far better code editor and has nice features like revision control integration. Flex has a visual view, but it is limited. Most large Flex projects are skinned with Flash. But I Don’t Like Proprietary Solutions... Flex is open source! (Mozilla Public License) The Flex Builder (the IDE) is still proprietary, but the Flex complier and SDK are open-source. So is AMF! Adobe is in the process of open-sourcing their Flex Data Services package, known as BlazeDS. BlazeDS makes it easy for Flex to communicate with databases. (Not that we care - we’ve got services.) (but the Flash Player is still closed, you win there) The Problems, historically: Deep-Linking Browser History Bookmarking Search Engines Version Compatibility Disabled Users Mobile/Alternate Devices The Solution: SWFObject SWFObject ( http://blog.deconcept.com/swfobject/ ) Version Detection Standards Compliance EMBED tag, what? Alternate Content / Graceful Degradation The Solution: SWFAddress SWFAddress ( http://www.asual.com/swfaddress/ ) Browser History and Bookmarking SWFAddress.module ( http://drupal.org/project/swfaddress ) Allows spiders to crawl site, users with capable browsers are auto-redirected into Flash version, subject to restrictions: Specify URLs to be redirected into your Flash site Specify other criteria, like the minimum Flash version required to be redirected into your Flash experience site How SWFAddress Works SWFAddress is an MIT-licensed JavaScript library. It bridges ActionScript and JavaScript to allow for changes of URL and page title while navigating through a Flash site. It does this by using markers in the URL. When the SWFAddress library detects a change in the marker, it sends an event to the Flash file. Similarly, ActionScript can trigger a change of marker and hence URL and page title. The SWFAddress site has a good demo of how this works before we talk about applying this to Drupal. http://www.asual.com/swfaddress/samples/seo/ SWFAddress & SWFObject SWFAddress must be used with SWFObject, an MITlicensed JavaScript library that is used to place Flash files on web pages. SWFObject: Replaces an HTML element with a SWF based on the element’s ID, so you can present alternate (indexable) content underneath. Uses JavaScript and thus avoids the Eolas patent dispute’s “click to activate” hassle in IE/Win. Lets you avoid writing invalid tags. SWFAddress SEO SWFAddress was originally released simply as a solution to allow deep-linking and browser history support for Flash files, but SEO support soon followed. Remember: SWFAddress works with SWFObject, so some alternate content can (should) be put under the SWF to be included in your site. Nonetheless, putting an entire site’s worth of content on one page in a DIV that will be replaced is not an optimal solution, and thus SWFAddress provides more extensive SEO support. SWFAddress SEO, cont’d The SWFAddress SEO module is another JavaScript library which performs three functions to determine whether or not a user should be shown the Flash version of a site. First off, it’s JavaScript based, so those with old or incompatible JS engines will not see the Flash site. SWFAddress checks for the proper Flash version and will not redirect the user if they don’t have the right version. SWFAddress SEO, cont’d Finally, if the user has JavaScript and has the correct version of Flash, SWFAddress SEO uses an XMLHttpRequest to redirect the user where they need to go, including rewriting the real URL to the SWFAddress-formatted marker URL. This is the part of SWFAddress that allows for full URL sharing between the Flash and HTML sites SWFAddress SEO, cont’d Here’s how the process works with example.com, everyone’s favorite Druplash site. The user goes to http://example.com/news . SWFAddress loads (if the user has JS) and checks the user’s version of Flash. (We’ll say Flash 9.) Assuming the user has the Flash 9, SWFAddress will send an XMLHttpRequest and redirect the user to http://example.com/#/news. SWFAddress SEO, cont’d Redirecting the user to the site’s base URL is key, because otherwise on the next marker change, the URL would not make sense or line up with the HTML version’s URL structure. If the SWF was shown on http://example.com/news/ and SWFAddress triggered another marker change, the URL would be appended to the end, hence the user might see themselves on URL http://example.com/news/#/drupal-rocks , breaking continuity with the site’s URL structure. SWFAddress Everywhere In Flex 3, Adobe has built in a BrowserManager class which provides some SWFAddress-like functionality out of the box. Microsoft just today (March 5, 2008) put out some notes about what’s new in IE8, and they’re adding in a document.location.hash property which will allow AJAX (and also Flash apps) to natively set and get the current marker URL. http://livedocs.adobe.com/flex/3/html/help.html?content=deep_linking_3.html http://ajaxian.com/archives/ie-8-better-ajax-css-dom-and-new-features Making Flash Dynamic You can import text files formatted like query strings. mode=text&technology=primitive&value=1 Import XML (E4X) 1 AMF (Action Message Format) The AMF format is a native binary format for remoting PHP (or Java, Ruby, etc) objects directly into Flash. The performance boost is impressive. http://www.jamesward.org/census/ AMFPHP AMFPHP is the open-source GPL’d AMF gateway for PHP. It has been around for years and originally came about from reverse-engineering AMF. Adobe recently open sourced the complete specification for the AMF3 format. AMFPHP is a standalone library, and it has also been converted into a module that works with Services. http://en.wikipedia.org/wiki/Action_Message_Format How does AMFPHP work? 1. Flash calls the AMFPHP gateway specifying a method 2. AMFPHP gateway executes PHP which returns data 3. AMFPHP converts the data to AMF and sends it 4. Flash receives native ActionScript objects http://www.5etdemi.com/blog/archives/2006/12/clearing-the-fud-on-amfphps-speed-versus-json-and-xml/ Getting Data from Drupal RSS / Views Feeds Services.module XMLRPC (built-in) AMFPHP (contrib module, separate download) Other contrib gateways are under development: there is a JSON server, and a GET/REST server. Services.module The Services module, in addition to providing the ability to remotely call PHP methods and return the data in a variety of formats, also includes several other features: You can generate per-domain API keys as with most public web APIs. AMFPHP will also generate a crossdomain.xml based on the API keys you have set up. Applications built with Services often run in a browser (like our Flash sites), but for desktop applications, Services provides PHP session IDs. Built-in Services Node_Service Views_Service System_Service User_Service Writing Custom Services Extend built-in Service Most services can be created in one line of code, since they wrap existing functionality. Here is a custom menu service to return primary links: function menu_service_primaryLinks() { $menu = menu_primary_links(); if (!$menu) { return services_error(t( "Could not find the menu 'primary-links'.")); } return $menu; } Custom Services, cont’d A service for stevenmerrilltenor.com to always return path aliases from views (this code was added to the included views service): if(is_array($fields)) { if(in_array('path', $fields)) { for($i = 0; $i < count($nodes); $i++) { if(empty($nodes[$i]->path) && !empty($nodes[$i]->nid)) { $nodes[$i]->path = drupal_get_path_alias( 'node/' . $nodes[$i]->nid); } } } Building a Drupl(ash/ex) Site Let’s look at building a site structure that will work well as a Drupal-powered Flash or Flex site. The examples will come from stevenmerrilltenor.com, an example of building a mediatized portfolio (in this case, a portfolio promoting my singing work) in Flash. First, I identified the five things I would want on my site: songs, upcoming performances, a bio page, a contact information page, and news items. Site Building: Modules Modules you need to build a site of this type include: CCK to build the content types Views to build lists of content for site sections Services to get our data (views) into Flash/Flex AMFPHP to send data in AMF to Flash/Flex Pathauto to build the clean hackable URLs SWFAddress to get all the important benefits Site Building: Planning The next step is to figure out the URL structure for your site. In general, we’d like to keep with the idea of hackable URLs so that users can reasonably hack off part of them and still get contextual information. Then, set up pathauto patterns for each node type. As an example, I chose to use songs/[title-raw] as the pattern for my song node type and I anticipated using songs as the view URL. Similar pathauto patterns were set up for all of the content types. Site Building: Views Next I set up views for three of the site sections news, songs and performances. Each is different: The songs view is sorted on an integer field I added to that content type for me to order the songs. The performances view shows upcoming events. The news view is just an archive. Site Building: Taxonomy I used taxonomy to tag content that would show up in the bio and contact pages. This allows me to call the taxonomy_term view from Services for those sections. Site Building: The Flash After the Drupal site was configured, I built the Flash app, and had it load in the nodes from the three custom views and taxonomy_term. Site Building: AMF Finally, even though AMF is a far more memory and bandwidth-efficient way to transfer data into Flash, I didn’t need even half the node information which the Views service provides. As one example of the built-in Views service’s ability to send only certain fields: When remoting my song nodes into Flash, I only needed the body, title, path, and field_mp3 (an audio CCK field) values sent. Let’s look at the Service’s module’s service browser. Working Beyond Browsers Flash and Flex are most typically used for Internet development, since they run in a sandbox and cannot access the local file system. Flash/Flex can also be used for desktop development: MDM Zinc and other projectors Adobe AIR - Mac/Windows/Linux Local SQLlite DB for offline functionality Automatic installation of the AIR runtime Druplash stevenmerrilltenor.com was the first example that I built as a showcase site that makes good use of media and displays what can be done with this stack of tools. Martin Engineering at http://www.martin-eng.com/ is a site which we both worked on (primarily Brian) including producing the Drupal-Flash integration with the Services and AMFPHP modules. Only the English language site is on Drupal for the moment. Druplex We’ve still got a lot of Flex demos that we’re working on at this stage. Watch our blog at http://www.cascadingstyle.net/ for the latest updates on what we do with Flash, Flex and most importantly Drupal! Questions? style@cascadingstyle.net Resources http://del.icio.us/tag/druplash+resource http://del.icio.us/tag/druplex+resource http://del.icio.us/tag/druplash+demo http://del.icio.us/tag/druplex+demo