The First Tutorail from my friend Rafiq El-Manasy (ACE , Adobe Expert , AUGM). He runs the Adobe User Group (Egypt) specialize in Art-Work , Digital Art and Media .., he will starting talk about (Design , Animation , Art , .. ) into Flash CS4 throw “Flash:Zero To Hero” Series .. Thanks Rafiq for your effort.
Getting into Flash CS4 : by Rafiq El-Mansy
In this tutorials series we will dig into the Flash as a design and animation tool. One of the best advantages of using Flash is that it allows you to create content for many outputs not only the web.
Flash is a universal program that you can create output for different media such as web, desktop, mobiles devices, TV and video broadcasting and DVD players…etc.
The aim of mentioning this is that when we create a new Flash project we should know what is the possible media that we will output the project for. And thus, we decide the suitable specifications for the project and project details.
For example, when you create a project for TV, you can either create the document dimensions and frame rate based on the PAL or NTSC TV broadcasting systems. Also, when you work for Flash website, you should consider the user type, loading fast and add a preloader to appear to the user while the content is loading.
Creating a New Flash Document
When you create a new Flash document, you can either create a new document or set its properties as you like or choose from the existing templates. These templates can be updated to include more varieties.
When you open Flash, you can create a new document either for the splash screen or through the File > New command. Both options gives you the option to create your custom new file or select from the templates available.
Figure01. Adobe Flash CS4 splash screen
Also, you can create a new Flash file by choosing New in the Flash menu. The New dialog box, has two tabs, one for the New documents and the other tab for the templates documents.
Figure02. New Document Dialog box
The New Flash documents can be compatible with Action script 2 or 3, you can choose a Flash file for mobile or Action Script file.
New Document Properties
When you create a new document, you can set the properties of the document through the Properties panel. The Properties panel includes the following properties:
Document dimensions, you can set the width and the height of the document.
Frame rate, the frame rate shows the speed of the animation by the number of frame that will be played in a second FPS.
Stage, this option lets you choose the color of the stage which is the color of the movie background.
This is the first step in creating a Flash project, which lets you create the new document that will include your work project and in the next articles we will dig more to understand the Flash drawing tools and animation concept.
30 Rich Data Visualization Tools for creating graphs, Gantt charts, diagrammers, calendars/schedulers, gauges, mapping, pivot tables, OLAP cubes, and sparklines, in Flash, Flex, Ajax or Silverlight.
AnyChart is a flexible Flash based solution that allows you to create interactive and great looking flash charts.
Axiis is a Data Visualization Framework for Flex. It has been designed to be a concise, expressive, and modular framework that let developers and designers create compelling data visualization solutions.
Also, take a look at the nice window-in-window design on the saturnboy blog.
BirdEye is a community project to advance the design and development of a comprehensive open source information visualization and visual analytics library for Adobe Flex. The actionscript-based library enables users to create multi-dimensional data visualization interfaces for the analysis and presentation of information.
Degrafa is a declarative graphics framework for creating rich user interfaces, data visualization, mapping, graphics editing and more.
An addition in the Dojo 1.3 release is the new dojox.charting class. Its primary purpose is to make connecting a chart to a Data Store a simple process.
Dundas has a wide range of data visualization solutions for Microsoft technologies. They offer a number of data visualization tools including: Chart, Gauge, Map and Calendar for .net and Dashboards for Silverlight.
Flex has built in chart controls: area, bar, bubble, candlestick, column, HLOCC, Line, Pie, Plot. Quick tutorial here that can get you up and running with nicely styled charts using effects.
Flex uses FXG, a graphical interchange format developed by Adobe and is similar in many ways to SVG. Nice article here by James Whittaker looking at FXG and Degrafa. And you should definitely have this book on your desk if you are using Flex: Creating Visual Experiences with Flex 3.0.
Flexmonster provides Pivot table Flex/Flash components rich internet application (RIA) development services.
Animated flash charts for web apps. Looks like they work with most technologies.
The Google Chart API lets you dynamically generate charts.
Enhance data visualization within Flex and AIR applications with IBM ILOG Elixir.
Creates charts such as bar charts, line charts, pie charts, time series charts, candlestick charts, high/low/open/close charts, wind plots, and meter charts. I wish these charts looked better out of the box, because the features and functionality are good, but the visual design really detracts from the graphs. JFreeChart guys- email me- together we can make the world of JFreeChart a prettier place.
There ar a lot of JQuery chart pugins:
The PHP graphing scripts provide a very easy way to embed dynamically generated graphs and charts into PHP applications and HTML web pages.
I can only hope that CSS can make these look better. I’ll do a follow up post on how to make your charts aesthetically pleasing.
Kap Lab’s Diagrammer provides ready-to-use yet highly customizable multi-layout data visualization and diagramming for Adobe Flex and Air.
Visualizer displays data as graphs to better visualize connections. Kap Lab’s Visualizer provides ready-to-use yet highly customizable multi-layout data visualization for Adobe Flex and Air.
A simple to use, yet robust library for transforming table data into a chart. This library uses the HTML5 tag and is only supported on browsers other than IE until ExCanvas gets proper text support.
Open source Flash charts.
Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction.
Microsoft Silverlight comes with the bar, line, pie, column, and scatter charts.
Stack is probably the most useful of the visualization offerings from Digg. Stories with the most recent activity load across the bottom of the screen and then ‘Diggs’ seemingly fall from the sky to land and create a real-time graph of what stories are popular. Whenever a ‘Digg’ hits a story stack, the title of the story is shown at the bottom of the screen, pushing previous stories down, and eventually off the screen.
Telerik Charts offers rich functionality and data presentation capabilities.
Visifire is a set of open source data visualization controls - powered by Microsoft® Silverlight™ & WPF.
Websites as Graphs shows the structure of different websites based on the tags used in their code in a color-coded map that grows on the screen as you watch. Tags are somewhat intuitive in their color-codes, with blue for links, red for tables, and gray for any tags not specifically given a color.
The yFiles product family means state-of-the-art software components for the visualization of networks and diagrams. Unequaled automatic diagram layout, cutting edge graph analysis, and extraordinary visualization.