• Looking for a Top Flight Web Development Team?
  • Professional & Affordable Web Design Services
  • Shaping Imaginations using Cutting-Edge Technologies
  • Dynamic Solutions for Dynamic Businesses
  • Analysis.. then Solutions with a High Tech Flair
  • Satisfied Customers In Over 30 Countries
  • National Association of
    Accredited Internet Professionals
  • (561)948-6074
Custom Website Designs
 
Multimedia Production Part II

Motion, Graphics and Multimedia Production

• Word_one

• Word_two

• Word_three

• Word_four

• Word_five

 

Now that we have established our work area, we can begin to create our objects. Because we are just beginning with Flash, we will use graphic symbols to animate on our timeline. Start by creating the graphic text symbols that will be animated. In this animation, we want to create text fades using our name and five words that describe our abilities or work.

 

At the end of the animation, a button with our name appears, ready to trigger the Web page. Our name and the words will be placed on their respective layers in the timeline on the main stage.

 

1.Create a the name symbol by going to Insert>Symbol create a graphic symbol called name_graphic

2.Type your name using the Text tool from the tool bar. Use 40 point text. Any legible font will do. We want to make a symbol, but will add motion to the symbol in the main timeline.

 

3.Now we must align the graphic with the stage so that when we place it on the main timeline it is not off center and difficult to work with. Go to Window>Design Panels>Align to open the align palette.

 

This palette allows you to align objects to each other or the stage. We want to align to stage because we need to center this graphical text. Set the To Stage button and the align horizontal and align vertical buttons to position the item directly in the center of the symbol editor, therefore aligning it with the center of the stage.

 

Close the symbol editor by clicking the Timeline text up in the Timeline panel.

 

4.Repeat the process from earlier and create five graphic symbols with the five words you brainstormed. Keep the size to 28 points for each word, and use the same typeface. Remember to be consistent with the fonts and sizes. Each symbol from steps three and four will be located in the library panel. Now that we have our graphic symbols prepared, we can begin to add motion to them on the main stage.

 

5.On the main stage (timeline), click on to the layer name and drag the name graphic symbol from the library on to the stage. Next, align it to the stage so that it is centered.

 

6.Repeat step five for the remaining words. Place each word on its corresponding layer. If you make an error, click CTRL+Z to undo. You get up to approximately 99 undos in Flash.

 

7.At this point, you should have your name and all the word symbols neatly placed in the center on the stage. The words should be overlapping each other with the name layer on the top of the stacking order. At this point, we can begin to add motion to the text symbols. To make things easier, we can hide the layers we are not using in the timeline by clicking off the dot under the eye for the corresponding layer.

 

Hide all the layers except for the name layer. 8.Click on the text symbol and lets click on Insert>Timeline Effects>Blur. This effect will automatically provide an interesting motion effect for you to use. The blur effect dialog box will pop up. Set the duration to 24, the resolution to 10, and the scale to 10. Update the preview to see the results. The frame duration bar will now be extended out to frame 24.

 

To preview the animation, click CTRL and ENTER at the same time. This will launch the Flash Player. 9.Now repeat the process with the five words. Move the words to different locations on the stage. Then, move each set of frames for each word down the timeline. The animation should not exceed 125 frames in total (five 24- frame single word animations). Be careful to work with each word individually. Pay attention to each word by hiding the other layers. For now, utilize the easy to use timeline effects provided by Flash. Finally, we need to save the proprietary .FLA file and then export the Web- ready SWF file.

 

To do this we go to File>Save and save the Flash document directly into our root directory. We could have made a new directory folder for the flash files but because we only have a few, we can manage them just as easy from the root. When we save the FLA, we are saving the editable Flash file with layers in tact. This is important because when we need to update the file we can have the source to make the job easy. To create the SWF file, we go to File>Publish.

 

  When we publish from Flash, Flash generates an SWF file and an HTML file. SWF files a Web page as a container or they will play directly in the Flash Player. SWF files should be embedded in an HTM page. They run nicely and independently from all Web browsers, but they still need the structure of HTM and an Object Tag to have them show up in your Web portfolio. Don’t worry, you can Insert>Media>Flash to add a SWF to a Web page in Dreamweaver. Disregard and eventually delete the extra HTML file that Flash generates. Some designers use this file as a test page before placing the SWF into the live Web pages.

 

If you want to eliminate the generation of the HTML page, however, you can go to Publish Settings and uncheck the HTML file box. After you do this, Flash will only generate the SWF file in your root directory. This animation will loop in the Web page. To add our button, we open the existing FLA file. We add a stop action and a button to enter the portfolio site.

 

• First, we stop the animation. We can make the animation stop by placing a stop action in the timeline. A stop action is an ActionScript that stops the timeline. It is the most basic and most used action available.

• To add a stop action, click on the timeline and select a frame right after at the end of the animation (frame 145 or 146):

• Insert a keyframe (F6) • Open the ActionScript panel Window>Development Panels>Actions

• Click in the Actions panel and type stop();

• Or in the left side of the Actions panel,

• Click Global Functions>Timeline control>Stop The action can be written or assigned from the Actions menus.

 

For a simple stop, there is no real need to use the Behaviors panel. The ActionScript panel works just as easily. Let us review what we have done so far in the creation of our text animation. First, we brainstormed content for a text animation that highlights our name and five words or phrases that define our abilities.

 

Next, we set up our Flash document so that we can work efficiently and intelligently on the piece. To achieve this, we descriptively named our layers before we began working on the nuts and bolts of the animation. Then, we animated our words. Finally, we inserted a stop action so that the animation stops. We are now ready to design our button. After we create the button, we will place it on the stage in its appropriate layer and then publish and test our movie. When we see that the movie is operating, we can then move on to sampling some sound that will be used in the splash page animation.

 

Defining Buttons in Flash When we first prepared our Flash document for this animation, we created a layer called “button”. On this layer we will place a button that will hyperlink the user to the homepage of the Web site. The splash page containing the Flash text animation is technically the first page that is loaded when the user hits the site, and therefore the file must be named index.htm. The splash page does not contain our navigation menus or a path to our content. We must have a proverbial “home page”. This page may or may not be the first page seen by the user. In our case, we will be naming our first page — the splash page index.htm. We will name our second page index_2.htm. This page is the real home page in terms of hierarchy and user guidance. This page is also our main navigation page. The button we create will take us from index.htm to index_2.htm, straight from the Flash animation.

 

Setting up a button in Flash requires you to create a Symbol. When we discuss buttons, there are several important points that must be made. Buttons or interactive components are handled by Flash as event-driven objects. Being event-driven means that some occurrence (an event) must trigger ActionScript to execute a command. Events occur when the user clicks the button or when the play head reaches a certain frame. You can program ActionScript to occur when events happen in a Flash movie. For example onClick, go to Frame 5. Or, another example, onEnterFrame 5, play movieclip xyz.

 

These are pseudo (fake) code analogies. ActionScript is very powerful and provides for complex programming is the developer is so inclined. ActionScripts can be very long and complex and customized or they can be a simple staple such as the stop(); action that we discussed earlier in the text. Movieclips Can Be Programmed as Interactive Buttons The reason we briefly covered some initial points behind ActionScript is because without it, buttons and movieclips are just like graphic symbols — not interactive and not very prominent in the overall scheme of dynamic Flash content creation. We are using the term button to define an interactive object that has a hyperlink attached to it.

 

Button and movieclips are programmable in Flash. Programmability means that ActionScript can be attached either button or movieclip symbols. In essence this means that movieclip symbols can be used as buttons in Flash.

 

Programmable, movieclips allow ActionScripts to be attached to their instances on the stage so that they can act as interactive buttons. Movieclips are contained objects that run a movie. The movie inside the movieclip can have all the properties and elements that are seen on the main timeline. However, movieclip symbols are different because they can be controlled on the main stage and they occupy only one frame in the main stage. Their unique timelines are inside the movieclip.

 

The movieclip can contain an animation that is 200 frames. When the movieclip is placed on the stage, the symbol occupies a single frame, but executes the entir e movie on the stage. Movieclip symbols have independent timelines that can be controlled by ActionScript on the main stage or by ActionScript contained in other movieclip symbols. Another technique that is frequently used to boost the multimedia characteris- tics of a button is to nest an animated movieclip inside of a button symbol.

 

This technique allows the unique timeline of the movieclip to play inside of the button during and event. We will examine both programming possibilities, buttons and movieclips, in the context of a splash page in the next tutorial section. First, we will make a button symbol and program it. Next, we will make the same interactive element, but will use a movieclip symbol instead of a button.

 

Back
to Top