Category: mungenet

Step 1: Create the base composition with elements. The first step is to create the base elements in the composition.
1. Create a new composition. Set the size to 760 pixels wide by 100 pixels high.
2. Open the Color palette (Window>Color). Select the Document background color icon and set the color to R=0, G=153, B=153 (web color #009999)
3. File>Place the Adobe Illustrator file ‘extreme_flow.ai’. The source files for this guide are available here: MacOS: sourcefiles.sit.hqx Windows: sourcefiles.zip
4. Window>Transform. In the palette, change the width and height of the placed element to 1024 x 100 pixels.
5. Timeline>Show Timeline Window. Here you can see that the Adobe Illustrator file has been placed as a single encapsulated postscript file (EPS). As we would like to seperate the elements, select the element in the timeline
6. Object>Convert Layers Into>Objects. Now we have two layers created from the layered Illustrator file on our timeline.
7. Timeline>Edit Name… Rename the layers to a name that will make life easier later on. You all name your layers in Illustrator, Photoshop and InDesign … don’t you Layer 2 rename as extremetext Layer 1 rename as waveflow
8. File> Place as Texture. Select the file face.psd. This will tile the Photoshop file as a texture in the black areas of the extremetext layer. The source files for this guide are available here: MacOS: sourcefiles.sit.hqx Windows: sourcefiles.zip

Firstly, thanks for visiting!

My personal tips and tricks are listed to the left.

The Adobe Evangelist’s Photoshop Tips, Tricks and Techniques

Adobe Illustrator Illustrator Examples and Tips

Adobe Photoshop Photoshop Examples and Tips

Realworld GoLive 5.0 Dynamic Link

Lynn Grillo’s GoLive Tips of the Day

Jakob Neilsen’s Jakob Nielsen’s Usability Articles

A List Apart – a good commentary

Webmonkey – the best overview of all things web related.

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.
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
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 .
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.

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
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 ) out to the 02s time on the timeline.
3. Twirl the triangle next to the waveflow layer down, and twirl down the Transform, too. You can now see the elements we can animate over time. Click on the stop watch next to Position. We are now animating the position of the waveform over time. Click on the well to the right of the Position stop watch: This will create a keyframe () 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.
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
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 icon in the Timeline window.

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 Behaviors icon in the Timeline window.
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.
3. Move ahead one frame (hopefully positioned to line up with your first key frame!) and add another behavior ()
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’
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!)
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

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
2. To trigger the behavior, click on the Behaviors icon () and add a simple ‘Go to Label’ behavior. This time, go to the label ‘start-wave’ in the ‘waveanimation’ submovie/Time independent group.
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!

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) 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

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.

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

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.

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.

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.

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:

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.

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

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.

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.

And the final result

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.

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.

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.
2. Menu Layer>New Layer Based Slice
3. From the Rollover palette, create a new rollover state by clicking on the button.
4. Change the Layer Style for the new rollover state. I have used an inner shadow in this example.
5. From the Styles palette, click on the new button. Ensure that “Include Rollover States” is checked.
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.
7. Now the three Layer based slices and rollover states are created.
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.

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.
2. Feather the selection, and Expand the Selection (Select>Feather and Select>Modify>Expand)
3. From the Channels palette, click on the “Create Channel from Selection” button Name the selection something useful.
4. File>Save For Web. The button to click on to access the Modify Quality is the small circle.
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’
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.