Flash for presentations tutorial
This is part of the Flash tutorials
Introduction
- Learning goals
- Learn how to make presentations for talks (instead of PPT)
- Also includes a few hints about product presentations
- Flash level
- CS3 /CS4
- Prerequisites
- Drawing and basic interactivity
- Moving on
- See the Flash tutorials
- Level and target population
- Beginners
- Quality
- Not done yet, therefore lower than low.
To create presentations in Flash there are several options:
- Use Flash CS3/4
- Create with presentation software, e.g. PPT and then convert to Flash
- Use software (including online) presentation software tools that compile to *.swf
In this tutorial we only will focus on the first option, i.e. use Flash to create something that is different and better. See the links section for some conversion or Flash creating presentation software.
Of course, creating presentations with Flash by hand (i.e. using CS3 or CS4) only makes sense if you plan to create some cool animations. Otherwise it's a big waste of time...
Importing from Microsoft PowerPoint
I didn't find any tool or automatic solution, but the following worked in CS4:
- Step 1 - Copy from PowerPoint
- Open PowerPoint (I used 2007)
- Select items in slide (or all with CRL-A)
- Step 2 - Set up the stage
- Set the stage to 800x600 pixels or 1024x768, i.e. the display resolution your projector can handle.
- Step 3 - Paste
- Paste on the stage
- Right-click + Break apart.
This will show hierarchical groups of graphics. For example:
- Boxes for are shapes with 5 elements: 4 lines and the inside shape
- Text in boxes will translate one or several text boxes
- Dotted lines are represented as set of graphics (one fore each dot). Same for curved lines and arrows
- The most funny thing: The bullet lists (that are so much in favor with PPT lovers) translate to bitmaps. However, you can copy/paste these by first creating a textbox and then paste.
Pasting may take a long time since Flash translates most PPT graphics into lots of little shapes...
Using text
According to CS documentation, to use HTML in a text field, one must set several properties of the text field, either in the Property inspector or by using ActionScript:
- Enable the text field's HTML formatting by selecting the Render Text as HTML option in the Property inspector or by setting the text field's html property to true.
- To use HTML tags such as <p>, <br>, and <img>, you must:
make the text field a multiline text field by selecting the Multiline option in the Property inspector or by setting the text field's multiline property to true. Notice: This doesn't work with me (Flash CS4/AS3) :( I only manage with the textArea component or maybe I don't understand what a text field is...
So to create bullets, I rather just copy a bullet symbol.
Flow diagrams
Any shapes somewhere ?
Concept maps
Here is a simple method
- Step 1 - Draw the most important nodes
- Create a background layer
- Draw buttons for the most important concepts
- Link with arrows
- Step 2 - Create frames for each subpart
- Repeat as above
- Link each button to each each frame
Creating buttons
- Since you may want to show extra stuff when you click on a concept make these buttons
- Create buttons
- I suggest to create your own buttons (see the Flash button tutorial)
Alternatively you may change the buttons from the *.fla library
- Open the buttons library
- Select a right button, e.g. from the Oval series
- Drag it to stage
- Unlock the text field and increase the font size, e.g. 20pt
- Click on Edit multiple frames
- Select all the frames of all layers (except the text field !), then increase the size to about 200 or 300% depending on the stage size. Hit CTRL-ALT-S.
- Untick "Edit multiple frames"
- Adjust the graphics if needed
- Lock these layers again
Concept maps with an IK structure
You can use an IK structure if the concept map is hierarchical. To do so you need at least buttons and lines (arcs).
To add an extra button, click in the initial layer (not the armature). Same if you want to add lines and other graphics. These must then be converted to symbols.
Finally, you cannot use component buttons (see the Flash component button tutorial). Too bad. Anyhow, my trials with an IK structure were not conclusive. It's probably better to implement drag and drop plus rubber-banding with some ActionScript code.
Links
- Text
- Working with text (Flash CS3 documentation)
- Using HTML-formatted text (Flash CS3 documentation)
- Formatting text for localized Flash projects using CSS, HTML, and ActionScript (Adobe Flash article)
- Using flash to create slides
- Slide class Flash CS 3 ActionScript 2.0 Components Language Reference. The Slide class corresponds to a node in a hierarchical slide presentation that you create in the Screen Outline pane in Adobe Flash CS3 Professional. The Screens feature has been deprecated in Flash CS3. You can open and edit existing Screens-based FLA files created in earlier versions of Flash, but you cannot create new Screens-based documents. Also, the Slide class is supported only if you are working in a document that specifies ActionScript 2.0 in its Publish Settings.
- Some tools in the the Flash exchange are based on this.
- General
- Hands-on Activity 5: Converting PowerPoint to Flash (A short tutorial with AS2 code, basically it teaches how to use buttons as in the Flash button tutorial)
- PowerPoint to Flash Conversion Tools - Mini-Guide, Part 1. This mini-guide discusses a large list of tools that export to swf (not the topic of this tutorial).
Software
Special purpose presentation software that compiles to Flash, none of these has been tested, so there is no endorsement. Also, this is by no means complete...
See also: presentation software and Multimedia presentation
- Flash slide templates for CS3 and CS4
Lots can be found on the Flash exchange. But they mostly just add buttons and backgrounds, not support for power talks. In the same exchange you can find software to create photo presentations or special effects.
- Vervo Software Flash Templates sells Flash Abstract Slide Presentation (Flash 8 and higher).
- Clean XML Template w/ Thumb Style Slide Show and Contact Form.
- XML SlideShow with Thumbnail Image Tooltip previews.
- The Alpha XML Slide Show
- Creative Slide Show
- Online slide makers
- Sliderocket A web 2.0 application. Basic use is free. Commercial off-line player also available.
- Qarbon Composica Web-based. Commercial (e.g. $1500/year - 2008).
- Concept maps
There is a lot of flash-creating concept map software
- E.g. see concept map
- Free (or half-free) off- line tools
- Powerbullet Presenter ( freeware )
- Wink is a Tutorial and Presentation creation software, primarily aimed at creating tutorials on how to use software (like a tutor for MS-Word/Excel etc). Using Wink you can capture screenshots, add explanations boxes, buttons, titles etc and generate a highly effective tutorial for your users. Windows/Linux
- Commercial off-line tools
Some of these are SCORM 1.2 compliant
- Qarbon Viewlet builder ($300 for Linux(/2008)
- authorPOINT - Presentation Software for Multimedia Flash Presentations and other.
- Flair Presentation, screen capture, quizzes, etc. Commercial.
- Adobe Captivate
- Adobe Presenter
- Camtasia
- Presentia FX
- Articulate Presenter
- Wondershare PPT2Flash Standard
- Wondershare PPT2Flash Pro
- Free PPT to Flash *.swf
- authorPOINT Lite. Free PPT to Flash converter. Pro version is commercial.
- iSpring Free basic version. Also has a free online converter.
- OpenOffice Impress can save to *.swf. Just import the PPT. Then "save as" or export ...
- Commercial PPT to Flash *.swf
- Powerconverter $150 commercial.
- PowerFlashPoint is a PowerPoint (2003/2007) plugin. Commercial
- Sameshow
- PowerPoint to Flash from VeryPdf.com. $50.
- conaito PPT2Flash SDK
- Other converters
- SWF Tools is a collection of SWF manipulation and
creation utilities written by Rainer Böhme and Matthias Kramm. It is released under the GPL. Some supported formats: PDF, JPEG, PNG, GIF, WAV. Also includes scripting and swf manipulation/combination tools.
- PPT to Flash *.fla
- I didn't find any, and that's about the only kind of tool I'd find interesting ...
- Of course, one solution is to produce a *.swf and then use a decompiler.
- Some claim that it is also possible to load the *.swf into the library and then use the graphics. *.swf produced with Open Office 3.0 from PPT and loaded into the library of both CS3 and CS4 made both applications crash. (The Flash player on the other hand didn't crash, but that's no use).
- The only solution that works fine with me (CS4) is to copy paste from PowerPoint. But it translates each graphic shape into lots of little ones ...
Examples
(mostly web sites that demo Flash presentations)
- Rossiterandco portfolio (e.g. Flash Cartoons that Tell Your Story, Flash Popup Presentations to Explain Ideas )