I noticed that the audio was behaving well on a few select slides, so I inspected them to see what was different about them. Can you find the solution in this image?

The audio had mistakenly been nudged over a few tenths of a second. When I went back and nudged it on an entire section, it worked perfectly. And you won’t find this on Adobe.

Once again, you’re quite welcome.

<p>To book your travel, please contact Mega World Travel at <NOBR>888-555-1111</NOBR> as soon as possible. More event details coming soon.</p>

If you’re coding on the timeline, main movie.

Say we want to load another SWF and we want to scale it to 50%. Decide at what keyframe in the main movie timeline you want the SWF to load and add the following code:

loadMovie(“my_movie.swf”, “_level5″);
_level5._x=0;
_level5._y=0;
_level5._xscale=50;
_level5._xscale=50;

The level can be any number you want. It just can’t be level 0 – that’s the main timeline. The four lines of code below the loadMovie command place the SWF at the top left corner of the main movie (0,0) and make it 50% size. If and when you want to remove the SWF, you simply place the following code in another keyframe on the main timeline:

unloadMovie(“_level5″);

If you’re coding a button.

If you’re coding a button, simply put the following code into your ActionScript panel:

on (release) {
loadMovie(“my_movie.swf”, “_level5″);
}

For a button to remove the SWF, add this code:

on (release) {
unloadMovie(“_level5″);
}

Notice here that you only need to declare the level of the movie. The code will remove any movie that is occupying level 5. I hope I kept it simple enough for others out there like me who just want to add and remove SWF files.

Fear not! Simply create a symbol to serve as a background in your loaded movie (either matching the main movie bkg color or a transparent box) and add the action below to the instance. Remember to put this instance all alone on the lowest layer of your attached/loaded movie.

on (rollOver) {
this.useHandCursor = false;
}

This miraculously serves two functions. First, it disables all of the buttons below, since you’ve basically created a big button over everything. Second, you’ve hidden the hand cursor on the whole stage while the movie is attached/loaded. And all buttons above this layer will work like a charm.

Get Drupal here

Read more about some very useful Drupal modules below the jump

• Feeds – http://drupal.org/project/feeds (D7 beta)
  Import or aggregate data as nodes, users, taxonomy terms or simple database records.
• Dashboard – http://drupal.org/project/dashboard (D6)
  can create custom views for each user role
  creates a homepage overview of the site that is easy to understand for non-techy folks
• Workbench – http://drupal.org/project/workbench (D7 only)
  integration with media files
  draft view/unpublished items
  integration with workflow and access views via user role
• Reference Preview – http://drupal.org/project/reference_preview (D6)
  when adding a node reference, it allows you to see a preview of the content (teaser + image)
• Block Reference – http://drupal.org/project/blockreference (D6 & D7)
  same as above, but with blocks. Example: reference the sidebar content for a member discount after user has logged into the site.
• Node relationships – http://drupal.org/project/noderelationships (D6)
  allows you to create children of other nodes
• Login destination – http://drupal.org/project/login_destination (D6 & D7)
  Route people to a specific page after login, to the dashboard perhaps, can be edited based on user role.
• Markup – http://drupal.org/project/markup (D6)
  create contextual help within the node creation form
• Node form settings – http://drupal.org/project/settings (D6 – I think this is the right link)
  remove any unnecessary things that may confuse or deter non-techy users.
• Multistep – http://drupal.org/project/multistep (D6, D7 beta)
  splits a giant form into more manageable steps
• Conditional Fields – http://drupal.org/project/conditional_fields (D6, D7 beta)
  enable/disable form fields based on contextual need
• Views Bulk Operations – http://drupal.org/project/views_bulk_operations (D6 & D7)
  able to do bulk actions, based on conditions checked
• Edit View – http://drupal.org/project/editview (D6 only)
  view node edit forms stacked on top of each other, so all can be completed at once
• Editable Fields – http://drupal.org/project/editablefields (D6)
  gives people the ability to edit fields right on the page without going into node edit (works with CCK). Might be a good idea for simple things that a content user could edit a single item but still not give them admin editing access.
• WYSIWYG – http://drupal.org/project/wysiwyg (D6 & D7)
  allows a force cleanup on paste, you can set up different abilities based on user role. Works with CCK.
  ** remember when using this & CCK – only use specific styles from your CSS file available in your dropdown menu… or eliminate the style dropdown completely to help keep content look consistent.
• Media – http://drupal.org/project/media (D7 beta)
  good image/file management tool if this type of thing is needed for your site.
• Browscap – http://drupal.org/project/browscap (D6)
  a module to determine what browser a user is using (for mobile sites or for analytics)
• Wurfl – http://drupal.org/project/wurfl (D6)
  helps detect devices
• Mobile Tools – http://drupal.org/project/mobile_tools (D6, D7 beta)
  a module that assists in making a site mobile-friendly. Detection of user agent, redirect to mobile site, automatic theme switching, integration with Panels and many other features
• Panels – http://drupal.org/project/panels (D6 & D7)
  The Panels module allows a site administrator to create customized layouts for multiple uses.
• CTools – http://drupal.org/project/ctools (D6 & D7)
  required to work with Panels
• Features – http://drupal.org/project/features (D6 & D7)
  this module allows you to capture and export your code into a features module – this is good to do when using panels and you have overly complex code. This can be used as a backup of the code. Easier to recover your panels configurations if they are changed or modified. Recommend “syncing” daily if on a heavy traffic website.
• Arrange Fields – http://drupal.org/project/arrange_fields
  arrange node input fields or web forms with a simple drag & drop interface
• Mega Menus – http://drupal.org/project/megamenu
  allows for fancy dropdown menu features such as icons, images, two-column dropdowns
• Views Slideshow – http://drupal.org/project/views_slideshow
  jQuery slideshow that can create a slideshow of any content, not just images.
• Quicktabs – http://drupal.org/project/quicktabs
  allows you to create blocks of tabbed content
• Webform Alt UI – http://drupal.org/project/webform_alt_ui
  requires other modules to work, but allows drag & drop building of web forms. More of a web forms for dummies ☺
• elFinder – http://drupal.org/project/elfinder
  open source AJAX file manager
• Chosen – http://drupal.org/project/chosen
  jQuery plugin to allow you to select multiple items from a drop-down menu

**note at the time this post was written, Drupal is in transition between Drupal 6 and Drupal 7. Drupal 7 core release is available and stable, however many of the modules have not yet been updated to work with Drupal 7, so a lot of people are still using Drupal 6. This will likely change as modules are updated and Drupal 7 becomes more widely accepted.

In old HTML days we would have had an image file in place (not a CSS background) and apply an image map. Now you might suggest adding a transparent spacer.gif image to apply a link to… or some other fancy schmancy thing… but you can do the whole thing with CSS!!

A co-worker pointed me to this website: http://www.position-relative.com/tutorials/tute1_css_bg_image.php and I want to give them the credit they deserve… but also put the code here so I can quickly reference it.

Here’s what you do:

On the div box which has the background image (for instance box1), make sure the CSS specs have it assigned “position: relative;”.
That is most important to make this work…

Then, create a transparent box in the CSS to create the link:

#box-link {
position: absolute;
top: 8px;
left: 20px;
width: 83px;
height: 83px;
background-color: transparent;
border: 1px solid yellow; }

**make sure to remove the border if you want it hidden

and here is the HTML to create the box link:

<div class=”box1″>
<a id=”box-link” href=”#”></a>
<p>The background of this box is an image.</p>
</div>

and there you have it! tried this out today and it works on all browsers IE7 and newer.

Thanks again to www.position-relative.com for the lesson.

Then I found this website:

The Ten Commandments for Editing Dreamweaver’s Spry Menubars

It was like an awakening… you mean Spry Menus actually DO work on ALL browsers?

The biggest error of most users (at least in my experience) is Commandment II: Thou shalt not edit the styles haphazardly.

Everyone I know seems to make edits to the CSS numerous times without thinking about what the outcome will be, just changing this here and that there, and basically going through a trial and error process until it shows up correctly. This is a very bad idea to do with Spry Menus. They are finicky and don’t like being told to do things they don’t like. They also don’t play well with serious customizations.

If you are going to use Spry Menus, the best bet is to keep it simple. Keep the files the way Dreamweaver set it up for you. Make sure you load all of the javascript files into the right folders on your server and that those relative paths are to the correct folders. Keep the stylesheet for the Spry Menus separate from your main style.css file. Don’t paste the Spry CSS into your style.css file thinking it will work fine… chances are it will not. (I speak from experience here…)

Also when customizing, keep it simple. Edit a color. Test it out. Edit a text style. Test it out. Edit a font. Keep doing small things and testing. Don’t work in the CSS file for 3 hours programming what you think will style the whole nav bar and then test it. Its best to keep building little pieces at a time, so if something breaks it’s easier to find what caused the problem, and it will save you a lot of headaches.

If you keep these things in mind, you will be able to use Spry Menus as a drop down menu system that works across all browsers, even IE. *gasp*

One problem I did encounter is that the code provided by Dreamweaver assumes that you want to style the navigation bar and the dropdown menus the same. For the projects I have worked on, this is not the case, and it took some finagling to get it to work by adding my own code. Here is a code snippet for child menus that are a different style than the parent navigation bar:

ul.MenuBarHorizontal ul li
{
/* this style applies to the li element of child menus. stick to simple block element things and don’t apply your text styles here */
}

ul.MenuBarHorizontal ul a
{
/* this style applies to the links in your child menu. use it for styling the background color, padding, text properties, text decoration, etc. */
}

ul.MenuBarHorizontal ul a:hover, ul.MenuBarHorizontal ul a:focus
{
/*this style applies to hover/focus states of the links in your child menus. apply different colors/styles for those states here.*/
}

I placed this code at the bottom of the “DESIGN INFORMATION” section of SpryMenuBarHorizontal.css which should be found in your sites SpryAssets folder.

A few other things to remember:

• Don’t spec height in your CSS file. Get the desired effect you want by applying padding to your menu link <a> styles.
• Don’t apply padding/margin to the list items, or the <li> items in your CSS.
• Don’t apply width to your links. Width is applied to the parent list item <li> styles. Use display: block; in the <a> styles and that will guarantee that it will fill its parent list item.

These of course are covered in more depth in the The Ten Commandments for Editing Dreamweaver’s Spry Menubars.

Good Luck with your Spry Menus.

However when I thought to make this, I had a very complicated movie, with many layers, embedded movies, and external movies brought in with actionscript. This lead to many re-dos and errors and frustration. Then after some research and trial and error, I was able to get it to work with the ‘_level0.’ code.

This flash button is a global play pause button. It will pause the movie wherever you happen to be in the movie’s timeline, and when you hit play, it resumes where you left off. If you are somewhat savvy with actionscript you could duplicate this button and make a rewind to beginning button too.

Place the button on its own layer above all of your other content on the first frame of your movie. Either at frame (1) or the first frame after any preloaders. Place this actionscript code on the button itself.

onClipEvent (mouseDown) {
if (isStopped) {
isStopped=false
_level0.gotoAndPlay(_level0._currentframe);
_level0.mc_playpause.gotoAndPlay(2);
}else{
_level0.stop();
isStopped=true;
_level0.mc_playpause.gotoAndPlay(1);
}
}

Place this actionscript code on the actions layer of the main timeline at the same keyframe as your button.

var isStopped:Boolean=false;

Download the button you see above, so you can see how it works. This Flash file is CS3, Actionscript 2.0.

<input type=”button” value=” Print ” onclick=”window.print();return false;” />

Print text:

<a href=”#” onclick=”window.print();return false;”>Print</a>

Back button (if you want to style it, you’re on your own):

<input type=”button” value=” Back ” onclick=”history.go(-1);return false;” />

Back text:

<a href=”#” onclick=”history.go(-1);return false;”>Back</a>

Close button:

<input type=”button” value=”Close Window” onclick=”window.close()”>

For the buttons, you can enclose them in form tags: <form></form> if it doesn’t work without them. Enjoy!