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.

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.

To do this I used the stroke effect multiple times linked with some expressions for simple manipulation.

1. Create a new composition for your vine.
2. Next create a solid in the dimensions of your composition.
3. Using the pen tool, draw a mask on your solid.  If you don’t close your mask its mode should be set to none by default.  Otherwise, right click on your path and select Mask > Mode > None
4. Apply the stroke effect.  Effects > Generate > Stroke
5. Increase the size of the brush size on this stroke - it becomes more obvious without having to hide the mask.  Then play with the Start & End options on the effect control to see your vine grow and shrink. So far, it’s looking good but we don’t have that point of where the vine starts.  To do that we’re going to use multiple instances of the stroke effect.
6. Select the stroke effect you just added and duplicate it a number of times.  The more instances you use, the smoother the gradation from point to full size.  For the purposes of this demonstration we’ll use 5 instances.
7. For each instance of the Stroke effect make sure you have your Mask selected in the Path drop down.  I kept the default mask name of Mask 1.
8. For the top instance only, select On Transparent from the Paint Style drop down.  This ensures we can add any background we want.  Make sure all the other instances are set to “On Original Image” otherwise each succeeding instance will overwrite the last.
   We don’t want to have to modify every single effect if we need to modify width or how gradual the point is.  This is where expressions come to help out.  First we need to add the controls that we will use to control the expressions.

   

9. Add 3 sliders.  Effect >Expression Controls > Slider Control.
10. Rename these controls to stroke end, stroke offset, stroke width.The stroke end control will control the end point of all instances of the stroke effect.
    Stroke offset will control how far apart each instance will be from the next.  This will allow us to modify how gradual the vine goes to a point.
    Stroke width will control the overall width of our vine.

    The basic idea is to use multipliers of the slider control.

    

11. Expand out the effects of your vine solid in our composition timeline.  Expand the first stroke effect so you can see all it’s properties and then click on “Brush Size” to select it.
12. We need to add an expression to this property.  Use the shortcut ALT + Shift + = or go to the menu Animation > Add Expression.
13. Use the following expression: effect(“width”)(“Slider”) * 0.1This is basically saying  get the value of width custom slider we added and multiply it by 0.2.  Using a small decimal number gives us more control with the slider.  If the slider is set to 10 then our width will be 1 (10 * 1).
14. Repeat steps 12-13 for the remaining stroke effect instances.  However increase the multiplier as you go.  For example stroke effect 2 would be effect(“width”)(“Slider”) * 0.2.
15. Go back to our first stroke effect and select the property “End”.  Add an expression using ALT + Shift + =.
16. Add the following expression: effect(“end”)(“Slider”) - (effect(“offset”)(“Slider”) * 0.1)What we’re saying is to subtract our multiplier (0.1) from the end custom slider.  This will make each successive stroke be slightly less than our end custom slider.  In order to adjust the amount of the multiplier we muliply that by our offset custom slider.  That will uniformly increase or decrease that value.
17. Repeat this for each successive stroke effect, incrementing the multipler (0.2, 0.3, 0.4, etc…)
18. Take a moment to play with our custom sliders to see the effect.
19. Now we can animate our vine by using the “end custom slider”.

You can tell right away would should probably add more instances of our stroke effect to achieve a smoother transition.  With the way the expressions are set up you should be able to add more instances without having to reanimate.  Just add extra instances with appropriate multipliers (you may have noticed that I setup the multiplier to be a tenth of the instance number. eg. instance 1 was 0.1)

Have fun animating your new vine.

Checkout the finished video below - vine effect starts at about 30 seconds.

www.youtube.com/watch?v=ib0VH9TxLJo

About the author
Jeremy describes his favourite work moment with rtraction as the time the weekly team meetings were renamed to “Cake” to help improve morale. The initial “cake” was a resounding success with three employees contributing unsolicited desserts. Jeremy has a love hate relationship with computers , and in contemplative moments he has been known to muse on the fact that his life’s work is in reality a long string of 1’s and 0’s.

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.

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.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="900" height="1000" title="test">
<param name="movie" value="rtraction_animation.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="rtraction_animation.swf" wmode="transparent" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="900" height="1000"&gt;&lt;/embed>

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.

For example:

Home | Products | Contact Us | About Us

CSS seems like it should be the simplest solution. Add a border-left: 1px solid #000. However the first element of this menu should not have this border. CSS 2.1 has given us the first-child and last-child selectors. This would be the perfect solution other than the fact that Internet Explorer 6 does not support these selectors (CSS and browser content and compatibility). IE7 is incrementally better supporting just the first-child selector.

Until we finally can let go of IE6 support (perhaps when IE8 comes out?), we will need to find another solution. The easiest is to add the class “first” to the first element of the menu and “last” to the last element of the menu. This will allow us to target styles specifically for those menu items.

Now that we develop a number of our sites in Drupal, we have had to come up with a solution for it. If developing in Drupal 6 then the work is already done for you. Drupal 6 now includes first and last classes on all menus. Drupal 5 only includes the first and last classes on primary and secondary links and not for menus displayed in blocks.

Using theme overides you can customize your site to add first and last classes. Take a look at the following article on Have “first” and “last” classes on menu blocks.

The first attempt added a width to the <td> as follows:

<td style="width: 150px">some content goes here</td>

However, by nature, table cells will always resize to accommodate the content that is placed in them. That is what they were designed to do. The cell will maintain its 150 pixel width as long as the content is smaller than the specified width.

The solution is to add a div inside each cell. It adds some extra markup, but will ensure that the cell will not resize beyond the specified width. Divs can be set to specific dimensions, and will stay as such even if the content will not fit inside.

So our table cell code now becomes:

<td><div style="width: 150px">some content goes here</div></td>

One tool that can be useful is XDebug (which we previously talked about here). One thing not covered in our previous blog article is the ability to perform benchmark analysis on data captured with XDebug.  Using a tool called WinCacheGrind, you can analyze the cachegrind profile file output by XDebug. This will allow you to target and eliminate or reduce functions that negatively impact your website’s performance.  If you are hosting your site with Apache, another notable option is to set up Alternative PHP Cache (APC).  You will need to verify all your website’s functionality is working properly with APC enabled.  Our experience is that APC provides a great reduction in load times when configured properly.

Last but not least, be sure to think about performance when writing your code.  There is a great article with 40 optimization tips over at reinholdweber.com.  Click here to check out the optimization tips and feel free to comment with any other performance tools or tips you or your company have found useful.

The trick to using this function is that it sorts based on columns.  The normal layout of a database table returned into an array is with each row of the table is a seperate element of an array.  The 2nd dimension of the array has the table row names as the keys with the value attached.

So there is our table represented in an array with each element as a separate row.  To sort we need an array for each column, in this case fruit and color.  We use the following code to accomplish this.

foreach ($query_result as $key => $row) {
    $fruit[$key]  = $row['fruit'];
    $color[$key] = $row['color'];
}

It seems quite unintuitive but essentially each column is a separate array with the row number being the key. Now we are able to plug this new data into the array_multisort function to sort our existing array (NOTE: the new column based arrays we created are specifically for the purpose of sorting)

array_multisort($color, SORT_DESC, $fruit, SORT_ASC, $query_result);

Basically you list the order of columns you want to search by. In this case we’re sorting by color descending first and then by fruit ascending. The last parameter is the multi-dimensional array that you want to sort.

Seems like a convoluted way of a simple sort. It’s always best to do all sorting and querying in the database but for the few situations that just isn’t possible, we have a solution using array_multisort in PHP.

When you run into a problem with someone elses tool it can be very difficult to solve the problem.  After an exhaustive search we were able to find the solution posted on a german blog at www.trilodge.de.  Although we don’t speak german it was obvious this was the solution to our problem.

Although this solution is already available from www.trilodge.de we know this will help any other developers who run into this issue as its hard to find the german solution being the blog is in another language.

The problem happens in the image loader.  It seems to think the image has loaded when it has not.  Therefore it is unable to get an accurate size.

To fix replace:

// We have to do this instead of .onload
this.checkImage[i] = new PeriodicalExecuter(function(i) {
	if (!(typeof $('lightwindow_image_'+i).naturalWidth != "undefined" && $('lightwindow_image_'+i).naturalWidth == 0)) {
 
		this.checkImage[i].stop();
 
		var imageHeight = $('lightwindow_image_'+i).getHeight();
		if (imageHeight > this.resizeTo.height) {
			this.resizeTo.height = imageHeight;
		}
		this.resizeTo.width += $('lightwindow_image_'+i).getWidth();
		this.imageCount--;
 
		$('lightwindow_image_'+i).setStyle({
			height: '100%', width: '100%'
		});
 
		if (this.imageCount == 0) {
			this._processWindow();
		}
	}
 
}.bind(this, i), 1);

With this:

// We have to do this instead of .onload
var ie = (document.all)?1:0;
this.checkImage[i] = new PeriodicalExecuter(function(i) {
	if(ie){ //THE BROWSER IS IE
		if ( $('lightwindow_image_'+i).complete && !(typeof $('lightwindow_image_'+i).naturalWidth != "undefined" && $('lightwindow_image_'+i).naturalWidth == 0)) {
			this.checkImage[i].stop();
 
			var imageHeight = $('lightwindow_image_'+i).getHeight();
			if (imageHeight > this.resizeTo.height) {
				this.resizeTo.height = imageHeight;
			}
			this.resizeTo.width += $('lightwindow_image_'+i).getWidth();
			this.imageCount--;
 
			$('lightwindow_image_'+i).setStyle({
				height: '100%', width: '100%'
			});
 
			if (this.imageCount == 0) {
				this._processWindow();
			}
			//alert('IE has been detected')
		}
	}
	else
	{//NOT IE, PROBABLY FF, OPERA, OTHER
		//this line works for all other browsers
		if ($('lightwindow_image_'+i).complete && !(typeof $('lightwindow_image_'+i).naturalWidth != "undefined" && $('lightwindow_image_'+i).naturalWidth == 0)) {
 
			this.checkImage[i].stop();
 
			var imageHeight = $('lightwindow_image_'+i).getHeight();
			if (imageHeight > this.resizeTo.height) {
				this.resizeTo.height = imageHeight;
			}
			this.resizeTo.width += $('lightwindow_image_'+i).getWidth();
			this.imageCount--;
 
			$('lightwindow_image_'+i).setStyle({
				height: '100%', width: '100%'
			});
 
			if (this.imageCount == 0) {
				this._processWindow();
			}
		}
	}
 
}.bind(this, i), 1);

If you have any other suggestions or ran into any other problems feel free to post them below and we would be happy to update the post to help others.