Expert’s Corner | Paul Masters

HDMV Animated Buttons

an easier way

(Not animating buttons? This may help anyway.)

Introduction

One of the new features with Blu-ray Disc is animated buttons.

I am always interested in something new and different. Therefore, the second thing I did when Ibecame able to author an HDMV disc was to give it a try.

The first thing was to create a simple HDMV menu and project. (I had learned my lesson, at least for now anyway. See Experts Corner: DVD to BD-J Transition or Going around in Circles)

Thanks to Christoph Schmidt for his Experts Corner: Real World 3D Example. His step by stepdescription on creating an HDMV menu and project made that learning curve almost a straight line.

Problems always seem to find me and this voyage of discovery was no different.

As with everything, there is an easy way and a hard way. In this case I made my own way. Not as easy and streamlined as I would like, but easier than the hard way.

The following lays out that trek.

The hard way...

An animation is just a series of images. Right?

The documentation we have says animated buttons are available, but they have to be donemanually. No further explanation is given.

Using the menu already created for an HDMV project, I duplicated one of the selected buttonsthree times and rotated each 90E in succession. Not a great animation but enough to test theprocess.

As they were all Selected state, I named the layers S: name and then a number (1 2 3 4). They wereplaced in the layers window with the N: and A: states and in order bottom to top according to theway the DSA PSD is read.

A good guess. And, believe it or not, it almost worked.

The hard way... gets harder.

Importing the PSD into IGEdit worked. Some what.

Everything was there. Actually more was there than was wanted. There wasn’t a button with threestates. There were five buttons. One had the N and A images (no S image) and the other four hadone each of the S ‘animation’ images (no N or A images).

What a mess! What to do?

I guessed that if the button was deleted, it’s related image(s) would disappear as well.I was wrong. Deleting a button does not delete the images. I deleted the four ‘extra’ buttons.

In the button properties window, there is a Start and End Object id Ref. From observation andguessing, I surmised that these fields were used to indicate the start and end images for theanimation. Both fields have the same number if there is no animation for that state.Fortunately, the imported images were together and in the correct sequence numerically.

I put the image number range in the Selected Start and End fields, set the Selected Repeat Flag toTrue so the animation would loop instead of playing once. The Animate Frame Rate Code is in theproperties of the item that all the buttons are under. I set that to one.

Exported the Pes file. Imported to DSA. Compiled the disc. Played it with TMT3.

And there was animation (of a sort) when the button was selected!

There HAS to be a better way!

All of that is OK for a few ‘frames’ of animation. But what about 15 or more? That’s only for one button. What about a number of buttons? Very time consuming.

It is obvious that IGEdit was written for Scenarist because there is an Import Scenarist Format PSDFile option. Not to mention that the field names are somewhat cryptic. (I learned later that they arebased on the BD specification. (It would be nice if they were in English for the rest of us.))

There is also an Import Sonic Scenarist Designer option. What ever that is.

Poking around on the WEB I discovered that Designer is a plug-in for PhotoShop that is supposedto help in creating menus for Scenarist. From what I saw I would hate to do it manually. Actually,I would hate to do it their way at all. You end up with a lot of files and a lot of folders.

Also on the WEB, I found hints about the Scenarist PSD format. Hmmm, if I could find the layoutof the Scenarist PSD, perhaps I could cut out the middle man and create one directly.

Luck turned my way this time. I was given the layout along with some documentation.

It turned out to be different from DSA, not surprising.But not too difficult, which was surprising.

Keep in mind...

Considerations for BD-HDMV: & An HDMV menu is limited to a 16MB buffer.& Graphics are 8 bit, 256 indexed (Alpha+Red+Green+Blue). & Index references a palette of colors.& Alpha channel (transparency) is stored in the palette per color.

PSD layers: DSA format - read ‘bottom to top’. Scenarist format - read ‘top to bottom’.Not critical, but knowing which orientation to use can eliminate changes in IGEdit and save time.

For example, in IGEdit:& The top button in a menu is considered the default when the menu is displayed.& Animated button images may be reversed if not loaded in the correct order.& Setting navigation between buttons is easier because they are listed in the order read.& The first page is the one initially displayed.& An added Page, BOG or Button goes to the bottom of the related group.& While there may be a way to reorder Pages, BOGs or Buttons, I have not found it.

As with BD-J, all HDMV menus are ‘pop up’ and all show on top of a playing video.

There is no way at this time to re-import a PSD and retain existing settings or code!(That ability may be in a future release of IGEdit.)

“The prefix Mam ... just the prefix.” (Sgt. Friday -Dragnet)

The Scenarist PSD format has a lot of groups. However, there is nothing in most of them, exceptfor other groups that is. While Scenarist may make use of the all the groups, we in DSA only haveto work with a few of them, although they are all required by IGEdit.

The only thing of importance are the prefixes. The colon is part of the prefix.The button group is the only one that needs a name.

The following is a short description of the layout with meanings and some notes.

IG: Interactive GraphicsDS: Display Set

P: Page (HDMV menus are like DVD menus in that they have pages.)BOG: Button Overlap Group (More than one button may be in group, only one may be active at a time.)

B: Button (Need a name here for specifying navigation between buttons.)Nx: Normal button imageSx: Selected button image (x is 1 unless animating that state then a sequential number starting with 1.)Ax: Active button image

BG: Common background for a page (overrides Background)Background (notice - no colon)

I haven’t worked with the backgrounds, but would suggest that all backgroundimages and static text be put in the video as when using BD-J looping menus toreduce the buffer usage.

PSDs compared.The same menu. On the left is the DSA format.On the right is the Scenarist format.

See the Experts Corner: Real World 3DExample for explanation of the Init menu / page(or the tutorial).

There are a lot of groups, but the button imagename is similar.

Animationlayers

(The DSA versiondoesn’t have animation.)

Imported to IGEdit.

DSA PSD Scenarist PSD

Imported into IGEdit they look remarkably the same.

Note: The animationimages areunder Selected.

The Start andEnd id Refswere filed in.

(The required Normal image(created inPhotoShop) isnearlytransparent inthe ScenaristPSD.)

Set to true forcontinuousanimation.

Set AnimationFrame Rate inhere.

One thing leads to another.

First a template with IG, DS and the first P groups was created. The idea was to open that, add thebuttons and save as... the menu. (Well...that was easy.)

Wait a minute. After the buttons were imported, they may have to be altered. Cropped to size,remove the background and so forth. Some of that isn’t easy in PhotoShop. Each element has tobe worked on in another document and them moved / copied to the target or saved to a file thenopened in the target. Therefore the buttons have to be done one at a time. (Getting worse.)

Ok, bring in the images of a button, edit as needed and put them under a B group under a BOGgroup. Then move / copy the top group to the target. Usually the three button states are the samebut they don’t have to be. That means each state may have to be done separately. (This is gettingmessy.)

In Sony Vegas, created 3 buttons each with 3 animated states and each animation is ½ second long. Rendered all to .png files with transparent background. Uh, wait a minute...that’s 3x3x15 = 135images. That’s 3 iterations of the above paragraph with 45 images / layers each time.

Have you renamed 135 layers in PhotoShop? Neither had I. Renaming the few layers required forDSA BD-J buttons takes too long as it is. (This is ridiculous!)

...and another.

I know about PhotoShop Actions. I have created one or two simple ones. From that experience Iknow Actions won’t do what is needed.

PhotoShop has scripts. I have never seen one much less written one. I found that they are writtenin JavaScript. I have not written in that either. (By the way, JavaScript is not JAVA.)

Therefore with that wealth of experience, I decided to write one. Actually I wrote two.

They are not ‘elegant’ or pretty. When used in the way they are intended, they work. I know thateveryone who uses them will do so in exactly the way they are supposed to. (Yeah, right! In my40+ years of programming I have many times seen users run programs other than as intended.)

The 90 90 rule of data processing: 90% of the work takes 90% of the time and the remaining 10%of the work takes the other 90% of the time.

90% of the work is done. The scripts work. Perhaps some day I will do the other 10% of the workto make them how I would like them to be.

My part of the scripts is small. The hard work was done previously by others.See the Acknowledgments and Credits page.

The easier way.

The scripts are in the zip file in the BLOG: Scenarist Target.jsx and Scenarist Buttons.jsxCopy them to: C:\ Program Files \ Adobe \ Adobe Photoshop CSx \ Presets \ ScriptsThey will appear in PhotoShop in File/Scripts

The scripts were written in PC PhotoShop CS3. I have no way to tell if they will work in laterversions. They will likely not work in prior versions. They may or may not work on MAC.

They are provided as is. I am not a JavaScript or PhotoShop script expert.For any questions about the usage of the scripts please eMail me at paulemasters@hotmail.comIf you are knowledgeable in these areas and can correct or improve the scripts, please do so andpost them on the forum for all to use.

Due to the scripting operation or my incomplete understanding of it, there are things I do not likeabout the script operation:

& Input data is checked for errors and messages written. If there are errors, the script terminatesand must be run again. All data entered will be lost.

& There is no easy way to limit the length of input. If the first character is Y in the Y/N fields,regardless of any following characters, Yes is assumed.

If you use the dummy Init Page/BOG/Button, as it has only one Normal emptyimage, it may be easier to create it manually after the rest of the menu iscomplete. Remember, it should be the first Page.

The easier way. Step 1 - Creation.

Create the button animation images using what ever means you desire. To avoid extra work:& Frames / layers should have transparent background.& Only one button on the screen.& If from a video editor: Save as .png files. Use a sequential number at the end of the name.& If in PhotoShop: Ensure the layers are in correct order - top to bottom in the layers stack.

Run script Scenarist Target:

This script will create a document with the initial Scenarist format groups.The results of the second script will be placed in this document.Upon completion of the menu, use File/Save as... to save this document with the desired file name.

Enter the names you want for the IG / DS Set and the first Page.All are optional but recommended. Enter the first Page name if there will be more than one.

The remaining fields are setup information for the document. The defaults are for HD.Make any needed changes. Warning: The data is not checked. Be sure all is valid for your needs.Note: This document settings and that of the button frames / documents / layers should be the same.Click on OK or press Enter. Or click on Cancel to exit with out creating a document.

The easier way. Step 2 - Setup button.Process only one button at a time. Regardless of how many frames / layers there are per state, allmay be processed at the same time. If for some reason each state must be processed separately, dothe Normal state first as that will cause the BOG/B groups to be created. When the Normal statenumber is zero, the copy is not done, therefore, the related layers must be manually moved / copiedto the target and put in the correct place in the layers stack.Remember: A Normal button state is required by IGEdit.

At this time, do buttons in reverse order. That is because they will be copied to the target documentand placed at the top of the group, not the bottom. This will make working with them in IGEditeasier.

If the button images are in files, run PhotoShop script Load Files into Stack...Use it to select the range of files to load. Once selected, click Ok and then Ok. The files should be loaded in file name order one per layer with the file name as the layer name.

If the button images are in PhotoShop, switch to that document.

In either case:& Ensure the images are in Normal, Selected, Active order - top to bottom in the layers list.& Ensure the images in each state are in the correct order - top to bottom in the layers list.& Make any adjustments to the images as needed.

The easier way. Step 3 - Process button.Before running this script ensure:

& Layer in target PSD the button is to be paced under is active/selected. It should be correctif Scenarist Target was run, no changes to it were made and no errors have occurred.

& The button work PSD is active, all layers are in the correct order and all selected.

Run script Scenarist Buttons.Enter the number of layers for the Normal, Selected and Active button state to be processed.

The entered values must be numbers, no letters, spaces or special characters.The total of all numbers entered must equal the number of layers selected/active in work PSD.

Enter the button name.Enter the BOG name if it is the first or only button in that group.

Generally there is only one button in a BOG. The name may be the same as the button.Copy to target PSD would normally be Y.Click on OK or press Enter. Click on Cancel to exit with no action.

The selected layers will be renamed to IGEdit Scenarist format.If Normal is not zero the selected layers will be placed in a Button group which will be under a

BOG group if a BOG name was entered.If copy to target PSD is Y and Normal is not zero, the created group(s) will be moved to the target

PSD under the selected/active group.

If more buttons, delete (or close) the current work PSD (to avoid clutter and confusion).Repeat Steps 2 and 3 for the next button.

When the menu is complete, make the target PSD active, add the Init Page/BOG/B groups and empty layer if required, then use File/Save as... to name and place the file as desired.

Scenarist Buttons script checks for some errors and displays a message. In any of those cases,nothing is changed. Except if the Scenarist Target created PSD is not found and you click onCancel instead of selecting one of your open PSDs as a target (see next page). In that case thebutton layers have been renamed and the BOG/B groups have been created.

In case of an unforseen error, the target or work PSDs may be left in a state not conducive torunning Scenarist Buttons (Step 3). If that happens, use the PhotoShop History list to ‘backup’ bothdocuments to reset / clear / undo any operations that were performed.

The easier way. Once more with feeling.

This process was designed for various situations. Some examples.

If more Pages:Remember to add pages top to bottom in the layers stack. May not be able to reorder in IGEdit.When ready for the next page, make the target PSD active and add a new Page layer under the DSlayer. Position it as the last Page. Make that layer active. Continue with Steps 2 and 3.

More than one button in a BOG:Create the last button in the BOG with Steps 2 and 3.Make the target PSD active and make the desired BOG layer active.Continue with Steps 2 and 3 with the buttons in reverse order and make no entry in the BOG name.When done with that BOG, reset the target PSD active layer to the desired Page.

Add a button to an existing Scenarist format menu PSD:Open that PSD. Make the desired layer active (Page or BOG).Perform Steps 2 and 3.If Scenarist Button doesn’t find the document created by Scenarist Target, a list of open documents,not including the current button work PSD, is displayed. Select your document.That is required each time a copy is performed.

The easier way. Variations on a theme.

I hope this helps if you ever want to do HDMV menus with animated buttons.

This process may appear complicated at first. But after doing it once you should find it easy.It is definitely easier and less complicated than the one the Scenarist people have to do.

Even normal HDMV menus could be created with this process. However, the DSA format issimpler and may be quicker to create. I’ll leave that up to you.

The zip file contains this PDF, the complete DSA project, the PSD and a video tutorial.

If anyone has any questions, comments, disagreements, arguments or problems with anything inthis presentation, please post it to the forum and I will do my best to answer.

I hope my perspective on this has been of some help to all.

Thanks for your attention.

Paul Masters

Conclusion

I am not clairvoyant nor do I have $25K+ for Scenarist. The format of the Scenarist PSD and otherinformation was given to me by Valery Koval at DVDLogic after my begging. With out which thiswould not have been possible.

A document at http://www.kahrel.plus.com/indesign/scriptui.html written by Peter Kahrel providedinformation about the data input process of PhotoShop scripts. It was invaluable as the Adobedocumentation is inadequate.

Already written code was found on user fora that is the bulk and ‘hard parts’ of the scripts:Paul Riggott - http://forums.adobe.com/thread/831462?tstart=30

The majority of the code for Scenarist Button - Processing a group of selected layers.Jeffrey Tranberry - http://www.tranberry.com

Make Guides, Document creation. (Scenarist Target)Michael L. Hale - http://forums.adobe.com/thread/829411?tstart=30

Selecting layers, Duplicating layers, Make active by index, Copy to another document.And much help on www.ps-scripts.com.

If you want to see what Scenarist people have to go through, see the tutorials atwww.reykroona.com/?page_id=35

Acknowledgments and Credits