The Workshop is all about being creative and thinking outside of the box. These workshops will help your right-brain soar, while making your left-brain happy; by explaining why things work the way they do. Exploring Flash’s possibilities is great fun; however, always stay grounded with knowledge of how things work. Knowledge is power.
Each project in the Workshop includes a start file to help you get started with the project, and a final file to provide you with the results of the project so you can see how well you accomplished the task.
Before you can use the project files, you need to download them from the Web. You can access the files at www.perspection.com in the software downloads area. After you download the files from the Web, uncompress the files into a folder on your hard drive to which you have easy access from Flash.
Skills and Tools: Flash component and ActionScripting
Flash comes with a set of built-in components—Button, CheckBox, Label, RadioButton, and UIScrollBar—that make it easy to add elements and controls to a Flash document. The components are available in the Components panel. There is a set of components for use with Flash documents (ActionScript 2.0) and another one for use with Flash documents (ActionScript 3.0). However, each set contains many of the same components. Some of the components include a skin, or look and feel, which you can customize to suit your own artistic nature.
In this project, you’ll learn how to create scrollable text using the UIScrollBar component, and then customize the component.
Open Flash CS4, create a new document (3.0), and then save it as scroll_text_component.fla.
Select the Text tool on the Tools panel.
Draw a text box on the Stage, and then select the text box.
Open the Properties panel.
Enter scrollableText in the instance box.
Click the Text type popup, and then click Dynamic Text.
Select the Selection tool on the Tools panel.
Right-click (Win) or Control-click (Mac) the text box, and then click Scrollable.
Click the Window menu, and then click Components.
Click the User Interface plus sign (+), and then click UIScrollBar.
Drag the UIScrollBar component onto the text box named scrollableText.
Click the Close button on the Components panel.
Drag the UIScrollBar component object to the right side of the text box.
Resize the text to line up with the length of the UIScrollBar component object.
Select the Text tool on the Tools panel.
Type text in the text box until the number of lines goes beyond the height of the text box.
Click the File menu, and then click Save.
Click the Control menu, and then click Test Movie, or press Ctrl+Enter (Win) or
+Return (Mac).
Use the scroll bar in the Flash movie to display all the text.
Click the Close button in the test movie window.
Double-click the UIScrollBar component object.
The component symbol opens.
Double-click one of the scroll arrows, and then double-click the same scroll arrow again.
Select the Zoom tool on the Tools panel, and then click to zoom in on the scroll arrow that you selected.
Double-click the arrow again until the graphic object appears.
Click the Fill Color button on the Tools panel, and then select a color (red).
Select the Paint Bucket tool on the Tools panel, and then click in the arrow to change the color from black to red.
Select the Zoom tool on the Tools panel, and then Alt-click (Win) or Option-click (Mac) to zoom in on the scroll arrow that you selected.
All the arrows in the different scroll bar states appear in red. You can modify other parts of the scroll from here too.
Click the Scene 1 button on the Edit bar.
Click the File menu, and then click Save.
Click the Control menu, and then click Test Movie.
The arrows on the scroll bar appear in red.
Click the Close button in the test movie window.
Skills and Tools: ActionScripting
You can create a scrollable text box and then manually enter the text that you want to display, or you can use ActionScripting to load the text for you. If you have text that frequently changes, you can store the text into an external text file, which is easy to open and change, and dynamically load the text into your Flash document. After you load the text from the document, you can use ActionScripting to format the text the way you want it to appear on the screen. To load a text file, you need to store the text file in the same folder as the Flash document, or you need to know the path location to the text file.
In this project, you’ll use ActionScripting to load text from an external file into a scrollable text box, and then format the text.
Open the file load_text_start.fla in Flash CS4, and then save it as load_text.fla in the same Project folder.
The Flash document opens with a scrollable text box. The scrollable text box uses the UIScrollBar component and named scrollableText. See project “Creating and Customizing Scrollable Text” for details on how to create one.
Select the text layer in the Timeline.
Click the New Layer button.
Name the layer actions.
Click Frame 1 in the actions layer.
Click the Window menu, and then click Actions.
Type the following ActionScript code exactly as shown:
var loader:URLLoader = new URLLoader();
loader.load(new URLRequest("externalText.txt");
loader.addEventListener(Event.COMPLETE, onGetText);
function onGetText(event:Event):void {
scrollableText.text =
event.target.data;
}
The text file externalText.txt is located in the same folder as Flash document, so no path is necessary. The scrollable text box is named scrollableText.
Click the File menu, and then click Save.
Click the Control menu, and then click Test Movie, or press Ctrl+Enter (Win) or
+Return (Mac).
The text from the document appears in the scrollable text box.
Use the scroll bar in the Flash movie to display all the text.
Click the Close button in the test movie window.
In the Actions panel, type the following ActionScript code exactly as shown:
var format:TextFormat = new
TextFormat();
format.font = "Arial";
format.size = 18;
scrollableText.defaultTextFormat =
format;
Click the File menu, and then click Save.
Click the Control menu, and then click Test Movie, or press Ctrl+Enter (Win) or
+Return (Mac).
The text from the document appears in the scrollable text box with the Arial font at the 18 point size.
Use the scroll bar in the Flash movie to display all the text.
Click the Close button in the test movie window.
Skills and Tools: ActionScripting
You can use ActionScript to play a sound from the Library or an external location. When a sound is small and doesn’t affect the size of the Flash document, the best way to go is to import the sound into the Flash document and then play it. If the sound is large, you might want to play the sound from an external folder location. If the external sound file remains in the same location, this is the best way to go, otherwise I would import it into the Flash document. Either way, you can use ActionScript to play it.
In this project, you’ll use ActionScript to play a sound from the Library, and then play a sound from an external audio file.
Open the file play_sound_start.fla in Flash CS4, and then save it as play_sound.fla in the same Project folder.
Select the Play Sound button on the Stage.
Open the Properties panel.
Name the object myButton.
Click the File menu, point to Import, and then click Import to Library.
Navigate to the Project folder where the sound is located.
Select the file funky.mp3.
Click Open.
Open the Library panel.
Right-click (Win) or Command-click (Mac) the sound named funky.mp3, and then click Properties.
Click Advanced, if available. The button toggles to Basic (as shown in the illustration).
Name the sound funkySound.
Select the Export for ActionScript check box.
The Export in frame 1 check box is enabled and selected. The Class appears with the same name as the sound element funkySound, and the Base class appears as flash.media.sound indicating type information.
Click OK.
If an ActionScript Class Warning dialog box appears, click OK to define the new class.
Click Frame 1 in the actions layer.
Click the Window menu, and then click Actions.
Type the following ActionScript code exactly as shown:
myButton.addEventListener
(MouseEvent.CLICK, playSound);
function playSound(event:Event) {
var mySound:funkySound = new
funkySound();
var myChannel:SoundChannel =
mySound.play();
}
Click the File menu, and then click Save.
Click the Control menu, and then click Test Movie, or press Ctrl+Enter (Win) or
+Return (Mac).
Click the Play Sound button in the movie.
Click the Close button in the test movie window.
Open the file external_sound_start.fla in Flash CS4, and then save it as external_sound.fla in the same Project folder.
Select the Play External Sound button on the Stage.
Open the Properties panel.
Name the object myButton.
Click Frame 1 in the actions layer.
Click the Window menu, and then click Actions.
Type the following ActionScript code exactly as shown:
myButton.addEventListener(MouseEvent.CLICK, playSound);
var myExternalSound:Sound = new Sound();
var req:URLRequest = new URLRequest("funky.mp3");
myExternalSound.load(req);
function playSound(event:Event) {
myExternalSound.play();
}
Click the File menu, and then click Save.
Click the Control menu, and then click Test Movie, or press Ctrl+Enter (Win) or
+Return (Mac).
Click the Play External Sound button in the movie.
Click the Close button in the test movie window.
Skills and Tools: ActionScripting
With ActionScript 3.0, you specify a class definition, either document or object level, to work with objects using ActionScript code. A class is a representation of an object that stores information about its data type, state, and behaviors. A class can include three types of characteristics: properties, methods, and events. A property represents different data associated with an object. A method is an action that can be performed by an object. An event is a system, application, or user action, such as a mouse click, that triggers an action related to an object. You can store ActionScript code in the Flash document or in a separate ActionScript file (.as).
In this project, you’ll create an ActionScript file, enter a script, and then use it in a Flash document to control an object.
Open the file modify_object_start.fla in Flash CS4, and then save it as modify_object.fla in the same Project folder.
Open the Properties panel.
Click the Stage.
In the Class field, type modify_object_as.
This indicates the name of the ActionScript file with the scripting code.
Open the Library panel.
Right-click (Win) or Command-click (Mac) the sound named square, and then click Properties.
Click Advanced, if available. The button toggles to Basic (as shown in the illustration).
Name the sound square.
Select the Export for ActionScript check box.
The Export in frame 1 check box is enabled and selected. The Class appears with the same name as the object square, and the Base class appears as flash.media.MovieClip indicating type information.
Click OK.
If an ActionScript Class Warning dialog box appears, click OK to define the new class.
Click the File menu, and then click Save.
This saves the Flash document. Now, lets create an ActionScript file to store the ActionScript code.
Click the File menu, and then click New.
Click the General tab.
Click ActionScript File.
Click OK.
Click the File menu, and then click Save As.
Navigate to the Project folder, and then name the file modify_object_as.
Click Save.
In the Actions panel, type the following ActionScript code exactly as shown:
package {
import flash.display.MovieClip;
public class modify_object_as extends MovieClip {
public function modify_object_as() {
var mySquare:square = new square();
addChild(mySquare);
mySquare.x=100;
mySquare.y=100;
mySquare.width=75;
mySquare.height=75;
mySquare.rotation=30;
}
}
}
Click the File menu, and then click Save.
Click the File menu, and then click Close to close the ActionScript file.
In the Flash document, click the Control menu, and then click Test Movie, or press Ctrl+Enter (Win) or
+Return (Mac).
Click the Close button in the test movie window.
Skills and Tools: ActionScripting and Button Component
Flash comes with a set of built-in components—Button, CheckBox, Label, RadioButton, and UIScrollBar—that make it easy to add elements and controls to a Flash document. The components are available in the Components panel. After you insert a component into a Flash document, you can use ActionScript to move and modify it. The component is automatically set up for use with ActionScript. All you need to do is give it an instance name and write the script.
In this project, you’ll place a button component on the Stage and then use ActionScript to move the button when you click it.
Open Flash CS4, create a new document (3.0), and then save it as move_button.fla.
Click the Window menu, and then click Components.
Click the User Interface plus sign (+), and then click Button.
Drag the Button component onto the Stage.
Click the Close button on the Components panel.
Select the Selection tool on the Tools panel.
Select the button components object.
Open the Properties panel.
Enter myButton in the instance box.
Name the layer button.
Click Frame 1 in the actions layer.
Click the Window menu, and then click Actions.
Type the following ActionScript code exactly as shown:
import flash.events.MouseEvent;
myButton.addEventListener(MouseEvent.CLICK,
moveButton);
function moveButton(event:MouseEvent):void {
myButton.x=myButton.x+50;
myButton.y=myButton.y+50;
}
Click the File menu, and then click Save.
Click the Control menu, and then click Test Movie, or press Ctrl+Enter (Win) or
+Return (Mac).
Click the button to watch it move by 50 pixels to the right and down.
Click the Close button in the test movie window.
Skills and Tools: ActionScripting
In addition of executing commands using buttons and other components, you can also execute commands using a context menu, which is also known as a shortcut menu. A context menu appears when you right-click (Win) or Control-click (Mac) an item on the screen. With ActionScript, you can create a custom context menu, and execute the commands using functions.
In this project, you’ll create a context menu using ActionScript to execute a command in a Flash movie.
Open the file context_menus_start.fla in Flash CS4, and then save it as context_menus.fla in the same Project folder.
Select ball object on the Stage.
Open the Properties panel.
Enter myAnimation in the instance box.
Select the animations layer in the Timeline.
Click the New Layer button.
Name the layer actions.
Click Frame 1 in the actions layer.
Click the Window menu, and then click Actions.
Type the following ActionScript code exactly as shown:
var menuItem1:ContextMenuItem = new ContextMenuItem("Stop");
var menuItem2:ContextMenuItem = new ContextMenuItem("Play Again");
menuItem1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, stopCommand);
menuItem2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, playCommand);
var myContextMenu:ContextMenu = new ContextMenu();
myContextMenu.hideBuiltInItems();
myContextMenu.customItems.push(menuItem1);
myContextMenu.customItems.push(menuItem2);
this.contextMenu = myContextMenu;
function stopCommand(event:ContextMenuEvent):void {
myAnimation.stop();
}
function playCommand(event:ContextMenuEvent):void {
myAnimation.gotoAndPlay(1);
}
Click the File menu, and then click Save.
Click the Control menu, and then click Test Movie, or press Ctrl+Enter (Win) or
+Return (Mac).
Right-click (Win) or Control-click (Mac) the animation, and then click Stop.
Right-click (Win) or Control-click (Mac) the animation, and then click Play Again.
Click the Close button in the test movie window.
You can access and download more workshop projects and related files at www.perspection.com in the software downloads area. After you download the files from the Web, uncompress the files into a folder on your hard drive to which you have easy access from Flash.
Instead of downloading everything from the Web, which can take a while depending on your Internet connection speed, you can get all the files used in this book and much more on a Flash CS4 On Demand DVD. The DVD contains task and workshop files, tips and tricks, keyboard shortcuts, and other goodies from the author.
To get the Flash CS4 On Demand DVD, go to www.perspection.com.