Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows Vista

Adobe Fireworks CS5 : Working with Adobe AIR (part 1) - Reviewing interaction

- Free product key for windows 10
- Free Product Key for Microsoft office 365
- Malwarebytes Premium 3.7.1 Serial Keys (LifeTime) 2019
6/25/2012 5:00:03 PM
AIR (Adobe Integrated Runtime) is a cross-platform runtime environment for building rich Internet applications using Adobe Flash, Adobe Flex, HTML, or Ajax. Unlike traditional web applications, the AIR application runs on your desktop without a web browser, often as a floating panel.

With its combination of HTML and JavaScript support, Fireworks has everything you need to create a realistic interactive AIR prototype. The console mockup you will soon be working with contains all the necessary elements to give the client the appearance of a functional AIR application. The artwork is mostly complete, and you will be adding AIR interactivity to the file as well as making some adjustments to the imagery.

Note

Fireworks CS5 exports AIR prototypes using the AIR 2.0 specification. Before you begin this lesson, make sure you have AIR 2.0 installed on your system so that you can install your prototype when it is completed. At the time of this writing, AIR 2 is in public beta, so you may have to visit Adobe Labs (http://labs.adobe.com/technologies/air2/) to download version 2.


AIR functionality in Fireworks

An AIR prototype is akin to an HTML And Images export for a website. You will get the look and feel and the interactivity of the application, but there is no live data connection to other content—it’s not a fully functional AIR application. Likewise, features such as scrolling in a text window are not possible. However, rollovers, hyperlinks, and dragging are all possible.

Fireworks gives the client an opportunity to “test-drive” the design and functionality of an AIR application before any time is spent on the coding side.

Most of the techniques used in creating an HTML mockup can be applied to creating an AIR prototype.


Reviewing interaction

You’ll preview a simulation of a console designed to allow visitors to browse campsites. You’ll test the console’s interactive features as well.

1.
Open the file nature_tours_console.fw.png from the Lesson13 folder. If you are prompted about missing fonts, you can simply click Maintain Appearance.

This console allows users to browse various campsites affiliated with the fictitious Nature Tours Company, and to check rates and availability of sites. Standard web interactivity has been used to create this simulation, even though the end result will not be a website.

Note

The decorative font used in this design is called JI Chaffs. To minimize rendering issues, this font has been converted to paths. The only other font used in this file is Arial and that has been left as a true font, rather than being converted to paths.

2.
Expand the Pages panel so you can see the entire list of pages in the document (a total of ten).

3.
Select the sites page.

Note

While the company may be fictitious, the photos are the work of the completely real Jim Babbage, of an equally real location called Obatanga Provincial Park in northern Ontario, Canada.

4.
Click Show Slices And Hotspots in the Tools panel.

A little squirrel mascot displays the current location. There are buttons to close the application and to return to the main console display.

Note the hotspots over the site names and the slices over the tree icons and the console screen.

5.
Switch to the Preview view at the top of the document window.

6.
Click Hide Slices And Hotspots in the Tools panel.

7.
Roll over the Site B link in the right column. Effects have been added so that the screen updates with a different photo when you hover your mouse over the link, and the small tree icon also changes in appearance. The hotspots also link to other pages in the design.

Note

In order for the interaction to work, you must select the Pointer tool in the Tools panel.

8.
Select the Site A page in the Pages panel.

Our squirrel acts as a way-finding device, displaying the current location. The only rollover effects on this page are for the navigation.

9.
Switch to the maps page in the Pages panel.

10.
Mouse over the different map links. The appropriate map thumbnail highlights in response to your rollover.

11.
Select the map_A page from the Pages panel. Only one final site map has been completed, but this is enough to show the client how that aspect of the console will function.

Although Fireworks cannot create a user-scrollable area, it can simulate zooming in and out of an area.

12.
Click the plus sign (+) on the map zoom bar. A new state appears, with a magnified view of the map.

13.
Click the minus sign (−). A reduced view of the site appears.

14.
Click the green dot to return to the original map-A page.

15.
Switch back to the Original view in the document window.
Other -----------------
- Adobe Fireworks CS5 : Starting mobile projects - Selecting a device profile
- Adobe Flash Catalyst CS5 : Connecting Your Project to Live Data - Changing the Project Type (part 2) - Configuring the return data
- Adobe Flash Catalyst CS5 : Connecting Your Project to Live Data - Changing the Project Type (part 1) - Set up the project
- Adobe Flash Catalyst CS5 : Connecting Your Project to Live Data - Setting Up a Local Testing Server
- Adobe After Effects CS5 : The Timeline - Timing and Retiming
- Adobe After Effects CS5 : The Timeline - Motion Blur
- Adobe Flash Professional CS5 : Importing Graphics - Setting Illustrator Import Preferences
- Adobe Flash Professional CS5 : Importing Graphics - Understanding Vector and Bitmap Graphics
- Adobe InDesign CS5 : Managing Pages and Books - Navigating Pages & Adding Color Labels to Pages
- Adobe InDesign CS5 : Managing Pages and Books - Changing the Page Size
 
 
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
 
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server