Lynda.com > InDesign CS5 Tutorials Interactive Documents & Presentations

Transcription

1 Creating Interactive Documents with PDFs and SWFs Adapted from Chris Converse, Laurie Burruss Pasadena City College Dec 9 3 pm Lynda.com > InDesign CS5 Tutorials Interactive Documents & Presentations Ch. 3.Presentation File Format Options & Tips: Comparing PDF & SWF Presentations 1. Overview Take a look at the finished Interactive Documents (Working Files > Inside_Double_Identity_pdf_swf.indd > Save as with your first/last initials) 1.1. Final Documents > PDF and SWF exports 1.2. Final Documents > SWF Export 2. Styling Your Document 2.1. Creating Paragraph Styles Workspace > Interactive; Windows > Styles: Paragraph Styles & Character Styles Select photo; Window > Text Wrap Wrap around object; Alpha Transparency; 18 pixels; Close Text Wrap Select Text Frame; Cmd + B; Check Preview; 2 Columns; click OK Select Welcome Behind the Scenes ; select Paragraph Styles in ribbon; select Span All; Select Deck Grey text; select Paragraph Styles in ribbon; select Span All; Select Welcome Behind the Scenes ; Hold down Option Key + New Style Button; Rename A Heading; See span included; Click OK; With Welcome text selected, click on A Heading to assign it Select Deck (gray text); Hold down Option Key + New Style Button; Rename Deck; See span included; Click OK; With gray text selected, click on Deck to assign it Select Pages Panel; Double- click Page 2; insert cursor into heading and select A Heading style from ribbon; repeat these steps for Pages 3 and 4; Close Paragraph Styles and Pages Panel Generating an Interactive Table of Contents Choose Layout > Table of Contents; Select A Heading and Add; In Title type In this issue and assign B Heading Style; In Entry Style, select Body; Under Options make sure Create PDF Bookmarks is checked; Click OK With loaded Text Cursor, click and drag box below other text box Select TOC Box; Cmd + B; Make inset 20 pixels; Click X to ignore text wrap (overlay in this case); Click OK Select Pointer Tool; In strokes in ribbon, select 2 px; for color select paper; click on text (TOC); click on Yellow Box to edit corners; drag yellow box to 20 px (ghosted image); readjust bottom to see all text; double- click body text; Cmd + Shift + T (tabs); Drag left side tab in 17 px; drag right tab to right side of ruler; Under leader type a period ; Close tabs Select the text of the TOC topics; Open Paragraph Styles Panel; Note the + means new things added to style; Click Option + New Paragraph Style; Title it TOC Body ; Click OK and make sure the style is assigned Select the Pointer Tool to position the TOC. Lburruss 1 12/9/10

2 File > Export > Adobe PDF Interactive; Save to Folder; When Options open select OK; Will preview in Adobe Acrobat; Note finger icon when rolled over TOC; test click- ability; Look at bookmarks; Note no link style to see text is clickable Creating Character and Nested Styles In TOC box, select Welcome ; Choose gold color in ribbon; Open Character Styles Panel; Select Opt + New Character Style; Name it Link ; Choose Underline with a width of 1 px, solid, offset 1 px, color- gold; Choose Preview; Click OK; Then return Welcome to a Character Style of NONE Open Paragraph Styles Panel; Double- click TOC Body to edit; Select Drop Caps & Nested Styles; Click on New Nested Style; Make sure Preview is checked; Select Nested Link (character styles only here) Up to 1 Tab Characters; Click OK Cmd + 0 for Full Screen; Layout > Update Table of Contents (returns to old style); Select TOC Text Box; Select Layout > TOC; Note Replace Existing TOC is selected now for updating as you make changes; For Entry Style choose TOC Body; Demo UPDATE Exporting via Interactive PDF and SWF Choose File > Export > Interactive PDF; go ahead and replace old version; note hyperlink style works now Choose File > Export > Flash Player (SWF); In Options Dialog Box select HTML, View after export, and also note features like Transitions and Interactive Page Curl; Select OK; No navigation like in the Reader so you must keep Page Curl on until you design a navigation system within InDesign. 3. Making Buttons & Actions 3.1. Creating Buttons with Actions and Appearances Open Pages Panel > Master Page, by assigning Buttons to Master Page appear on all pages Select Rectangle Tool and get the Ellipse; Use Cmd + Opt + Shift to draw Circle in lower right corner of 60 px; Properties: Black stroke, 2 px stroke width; Fill Paper Choose Style > Object > Bevel and Effects with the following properties: Size 7, Soften - 20, Angle 90, Altitude 30, Both Opacities 75%; Click OK Select Window > Styles > Object; Add the Object Styles to other panels; open the Object Styles; Select Option + New Object Style; name the style Button Normal ; Select assign to selection and preview; Click OK; Close Object Style Panel Select Rectangle Tool and draw a square with no stroke and a black fill; rotate with shift key held down 45 degrees; Grab the Pen Tool for deletions and delete an anchor point (triangle now); Select the Direct Selection Tool and pull the point out to left; Scale down the triangle; Place the triangle on top of the Circle Button; Select both the circle and the triangle; Group the two objects Using Object Styles for Interactive Elements With the Button Selected, click on the Buttons Panel; click on Normal (button should appear); Name the button prev (must be unique names here); Select Actions On Release > Go to Previous Page (note different options for different types of output) Click on Roll Over and button copy is added; Double- click and then double- click again to select circle and make the stroke white and the fill black Close Buttons panel; Open Object Style Panel with the black button selected; Select Option + New Object Style; name it Icon Over and make sure it is assigned Select triangle and make its fill white Go back to the Buttons panel and select Button Normal; close the panel; open the Objects Panel; select the triangle (black) and make it have a style called Icon normal Lburruss 2 12/9/10

3 Select the Button in Normal state and hold down Shift + Option to duplicate this Previous Button; In Buttons panel change the name from Prev 1 to next; Delete the old action and add the action Go to Next Page ; then double- click in each state to rotate the triangle to pointing to the right Using Master Pages to Add Interactivity Click on Pages Panel; Then click Cmd + 0 to go to Full Screen; As you move through pages you see that buttons on the wrong layer Return to Master Panel and select both Buttons; Then select the Layers Panel and note that the buttons are on am images layer and move that selection up to the Master Items Return to Pages Panel and you will see the buttons now appear in the right location; Save and Export to PDF or SWF to test the buttons. 4. Finishing the Global Navigation 4.1. Completing the Navigation Bar In the Master Panel, duplicate the button; In the Buttons Panel Convert to Artwork (it is now no longer a button); Draw the Icon by creating 3 Black squares off to the side; Duplicate the 3 Squares and using the direct selection tool pull to one side to create bars; Group all of the objects; Scale and place back on the circle and style with Objects Icon Normal Style In the Buttons Panel, create a new button called Menu and On Release choose to Go to First Page; activate the rollover state; Return to the Object Style menu and change the styles of both the circle and the squares to the appropriate style Cmd + 0 will return you to Full Screen 4.2. Creating Hyperlink Destinations Create Hyperlink Destination for Watch the Trailer In body text add a line at end Watch the Trailer ; Click on Hyperlinks and choose Text Anchor; Then choose the Anchor Watch the Trailer Create Hyperlink Destination for Attend a Premiere 4.3. Creating Hyperlinks Create a button called - Attend a Premiere Text Box Caption Text Style with right facing triangle; Group the two objects; Return to Buttons panel and create two states for the new button; for over make the text and the arrow black using the object styles for the triangle. 5. Designing the Interactive Content 5.1. Nesting Master Pages for Centralized Interactivity Create rounded rectangle frame; copy and drag two photos; use Frame Fitting to scale to frame Create captions for the two images with a copy of the triangle using the Caption Title and Caption Text styles. Lburruss 3 12/9/10

4 5.2. Styling the Interactive Map Go to Page Place the map worldmap.png - and make then make sure it s on the images layer Then select the Buttons layer before creating a button for the cities on the map- button circle with Button Normal style; Override with red fill and paper stroke color; create small circle with white fill for middle; create new object style map dot normal; then fill button with black and created new style map dot over; return to map dot normal; group button bg and dot center; Click on buttons panel; activate normal state and name Seattle (no action yet); activate rollover; select only bg and put object style map dot over on this; return to button normal; Place dot in location on top of map where Seattle is; select dot and map and edit > cut to clip board; Drag Master Page A into Master Page B to create a nested Master Page; double- click on Master Page B; Create a New Master and name it Map page; then edit > paste in place the map and button on this new master page Now drag Map Page B and drag it onto page 4 (no longer has map) Master Page B assigned to page Return to Master Page Map B; check to make sure the button is called Seattle; Return to Page 4 and using Option key duplicate till you have 6 additional map pages (page 10) Return to Page 5 and create a New Hyperlink Destination called Seattle by selecting the text box Attend a Premiere and name it seattle; Create Destination Anchors for the following pages and cities: 5 Seattle 6 Palmas 7 Johannesburg 8 London 9 Tokyo 10 - Sydney Return to Master Page B and select the button; and for destination seattle; Create multiple buttons for each city on Master Page with Go to Destination and Named Anchor matching the name of the city button (see above) Return to Page 4 to see that all the dots are now reflected from Map Master Page B; save file; Export to PDF and/or SWF to test Return to Page 5 to create detail box Using rectangle tool make a box 175 x 125 px, rounded corners by holding shift will only do corners (20 px rounded corner, 20% black fill, stroke - white 2 px); go to Master Page B, select buttons and using layers move them up; Save box as a premiere box object style; another box with one corner at 14 px, stroke paper 2 px, new object style premiere photo; frame fitting options auto- fit; Text tool box with text for each city Seattle (Premiere City), Premiere Country, Premiere Body (1234 Street Rd, time, buy ticket - hyperlink to URL); Double- click on hyperlink to give it link style and then give it red and create new link style called premiere box link; In hyperlinks panel, make sure link has correct style Select the Premiere Box, the Premiere Image Box, and the Premiere Text Box; Copy this selection; Then go to Page 6 in document and paste; Change the theater photo, the name of city and country and the hyper link URL Repeat this for all the cities through Page 10. Lburruss 4 12/9/10

5 Select the Page Transitions Panel; select the transition - Fade, slow; In Bottom right corner click on button to apply to all spreads; select Pages Panel and see icon indicating transitions have been applied Overriding Master Objects Go to Page 1 but we don t need first two buttons Cmd shift and select and delete first button; repeat for menu button Go to Page 10 Cmd + Shift + select last button delete Go to Master Page B Cmd + shift + select Add a Premiere button delete Save and then Export as PDF and Flash SWF You can only see page transitions in PDF in Full Screen; In Presentation in Export Options dialog box, click Open in Full Screen; then click OK. 6. Adding & Controlling Video 6.1. Working with Imported Video Supported formats for video: FLV and FLV Go to Page 3; Select File > Place and in the directory locate in the Links folder the movie_trailer_revised.f4v; Click to place it and then reposition the movie in the composition Open the Media Panel; you can preview your video here as well as select a number of other options Select a Poster Frame from Current Frame by scrubbing the movie 1:04:83; then click on circle to select that frame Under controller, select SkinOverPlaySeekMute; Full Screen not supported in PDF only in SWF player; Check on Show Controller on Rollover; add stroke of Paper 2 px to movie (videos cannot use rounded corners); with video selected move to Media Layers in Layers Panel Save and test as PDF and SWF. The PDF now has the video embedded in the PDF and is stand- alone. The SWF will have a number of docs SWF, HTML, Resources Folder Containing Dependent Files f4v, skins (.swf), etc. You will need all these files to put up on the web Creating Navigation Points (cue points) for Video Go to Master Page A and copy the Next Button; Go back to Page 3 and Paste; Scale down over left corner of movie; Open Layers Panel and move to Buttons layer; Open Buttons panel and name it Play Video; On release delete action; Add choose Video and choose Play; Use object styles to change the look Normal Button Over, Icon Over; For Rollover - double click Button Normal and Icon Normal (remember that they are grouped they should be reversed) To know if movie is done to reset button Hide button after user clicks button; add a second action > show/hide; play video and click and click again to turn off button (eyeball); Now to create a button that starts the video at a certain cue point; click on video; open Media Panel; 48:30 seconds is the actor we want to feature; Under navigation points choose new name denny; click on Text tool and click and drag and type See Denny Hooter; select text and add Paragraph style Caption Title; then select gold color for text; copy a triangle from page 2 and then paste the triangle on page 3; change color to gold 100%; select both and group; open buttons panel; activate normal; on release play from navigation point and select denny; next change rollover state to white for triangle and text; click on button and make sure it s on the buttons layer Save and Export to PDF and SWF Lburruss 5 12/9/10

6 SWF EXPORT ONLY (Demo Final Only) 7. Animation & Multi- State Objects (SWF Export ONLY) 7.1. Using the Animation Panel 7.2. Working with the Timing Panel 7.3. Creating Multi- state Objects 7.4. Controlling Multi- state Objects with Buttons 8. Advanced Interactive Techniques (SWF Export ONLY) 8.1. Adjusting Timing in Multi- State Object Animation 9. Workaround for the Finishing Touches (SWF Export ONLY) 9.1. Resetting the Initial States of Pages 9.2. Adding Artwork for Built- in Interactivity Lburruss 6 12/9/10