Flash for presentations tutorial: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 102: Line 102:
You can use an [[Flash inverse kinematics tutorial|IK structure]] if the concept map is hierarchical. To do so you need at least buttons and lines (arcs).
You can use an [[Flash inverse kinematics tutorial|IK structure]] if the concept map is hierarchical. To do so you need at least buttons and lines (arcs).


Disadvantage is that you have to kill the IK structure before you can add any extra button ...
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.
 
Anyhow, my trials with an IK structure were not conclusive. It's probably better to implement drag and drop plus rubberbanding with some actionscript code.


== Links ==
== Links ==

Revision as of 19:16, 30 November 2008

Draft

<pageby nominor="false" comments="false"/>

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

Importing from Microsoft Powerpoint

I didn't find any tool or automatic soliton, 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 documention, 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

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

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

Finally, you cannot use component buttons (see the Flash component button tutorial). Too bad.

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.

Anyhow, my trials with an IK structure were not conclusive. It's probably better to implement drag and drop plus rubberbanding with some actionscript code.

Links

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

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.

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

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

Free PPT to Flash *.swf
Commercial PPT to Flash *.swf
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)