Stop-motion Frames

How I Learned to Stop Worrying and Love Frames

Last month I made reference to Kubrick’s last film, Eyes Wide Shut. This month to find an interesting piece of trivia I visited my favourite movie web site, The Internet Movie Database: www.imdb.com, and searched for “stop motion.” Another Stanley Kubrick film was returned on the top of the list: “Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb.” Spooky – or merely a coincidence?

A common question from Premiere users is “How do I create stop-frame motion in Premiere?” Stop-frame video is sometimes called a “strobe” effect. I am sure you remember going to clubs in the 1970’s and 1980’s where a strobe light made all the dancers appear as still in time. At least my dancing looked better this way!

You can capture video using File>Capture>Stop Motion; but what if the clip is already imported? Well, its easy to accomplish – without resorting to filters or effects or exporting single frames of video as pictures and reimporting. Its all in the magic of the ‘Frame Hold Options’ dialog box.

The first step is to place the video clip you wish to have ‘stop framed’ in your Premiere timeline.

By right clicking (MacOS: control click) on this clip on the Timeline and go to Video Options>Frame Hold. (this can also be accessed from the menu Clip>video effects>Frame Hold…

[928] images/sf_01_popupmenu.gif

The Frame Hold Options dialog box appears:

[929] images/sf_02_framehold.gif

The key part to creating the stop motion effect is to adjust the frame rate. This does not alter the original clip, just the rate of playback in the final movie. In the ‘Alternate Rate’ section, place a new frame rate. For instance, if you would like to have a single frame per minute, the alternate rate is 1. For two frames every minute, the alternate rate is 2.

The good news is that audio will play back at normal speed. All we are adjusting is the video component of the movie.

A poster frame can be held during the duration of a completed video clip using the Frame Hold Options dialog box. Just specify “Frame 0” in the Hold frame popup. You can also hold the In point or Out point as the hold frame. The Poster frame special frame in clips. This poster frame is used in the Storyboard feature of Premiere as a user-specified frame that represents the content of the complete clip. It is marked using the Clip>Set Clip Marker>0 (Poster Frame). It can be placed anywhere in the clip. If the frame doesn’t freeze, make sure that you set the marker on a clip and not on the Timeline ruler.

The de-interlace option is important. With a single frame of interlaced video, it may appear jittery or washed out.

You may also need to apply frame blending, which interpolates between available frames to create intermediate frames that can make motion seem smoother. This also creates an interesting ghosting effect. You may or may not want this effect.

According to the Internet Movie Database (www.imdb.com) originally, “Dr Strangelove” filmed in 1963, was to have a custard pie fight and at one point, the President took a pie in the face and fell down, prompting George C Scott’s character to exclaim, “Gentlemen! Our gallant young president has just been struck down in his prime!” Kubrick had already decided to cut the pie fight before the Kennedy assassination, but this line (or possibly even the whole sequence) would certainly have been cut due to its eerie similarity to real events. Spooky.

Faster Editing with Premiere

Faster Editing with your Eyes Shut

Eyes Wide Shut, Stanley Kubrick’s is famous for many reasons: Tom and Nicole’s final film together; Stanley Kubrick’s swan song; and a film renoun for taking nearly eighteen months to film, let alone the time complete many edits.

As you create a video program, the number of source clips and settings you edit and manage become more complex. This can get in the way of your creative flow, so here are some tips and techniques to simplify a complex project and edit efficiently. We don’t all have years to edit our masterpieces, nor wish to expire before delivering the product.

Allocating sufficient RAM

Premiere plays and exports video most efficiently when up to approximately 64 MB of RAM (Windows) or 48 MB (Mac OS) is available to it. You can make more RAM available to Premiere, but above the recommended amounts the performance gains are not as significant. Make sure you aren’t running unnecessary programs, such as custom screen savers, that may be using memory that could be used more productively by Premiere. In Mac OS, leave at least 2 MB of unused RAM so that the system software has room to load additional Mac OS system components such as QuickTime.

Choosing between RAM (physical memory), Hard drive (disk space) or CPU (megahertz or gigahertz; number of CPUs) and Operating System (Windows, Mac) is always a difficult choice.

– Choose an operating system based on your personal taste and depending on who can support you. If you have friends and collegues who can support MacOS, personally, I would choose a Mac. Its these friends who will help out at the cost of a coffee or nice bottle of red

– If using Windows 95 or 98, based on your hardware capture cards and drivers, seriously consider Windows 2000

– If your RAM meets requirements, invest in a second faster hard drive

– If you are using many filters or effects, extra CPU performance and/or a dual processor would be a good investment

– Realtime cards are a boon when editing day in, day out.

Using low-resolution clips or offline files

Large frame sizes take longer to process than small frame sizes. When you edit you are viewing frames nearly all the time, so slow frame display can cause longer editing sessions. For better performance during editing, use low-resolution versions of your clips, or use offline files. Then capture the same clips later using high-resolution settings, and replace the low-resolution versions for recording or exporting the final version of the program.

This process is only effective when you are capturing with device control. Device control captures the timecode on the tape, which enables you to replace frames precisely. Only DV and analog with 3rd party device controllers have this facility.

If you’ve already captured the clips at high resolution, you can use Premiere to export low-resolution versions of them for editing and then substitute the high-resolution clips before recording or exporting the final version. You can also temporarily substitute a still image for a video clip. Using low-resolution or still versions of clips also lets you store more clips in the same amount of disk space.

Using low-resolution versions of clips is standard practice in offline editing, but you may prefer the speed benefits of using offline files even when your system is fast enough for online editing.

You can also create an offline file at any time. To create an offline file:

– Choose File > New > Offline File.

– Type a filename. In general, use the filename of the actual source video that is missing.

– For Duration, type the length for the offline file.

– For Timecode, type the timecode value of the In point of the missing source video.

– For Reel Name, type the name of the reel containing the missing source video.

– Choose a time format from the Format menu that corresponds to the source video.

– Choose a frame rate from the Speed menu.

– Select either or both Has Video or Has Audio, according to the contents of the source video. Then click OK.

[906] images/fe_01_NewOfflineFile.gif

After editing, to replace an offline file with a source video file:

– In a Project or Bin window, select the offline file.

– Choose Project > Replace Clips.

– Locate and select the actual source video file, and click OK.Using keyboard shortcuts

Almost every function in Premiere has an associated keystroke, including some functions that don’t appear as commands or buttons. Some keyboard shortcuts are very fast because they require pressing only one key. Keyboard shortcuts appear next to menu commands and in the Tool Tips for buttons and controls, and are fully documented in the Quick Reference Card that comes with Premiere. Keyboard shortcuts that have no equivalent in menus, tools, or buttons are listed in Premiere’s online Help.

[907] images/fe_02_QRC.gif

For example, when accessing Premiere’s clip properties on Windows, you can use the ALT key in combination with the underlined letter keys in the Clip pop-up menu, or use the keyboard combination listed to the right of the menu command. As a time saver, the arrow keys can be used to navigate through the menus.

Shortcut keys, when available, appear in the Tool Tip after the tool description. To ascertain the keyboard short cut, just move the mouse over an item, and wait for the Tool Tip to appear. For example, the Mark Out button’s Tool Tip displays the letter O (in parenthesis) as the shortcut key to mark an Out point.

[908] images/fe_03_ToolTips.gif

Using bins

During the process of capturing and editing you might accumulate many clips in your project, making it difficult to locate an item in the Project window. Organize items by creating and using bins in the Project window, which are like folders on your hard disk. If you use clips that you want to include in more than one project, you can save bins as files that are stored outside of projects.

To make a bin available for use in other projects, select the bin and choose Project > Export Bin from Project, or right-click (Windows) or Control-click (Mac OS) the bin and choose Export Bin from Project. Then, type a name, choose a location for the bin, and click Save. Bins created and saved in Windows use the extension .PLB. To use the saved bin file in any project, click File > Open, select the bin file (.PLB), and click Open.

[909] images/fe_04_bins.gif

In previous versions of Premiere, you could create containers called libraries, which were used to store clips from one or several projects. A library was stored as a separate file apart from any project. Although Premiere 6.0 doesn’t directly support libraries, you can open a library. The library is converted into a bin when you open it in a Premiere 6.0 project.

Closing unneeded windows and palettes

As you edit, each open window and palette requires processing time to update its display. To lighten the processing load, keep open only the windows and palettes that are necessary. Pressing the TAB key on your keyboard causes all of Premiere’s palettes to disappear and pressing the TAB key again causes the palettes to reappear.

To aid the process in Premiere 6.0, you can save Workspaces. A workspace is a particular configuration of palettes and windows for use later on. Arrange the palettes and windows to your taste, and go to Window > Workspace > Save Workspace. To select and reset your palettes and windows to a saved workspace, just select it from the Window > Workspace menu.

[910] images/fe_05_saveworkspace.gif

Hiding and locking tracks and clips

If you are working on a complex video program with many tracks, you can hide tracks you aren’t currently editing by marking the tracks as shy and then choosing Hide Shy Tracks from the Timeline window menu. To mark a track as shy, press Ctrl (Windows) or Command (Mac OS) as you click the eye icon (for video) or speaker icon (for audio) at the left edge of a track. The icon then appears as an outlined eye (for video) or outlined speaker (for audio)

To hide shy tracks, go to Timeline > Hide Shy Tracks.

If you do not want to modify a track or clip but you still want to see it, you can lock it. This can prevent you from accidentally modifying it.

[911] images/fe_06_ShyTracks.gif

Eyes Wide Shut depicts a couple in having marriage difficulties. Isn’t it strange how life imitates art.

Weighted Optimisation


Weighted Optimisation in Photoshop 6.0

There is a new feature in Photoshop 6.0: Weighted optimisation. This allows a single JPEG or GIF image to have variable compression . There is no special browser plug in required; and is reasonably easy to set up.

It is useful when there is a featured object, or text that must be of high quality, and the rest of the image is needed to be as small as possible.

This module is © 2000 Adobe Systems, Inc and cannot be reproduced without the written consent of the author.

1. Create a selection around the object you wish to have in high quality. [878] images/01_createsel.jpg

2. Feather the selection, and Expand the Selection (Select>Feather and Select>Modify>Expand) [879] images/02_featherexpand.jpg

3. From the Channels palette, click on the “Create Channel from Selection” button[880] images/chanfromsel.gif Name the selection something useful. [881] images/03_channelopts.jpg

4. File>Save For Web. The button to click on to access the Modify Quality is the small circle. [882] images/weightopt.gif [883] images/04_jpegwopt.jpg

5. The black marker on the slider represents the black area in the chosen channel. Therefore, the black areas are getting a greater compression setting in the JPEG compression algorithm. The white end of the slider is having less compression. Areas in between get variable compression depending on the ‘greyness’ [884] images/05_weightoptset.jpg

6. With GIF images, there is no compression per se. Therefore, with GIF compression the Save for Web dialog box changes the lossiness of the GIF which reduces the resulting file size. [885] images/06_withgif.jpg

Imageready Rollovers


Rollover Styles in ImageReady 3.0

ImageReady 3.0 comes with Photoshop 6.0. One of the new features is the ability to create Styles that include Rollover states.

There is a slight nuance, however. You must create the style from a Layer Based Slice.

This module is © 2000 Adobe Systems, Inc and cannot be reproduced without the written consent of the author.

1. Select the layer that you wish to create the slice over. In this instance, I have created a shape that encompasses the rollover. [867] images/01_start.jpg

2. Menu Layer>New Layer Based Slice

[868] images/02_newlayerslice.jpg

3. From the Rollover palette, create a new rollover state by clicking on the [869] images/new.gif button. [870] images/03_newrollover.jpg

4. Change the Layer Style for the new rollover state. I have used an inner shadow in this example.[871] images/layer-style.gif [872] images/04_addstyle.jpg

5. From the Styles palette, click on the new button.[869] images/new.gif Ensure that “Include Rollover States” is checked. [874] images/05_newstyle.jpg

6. Now the style is created, it is a simple matter of dragging this style over the other two layers where you wish to create the rollovers. [875] images/06_dragstyle.jpg

7. Now the three Layer based slices and rollover states are created. [876] images/07_dragstyle2.jpg

8. You may need to optimise your slices as layer based slices are automatically sized to fit the content of the layer. This sometimes leaves “fringing” table cells and images, increasing the complexity of your slice.

Just promote the layer based slices to user slices using the menu Slices>Promote to User Slice

This will allow you to change the slice sizes to get an optimal table and images.

[877] images/08_optimiseslice.jpg

QuarkXpress, PDF, Trapping and Overprint

Overprinting & Trapping in Adobe PDF Quick Note

version 1.2

As Acrobat 5.0 has this new cool “Overprint Preview” feature. And as Barney Kassabian has prompted me, this raises the whole issue of QuarkXpress and overprints/trapping.

Over the last 2 years, I was under the impression that overprints were retained in composite Quark Postscript files. I was only partly correct, or a bit wrong. You choose. To clarify, I have been experimenting.

Overprinting in QuarkXpress 3.32 to Adobe PDF

If you save out of QuarkXpress 3.32 as an EPS, Quark keeps the overprinting settings (as set in the View>Trap Information palette). Distilling this with Acrobat Distiller 4.05 or 5 results in a PDF where the overprint is retained. New in Acrobat 5.0 – you can view this on screen.

[859] images/trap_01_qxp_trapping.gif

However, if you use the Adobe preferred method of “Printing” via AdobePS to the Distiller (Mac: Create Adobe PDF, PC: Acrobat Distiller printers) — the overprinting information is NOT retained in the Postscript.

If you are a Postscript jockey, you can see the simple command is just plain missing from the Printed .ps file:

[860] images/trap_02_2vers_ps.gif

What about QuarkXpress 4.x?

Thankfully, QuarkXpress 4.x exports the “stovp” Postscript command when printing. Other trapping details are NOT retained in the composite Postscript output.

T stovp‘ — set overprint on the next drawn object to true — in English. This particular command (stovp) is defined in both the EPS and the standard Postscript headers of a QuarkXpress 3.32 Postscript file; its a QuarkXpress specific command in their Postscript header. Its just that the Composite Postscript printed from Quark happens to be missing the appropriate overprint command.

If you are wise to the ways of Postscript, or willing to shoot off your own foot, you can insert this command into the Printed postscript file from the the EPS version and viola! you have overprinting in the Printed output. Be warned! This may result in a Postscript file that is no longer valid; it may not RIP; and the Distiller may ‘spit its cookies’ at you. You have been warned. Don’t try this at home. I am a trained professional. Your mileage may vary. Insert standard legal disclaimer here.

The good news in this is that overprint information IS LEFT in the EPS files; placed from Illustrator or Quark generated EPS.

So, what is the recommended workflow? Out of QuarkXpress 3.32, save each page as an EPS file. Place each of these EPS files BACK into a QuarkXpress document (or InDesign document ) and THEN follow the guidelines of Printing to the Distiller via AdobePS.

Please note: you should not nest EPS file inside EPS files inside EPS files. Why not? Each EPS saves a graphic state before srawing its contents; at least once. There is a limit of 15 of these in Postscript 3; and depending on the content in the EPS, the RIP may cause a ‘limitcheck’ Postscript error.

Also please note: When creating and Distilling EPS files from QuarkXpress, note that Quark does not embed the fonts. This restriction forces you to Distill on the creating machine. Otherwise, there is the risk that you create a PDF where the fonts are not embedded.

[861] images/trap_03_qxp_placeeps.gif

And the resulting PDF displayed in Acrobat 5.0 with Overprint Preview turned on:

[862] images/trap_03a_acro5_withoverprint.gif

Another method, albeit more prone to trouble, is taking the EPS files created above and Distilling these directly. The trouble that you might find in this method is that the Distillers “Default Page Size” is used, UNLESS you have “Resize Page and Center Artwork for EPS Files” checked in the Advanved Tab.

[863] images/trap_04_distiller_pagesize.gif

Evidendly, Quark’s Composite postscript output changed in QuarkXpress 4.0x — where the overprinting settings were retained. This is good news.

Trapping

In a slightly similar fashion, QuarkXpress only saves its choking/spreading information when it prints Separations (usually not the default PDF workflow) or if you export as a DCS file. Once you save as a DCS file, you have separated your work. The choking/spreading is not saved when you save as EPS.

How do you “recompose” the separated DCS file/separated QuarkXpress file into a composite PDF? Apart from using a Modern Prepress application like InDesign? Adobe InDesign: Prepress Techniques

Thankfully, CreoScitex have an Acrobat plugin called CreoScitex Seps2Comp You can download a trial version Windows and/or MacOS from their web site.

It takes a multiple page PDF and allows you to “recombine” them into a composite PDF. In theory, common elements will exist in exactly the same place across the different plates. Its a matter of then adding the images/graphics back together and generating a composite image on screen. To do this manually involves creating channels in a Photoshop file (one channel for each of C, M, Y and K) — but you are left with a purely bitmap image.

Here is a screen dump of Sep2Comp in action. Its just a simple matter of applying a certain ink to the page that contains that plate. In Pre-separated Postscript, there is a special command that details how the separation is composed; Seps2Comp reads this and automatically applies the appropriate plate to ink.

[864] images/trap_05_seps2comp.gif

And the final result

[865] images/trap_06_sep_vs_comp.gif

Also good news is that PageMaker 6.x and InDesign 1.x saves composite Postscript with Trapping & Overprinting by default. There is no need for all this jumpling through hoops and funny business.

This is a screen dump of Acrobat 5.0 showing the effect of trapping using the default settings. As many of these traps have been set to overprint – you can see the traps live on screen. Cool.

InDesign 2.0: Generating Composite, Trapped PDFs has more info on how to do with with InDesign 2.0.

[866] images/trap_07_indesign_trap.gif

Adobe’s Support site on Trapping:

Trapping in InDesign 1.x

Trapping in PageMaker 6x

Quark’s Support site has good overviews of Trapping and Overprinting:

Trapping Overview from Quark

Thanks to Shane Stanley for suggesting the nested EPS change; Barney Kassabian for prompting this research & supplying test files; Grant Gittus for running his experienced eyes over my comments.

PDF Forms and Javascript

Acrobat: Forms and Javascript

Don’t want to write CGI? Try this: Adobe Acrobat Reader and Forms Data without Custom CGI

Part 1: Insert into a database.

This note is largely based on the demonstration of Acrobat 5.0 Forms and Javascript I gave at the April 2001 Adobe PDF Days in India and South Asia.

The example Acrobat Forms Zipped FilesPDF and JavaScripts have been zipped here.

Creating the PDF

The first step is to create the base form. Here, the simple form is created in Microsoft Word 2000. Using the PDFMaker, covert the document into a PDF.

Adding the Form Fields

Adding the form fields is a matter of using the Form tool ( i[854] images/forms_tool.gif) to create four fields in the areas as indicated by the original Word areas.

Select form tool and drag out the form field filling to the area required.

You can copy and paste or ight click to copy, right click to paste to duplicate fields.

Double click on the field to edit the Field Properties. The scripts below nominate specific fields

[855] images/01_formfield.gif

Adding a Button

To create a button, use the same field tool as above and create it in the area required. Change the type to Button from the Type: popup menu.

[856] images/02_buttonfield.gif

In the Actions tab, select the Mouseup ‘when this happens…’ and click on the Add button. From the Type: popup, select ‘Javascript’

[857] images/03_javascript.gif

By clicking on the “Edit…” button you can insert the code into the Javascript section. This Javascript is executed when the ‘mouse goes up in the button’ – or in other words, when the mouse is clicked.

The Javascripts

// declare and fill local variables
var lAppName = this.getField("app.name").value;
var lAppAge = this.getField("app.age").value;
var lAppSkills = this.getField("app.skills").value;
var lAppYears = this.getField("app.years").value;

// save to ODBC database on local machine.
// this is named in Control Panels>Administrative Tools>Data Sources
var con = ADBC.newConnection("jobs");
var statement = con.newStatement();

//
var query = "INSERT INTO jobs ( name, age, skills, years) values ('" + lAppName + "','" + lAppAge + "','" + lAppSkills + "','" + lAppYears + "');";

// execute SQL statement on database
statement.execute(query);

Code example 1: Simple ODBC Insertion from a PDF form.

PlanetPDF on ADBC in Adobe PDF Forms

NB: Before this script will work, there needs to be an ODBC database source on your machine mapped to a database containing the table: ‘jobs’. This table will need at least 4 columns defined: ‘name’, ‘age’, ‘skills’ and ‘years’ I use Microsoft Access as my development database. Using Control Panels>Administrative Tools>Data Sources (ODBC) control panel, I have created an ODBC connection to the jobs.mdb file (Microsoft Access). This can be any ODBC datasouce.

[858] images/04_odbc.gif

var lAppName = this.getField("app.name").value;
var lAppAge = this.getField("app.age").value;
var lAppSkills = this.getField("app.skills").value;
var lAppYears = this.getField("app.years").value;

var lWeb = this.getField("web").value;

if (lWeb == "Yes") // we are submitting via a web server
{
var fieldsToSubmit = new Array("app.name","app.age","app.skills","app.years");
// change the http: URL to appropriate server name and/or address
this.submitForm("http://127.0.0.1/jobs.asp#FDF",true,false,fieldsToSubmit);
}
else
{
var con = ADBC.newConnection("jobs");
var statement = con.newStatement();
var query = "INSERT INTO jobs ( name, age, skills, years) values ('" + lAppName + "','" + lAppAge + "','" + lAppSkills + "','" + lAppYears + "');";
statement.execute(query);
}

Code example 2: Extending the example above, showing web submission alternative. The ASP referenced is in code example 3 below.

NB: This Javascript required the ASP in the next code example installed onto the server. The code above points to a server at “http://127.0.0.1/jobs.asp” This IP address is also known as the loopback address — its the same machine as the form is currently running on. Of course with real installations, this would point to a fully qualified domain name where the server-side script is residing. When sensitive information is involved, it is recommended to use a secure socket connection such as https://…

The Active Server Page (ASP)


<%Response.ContentType = "application/vnd.fdf"%>

<%

Set FdfAcx = Server.CreateObject("FdfApp.FdfApp")

Set FDF = FdfAcx.FDFCreate

Set FDFin = FdfAcx.FDFOpenFromBuf (Request.BinaryRead(Request.TotalBytes))

lName = FDFin.FDFGetValue("app.name")

lAge=FDFin.FDFGetValue("app.age")

lYears=FDFin.FDFGetValue("app.years")

lSkills=FDFin.FDFGetValue("app.skills")

set jobsConnection = Server.CreateObject("ADODB.Connection")

jobsConnection.Mode = adModeReadWrite

jobsConnection.Open "jobs"

set jobsRecordSet = Server.CreateObject("ADODB.RecordSet")

jobsRecordSet.LockType = 3

jobsRecordSet.Open "jobs",jobsConnection

jobsRecordSet.AddNew

jobsRecordSet.Fields("name") = lName

jobsRecordSet.Fields("age") = lAge

jobsRecordSet.Fields("years") = lYears

jobsRecordSet.Fields("skills") = lSkills

jobsRecordSet.Update

jobsRecordSet.Close

Response.BinaryWrite FDF.FDFSaveToBuf

FDF.FDFClose

%>

Code example 3: Active Server Page (ASP) using VBScript inserting the fields the form submits in code example 2.

NB: this code example requires an ODBC connection defined named ‘jobs’ This points to a database that contains the table ‘jobs’ with fields ‘name’, ‘age’, ‘years’, ‘skills’

Also installed is the Adobe FDFTK – Forms Data Format ToolKit. The Windows installer is available here.

For More Information

The best resouces for PDF and developer related information is PlanetPDF. More specifically, there is an Indepth Guide here. A fundamental requirement on the server-side is the Adobe FDF Toolkit

Adobe Systems’ information on the Forms feature of Acrobat is here.

Wiring Rollovers


Step 5 Rollovers.

To trigger the Animation, we need to create a Rollover with Behavior attached:

1. Open the Rollovers palette: Window>Rollovers. Click on the ‘extremetext’ layer in the Timeline window. Create another Rollover state by clicking on theNew Rollover State icon [848] images/add_rollover.gif [849] 05rollovers/24_rolloverstate.jpg

2. To trigger the behavior, click on the Behaviors icon ([850] images/behaviors.gif) and add a simple ‘Go to Label’ behavior. This time, go to the label ‘start-wave’ in the ‘waveanimation’ submovie/Time independent group.

[851] images/another_behav.gif

[852] 05rollovers/25_rolloverbeh.jpg

3. File>Preview In> (Choose your favourite browser where the Flash plugin is installed)

You can now see the end result of this work. The wave animation will only trigger when you mouse over the ‘extreme’ text.

Cool!

[853] 05rollovers/26_preview.jpg

Adding Behaviours


Step 4: Behaviors.

Now we have our animation created, we must create some behaviors to control the animation.

1. Move the Current Time Marker (CTM) to the absoluite beginning of the ‘waveanimation’ Time independent group.

Click on the [836] images/behaviors.gif Behaviors icon in the Timeline window.

[837] 04behaviours/18_ctmto0.jpg

2. At the beginning we are going to stop the submovie in its tracks. So label the behavior ‘stop-wave’ Select ‘Stop’ from the Add Behavior pop-up. [838] images/add_behavior.gif [839] 04behaviours/19_addbehaviour.jpg

3. Move ahead one frame (hopefully positioned to line up with your first key frame!) and add another behavior ([836] images/behaviors.gif) [841] 04behaviours/20_adv1frame.jpg

4. Label this animation ‘start-wave’ and add the behavior to play. From the Options area, set the target to our Time independent group, ‘waveanimation’

[842] images/target.gif

[843] 04behaviours/21_playbehav.jpg

5. Finally, move to the end of our timeline and add a final Behavior, this time a ‘Go to Label’

From the options area, select the target as the ‘waveanimation’ and the label as ‘stop-wave’ (created above!)

[844] images/label_target.gif

[845] 04behaviours/22_lastframebehav.jpg

6. We have created our animation and the behaviors. If we preview now, not much will happen. We have to trigger the Time Independent group externally through a rollover.

To jump out of our Time independent group, click on the left-pointing arrow in the Timeline window

[846] images/jump_out.gif

[847] 04behaviours/23_jumpouttig.jpg

Animation


Step 3: Animation & Time Independent Groups.

The next step is to create the Time Independent Group, and animate this ‘submovie’. Think Pulp Fiction – movie inside another movie.

1. Now to create the Time Independent group! Select the ‘waveform’ layer in the Timeline window, Timeline>Make Time Independent Group. Thelayer will jump to the top of the text. Just Object>Arrange>Send to Back. Rename the layer to ‘waveanimation’ by selecting Timeline>Edit Name [825] 03animation/13_createtig.jpg

2. If you now double-click on the ‘waveanimation’ layer, you drill down or jump into this seperate sub movie. Whatever we do inside this simple animation is completely divorced from the master composition. Move to Current Time Marker (CTM [826] images/ctm.gif) out to the 02s time on the timeline. [827] 03animation/14_timelinectm.jpg

3. Twirl the triangle next to the waveflow layer down, and twirl down the Transform, too. [828] images/animate.gif

You can now see the elements we can animate over time. Click on the stop watch next to Position. [829] images/stopwatch.gif We are now animating the position of the waveform over time.

Click on the well to the right of the Position stop watch: [830] images/well.gif

This will create a keyframe ([831] images/keyframe.gif) on the timeline indicating at this time, the position of this element will be where it lives in the composition.

Repeat this at 01s and exactly 1 frame in from the absolute beginning.

[832] 03animation/15_createkeyfr.jpg

4. Move to 0s6frames in and in the composition window move the waveform to the left. This will create another keyframe. So from 0s to 6f in, the waveform will move to this position, and then return to its resting position at 1s [833] 03animation/16_animate6f.jpg

5. Move to 1s6frames in and in the composition window, move the waveform to the right. This will create another keyframe.

You can preview this animation by clicking on the [834] images/play.gif icon in the Timeline window.

[835] 03animation/17_animate1s6f.jpg

Export Settings


Step 2: Export Settings.

Optimising our animation for the web is a critical part of generating Flash-SWF files.

1. View>Active Export Preview. In the Composition window, bottom left hand side you will now see a small icon. This tells us that the element currently selected will take approx 9.25Kb in the final .swf file, and it is a bitmap object.

[818] images/active_export_preview.gif

[819] 02exportsettings/09_activeexport.jpg

2. Window>Styles. Find the style ‘Drop Shadow 3’ Ensure that the ‘extremetext’ layer is selected in the Timeline window and apply this style. To apply a style, just click on the [820] images/apply_style.gif [821] 02exportsettings/10_styles.jpg

3. File>Export Settings. The palette is showing the document level settings. All bitmaps in the final .swf are optimised with these settings. To create object level settings, click on the [822] images/object_settings.gif. [823] 02exportsettings/11_exportsettings.jpg

4. You are now able to tweak the settings for this object (‘extremetext’) – by reducing the JPEG quality and the Opacity Resolution, the element will take less size in the resulting .swf. Set this to the smallest amount whilst not compromising image quality. [824] 02exportsettings/12_objlevelexport.jpg