Graphic Design in Motion - Fractals -Single Layout Version
The design of the Rosetta is something that can be done by hand, but for dynamic graphic applications it's often quicker with computer code. The Rosetta fractals in this design were placed so that they would traverse the whiteboard in a systematic fashion. The textile frame, also a mathematically generated fractal, was used in this flash animation to provide for a more interesting setting. .
For added depth, the textile fractal frame was placed above the Rosettal fractals, One set of Rosetta fractals decreases in size as it they appraoch the center. This helps add to the subtle prespective nature of the animation.
The animation required just a few motion tweens and sizing tweens. However, the generation of the fractals was more involved and required the development and coding of a fractal algorithm.
This fractal generator, and more like it, are expected to add significant motion graphic design capabilities to the next generation of Actionscript-Driven Scribble Widgets.
A More Advanced Choreography = Single Layout Version
The second in the Rosetta series, uses the same Rosetta as in the Rosetta1 design. From the base Rosetta design, animated Rosetta symbols were constructed and saved in the flash library. The animated symbols were then given a symmetrical motion path to make a more involved choreography. For added spontaneity, a set of spinning blue circle fragments were tweened into the animation.
Flash was also used to fade in and fade out the rosettas and to color tween the pulsating rings. The animated library symbols were designed so that they can be reused for other animations and games.
On-Line Algebra Test Stand Alone Version With Instructions
Educational tools such as online math tests and quizzes can be built with not only Flash but also with a number of other tools. However, Flash Actionscript, which was used for this math test widget, has the advantage in that it allows not only for the addition of animations, but also because it allows the instructor to jump easily from one whiteboard to another.
For most online quizzes the radio button. is a central element. In these type of applications Actionscript code is for radio button control logic and for the navigation of the math problems, answers and solutions.
Formatting is also an issue with Flash online math tests. Text formatting of text fields can be used, but this won't allow for the use of XHMTL math symbols. One solution to this problem uses html text fields. These actionscript text boxes permit XHMTL coded math symbols.
Because the process of formatting text for math based symbols in XHTML is time consuming, others prefer to use s programs such as MathCad to generate graphics for the math symbols or even go as far as designing their own graphic math symbols and creating their own Flash math fonts.
XML Math Play Lists
Other concerns for online math quizzes are the reading in of XML play lists that contain the math questions and answers. For short tests this step can be avoided by embedding the math questions and answers in the flash code. Although this has advantages over XML file play list techniques, such as portability and quicker response rates, the use of XML play lists permits the development of more flexible user interfaces.
Custom Feature Development
Math quiz development often requires the addition of custom features that teachers and educational institution often want. Such features include automatic grading and automatic score reporting. Another feature that teachers need is the ability to automatically enter questions and solutions for the actual test. For this, often a customized teacher interface is developed that makes it a relatively easy task for teachers to add, delete or change questions, explanations and answers.
For mathematics, animation of concepts is often a key ingredient for an interesting educational tool. Besides adding interest, animation used in mathematics and the engineering sciences, can also be used to improve conceptual understanding beyond what traditional media can.
Ad Banners are one way to attract attention. And that's because the eye naturally responds to movement.
This simple fact gives designers the ability to create banners that can direct the reader to criticl information such as advertising. .
Flash Ad Banner Development
There is more than one way to create an ad banner. The simplest way is to do a frame-by-frame letter animation in author mode. However this method doesn't lend itself for mass production of unique ad banners. Another way is to to use Adobe's ad banner widget. However, the flexibility of that widget can be limited. The most flexible way, that allows you to automate the ad creation banner process and ensure that your banner is synchronized correctly is with Flash Actionscript programming. And that's because Flash has timers that can be programmed to precisely control the distance and the amount of time it takes for a letter to move.
Cell Phone Ad Development
If you want to be subtle about ads, one idea is to use small flash banners, called color line flash banners. These banners require that you set the stage height very small, 1, 2, 3, or 5 pixels will often do. The advantage of color line flash banners is that they direct attention without taking up much screen space. Often a few twinkling colors correctly positioned can focus attention right where you want it.
Line Scribble Board Single Layout Version With Instructions
This scribble board lets you draw lines and dots. Click the Draw_ Lines button to activate the program. Then position the mouse cursor where you want to draw a line or point. Next, depress the mouse button and drag the cursor to the desired endpoint location. Finally, release the mouse button. A line will appear between the two positions selected. Continue drawing as many lines as you like.
This scribble board, similar to an etch-a-sketch in concept, is just one of the scribble boards that are in development. Scribble 2, another one. is a keyboard driven scribble board. Scribble 2 lets you type in graphics with the keyboard, effectively creating a graphics keyboard. Scribble two also lets you erase the canvas and start a completely new drawing,
The Graphics Typewriter - An Ultra fast Scribble and Drawing Development Board - Stand Alone Version With Instructions
This scribble board, also known as the graphics typewriter, is a little different then most. And that's because it uses keyboard keys that let you type in curves, circles and lines.
Although there's still much to be added, the object oriented class structure of the keyboard interface, provides the necessary framework to easily add new features and easily integrated different keyboard functions into other programs.
Activating the Program
Simply click the stage to activate the program
Drawing Graphic Lines, Curves and Shapes
For this lesson, the keys numbered 1 to 9 at the top of your keyboard will be used. Drawing a line, curve or shape requires that you first position your cursor at the location on the canvas where you want your graphic to appear.
The next step is just as simple. Just depress any number key from 0 to 9 and see the associated graphic appear.
Note that once the program is activated, that there is no need to click or depress your mouse button any more. All the drawing action is accomplished with the keys on your keyboard.
Drawing Multiple 3D Contour Images
For a more dramatic effect and to see the real power of scribble board, hold a numbered key down (any from 0 to 9), and then sweep the cursor across the white board to see your design take hold. Want to erase, simple press the spacebar on your computer.
This scribble board features 10 different contours and shapes which can be accessed with the numbered keys at the top of your computer's keyboard. Of particular interest for drawing curved forms and developing shading styles are the damped sinusoid curves, one of which is accessed with the 3 key.
The scribble board besides a new approach to drawing also gives designers a new approach to the development of drawing techniques. With the scribble board, designers can quickly see how the repeated use of contours and specific strokes can be used to create advanced perspectives and shading processes.
Scribble Board Keyboard Codes
Your Standard Keyboard Layout - Numbers are on the top row
1 2 3 4 5 6 7 8 9 0 - =
q w e r t y u i o p [ ] \
a s d e f g h j k l ;'
z x c v b n m , . /
Expandable and Customizable Keyboard Interface for Any Application
The scribble board has been designed with an customizable keyboard interface that will let each key on the keyboard be custom configured for any graphic desired. For professionals with different jobs to do, different graphic typewriters can be designed to meet specific tasks. For graphic designers, specific shapes, scribbles, forms and images can be programmed to accomplish specific graphic design tasks quickly. For teaching of photoshop and illustrator online, the scribble board can be a real time save. Because the scribble board can make designs quickly, it can also provide a great source of graphic material for students to practice there Photoshop editing skills or their Illustrator vectorization skills. And that's because the designs generated with the scribble board can be captured with Adobe Acrobat Pro,
Stepped Instructions - Creating the Drawing to the Left
Scribble 3 - The Undo Button
Scribble 3 adds the power of the undo command to scribbling. Simple click on the green undo button in the upper right hand corner and your most recent scribble disappears and your ready to scribble again. However, if you want to keep undoing, go ahead. The infinity machine software technology behind the ActionScript code lets you remove every last scribble.
Scribble 3 has the same keyboard interface as Scribble 2, so everything you learned in the Scribble 2 lesson applies. That is click to activate, position the cursor and hit any key from 0 to 9. As well, erase the screen with the space bar on your keyboard.
SCRIBBLE BOARD IV: FABRIC DEVELOPMENT
Scribble 4 was modified to expedite the creation of textures, swatches and patterns for fashion design applications. The keyboard interface was expanded to include all the letters in the alphabet from a to z and all the numbered keys from 0 to 9. Additionally, a color circle was added to let you change the colors of the graphical shapes you type. \
Two new editing features were also added. The quick erase tool lets you roll over graphic threads to remove them and the direct click precision erase lets you precisely select a graphic thread for removal. For the precision erase, you should zoom directly to the thread.
To create graphic patterns, first click on the scribble board to activate the program. Next, position your mouse cursor over the stage and then press any key from 0 to 9 or a to z. If you want to quickly create sample patterns, hold down any one of the keys and sweep the mouse over the white board. For examples of graphic patterns created with Scribble 4 and specific instructions, click here.
At the top right hand side of the screen, you'll see one green button, and two red buttons. The green button, the undo button, will delete the last graphic you've added. After he middle red button, the quick erase tool, is selected, erasing a graphic is simply a matter of rolling the mouse cursor over the graphic.
The lowest right red button, the precision erase button, lets you delete a graphic by clicking on the graphic with the mouse.
Pressing the space bar on your keyboard. will erase the entire contents on the screen.
The Color Wheel lets you select a color for the graphic symbols you want to draw. Once a color is selected, all subsequent graphic images will be that color until a new color is selected.
Flash Music and Sound Player - Stand Alone Version
Your basic Flash music player can be built in a thousand different ways. On this two sound music box, individual sounds can be played separately or mixed together. The stop button lets you stop an individual sound or all the sounds.
In this application, a song, Nobody Knows, and a sound, a siren, can be selected. If siren and the song are both selected, the sounds will be overlaid on top of each other. The stop button is used to stop the song, the siren or both.
This basic sound widget can be expanded to meet the demands of any audio application. With Actionscript, graphics can be automatically generated through synchronization with sound volume levels.As well, individual sounds can be modified with a number of flash's Sound class methods. Furthermore, sound and balance controls can also be added that will let you create fade effects. As well, sound synthesizers can be created. Its a relatively straight-forward task with Flash to convert your computer keyboard to your very own musical keyboard.
This flash widget is also extendable, such that it can be used for the development of an audio film track development system. The design of this system calls for the creation of a library of music, sound and conversational clips for the creation of dramatic audio backgrounds. The drama optimized audio clips created with the system can then be used to give video games, as well as a myriad of other applications, drama, mood and interest.
The Sortable Datagrid - Stand Alone Version
This embedded flash movie illustrates the datagrid, a Flash component that allows users to enter and retrieve data. This datagrid was set to read only, so you can not enter in data. In the Data2 example, the datagrid was set to read and write.
Flash's datagrid lets you sort columns alphanumerically. If you select the top tabs of the datagrid, the columns will sort alphabetically. In this example, the datagrid columns were set in the defaul alphabetical mode. Flash provides different options for sorting.. These include a descending and an ascending sort for both alphabetical and numerical characters. In an alphabetical sort, used in this datagrid, numbers are sorted alphabetically.
As can be seen in this example, an alphabetical sort won't do for sorting numbers, since in an alphabetical sort, 100 is before 11. In the next data grid example, we will change the alphabetical sort to a numerically sort.
Reading XML Data into the DataGrid - Stand Alone Instructional Version
The datagrid in this example, first reads stock data from an XML file (listed below) and then places the data in the datagrid. You can also use the textboxes on the right to enter data into the datagrid.
This datagrid has been designed so that it will accept only specific types of text in each of the two text boxes. Because,stock symbols in this example don't contain numbers, you can not enter numeric data in the the stock text box. The price text box also does not permit you to enter letters, only numbers. Actionscript validation code was used to place these constraints on the two textboxes.
You can also edit data that has been entered into the datagrid as you would with most word processor applications. Simply select the text in the datagrid, then press delete, Sorting of the data grid columns can also be accomplished by selecting the arrow key that appears when the mouse cursor is clicked over the datagrid's stock or price column.
Sound backgrounds for this design give the mood of a rainy day at the airport. Sounds were added from the common sound library directly to the timeline. Although this is simpler way to add and mix sounds then loading sound files through Actionscript commands, the downside is there is no direct control over stopping the sound. The sounds play out according to the settings on the timeline. This means the rainy day and airport sounds will continue to play when you switch tabs.
The Flash datagrid component used is a standard component in the Flash library. The colors and borders of the datagrid cells and headers were changed with the cell and header rendering tools that the Flash program provides to edit the datagrid component.
For the implementation of wide range of other applications, Actionscript code can be written to generate a multitude of colorful and animated plots and charts from the data in the grid.
The data initially read into the datagrid comes from the XML file listed below (also at www.3d_ddddd). The Actionscript code is programmed to read the number of symbols from the <symbolcount> field, read the stock symbol from the <symbol> field and the previous close from the <prevclose> field.
<xml>
<status>OK</status>
<message>None</message>
<symbolcount>3</symbolcount>
<quote>
<symbol>GOOG</symbol>
<lasttrade>9/18/2009 5:20:01 PM</lasttrade>
<lasttradeprice>491.46</lasttradeprice>
<volume>3281416</volume>
<open>496.77</open>
<dayshigh>496.98</dayshigh>
<dayslow>491.23</dayslow>
<prevclose>491.72</prevclose>
<bid>491.47</bid>
<ask>491.85</ask>
<bidsize>2000</bidsize>
<asksize>2100</asksize>
<image>image1.jpg</image>
<img src="img003.jpg" width="400" height="200" alt="the egg"/>
</quote>
<quote>
<symbol>MSFT</symbol>
<lasttrade>9/18/2009 5:20:01 PM</lasttrade>
<lasttradeprice>25.26</lasttradeprice>
<volume>67990420</volume>
<open>25.46</open>
<dayshigh>25.48</dayshigh>
<dayslow>25.1</dayslow>
<prevclose>25.3</prevclose>
<bid>25.25</bid>
<ask>25.28</ask>
<bidsize>57100</bidsize>
<asksize>239900</asksize>
<image>image2.jpg</image>
</quote>
<quote>
<symbol>YHOO</symbol>
<lasttrade>9/18/2009 5:20:02 PM</lasttrade>
<lasttradeprice>17.39</lasttradeprice>
<volume>86279268</volume>
<open>17.7</open>
<dayshigh>17.7</dayshigh>
<dayslow>16.85</dayslow>
<prevclose>17.5</prevclose>
<bid>17.47</bid>
<ask>17.48</ask>
<bidsize>143800</bidsize>
<asksize>5800</asksize>
<image>image3.jpg</image>
</quote>
</xml>
Comparing Speed and Performance
As you may notice, this is the same movie clip as Rosetta1 except for one difference; this Rosetta clip has a frame rate of 18 frames per second. In the first Rosetta, the frame rate was set to 12 frames per second.
Placing the two different clips in the development platform allows for one to evaluate the performance of the two in a working online application. Switching between Rosetta1 and Rosetta18, you can quickly notice how the frame rate effects the visual.
However, there are other performance considerations for online applications. As the number of movies playing increases on a page, the performance of the flash movies can slow and degrade. This can be seen in intermittent motion steps or a slowing of the movie when you move the mouse quickly and repeateldy.
There are ways around these problem. One way is to write JavaScript code that toggles the movies on and off as the windows open and close. Another simpler way, is to place start and stop buttons on the actual flash stage itself. With that approach though, the user may not turn off specific flash animations, which in some cases may slow the other animations that are viewed.
Even at that, users may also want to toggle between windows to view different work in progress at different times. This means that other navigation control buttons and code would have to be added to save and reload work in progress data automatically. This can be done with ActionScript's sharedobject method.
Flash Platform Development
This portfolio platform, developed with Dreamweaver, not only allows you to review a portfolio quickly, but also provides an efficient way to organize and maintain a web based flash portfolio. Using this platform, making changes to either the web page or the flash animations is quick and easy. Through the Dreamweaver interface, a Flash file can be called and changed, added or deleted with just a few key strokes. As well, once you've made your changes, Dreamweaver allows you to automatically update your web site with the new changes.
One of the more interesting aspects of this portfolio development platform is that it can give the visibility needed to cross-integrate different flash applications. As a simple example, in this setup, you can first set the music with one animation and then see how it fits with the other animations. Another feature is that you can actually work on several projects at the same time. For example, you can create several different graphic designs on different scribble boards, and then quickly switch to other projects without any delay. Through different flash window setups you can also control the number of windows on the layout, when and which are opened and how they will interact with each other.
Besides what's displayed here, there is much more that can be done to enhance the portfolio development platform. Links can be made to read data from flash applications running in other windows as well with integrating Javascript buttons on the web page with the running flash animation.
Elearning applications are one of many applications that lends itself to a Flash Development Platform structure. . For example, the tabs' text can be changed to steps. allowing students to quickly go back and forth between educational animations and videos. The multiple white board structure also helps out instructors for online teaching. And that's because the instructor can quickly switch between different material that is on different scribble boards.
Performance Development
The number and type of flash files you embed into the platform will have an effect on performance. When several animations are placed on the same web page, as is done here, active movies, running behind closed tabs, can slow down the performance of the flash animation within the open window. The effect is sometimes subtle and sporadic.
So that more files can be embedded within the web page, different layout and programming techniques would allow for the support of more animations. than what can be done with the technique used here. For further development, Javascript code is to be written that also turns on and off the flash movies at exactly the same time a window opens and closes. Such curtain-time performance would also eliminate the need for stop and play buttons on the flash stage.