• Home
• ·
• Classes
• ·
• Services
• ·
• Projects
• ·
• Contact

Adobe Flash for Beginners - Interactivity & Video

Class Description: Allow users to interact with your Flash creations by adding buttons and ActionScript 3.0. Start off by creating both visible and invisible buttons, then learn how to add the ActionScript required to launch web pages, play sound effects and jump between different parts of the Flash timeline. Create a multimedia project in which user mouse-clicks play and stop external audio. Discover the ease at which your home videos can be converted to web-ready, Flash videos, complete with interactive playback controls. This class is designed to get you rolling in the exciting world of ActionScript.

1. General Information about this Class

Unlike the first class - Adobe Flash for Beginners - Graphics & Animation - this class focuses on making interactive Flash files. While there are many ways you may allow a user to interact (for example, with their mouse, keyboard, microphone etc.), this class focuses on mouse interaction only.

Allowing for mouse interactivity in a Flash file is a two-part process. First you create a Button Symbol for a user's mouse to interact with...then you associate ActionScript with that button - the ActionScript is written to perform a certain task(s)

Developing the visual look of a button is relatively easy compared to 'ActionScripting' the button which requires you to work with a robust scripting language.

This class is designed to keep things simple, namely, the ActionScript 3.0 code has been written for you. While this class is not designed to teach you the ActionScript language, it will provide you with some immensely valuable lessons including:

1. What ActionScript 3.0 looks like
2. How to add ActionScript to an .fla file
3. How objects on the stage or in the Library are prepped to work with ActionScript
4. How to identify basic pieces in an ActionScript code
5. How to make minor modifications to an ActionScript code
6. How to detect errors in an ActionScript code

2. Important Settings for Class

1. Reset the Flash workspace - Window > Workspace > Classic and/or Window > Workspace > Reset 'Classic'
2. Set the Drawing Mode to Object Drawing in the Toolbar
3. Under Flash Preferences for ActionScript - set keywords to bright Red

3. Flash Button Symbols

A Button Symbol has it's own timeline and that timeline is divided into four frames known as states:

1. Up state - A button's look with no mouse contact
2. Over state - A button's look with mouse contact (but without a click) - a.k.a. rollover
3. Down state - A button's look when the mouse is clicked
4. Hit state - The invisible active area of the button (it often needs not be defined)

The timeline of a Button Symbol may have a single or multiple layers.

The Flash Button above is like a car without an engine. From the outside it looks like it should work, but when you turn the key (click), nothing happens. This is because ActionScript functionality has not been added.

Exercise 1: Create a Flash Button (including ActionScript 3.0 Functionality)

In this first exercise we will create a simple button from a Pepsi logo. The button will be ActionScripted to launch a webpage (pepsi.com), in a blank browser window, when clicked on by a user. The graphics that make up the button will come from an imported, Adobe Illustrator file. As a review, we will also import a Photoshop file (the Pepsi Can) and apply a Filter to it.

Credit (and with much thanks to): Pepsi Logo - brandsoftheworld.com/ | Sounds Effect - partnersinrhyme.com/ | Pepsi Can - israelavila at Flickr Creative Commons

• Note: some ActionScript functionality has been disabled in the button below

Step by Step »

1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new, Actionscript 3.0 file
   • In the Properties Panel, set the Frame Rate (FPS) to 12
   • Note: This file will not be animated - so the Frame Rate is really a moot setting
2. In the Properties Panel, change the Stage color to #666666
3. Save your file as ex-1.fla
4. In the Toolbar, select the Selection Tool
   • Demo: The pepsi-can.psd file
5. From the Menu Bar, go to File > Import > Import to Stage
6. Choose pepsi-can.psd as the file you want to Import
7. In the .PSD Import dialogue box, set the following:
   • Convert Layers to: Flash Layers
   • check 'Place objects at original position'
   • check 'Set stage size to same size...'
   • check 'Bitmap image with editable layer styles' - this creates a Movie Clip of the image layer allowing Filters to be added
   • Be sure the layer is set to Lossy
8. With the Selection Tool, select the Pepsi can
9. With the can selected, go to the Filters section of the the Properties Panel
10. At the bottom of the Filters section, click the "Add filter' icon and choose Drop Shadow
11. Style the Drop Shadow Filter to taste
12. Lock the 'pepsi-can' layer
    • Demo: The pepsi-logo.ai file
13. From the Menu Bar, go to File > Import > Import to Stage
    • Note: if the Import to Stage is grayed out - be sure the locked pepsi-can layer is not selected
14. Choose the pepsi.ai as the file you want to Import
15. In the .AI Import dialogue box, set the following:
    • with the 'pepsi-logo' layer selected, check the Create movie clip box to the right
    • be sure to set Convert Layers to: Flash Layers
    • check 'Place objects at original position'
    • DO NOT resize the stage
16. Once imported, select the Pepsi logo
17. In the Properties panel, confirm that the Pepsi logo is a Movie Clip (instance)
18. Position the Pepsi logo with your mouse and/or keyboard arrow keys
19. Save your file
20. Test your movie
21. With the Pepsi logo selected, right-click and choose Convert to Symbol
22. In the Convert to Symbol dialogue box, set the following:
    • choose Type: Button
    • enter 'btn-pepsi' for the name
23. Save your file
24. Test your movie
25. Test your button
26. In the Toolbar, select the Selection Tool
27. On the stage, right-click the Instance of 'btn-pepsi' and choose Edit in Place
    • Note: under the Timeline (to the left), you should now notice a Breadcrumb Trail
    • Note: you are no longer working on the Main Timeline (Scene 1) but rather in the Button Symbol's Timeline
28. Select the Over frame of your button, right-click and choose Insert Keyframe
    • Notice that Flash has auto-copied the contents of the Up frame into the Over frame
29. Move down to the stage and select the Pepsi logo
30. With the can selected, go to the Filters section of the the Properties Panel
31. At the bottom of the Filters section, click the "Add filter' icon and choose Drop Shadow
32. Style the Drop Shadow Filter to taste
33. Move back up to the Button Symbol Timeline and select the Down frame, right-click and choose Insert Keyframe
    • Notice that Flash has auto-copied the contents of the Over frame into the Down frame
34. Move down to the stage and select the Pepsi logo
35. In the Toolbar, select the Free Transform Tool
36. Use the Free Transform Tool to give the Pepsi logo a slight, clock-wise rotation
37. When done, in the Toolbar, select the Selection Tool
38. Return to the Main Timeline (Scene 1)
39. Save your file
40. Test your movie
41. Test your button
    • You should notice there is a problem with the button - namely, in-active areas
42. In the Toolbar, select the Selection Tool
43. On the stage, double-click the Instance of 'btn-pepsi' to go into Symbol Edit Mode
    • this is another way getting into Symbol Edit Mode
    • Note: in this Symbol Edit Mode, you loose the surrounding context
44. Return to the Main Timeline (Scene 1)
45. On the stage, right-click the Instance of 'btn-pepsi' and choose Edit in Place
46. Select the Up frame of you button
47. Move down to the stage and select the Pepsi logo
48. Copy the Pepsi logo (from the Menu Bar choose Edit > Copy)
49. Select the Hit frame of your button, right-click and choose Insert Blank Keyframe
50. From the Menu Bar, go to Edit > Paste in Place
51. In the Toolbar, select the Rectangle Tool
52. Prior to drawing, in the Tool Bar, be sure to define a fill color (for example, red)
    • For practice, turn the stroke off by setting its color to blank
53. With the Rectangle Tool, click and drag two, filled rectangles to cover the pepsi logo
54. Return to the Main Timeline (Scene 1)
55. Save your file
56. Test your movie
57. Test your button
58. In the Toolbar, select the Selection Tool
59. Select the Pepsi button
60. In the Properties Panel, give the Pepsi button an instance name of 'myBtn'
    • Your Instance Name will need to match the pre-written, ActionScript code - spelling and case-sensitivity counts
61. Lock the 'pepsi-logo' layer
62. Create a new layer and name it 'actions'
    • it is very common for Flash developers to create a separate layer to hold their ActionScript code
    • it is also very common to name that layer 'actions'
    • the 'actions' layer is normally placed at the top of the layer stack
63. Move the 'actions' layer to the top of the layer stack
64. Lock the 'actions' layer
    • NOTE: you can add ActionScript code to locked 'actions' layer
65. In the Menu bar, go to File > Open - open the flash-02.as
66. Drag through (select) then copy (cmd/ctrl + c) the pepsi code
67. Flip back to the ex-1.fla
68. Highlight the Blank Keyframe in the 'actions' layer
69. From the Menu Bar, go to Window > Actions to open the Actions Panel
70. With the Blank Keyframe of the 'actions' layer selected, place your cursor in the Actions Panel and paste (cmd/ctrl + v)
    • note the ActionScript symbol in the Blank Keyframe
71. Save your file
72. Test your movie
73. Test your button
    • Demo: Flash Security Warning

Let's have a quick look at the ActionScript 3.0 code you applied:

1. This is the Instance Name of the Pepsi button - the link between ActionScript and object.
2. Your Pepsi button will be listening for...
3. a mouse Event....
4. specifically, a Click.
5. When a click is heard (so to speak), something called 'pepsiPage' will happen.
6. 'pepsiPage' is a Function that...
7. reaches out to pepsi.com...
8. and opens the Pepsi home page in a Blank Browser Window

Exercise 1b. Adding a Rollover Sound Effect to your Pepsi Button

Step by Step »

1. From the Menu Bar, go to File > Save As
2. Save your file as ex-1b.fla
3. In the Toolbar, select the Selection Tool
4. From the Menu Bar, go to File > Import > Import to Library
5. Select and import the pepsi.wav sound file
6. Open the Library Panel (from the Menu Bar, go to Window > Library)
7. Select pepsi.wav
   • Note: you can play sound effects in the Library
8. Right-click on pepsi.wav and choose Properties...
9. Be sure the Sound Properties dialogue box is fully open by clicking the Advanced button
10. In the Sound Properties dialogue box, set the following:
    • choose 'Export for ActionScript'
    • enter 'pepsiSoundFX' for Class:
    • The Class will need to match the pre-written, ActionScript code - spelling and case-sensitivity counts
11. Hit OK
12. Hit OK for the ActionScript Class Warning that follows
13. In the Menu bar, go to File > Open - open the flash-02.as
14. Drag through (select) then copy (cmd/ctrl + c) the second pepsi code
15. From the Menu Bar, go to Window > Actions to open the Actions Panel
16. Select the Blank Keyframe in your 'actions' layer
17. In the Actions Panel, select and delete the old code
18. Paste (cmd/ctrl + v) the new code into the Actions Panel
19. Save your file
20. Test your movie
21. Test your button

Let's have a quick look at the NEW ActionScript 3.0 code you applied:

1. This again is the instance name of your Pepsi button - the link between ActionScript and object.
2. Your Pepsi button will be listening for...
3. a mouse Event....
4. specifically, a Mouse Over (a.k.a. rollover).
5. When a rollover is felt (so to speak), something called 'pepsiSound' will happen
6. 'pepsiSound' is a Function that...
7. looks internally for 'pepsiSoundFX' (which you assigned in the Library)
8. and plays it (on mouse over).

Exercise 2: Creating an Invisible "Hotspot" Button

There may come a time when you find yourself in need of mouse interactivity, but not in need of an visible, graphic button - enter the invisible (hotspot) button in Flash.

The animation below illustrates what an invisible buttons looks like. As you roll over the entire piece, your mouse cursor should be a hand icon - but note, there is no visible button.

Step by Step »

1. From the Menu Bar, go to File > Open
2. Choose ex-2.fla
3. In the Toolbar, select the Selection Tool
4. Create a New Layer and re-name it 'hotspot'
5. Move the 'hotspot' layer to the top of the layer stack
6. Lock all other layers to avoid mistakes
7. In the Toolbar, select the Rectangle Tool
8. Prior to drawing, in the Tool Bar, set the following:
   • be sure to define a fill color (for example, red)
   • turn the stroke off
9. With the Rectangle Tool, click and drag a rectangle on your stage
   • Don't worry about the size - we'll take care of that next
10. In the Toolbar, select the Selection Tool
11. Select the rectangle
12. From the Menu Bar, go to Window > Align
13. In the Align Panel, be sure to click To stage:
14. Click the Match width and height button - Your rectangle resizes to match the stage
15. To align your rectangle to the stage, click the Align horizontal center button and the Align vertical center button
16. Select your rectangle, right-click and choose Convert to Symbol
17. In the Convert to Symbol dialogue box, set the following:
    • choose Type: Button
    • enter 'btn-hotspot' for the name
18. On the stage, right-click the Instance of 'btn-hotspot' and choose Edit in Place
19. To create an invisible button do the following:
    • click the Up keyframe and release the mouse - then...
    • click and drag the Up state Keyframe to the Hit state
20. Return to the Main Timeline (Scene 1)
    • the cyan color you see is your invisible, hotspot button
21. Be sure your Button extends through the entire animation
    • If it doesn't, right-click and choose Insert Frame in the appropriate place
22. Save your work
23. Test your movie
24. Test your button
    • Demo: Re-using ActionScript code

Exercise 3: Using Buttons to Play & Stop Externally Loaded Audio

In this exercise we will create a 'multi-media' piece. The multi forms of media will be bitmap, vector, audio (.mp3) and text. ActionScript 3.0 functionality will be added, allowing users to play and stop the audio by clicking on Flash buttons.

Credit (and with much thanks to): Tiger Image - sxc.hu (stock.xchng for free/low cost stock photography) | Tiger Vector - commons.wikimedia.org

Audio: The audio in this exercise was recorded with a Logitech USB Desktop Microphone ($20 +/-). For higher quality recordings you may want to consider a Samsung USB Mic - ($100 +/-). For editing your recordings I highly recommend both WavePad and Audacity

Step by Step »

1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new, Actionscript 3.0 file
2. Save your file as ex-3.fla
3. In the Toolbar, select the Selection Tool
   • Demo: The tiger.ai file
4. From the Menu Bar, go to File > Import > Import to Stage
5. Choose the tiger.ai as the file you want to Import
6. In the .AI Import dialogue box, set the following:
   • Be sure the text within the 'title-text' and 'url-text' layers is set to Editable text at right
   • With the 'logo' layer selected, check the Create movie clip box to the right
   • Be sure to set Convert Layers to: Flash Layers
   • Check 'Place objects at original position'
   • Check 'Set stage size to same size...'
7. After import, immediately lock the 'tiger' layer
8. With nothing selected, in the Properties Panel, change the Stage color to #666666
9. With the Selection Tool, select the tiger logo
10. Use the keyboard arrows to nudge the logo up - to taste
    • Adding SHIFT while using keyboard arrows increases the nudge increment
11. With tiger logo selected, in the Properties Panel, in the Color Effect section, under the Style: drop-down menu, choose Tint
12. Use the Tint color picker to sample an orange from the tiger image (i.e. from the fur)
13. Lock the 'logo' layer
14. With the Selection Tool, select both blocks of text
    • using the SHIFT key allows you to select more than one object at a time
15. In the Properties Panel, change the font color for both blocks to white
16. De-select your text blocks by clicking off the stage
17. Select only the title text
18. Change the font to one of your own choosing
19. Lock both the 'title-text' and 'url-text' layers
20. With nothing selected, in the Properties Panel, change the Stage color to black
21. Save your file
22. Test your movie
23. In the layers section of the Timeline, turn off the visibility of the 'image' layer
24. Create a New Layer and name it 'gradient'
25. Drag the 'gradient' layer to the bottom of the layer stack
26. Select the Rectangle Tool from the Toolbar
27. In the Tool Bar (prior to drawing), set the following:
    • fill color to bright green
    • stroke to none
28. Drag out a rectangle on the stage - do not worry about the size
29. In the Toolbar, select the Selection Tool
30. Select the rectangle
31. From the Menu Bar, go to Window > Align
32. In the Align Panel, be sure the To stage: button is checked
33. Click the Match width and height button - Your rectangle resizes to match the stage
34. To align your rectangle to the stage, click the Align horizontal center button and the Align vertical center button
35. From the Menu Bar, go to Window > Color
36. With your rectangle selected, in the Color Panel, click the the Type: drop-down menu and choose Linear
    • If needed, in the Color Panel, change the Gradient color chip(s) so you have an obvious gradient
37. From the Menu Bar, go to View > Zoom Out
38. In the Toolbar, select the Gradient Transform Tool
39. With the Gradient Transform Tool, select your rectangle
40. Locate the rotate gradient icon in the corner of your rectangle
41. Click and drag the rotate gradient icon to rotate your gradient 90 degrees clockwise
42. Locate the gradient resize icon on the side of your rectangle
43. Click and drag gradient resize icon until you gradient fits your stage
44. In the Color Panel, change the Gradient color chip(s) so black is at the bottom, dark gray at the top
45. Lock the "gradient" layer
46. Save your file
47. Test your movie
48. Select the top-most layer in your layer stack
49. Create a New Layer
    • New layers are added above the layer currently selected
50. Re-name the new layer 'buttons'
51. In the 'buttons' layer timeline, select Blank Keyframe 1
52. From the Menu Bar, go to Windows > Common Libraries > Buttons
53. Navigate to the Classic Buttons > Push Buttons folder
54. Drag out 2 Push Buttons under the title text - one green (to the left), one red (to the right)
55. Close the Button Library
56. Lock the 'buttons' layer
57. Save your file
58. Test your movie
59. Create a New Layer and rename it 'actions'
60. Lock the 'actions' layer
61. Highlight the Blank Keyframe in the 'actions' layer
62. In the Menu bar, go to File > Open - open the flash-02.as
63. Drag through (select) then copy (cmd/ctrl + c) the tiger code
64. Flip back to the ex-3.fla
65. From the Menu Bar, go to Window > Actions to open the Actions Panel
66. Into the Blank Keyframe of the 'actions' layer, place your cursor in the Actions Panel and paste (cmd/ctrl + v)
    • note the ActionScript symbol in the Blank Keyframe
67. Save your file
68. Test your movie
    • Notice that flash tells you, via the Output Panel, that there is a problem with the file
69. Find the Button Instance names referenced in the code
70. Add the Instance Names, referenced in the code, to the Buttons on the stage in the Properties Panel
71. Save you file
72. Test your movie
    • Demo: Changing the .mp3

Let's have a quick look at the ActionScript 3.0 code you applied:

1. This code goes out and retrieves the external, tiger.mp3
2. These are the Instance names of your buttons
3. These are the Functions that are triggered by clicking on the buttons
4. The playMusic function causes the audio to play
5. The stopMusic function causes the audio to stop

Exercise 4: Using Buttons to Navigate within the Flash Timeline

In this exercise we will create a Flash piece with a navigation system that jumps to different points on the Timeline. To make this possible, we will use Buttons, Frame Labels and ActionScript 3.0. Frame content will be provided by shapes with bitmap fills (from imported bitmap files).

Credit (and with much thanks to): Patterns: squidfingers.com/

Step by Step »

1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new, Actionscript 3.0 file
2. Save your file as ex-4.fla
3. In the Toolbar, select the Selection Tool
4. In the Timeline, create 5 layers and re-name them, from top to bottom:
   • actions
   • labels
   • buttons
   • text
   • patterns
5. Lock all 5 layers
6. In the Menu Bar, go to File > Import to Library
7. Import the 5 .gif files
8. Unlock the 'patterns' layer
9. In the 'patterns' layer timeline, select Blank Keyframe 1
10. Select the Rectangle Primitive Tool from the Tool Bar
11. In the Tool Bar (prior to drawing), set the following:
    • fill color to red
    • stroke color off
12. Drag out a Rectangle Primitive on the stage
    • Don't worry about the size - we'll get to that next
13. In the Toolbar, select the Selection Tool
14. Select the Rectangle Primitive
15. In the Properties Panel, set the following properties for the Rectangle Primitive
    • W: (width) to 580px
    • H: (height) to 290px
    • set Rectangle Options to 22 (for all 4 sides)
16. With nothing selected, in the Properties Panel, click the Edit button (to change the Stage size)
17. In the Document Properties dialogue box, select 'Contents' - then exit
18. With nothing selected, in the Properties Panel, again click the Edit button
19. In the Document Properties dialogue box, enter 360 for the (height) value - then exit
20. From the Menu Bar, go to Window > Align
21. In the Align Panel, with the To stage: button selected, align your Rectangle Primitive to stage bottom
22. With your Rectangle Primitive selected, open the Color Panel
23. Click the Type: drop-down and choose Bitmap
24. Select the first bitmap from those available
25. In the Timeline, on the 'pattern' layer, insert Keyframes into frames 10, 20, 30 & 40
    • Notice that Flash auto-copies the previous keyframes content as you move right
26. Insert a Regular Frame into frame 50 of the 'patterns' layer
27. Change the bitmap fill for the Rectangle Primitives in frames 10, 20, 30 and 40
    • Five imported bitmap patterns...five keyframes...five different Bitmap Fills
28. Use the Timeline scrubber to preview the file
29. Lock the 'patterns' layer
30. Save your file
31. Test your movie
32. In the Toolbar, select the Selection Tool
33. Unlock the 'text' layer
34. In the 'text' layer timeline, select Blank Keyframe 1
35. In the Toolbar, select the Text Tool
36. In the Properties Panel (prior to typing), set the following:
    • the type tool to produce Static Type
    • Set the font to Papyrus
    • Set the font size to 55
37. Click and type out the word 'Patterns'
38. Once you are done typing, go back to and select the Selection Tool from the Toolbar
39. Select and position your text block to the stage upper left
40. With the Selection Tool, double-click between the between the 'P' and the 'a'
    • NOTE: Double-clicking on a type box gets you into the font, and sets your Text Tool
41. In the Properties Panel, use the Letter Spacing control to adjust the space between the 'P' and the 'a'
42. In the Toolbar, select the Selection Tool
43. Insert a Regular Frame into frame 50 of the 'text' layer
44. Lock the 'text' layer
45. Save your file
46. Test your movie
47. Unlock the 'buttons' layer
48. In the 'buttons' layer timeline, select Blank Keyframe 1
49. From the Menu Bar, go to Windows > Common Libraries > Buttons
50. Navigate to the Classic Buttons > Push Buttons folder
51. Drag out 5 Push Buttons along the top of the stage (each a different color)
52. In the Toolbar, select the Selection Tool
53. Select and position the left-most Push Button to taste
54. Select and position the right-most Push Button to taste
55. Select all 5 Push Buttons
56. From the Menu Bar, go to Window > Align
57. In the Align Panel, with the To stage: button unselected, align bottom edge of your buttons
58. In the Align Panel, with the To stage: button unselected, distribute horizontal center of your buttons
59. In the Properties Panel, assign Instance Names (from left to right) of 'bt1', 'bt2', 'bt3', 'bt4' and 'bt5'
    • Your Instance Names will have to match the pre-written ActionScript code - spelling and case-sensitivity counts
60. Insert a Regular Frame into frame 50 of the 'buttons' layer
61. Lock the ‘buttons’ layer
62. Save your file
63. Test your movie
64. Unlock the 'labels' layer
65. In the Timeline, on the 'labels' layer, insert keyframes into 10, 20, 30, 40
66. Insert a Regular Frame into frame 50 of the 'labels' layer
67. In the Properties Panel, assign frame labels (from left to right) of 'pt1', 'pt2', 'pt3', 'pt4' and 'pt5'
    • Your frame labels will have to match the pre-written ActionScript code - spelling and case-sensitivity counts
68. Lock the ‘labels’ layer
69. Save your file
70. Test your movie
71. Highlight your 'actions' layer
72. In the 'actions' layer timeline, select Blank Keyframe 1
    • NOTE: you do not need to unlock the 'actions' layer before adding ActionScript code
73. From the Menu Bar, go to Window > Actions to open the Actions Panel
74. In the Actions Panel, type stop();
75. Add a couple Return/Enters after the stop(); code
76. Save your file
77. Test your movie
78. In the Menu bar, go to File > Open - open the flash-02.as
79. Drag through (select) then copy (cmd/ctrl + c) the patterns code
80. Flip back to the ex-4.fla
81. From the Menu Bar, go to Window > Actions to open the Actions Panel
82. With the Blank Keyframe of the 'actions' layer selected, place your cursor in the Actions Panel and paste (cmd/ctrl + v)
    • note the ActionScript symbol in the Blank Keyframe
83. Save your file
84. Test your movie
    • DEMO: Frame Labels and Timeline spacing
    • DEMO: Frame Label error
    • DEMO: Instance Name error

Let's have a quick look at the ActionScript 3.0 code you applied:

1. Stops the Timeline
2. Goes to and Stops on...
3. the Frame with a Frame Label of "xxx"

Exercise 5: Encoding Flash Video (.flv)

In this exercise we will create, via the Import Video...command, a Flash file containing an encoded Flash video (.flv) and playback skin allowing for user interaction. The sub-goals of the exercise are to end up with a .flv file which is smaller in both file size and pixel dimensions than the source video.

Credit (and with much thanks to): The video used in this exercise came from archive.org

Step by Step »

1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new, Actionscript 3.0 file
2. Save your file as ex-5.fla
3. In the Menu Bar, go to File > Import > Import Video...
4. In the Select Video dialog box:
   • Click the Browse button and select the popcorn.mov video
5. Click the Launch Adobe Media Encoder button
   • This launches a separate application
6. In the Adobe Media Encoder list of videos to be encoded screen - select the popcorn.mov by clicking it's Source Name
   • Note: if there are other videos in the list, select them and choose Remove at right
7. With popcorn.mov selected, click the Settings...button to the right
8. The Export Settings window has three distinct sections:
   • a video preview section (left)
   • Export Settings (upper right)
   • and five tabs (lower right) - allowing for export fine tuning
9. In the Export Settings section, set the following:
   • For Format choose FLV | F4V
   • For Preset choose FLV Same As Source (Flash 8 and higher)
   • For Output Name...rename the video 'flash-popcorn.flv'
10. In the preview section, and under the video:
    • Slide the top slider triangle to preview your video
    • Click and drag the in point triangle to adjust when your video begins
    • Click and drag the out point triangle to adjust when your video ends
11. Of the five tabs - click the Format tab
12. Under Basic Settings, set the following:
    • be sure to select flv
13. Of the five tabs - click the Video tab
14. Under Basic Video Settings, set the following:
    • Video codec: on2 VP6 (the latest, greatest codec)
    • Be sure Encode Alpha Channel is off - this video has not been prepared for 'green screening'
    • Check the Resize Video box
    • Make sure Constrain width/height is activated
    • Set the Frame Width [pixels] to 320 - the height should come along for the ride
    • Set the Frame rate: to 15 fps (half of the source video's frame rate)
15. Under Bitrate Settings, set the following:
    • set the Bitrate [kbps] to 300
16. Of the five tabs - click the Audio tab
17. Under Basic Audio Settings, set the following:
    • For Output Channels choose mono
18. Under Bitrate Settings, set the following:
    • set the Bitrate [kbps] to 48
19. Hit OK to exit the Export Settings
20. In the Adobe Media Encoder list of videos to be encoded screen - click the Start Queue button - and wait
21. When the encoding is done, switch back to Flash
22. Read the little help message that appears (in Flash) - it tells you what you'll need to do after encoding
23. In the Select Video dialog box:
    • Hit the Browse button again, this time selected the freshly encoded 'flash-popcorn.flv' file
    • Check the Load external video with playback component box
    • note that there are other ways to distribute Flash video across the web
24. Hit the Next button
25. In the Skinning dialog box:
    • pick SkinUnderPlayStopSeekMuteVol.swf
    • pick any color for now - we can pick a different color later on
    • Hit Next to move on
26. In the Finish Video Import dialog box - hit Finish and wait...
27. Save your file
28. Test your movie
29. In the Toolbar, select the Selection Tool
30. Select the Video
31. From the Menu Bar, go to Window > Component Inspector
32. In the Component Inspector set the following:
    • change the skinBackgroundColor to #666666
    • Set autoPlay to false
33. Rename Layer 1 to 'video'
34. Lock the 'video' layer
35. Create a New Layer and rename it 'title'
36. In the Toolbar, select the Text Tool
37. In the Properties Panel (prior to typing), set the following:
    • the type tool to produce Static Type
    • set the font to Arial
    • set the font size to 18
    • set the color to black
38. Type the words 'The Popcorn Guy'
39. With the text selected, in the Menu Bar, go to Modify > Transform > Rotate 90° CCW
40. Select and position the text along the left side of the video
41. With nothing selected, in the Properties Panel, hit the Size button
42. Select Contents to resize the stage to match the content of the stage
43. Save your file
44. Test your movie
    • notice that Flash failed to consider the Video Controller
45. Hit the Size button again - add 45 to the height value to include the player skin
46. Save your file
47. Test your movie

 

Back to top