rTraction

Viewing posts by: Jeremy Richardson

Flash's ScrollPane component

December 21, 2009

Written by | No Comments



scrollpaneI’m not a huge fan of flash components.  I’ve run into too many instances of incompatibilities between version and components themselves.  However the ScrollPane component is just too useful to pass up.  The thought of having to build my own basic UI components also seems like a waste of time.

This article is being written because the documentation on this component is not spectacular and can be quite ambiguous to the new actionscript programmer. I ran into trouble in the methodology of how ScrollPane wants you to work.

Normally the addChild method is used to embed one MovieClip in another.  That was the method I assumed would work for the scrollpane.  However after getting the error “Error #2006: The supplied index is out of bounds.” I realized that was not how it worked.

To simplify, use:

scrollPaneInstance.source = movieClipContainer;

NOT:

scrollPaneInstance.addChild(movieClipContainer);

Due to the fact I’m not a huge fan of the components that come with Flash I’m wondering if anyone has found any other ScrollPane type components that are lightweight and open source. TweenLite is an example of a lightweight alternative to the built in flash library for tweening.

Growing Vines in After Effects

June 8, 2009

Written by | 1 Comment



Recently we had a project where the design required growing vines, a popular analogy for growth.  I had used masks before to create the grow effect but was never really happy with the results or the lack of flexibility with that method.  I searched the internet and found a number of different ways to do it but still it didn’t have the look I wanted so I modified one of those techniques to get what I needed.

I’m using After Effects CS3 in this tutorial.

The most versatile solution I found comes from the stroke effect.  The stroke effect mimics a brush stroke following along a mask path.  You can animate the start and end points as well as the thickness.  This would have worked fine, but I didn’t like how the stroke maintained the same thickness along the length of the path.  I wanted the think point at the top of the vine, getting thicker as it grew upwards. Read the rest of this entry »

10 Essential Drupal modules

March 23, 2009

Written by | 4 Comments



It has taken some time to find the Drupal modules that really work well for us.  Drupal.org can be a little hard to navigate for newcomers, making it hard to decipher what’s really important.  It would be great if Drupal would publish a most downloaded module list.

In that light, we thought we would post a list of the 10 Drupal modules we use on pretty much every project.  These work best for our web clients and we think they are essential to any Drupal install. (NOTE: this refers to Drupal 6.x modules)

  1. Pathauto - Having custom URLs is essential to ease of use from the clients point of view.  Even if it is arguable whether more descriptive URLs help with search engine ranking, the usability benefit of having custom URLs trumps all.
  2. WYSIWYG API – As coders, we would be more comfortable entering content with clean code.  But for most clients this is unrealistic.  TinyMCE has become the WYSIWYG editor of choice for us.  Using the WYSIWYG API we can set up unique profiles for different user groups and have as much (or as little) functionality available as the job requires.  The WYSIWYG API also supports a host of other editors including FCKEditor, jWYSIWYG, markItUp, NicEdit and Whizzywig.
  3. Scheduler - Scheduler is most useful on blogs or news oriented sites where users may be preparing stories weeks in advance.  This adds a couple of fields to a node that specify the start and end dates.  This module is dependent on the Drupal cron module running regularly so take that into account.
  4. IMCE - An image browser.  This module allows the user to navigate through files on the server in specific directories configured by the administrator.  This module is essential for use with WYSIWYG in order to add images easily to any content area. NOTE: for proper integration with TinyMCE you will need to use the IMCE Wysiwyg API Bridge.

  5. SMTP Authentication Support – This may not be required on every setup, but in our hosting environment the default PHP mail function is disabled.  That means we need to use SMTP to send mail.  The core Drupal install doesn’t support SMTP for sending mail, but with this module you will be able to enter a server address as well as authentication details if required.
  6. Administration Menu – This is a great one for Drupal newbies.  When logged in as an administrator you will get a thin black menu at the top of your site.  This allows you to navigate to any area of the site.  This comes in especially handy in the early stages of developing a template when the menu system may not be built yet.  NOTE: Take into account that the admin menu shifts your whole design down a couple pixels.  We have found this can interfere with background images that are lined up with content.  Add a slightly modified style on body.admin-menu to compensate.

  7. XML Sitemap – Provides a complete sitemap in the standardized XML format specific for consumption by search engines.  Currently it can automatically send (with cron) to Google, Yahoo, Microsoft Live and Ask.com.
  8. Webform - This allows us to create forms with custom fields.  We frequently find that clients want “just one more field” than the default Drupal contact form provides. This module is essential any time you are looking for feedback from the user.  Form submission can be emailed to multiple addresses as well as stored in the database.  You can even download an Excel document with the data.
  9. SpamSpan - This module provides email obfuscation.  It is important to prevent email harvesting bots from grabbing emails from content on the site.  We try to use contact forms for most emailing, but it is inevitable that a client will enter an email somewhere on the site.
  10. Views - It looks like at least a basic version of this module is going to be included in Drupal 7 core.  Views allows you to display any collection of nodes in a variety of ways.  It also provides a deep level of templating to customize specifically how different aspects of the view shows up.

Canvas to replace Flash? Not likely.

March 16, 2009

Written by | 8 Comments



Is this the end of Flash?

Came across an interesting article that talks about a new element that was introduced in recent browser releases. The canvas tag. In this article they are suggesting that the options provided with the canvas tag are the same as those which Flash offers.

The largest hurdle canvas has in replacing flash is performance. A flash SWF file is compiled. That means it’s a binary file that only the Flash player (and compatible players) can understand. Canvas on the other hand is controlled exclusively by Javascript, a scripted runtime language. That means that the code is interpreted and run at the time the page is viewed.

Take a look at this article which starts the discussion: Is Canvas the End of Flash?

However, although canvas may not replace flash, it does have many niche uses. One problem it is looking to solve is that of font limitations. Take a look at typeface.js, a library that replaces text with fonts other than the few web safe fonts we’ve used for years.

Flash overlaps lightbox, menus or popups

March 9, 2009

Written by | No Comments



With Flash animation & video clips becoming a staple of modern web designs there are frequent instances where an HTML element will overlap your flash clip.  This could be a lightbox, drop down menu or modal popup window.  There is a fairly simple fix for this.  Set the WMODE attribute to true.


Notice how wmode is an extra param tag for the object tag and just an attribute for the embed tag.

That’s great if you’re coding the HTML directly but due to the IE Flash ActiveX bug many people began using Javascript libraries to embed flash.  The syntax is quite simple for the 2 most popular Javascript Flash libraries AC_FL_RunContent and the open source SWFObject 2.0.

AC_FL_RunContent

AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','900','height','1000','title','test','src','rtraction_animation','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','rtraction_animation','wmode','transparent' );

AC_FL_RunContent is Adobe’s Javascript library for dynamically embedding Flash. You’ll notice each this function equires the name of the option with the value right after. We just added wmode and transparent as parameters at the end of the function.

SWFObject

swfobject.embedSWF("rtraction_animation.swf", "rtraction_animation", "300", "120", "9.0.0","expressInstall.swf", '', {wmode:"transparent"}, {id:"rtraction_animation",name:"rtraction_animation"});

This version is our preferred which uses the open source SWFObject 2.0 library. Add the option parameter wmode and set it to transparent. The Javascript library generates the proper tags on the fly.