Embedding Flash Movies in PDFs          STC Technical Communication Summit 2011                    Lance-Robert, twitter@s...
The challenge • Documenting hardware subsystems that change over time     - Frequent page turning required     - Readers c...
The possible solutions       Solution                          Advantages                                 Disadvantages Mu...
The software • Adobe FrameMaker 8     - Purpose:        - Creates document source for the PDF file        - Current versio...
• TechSmith Snagit 10     - Purpose:        - Creates screen captures        - Creates spotlight and callouts in PNG files...
• Adobe Flash CS5 Professional     - Purpose:        - Creates Shockwave Flash/small web file (.SWF or “swiff”) files from...
The process • Block diagrams in Visio     - Create block diagrams for each phase and transition.     - Link diagrams to a ...
- Save the last Visio diagram (phase 1 in this example) as a PDF.        - Select the diagram you want to save.        - S...
• PNGs     - Edit the transition PNGs using Snagit or a similar program.     - Add the highlighting and callouts as requir...
• Flash     - Start the Flash program, and create a new Flash file using ActionScript 3.0.     - Some helpful links on the...
- Layers:        - Create four new layers.        - Label the new layers: actions, labels, diagrams, and buttons.        -...
- Diagrams layer:        - Create three key frames in the diagrams layer at the same ten-second intervals: 10 seconds, 20 ...
- Stage:        - Click the stage, and set the stage size in the Properties tab to fit the diagrams.        - For this exa...
- Buttons layer:        - Insert one keyframe for the entire buttons layer (0 through 30 seconds).        - From the Compo...
- Actions layer:        - Add ActionScript to the actions layer.        - Very important to include the stop() command fir...
“Feel the fear, and do it anyway.”                                 —Susan JeffersEmbedding Flash Movies in PDFs           ...
- Test the Flash movie:        - Move the play head back and forth to view all the frames.        - Save your file.       ...
- Import the SWF into your PDF file:        - In Acrobat, select the Flash Tool from the multimedia toolbar, or select Too...
- Set the Playback Style to “Play content in floating window.”        - Select Create poster from file and browse to the P...
- Click the Select Object tool (arrow).        - Manually position and resize the graphic, if required.        - Click the...
The static demo              Temporal Subsystem (TSS) Phase 1 Configuration                       Processor               ...
The animated demo               Temporal Subsystem (TSS) Phase 1 Configuration                        Processor           ...
The Flash resources • Adobe online     - Flash information and product purchase ($699 new, $199 upgrade, educational disco...
• Acrobat online     - Learning center tutorials        - http://www.acrobatusers.com/learning_center/tutorials     - Acro...
• Flash (SWF) alternatives     - Adobe Flash Catalyst CS5 ($399 new)        - http://www.adobe.com/products/flashcatalyst/...
• Flash classes, resources, and instruction DVDs     - Commercial providers ($)     - San Diego Flash User Group (SDFUG)  ...
• Recommended books, eBooks, and PDFs (O’Reilly 35% discount code: DSUG)     - Flash CS5: The Missing Manual        - Chri...
The contact information • Thank you for attending! • I welcome your questions, suggestions, and comments:     - Lance-Robe...
Upcoming SlideShare
Loading in …5
×

Embedding Flash Movies in PDFs for STC11

2,679 views

Published on

Full version of my Project Showcase presentation at the STC Summit 2011 in Sacramento. Includes information about graphics using Visio and SnagIt, and includes references and software alternatives.

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,679
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Embedding Flash Movies in PDFs for STC11

  1. 1. Embedding Flash Movies in PDFs STC Technical Communication Summit 2011 Lance-Robert, twitter@stc-sd.org
  2. 2. The challenge • Documenting hardware subsystems that change over time - Frequent page turning required - Readers could inadvertently skip pages and miss details • Information must be presented in a format readers can use - Minimal time on the part of the reader - Little, if any, instruction for readers to see results - All information for a given subsystem on a single pageEmbedding Flash Movies in PDFs Page 2 of 28
  3. 3. The possible solutions Solution Advantages Disadvantages Multiple images in • Easiest solution from writer • Frequent page turning required document perspective • Reader can inadvertently skip or lose place • Fairly easy to implement • Scrolling required Online help/HTML • Easy to maintain • Not an option (version control issues) • Looks like a movie or TV show • Can take time to produce, load, and play • Familiar to readers who browse the • Can significantly increase PDF file size Flash video (FLV) web • Might have to be re-filmed if configuration changes • Looks cool, if done right • Can take time to produce, load, and play • Familiar to readers who browse the • Can bring up painful “skip intro” memories Flash animation web • Can be “choppy” and not render well • Can significantly increase PDF file size • Can be difficult to maintain • Loads quickly, no motion • Not nearly as “flashy” • Can be viewed instantly as required • Common reaction is “That’s it?” Flash static movies • No rewinding or fast forwarding • Small increase in PDF file size • Easy to maintainEmbedding Flash Movies in PDFs Page 3 of 28
  4. 4. The software • Adobe FrameMaker 8 - Purpose: - Creates document source for the PDF file - Current version is 10 - Some alternatives for creating PDF files: - Adobe InDesign - MadCap Flare or Blaze - QuarkXPress - Microsoft Word - Any desktop publishing or word processor program that generates PDF files • Microsoft Visio 2007 Professional - Purpose: - Creates block diagrams, PNGs, and PDF of last graphic (phase 1 in this example) - Blocks can optionally use dynamic “data link” to Microsoft Access and other databases - Current version is 2010 (standard, professional, and premium) - Some alternatives for creating diagrams: - SmartDraw (a San Diego company) - Adobe Illustrator - Inkscape - GliffyEmbedding Flash Movies in PDFs Page 4 of 28
  5. 5. • TechSmith Snagit 10 - Purpose: - Creates screen captures - Creates spotlight and callouts in PNG files - Some alternatives for modifying PNG files: - Microsoft Visio - Adobe Fireworks - Adobe Photoshop - Any graphics program that modifies PNG files • Adobe Acrobat 9 Professional - Purpose: - Creates PDF files from document source - Imports and plays Flash SWF files (includes built-in Flash player) - Current version is X (10) - Some alternatives for creating PDF files: - PDFMaker - Various open source and commercial programsEmbedding Flash Movies in PDFs Page 5 of 28
  6. 6. • Adobe Flash CS5 Professional - Purpose: - Creates Shockwave Flash/small web file (.SWF or “swiff”) files from Flash (.FLA) source - Not all Flash movies contain animation - Some alternatives for creating SWF files: - Adobe Flash Catalyst - Adobe Captivate - QuarkXPress - SWISHMax - KoolMoves - Any commercial or shareware program capable of producing SWF outputEmbedding Flash Movies in PDFs Page 6 of 28
  7. 7. The process • Block diagrams in Visio - Create block diagrams for each phase and transition. - Link diagrams to a database using the data link function (optional, but extremely handy). - Change the heading, caption, label, or description for each phase and transition. - Save diagrams as portable network graphics (PNGs), using Visio’s default settings.Embedding Flash Movies in PDFs Page 7 of 28
  8. 8. - Save the last Visio diagram (phase 1 in this example) as a PDF. - Select the diagram you want to save. - Save only the selection, not the whole file, as a PDF. - Saving the diagram as a PDF provides improved resolution in the final PDF, versus the low-resolution Flash default. - In Acrobat, crop the PDF to remove the excess.Embedding Flash Movies in PDFs Page 8 of 28
  9. 9. • PNGs - Edit the transition PNGs using Snagit or a similar program. - Add the highlighting and callouts as required. - Can also use Microsoft Visio, Adobe Fireworks, or other programs.Embedding Flash Movies in PDFs Page 9 of 28
  10. 10. • Flash - Start the Flash program, and create a new Flash file using ActionScript 3.0. - Some helpful links on the Flash start screen: - Getting started: Detailed overview of Flash - New features: What’s new in this version - Developers and Designers: Links to tutorials and code samples - Flash Exchange: Free and paid Flash programs and samples to extend Flash’s capabilitiesEmbedding Flash Movies in PDFs Page 10 of 28
  11. 11. - Layers: - Create four new layers. - Label the new layers: actions, labels, diagrams, and buttons. - Save the FLA file. - Labels layer: - Create three new key frames in the labels layer at ten-second intervals: 10 seconds, 20 seconds, and 30 seconds. - Using the Properties tab, add three new labels to the labels layer: Phase0, Changes, and Phase1.Embedding Flash Movies in PDFs Page 11 of 28
  12. 12. - Diagrams layer: - Create three key frames in the diagrams layer at the same ten-second intervals: 10 seconds, 20 seconds, and 30 seconds. - Import the PNGs into the diagrams layer individually using CTRL-R (Windows) or CMD-R (OS X). - If Flash asks if your diagram is part of a sequence, click No. This prevents Flash from importing all of your diagrams into the same frame.Embedding Flash Movies in PDFs Page 12 of 28
  13. 13. - Stage: - Click the stage, and set the stage size in the Properties tab to fit the diagrams. - For this example, use 600 x 480 pixels. - Center and adjust the diagrams to fit.Embedding Flash Movies in PDFs Page 13 of 28
  14. 14. - Buttons layer: - Insert one keyframe for the entire buttons layer (0 through 30 seconds). - From the Components tab, drag a button to the buttons layer. - Define the button’s instance name in the Properties tab. The first one is Phase0, no space. This matches the name on the labels layer. - Define the button’s label in the Component Inspector. The first one is Phase 0, with a space. - For additional buttons, drag them from the Library. - Define additional button instance names and labels. - Align and distribute buttons with the bottom of the stage.Embedding Flash Movies in PDFs Page 14 of 28
  15. 15. - Actions layer: - Add ActionScript to the actions layer. - Very important to include the stop() command first, lest your movie run in a continuous loop. - Button instance names (Phase0, Phase1, and Changes) move the play head to their associated frame labels and diagrams when clicked. - Additional phases and changes are easy to add: just copy, paste, and edit as required. - Click the check mark to make Flash check your syntax. - Hold on! Isn’t this (gasp!) programming?Embedding Flash Movies in PDFs Page 15 of 28
  16. 16. “Feel the fear, and do it anyway.” —Susan JeffersEmbedding Flash Movies in PDFs Page 16 of 28
  17. 17. - Test the Flash movie: - Move the play head back and forth to view all the frames. - Save your file. - Press CTRL-ENTER (Windows) or CMD-ENTER (OS X) to compress the FLA file and save it as an SWF file. - Click the buttons to ensure they point to the right diagrams. - You can exit Flash at this point.Embedding Flash Movies in PDFs Page 17 of 28
  18. 18. - Import the SWF into your PDF file: - In Acrobat, select the Flash Tool from the multimedia toolbar, or select Tools > Multimedia > Flash Tool. - Double-click the intended location on the PDF page (does not have to be precise). - The Insert Flash dialog displays. - Browse to the SWF file you created and select it. - Leave Snap to content proportions selected (the default). - Click Show Advanced Options.Embedding Flash Movies in PDFs Page 18 of 28
  19. 19. - Set the Playback Style to “Play content in floating window.” - Select Create poster from file and browse to the PDF you made from the Visio phase 1 diagram. - Click OK. - The PDF of the Visio diagram is inserted into the page.Embedding Flash Movies in PDFs Page 19 of 28
  20. 20. - Click the Select Object tool (arrow). - Manually position and resize the graphic, if required. - Click the Hand tool. - The entire graphic you imported is now a clickable “hot spot.” - To see the Flash movie, click anywhere on the graphic. - It takes a little time to load and play the first movie while the Flash player loads, but subsequent movies will play immediately. - To see the different phases and changes, click the buttons as desired. - To exit the Flash movie, click the faint, grey X at the upper-right corner.Embedding Flash Movies in PDFs Page 20 of 28
  21. 21. The static demo Temporal Subsystem (TSS) Phase 1 Configuration Processor Phase Heisenberg RAM Inducer Compensator I/F I/F I/F I/F System Bus I/F I/F I/F I/F ROM Control Timers RegistersFigure 1: Temporal subsystem block diagram (click to activate)Embedding Flash Movies in PDFs Page 21 of 28
  22. 22. The animated demo Temporal Subsystem (TSS) Phase 1 Configuration Processor Phase Heisenberg RAM Inducer Compensator I/F I/F I/F I/F System Bus I/F I/F I/F I/F ROM Control Timers RegistersFigure 2: Temporal subsystem block diagram animation (click to play)Embedding Flash Movies in PDFs Page 22 of 28
  23. 23. The Flash resources • Adobe online - Flash information and product purchase ($699 new, $199 upgrade, educational discounts available) - http://www.adobe.com/products/flash/ - Free 30-day trial (full version, 858.5 MB) - https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash&promoid=GXWGG - Developer connection (getting started guides and tutorials) - http://www.adobe.com/devnet/flash/?navID=gettingstarted - Flash ActionScript 3.0 free samples (10 MB Zip file for all) - http://www.adobe.com/devnet/flash/samples/ - Flash Exchange Community (free and commercial downloads and add-ons) - http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=2&loc=en_us - Flash cookbook (find and share code recipes) - http://cookbooks.adobe.com/flashEmbedding Flash Movies in PDFs Page 23 of 28
  24. 24. • Acrobat online - Learning center tutorials - http://www.acrobatusers.com/learning_center/tutorials - Acrobat Development Center - http://www.adobe.com/devnet/acrobat/index.html?view=home - Acrobat development documentation - http://www.adobe.com/devnet/acrobat/index.html?view=documentation - Acrobat JavaScript reference - http://www.adobe.com/devnet/acrobat/javascript.html - PDF Developer Junkie blog - http://blogs.adobe.com/pdfdevjunkie/ - UVSAR blog, includes Advanced Video in Acrobat 9 Pro webinar (July, 2010) and replacement SWF player - http://www.uvsar.com/go/auc7Embedding Flash Movies in PDFs Page 24 of 28
  25. 25. • Flash (SWF) alternatives - Adobe Flash Catalyst CS5 ($399 new) - http://www.adobe.com/products/flashcatalyst/ - Adobe Captivate CS5 ($799 new, $299 upgrade) - http://www.adobe.com/products/captivate/ - Qarbon ViewletBuilder 6 ($399 new, $199 upgrade) - http://www.qarbon.com/presentation-software/viewletbuilder/ - QuarkXPress 8 ($799 new, $299 upgrade) - http://8.quark.com/ - http://quark.com/about/web_seminars/ - SWISH Max 4 ($105) and miniMax 4 ($49), Windows only - http://www.swishzone.com - KoolMoves ($49) and KoolWizard ($25), Windows only - http://koolmoves.com/index.html • Flash on the iPad and iPhone? - Frash: Adobe Flash on iOS - http://appadvice.com/appnn/2010/07/flash-now-on-ios/ - Gordon: Open source Flash runtime written in JavaScript runs Flash on the iPhone and iPad - http://www.9to5mac.com/flash-javascript-iphone-gordon-63453645 - Skyfire mobile browser - http://www.skyfire.com/Embedding Flash Movies in PDFs Page 25 of 28
  26. 26. • Flash classes, resources, and instruction DVDs - Commercial providers ($) - San Diego Flash User Group (SDFUG) - http://sdfug.org - Lynda.com online classes and DVDs ($) - http://www.lynda.com/home/websearch.aspx?q=Flash - Virtual Addiction’s Flash CS4 Essential Training DVD by Emily Kay (12 hours, $45) - http://virtualaddiction.com/ - iTunes U Flash and Actionscript classes (free) - http://apple.com/itunes - Local community colleges - San Diego Continuing Education (free, sample class listing below) - http://sdce.edu/Embedding Flash Movies in PDFs Page 26 of 28
  27. 27. • Recommended books, eBooks, and PDFs (O’Reilly 35% discount code: DSUG) - Flash CS5: The Missing Manual - Chris Grover, O’Reilly Media, ISBN 978-1-449-38025-0 - Creating a Web Site with Flash CS4: Visual QuickProject - David Morris, Peachpit Press, ISBN 978-0-321-59151-7 - ActionScript 3.0: Visual Quickstart Guide - Derrick Ypenburg, Peachpit Press, ISBN 978-0-321-56425-2 - Adobe Flash CS4 Professional HOW-TOs: 100 Essential Techniques - Mark Schaeffer, Adobe Press, ISBN 978-0-321-58004-7 - Flash Out of the Box (Flash MX 2004) - Robert Hoekman, Jr., O’Reilly Media, ISBN 978-0-59600-691-4 - Flash Hacks: 100 Industrial-strength Tips and Tools (Flash MX 2004) - Sham Bhangal, O’Reilly Media, ISBN 978-0-596-00645-7 - Official SWISHMax Bible - Donna L. Baker, Wiley Publishing, ISBN 978-0-76547-563-1Embedding Flash Movies in PDFs Page 27 of 28
  28. 28. The contact information • Thank you for attending! • I welcome your questions, suggestions, and comments: - Lance-Robert (Lance to my friends) - twitter@stc-sd.org • Twitter feed for the San Diego and Orange County STC Chapters, includes job links: - http://twitter.com/STCSoCalEmbedding Flash Movies in PDFs Page 28 of 28

×