Making a Flash project loop can cut your animating time and is a simple adjustment to make when exporting your movie. You can do it one of two ways. You can use Flash itself or you can go through the coding used when embedding the .SWF file movie. Regardless of how you do it, a looping Flash movie will allow you to keep the movie in action and perhaps allow you to relax on the amount of work you need to do in Flash itself. This article will explain how to make a Flash movie loop.
- When you have finished your .FLA file and are ready to export it for publication, navigate to “File.”
Then, go to “Publish Settings” in Flash.
-
Step 2
Select the “HTML” tab from the Publish Settings menu.
-
Step 3
Make sure the “Loop” option is selected under the “Playback” options.
-
Step 4
Select “Publish.” Flash will now publish your .SWF file in an .HTML file for uploading to your server.
-
Step 5
If embedding a Flash file using HTML or in Dreamweaver (see Resources below), the code used to embed the file should specify the loop. Make sure that the Loop parameter is set to “true.”
It should look like this: <param name=”LOOP” value=”true”>.
Incorporating QuickTime video files into the compatible Adobe Flash Video format is a quick and simple process. The Adobe Flash program has an easy-to-use video import and conversion menu that will let you get the job done in just a few minutes. With this import feature and Adobe’s Media Encoder, QuickTime movies with the file extension .mov are converted to Flash movies with the file extension .flv.
- Open Flash and select “File” from the Flash main menu. From the File drop-down menu select “Import”. From the Import pull-out menu, select “Import video.” The Video Import dialog box appears.
-
Step 2
Select the Launch Adobe Media Encoder button from the Video Import dialog box. Leave all other default selections as they are. A pop-up box will appear that gives you further instructions. Select the “OK” button on this box.
The Adobe Media Encoder dialog box should now be displayed. If it is not, look down on the taskbar of your display. It should appear there. Click the icon there to display the Media Encoder dialog box.
-
Step 3
Select the “Add” button on the Media Encoder with your mouse. The file directory dialog box should appear.
Navigate to the file directory where your QuickTime MOV file is located. Select the file and then select “Open” in the file directory dialog box.
The file you added should now be listed in the queue of the Adobe Media Encoder dialog box.
Select the “Start Queue” button in the media encoder dialog box. When the queue is started, the video should also appear in the Media Encoder dialog box.
Close the Media Encoder box and return to your Flash program. Your FLV file will be stored in the same directory as the MOV video that you converted.
-
Step 4
Select “File” from the main menu and then select “Import.” Select “Import Video” from the pull-out menu. A file directory dialog box should appear. Select or browse to find the FLV file that has been converted. Open the file. After Flash opens, the import video dialog box will appear once again.
In the video dialog box, select the “Next” button. A new video dialog box will be displayed. This box will contain a pull-down list of available skins. The skin is a graphic container for your movie that is used to control the play, stop and rewind functions of your video. It also permits volume control.
Select the default skin or try a different one. A new and different video import dialog box appears. This box just informs you of the location of your FLV file. Select the “Finish” button from this dialog box.
-
Step 5
Wait for the “Getting metadata” progress bar to finish loading the FLV file’s metadata. The longer your video, the longer the progress bar will stay on the screen. When your video is finished loading, the metadata progress bar disappears.
The video skin icon will appear on the Flash stage.
Test your Flash movie. To do this, select “Control” on the main menu, then select “Test Movie” from the associated pull-down window.
Test the stop, playback and audio control buttons.
Adobe Flash is a cross-platform media production tool designed to integrate video and animated elements into media driven interactive websites. With Flash, you can customize your own video players to work with Flash video files. Flash video can be streamed without having to use an expensive streaming media server, by “progressively” downloading the video using an ordinary web server. For this reason, Flash has become the most popular choice among do-it-yourself web designers who want to include videos in their websites without paying extra to host the clips on a media server.
- Click on “Flash File (Action Script 2.0)” in the “Create New” menu that appears when starting the program.
-
Step 2
Select the “MediaController” in the Components window. If you cannot locate the Components window on your desktop, open the window by pressing “Ctrl” and “F7″ on your keyboard.
-
Step 3
Drag the MediaController onto the project stage using your mouse. The project stage is the blank white rectangle in the middle of the Flash desktop. Place the MediaController towards the bottom of the stage.
-
Step 4
Adjust the width of the MediaController using the “Properties” tab with the MediaController still selected in the Components windows. The width should be the same as the width of the video clip you plant to load into the Flash player you are creating. Enter “360″ by the “W” beneath “Position and Size” in the Properties tab.
-
Step 5
Enter “vcontrol” where “<Instance Name>” appears in the MediaController Properties tab.
-
Step 6
Select “MediaDisplay” from the Components window. Drag the MediaDisplay component to the project stage using your mouse. Locate the MediaDisplay component above the MediaController.
-
Step 7
Enter, for this example, a width of 360 pixels and a height of 240 pixels in the Media Display Properties tab. The actual size should be equal to the dimensions of your video clip. Make any adjustments needed after changing the MediaDisplay size to position the rectangular box so that it remains on top of the MediaController.
-
Step 8
Enter “vdisplay” in the field that shows “<Instance Name>.”
-
Step 9
Press “Ctrl” and “Shift” and “F3″ on your keyboard to open the Behaviors window.
-
Step 10
Select the “+” sign, then “Media” and “Associate Controller” from the sub-menu. Click on “vcontrol” in the dialog box.
-
Step 11
Press “Shift” and “F7″ on your keyboard to open the Component Inspector window.
-
Step 12
Confirm the MediaDisplay component is still selected in the Components window.
-
Step 13
Type the complete Internet address of your video file in the “URL” field of the Component Inspector window.
-
Step 14
Press “Ctrl” and “S” on your keyboard to save the project file.
-
Step 15
Publish the customized video player by pressing “Ctrl” and “F12″ on the keyboard.
Computer designers relish having complete control over all their work and applications, and for this reason implementing window chromes into applications has become increasingly popular. Self-designed window chromes allow for originality and flair, and the combination of Adobe’s Photoshop application and the Flash Cs3 software can now produce a fully customizable chrome AIR application. The manufacturing and conversion process is relatively simple and should not take longer than an hour.
- Download and open sample files in Adobe Photoshop. A specific background could also be found and imported online, or scanned into the computer with a printer. Make sure all necessary updates are installed.
-
Step 2
On the tool bar on the right hand side, customize the colors and shading of the background by clicking “Background”. The Photoshop features will allow you to choose the color and add different textures and shades (for example, a glowing appearance for the chrome).
-
Step 3
Name the chrome, and save the customized chrome file to the hard drive, and open Flash Cs3. Choose “Create a New AIR Project” from the main Flash screen.
-
Step 4
Import the Photoshop chrome file by selecting “File” then “Import, and finally “Import to stage”. Choose the saved chrome file, which will appear under the name you saved it as.
-
Step 5
Indicate how you wish to import each layer of the chrome Photoshop file by selecting “flattened bitmap image” on the right hand side of the menu that pops up, and then checking the “Create movie clip for this image” box on the right. Provide an instance name for each layer, which is typically “back” for the background layer, “closeButton” for the close layer, and “minimizeButton” for the minimize layer.
-
Step 6
Go to “State size” and make sure it is set to the same size as the Photoshop canvas dimensions. Finalize the import by clicking the “Ok” button at the bottom of the menu.
-
Step 7
Use Actionscript 3 to paste codes in to allow for full functioning of the imported and customized chrome AIR file. Open the “Actions” panel and paste “back.addEventListener(MouseEvent.MOUSE_DOWN,back_CLICK);
function back_CLICK(e:MouseEvent): void
{
stage.nativeWindow.startMove ();
}
This code will allow for the application to be clicked on and dragged around.
-
Step 8
Find the remaining codes you wish for your chrome by consulting an interactive designer or by finding them on the adobe.com website. After all necessary codes are pasted, view the finished chrome AIR application and check to make sure all the pasted codes work properly.
Rollover buttons have become a standard in web pages because they provide an interactive way to guide the users through the website. For example, a website can remind the user of the current page simply by leaving a button in the same state as when it was pressed. When you convert an image to a button symbol in Flash CS3, Flash automatically provides rollover frames for the up, over, down and hit stages of buttons. Unfortunately, Flash assumes that you want the button to return to its original state after the button has been pressed. You can still create this effect by converting the button to a movie clip symbol rather than a button symbol. By entering a few simple codes from Actionscript 2.0, your button will remain in the down state informing the user of the current page.
- Draw the button shape. Select the rectangle tool and draw the shape of your button on the stage. If you want rounded corners, press the down arrow key as you draw the rectangle.
-
Step 2
Convert the shape to a movie clip. Select the shape; if the shape has a stroke, you will need to double-click on the shape. Select “Modify>Convert to Symbol.” Name the symbol “btn_mc” and select “Movie Clip.” Click “OK.” Type “btn_mc” in the “Instance Name” box in the “Properties” panel.
-
Step 3
Create the button for the top state. Double-click on the movie clip to edit the movie clip. Change the name of “layer 1″ to “Buttons.” Select the “Text Tool” and type the text for the button. Position the text on the button. Add additional effects to the button as desired.
-
Step 4
Convert the button to a button symbol. Select the entire button and select “Modify>Convert to Symbol.” Name the symbol “button” and select “Button.” Click “OK.”
-
Step 5
Create the button for the down state. Select the frame where you want the button in the down state to begin. Select “Insert>Timeline>Keyframe.” Adjust the button for the down state. For example, if you want to have the button faded, adjust “Brightness” in the “Color” drop-down menu in the “Properties” panel.
-
Step 6
Label the frames. Insert a new layer called “Labels.” Insert a new keyframe for the frame that contains the top button and the frame that contains the down button. Select the keyframe for the top button. In the “Properties” palette, enter “_top” in the “Frames” box. Select the keyframe for the down button. In the “Properties” palette, enter “_down” in the “Frames” box.
-
Step 7
Add actions to the button states. Insert a layer called “Actions,” and insert a new keyframe for the frame that contains the top button and the frame that contains the down button. Select “Windows>Actions” to display the Actions panel. Enter “stop();” in both keyframes.
-
Step 8
Add actions to the movie. Press the “Back ” button next to “Scene1″ to return to the button shape. Click on “btn_mc.” The actions panel should say “Actions-Movie Clip” in the left hand corner. Enter the following code:
on (press) {
_root.mc_btn.gotoAndStop(“_down”);
}
on (release) {
_root.mc_btn.gotoAndStop(“_down”);
}
Creating a button in Flash CS3 allows the programmer to add logic to any element on the screen, be it an image, object, video or graphic. Logic allows for interaction between the audience and the project and tells Flash to perform the desired action once the user interacts with the button. ActionScripting is the programming language used to build Flash projects; a solid understanding of the language and how it functions in the program is a necessity for using Flash. A solid familiarity with the program, its tools and workspace are necessary to complete this tutorial. Additional tutorials are available in the resources section of this article.
- Open Flash and start a new project file using ActionScript 2.0 or 3.0. Flash uses ActionScripting (AS) as its programming language to add interactivity to the project and the two versions of the language, AS 2.0 and AS 3.0, are completely different. Be sure you understand the AS format chosen as you move forward in your project.
-
Step 2
Use the Object Tool and create a circle or square object on your Stage. Using graphics, photos or videos as buttons is also an option. Go to “File” > “Import to Library” and select your outside graphics by following the dialogue box. Flash will import your assets to the Library. To place them on the Stage for conversion to a button, simply drag and drop the object onto your Stage.
-
Step 3
Place the object in the desired location using the Selection Tool to move it throughout the Stage. Once the location is set, click on the object using the Selection Tool. A thin blue line will indicate that the object is selected.
-
Step 4
Left click the mouse on the object and select “Convert to Symbol” from the menu. A dialogue box will appear, and you may rename the button. Using the button’s function in the project–such as “Home” or “Play”–will help you organize your project’s various symbols and buttons. Select the “Button” option and “OK” to convert your object to a button.
-
Step 5
Add ActionScript to your button to achieve the desired functionality of this element in your project. The options for adding logic to a button are endless, but understanding AS language and how it functions in Flash is necessary to program the various buttons and interactive elements of the project.
-
Step 6
Highlight the new button using the Selection Tool, and go to “Window” > “Actions” and the “Actions-Button” window will appear. Enter your ActionScripting in this location to add functionality to your button. A common command for a Button used to access an outside web site is as follows:
on (release) {
getURL(“http://www.google.com”);
}
The code must be copied exactly for the Button to work properly.
-
Step 7
Save your project and test the functionality of your new button by publishing a preview. Go to “File” > “Publish Preview” > “Default”–an offline browser will appear allowing you to test your site. If the button does not function as you intended, return to Flash and a “Compiler Errors” window will appear indicating the mistakes made in the programming of the button.
Flash CS3 is a part of the Adobe Creative Suite 3. Although some parts of the suite are used more for publishing and photography purposes, Flash is one of two programs in the creative suite that are used solely for web development (Dreamweaver is the other). Web designers often use Flash to add movement to a webpage. This movement could include something complex–such as a game– or something more simple, such as a slide show. When creating a slide show or other Flash elements, designers sometimes want the animation to loop, meaning that upon reaching the end of the animation, it will start again. However, if you want the animation to play through one time only, Flash allows you to stop a looping scene.
- Click on the Flash icon on your desktop or in the program folder to open the program. Flash must be open to alter an existing Flash document.
-
Step 2
Wait for the page to load. Once it has, move your cursor to “File” and click. Once the submenu opens, choose “Open.” In the window that opens, browse your files until you find where you have saved the Flash file you want to prevent from looping. Click on the file to open it.
-
Step 3
Select the last frame of the timeline by clicking on it after the Flash document has opened. The timeline is at the top of the screen.
-
Step 4
Click on the “Window” menu at the top of the page and then select “Actions” A screen will appear that will include a section at the bottom that tells you which frame is selected. Check that the frame that is selected is the same that you clicked on in the timeline. If it is not, click on the last frame of the timeline again.
-
Step 5
Type “// Stops the playhead at Frame 1″ in the box at the top of the “Actions” panel. Press “Enter.” This will move you to the next line of script. Type “stop();” on this line. Save the Flash animation.
Adobe Flash allows you to create vibrant websites that look fantastic and use animated objects as site elements. One of the special features included with Flash is the ability to create interactive objects such as buttons, menus and animations from symbols and designs created in Flash or imported from other graphic design programs. The conversion process is simple and allows you to create websites with a unique look.
- Select the object you want to turn into a button. If the object is not already a symbol, press “F8″ or select “Convert to Symbol” from the “Modify” menu.
-
Step 2
Select “Button” from the list of options on the “Convert to Symbol” dialog and give your symbol a name. Click “Ok” to close the “Convert to Symbol” dialog.
-
Step 3
Double-click your button to switch into editing mode. The timeline at the top of the Flash window will display four bars labeled “Up,” “Down,” “Over” and “Hit.”
-
Step 4
Right-click in the layer below the “Over” section of the time line and select “Insert Keyframe.” Modify your button using the tools provided with Flash. Change the colors, size, shadow, and other properties of your symbol; the modified symbol will appear when you move the cursor over the object.
-
Step 5
Click the layer below the “Down” section of the time line and press “F5″ to insert empty placeholder frames. Do the same for the layer below the “Hit” section of the time line.
-
Step 6
Save your work and test your button by pressing “Ctrl”-”Enter.”
A library in Adobe Flash CS3 provides storage for media assets designed and created by you. As you create vector artwork or text, you save the object as a symbol in the library. In most Flash programs, such as CS3, a library also is the landing ground for any imported objects or artwork. Working with the library is straightforward. You can copy objects between documents, rename an item and delete one. Flash includes sample libraries for you that include movies, buttons and sounds as well as pre-made graphics. Working within the library system of CS3 is one of the easier tasks of designing in Flash.
Basic Operation
-
Step 1
Open Adobe Flash CS3 on your computer.
-
Step 2
Open the library panel by clicking “Windows” and “Library” from the program menu at the top of the screen.
-
Step 3
Drag the lower-right corner of the library panel to resize. This will expand or contract the panel.
-
Step 4
Use an item from the library by clicking on the object and dragging it onto the stage.
-
Step 5
Add a new object that is currently on the stage to the library by clicking on the object and drag it into the library panel.
-
Step 6
Sort objects in the library by clicking on the header of a column.
-
Step 7
Rename an object by double-clicking on it. Type the new name in the text field under the folder and press “Enter” on your keyboard.
-
Step 8
Delete an object by selecting the item and clicking on the trash icon in the library panel.
Move Between Two Pages
-
Step 1
Open the document that contains the item you wish to use.
-
Step 2
Highlight the item from the library.
-
Step 3
Click on the “Edit” menu at the top of the screen.
-
Step 4
Select “Copy” from the edit menu.
-
Step 5
Open the document you want the object located.
-
Step 6
Click on the library, then “Edit,” and “Paste.” The object will appear in both libraries.
Create a Folder
-
Step 1
Press the “New Folder” button at the top of the library panel.
-
Step 2
Name the folder by typing a name in the text field under the folder. Press “Enter” on your keyboard.
-
Step 3
Click on the folder to open or close it.
-
Step 4
Move objects around; drag an item into the folder or from one folder to the next.
Though some Adobe Flash CS3 projects exist as stand-alone movies or presentations, authors often develop fully featured websites in Flash that invite user interaction and require links to outside content. Because web users are accustomed to clicking on web links to navigate from page to page, authors want to provide the same experience with their Flash websites. Flash CS3 simplifies this process and allows creators to easily link to webpages and email addresses when a user clicks on a block of text.
- Create a link from a block of text. After opening your Flash project, locate the text you want to link. Click the “Text Tool” icon in the left-hand menu bar, then highlight the desired line(s) of text. While the text remains highlighted, direct your attention to the Property Inspector at the bottom of your screen. (If you do not see this, click “Window” in the menu at the top of your screen, then select “Properties.” Choose the Properties option in the slide-out menu.) At the bottom-center of the Property Inspector you will see a blank field with a chain-link icon next to it. Click inside this field and type the URL of the external page to which you want to link. Click anywhere outside the Property Inspector once you finish.
-
Step 2
Save and export your Flash project. Exporting and testing the project will confirm that the link works as expected. Select the “File” option from the toolbar at the top of your screen and click “Save.” Next, select “File” and click “Export,” then select “Export Movie.” In the dialog box, choose the folder where your movie should be saved, then enter its file name. Next, click the drop-down menu below the file name box and choose the “Flash Movie” option. Click “Save,” then click “OK” on the following screen. A progress bar will pop up on the screen, then disappear after the export finishes.
-
Step 3
Locate the movie file you created in the previous step, then double-click the file to open it. Next, find the link you created and click it. The link points to the external webpage address you entered in Step 1.