Using Inspiration to Create Flowcharts Flash

Inspiration 6 is a flowcharting application for Windows and Macintosh. By using Inspiration, you can create the flowcharts with a variety of artwork symbols, including ANSI chart graphics that work with the Gantt system of flowcharting.

Building an organizational chart
To create an organizational chart (site chart) for your Flash or Web concepts, you need to have a list of all the sections within the concept. For this example, we make an organizational chart for an animation site that has:

  • A main menu screen
  • Dedicated sections for parody, slapstick, anime, and mature animations
  • A submission form for new animations
  • The featured animation for each section
  • Subsection categories for each section that contain top ten, visitors’ choice, and archived animations

With that, let’s build an organizational chart.

  1. Open Inspiration 6. By default, the Tip of the Day dialog will appear. Click Close to dismiss the window.
  2. A new untitled document window will already be open, with the basic library of symbols available in the Symbol Palette. Each library has a specific set of predefined symbols. You can change the library set by clicking either the left or right arrow located at the top of the Symbol Palette. The down arrow will display the entire list of libraries available in Inspiration.
  3. In the File➪Page Setup dialog (Mac) or the File➪Print Setup dialog (PC), change the document’s orientation to Landscape.
  4. Select the Main Idea symbol, which is already within the document window. Click the Rectangle symbol, located in the first row of symbols in the Symbol Palette. This will change the shape of the existing Main Idea symbol in the document. Then, click the New Look button in the document toolbar. This will change the default new symbol type to the Rectangle symbol.
  5. Click once inside the Main Idea symbol to change or add the text. The text cursor will automatically become active inside the Rectangle symbol. Type the text Main Menu.
  6. With the Rectangle symbol still selected, click the RapidFire button, located in the toolbar at the top of the document. The RapidFire feature enables you to quickly create new symbols by typing text into a parent symbol and pressing the Return key to move the new text into a child symbol. Once the RapidFire button is depressed, a lightning bolt icon will appear next to your Main Menu text. Type the text Parody, and press the Return key. A new lightning bolt icon will appear after the Parody text, and, after a few seconds, a new symbol with the Parody text will show up below the Main Menu symbol. By default, the new symbol will be an Oval shape. We’ll change this shape in a later step.
  7. With the RapidFire button still depressed, type Slapstick in the Main Menu symbol, and press the Return key. Then, type Anime and press the Return key. Use this same process to create Mature and Submission Form symbols from the Main Menu symbol. At this point, turn off the RapidFire feature by clicking its button in the toolbar.
  8. Now, we’ll reposition the symbols so that they’re organized in a more readable layout. Press Ctrl+A or Command+A to select all of the symbol, and click the Arrange button on the document toolbar. Make sure that the Diagram Type is set to Top Down Tree, and that the Links menu is set to Auto-90. Click OK, and Inspiration will place all of the child symbols below the Main Menu symbol.
  9. Now we will remove the arrowheads from the connecting lines—orgcharts should not display flow directions like a process chart does. Select the connecting line between the Main Menu and Parody symbols. Then Shift+click the other connecting lines between the Main Menu and remaining symbols. Then choose Link➪Arrow Head Ending Point➪None. When you’re finished, your chart should resemble Figure below.
  10. Save your Inspiration document as orgchart.ins.
  11. Next, we will create child documents for each of the site sections. Select the Parody symbol, and choose File➪Family➪Open Child (F6). Inspiration will create a new diagram for the document. This diagram is contained with the orgChart.ins file, but it will be printed on a separate page.
  12. In the new diagram, select the Parody symbol, and click the RapidFire button in the document toolbar. Again, create four Rectangle symbols below the Parody Menu: Featured Animation, Top Ten Animations, Visitors’ Choice, and Archived Animations (as shown in Figure below). Then turn off the RapidFire feature.
  13. Save your Inspiration document.
  14. Because our example has the same format for each section of the movie, it’s not necessary to repeat Steps 11 and 12 for the other categories. However, if each section had a different format, then you would want to define the content within each section at this point.
  15. Your organizational chart should now show five separate sections of your Flash movie.

    Your organizational chart should now show five separate sections of your Flash movie.

    Each section has four subsections.

    Each section has four subsections.

    That’s all there is to building an organizational chart. When you print the document, the top-level drawing (the main document) will print first, followed by each drawing in the document.

Creating a process chart
In this section, we create a process chart for our animation content site, which is an all-Flash site. The process chart demonstrates the experience and decision-making steps with the presentation. Our process chart will show:

  • An intro animation with a “skip intro” button
  • The Main Menu screen with a showcase animation window
  • Navigation links to other content areas in the site
  • The steps to submit an animation to the site

For this example, we will not continue with the orgchart file we created in the last section. Close that file before you start the steps in this section.

  1. Open Inspiration 6, or, if it’s already open, create a new document. Open the Process➪Flowchart1 symbol library, from the drop-down menu accessible from the down arrow at the top of the Symbol Palette. Also, make sure Utility➪Grid Snap is turned on.
  2. Select the Main Idea symbol in the document, and click the Rounded Rectangle symbol in the first row of symbols in the Symbol Palette.We will use this symbol to indicate an animated sequence in our process chart. Type intro animation in the Main Idea symbol.
  3. Because we will give the user the option to skip this animation, we will insert a decision point into the process chart. Click the right arrow of the Create button in the document toolbar. This will add a new Rounded Rectangle symbol to the right of the intro animation symbol. Select the Decision symbol (the diamond- shaped one located in the left column of the Symbol Palette), and click once to the right of the intro animation symbol. Type skip intro in the Decision symbol.
  4. Click the right diagonal of the Create button in the document toolbar, and select the Rectangle symbol. Type Home Screen in this new symbol.
  5. Click the down arrow of the Create button, and select the Rounded Rectangle symbol. Type Showcase Animation in the new symbol.
  6. Reselect the Home Screen symbol, and click the diagonal left-down arrow of the Create button. Select the Decision symbol. Type Main Menu in the new symbol.
  7. Click the right-down arrow of the Create button in the document toolbar. Type Parody in the new symbol. Now, we’ll change the active library for the Symbol Palette, in order to select a new symbol type for the Parody symbol. Click the right arrow at the top of the Symbol Palette to advance to the next library, Flowchart2. Select the Document symbol, which is located in the leftmost symbol in the first row of Flowchart2 symbols.
  8. Reselect the Main Menu symbol, and repeat the first part of Step 7 for the Slapstick, Anime, and Mature sections of the site.
  9. Select the Main Menu symbol with the Arrow Tool, and click the left arrow of the Create button. Type Submission Form in this new symbol. Then click the Rectangle symbol in the Symbol Palette to change its shape.
  10. Click the down arrow of the Create button and type Request info in the symbol. Click the left arrow of the Symbol Palette to access the symbols from the Flowchart1 symbol library and select the Decision symbol to change the shape of the Request info symbol.
  11. Click the right-down arrow of the Create button, and, in the new symbol, type Visitor Name. Change its symbol shape to the short, rounded rectangle, found in the lower left of the Symbol Palette (third row from the bottom).
  12. Reselect the Request info symbol, and repeat Step 11 for two more short rounded rectangle symbols, Animation Title and Animation URL.
  13. Now, our flowchart symbols are complete. At this point, Shift+click all of the diagonal connecting lines for your chart. Choose Link➪Auto-90. Then, using the Arrow Tool, click and drag the arrowhead end points of each line to connect to the appropriate side of each symbol. Use Figure below as a reference for the direction and flow of the connecting lines. You may need to reposition the symbol shapes to prevent the symbols from overlapping.
  14. Save your Inspiration file as processChart.ins. After you have a process flowchart, you are ready to start building the functional specification for your Flash movie. Refer to the earlier sections of this.
  15. This process flowchart maps the user’s experience of the animation site.

    This process flowchart maps the user’s experience of the animation site.



Face Book Twitter Google Plus Instagram Youtube Linkedin Myspace Pinterest Soundcloud Wikipedia

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Flash Topics