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 2) - Adding AIR events

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
6/25/2012 5:02:20 PM

Adding AIR events

Fireworks supports four AIR mouse events: Close, Drag, Minimize, and Maximize. Just like rollovers or links, AIR events must be attached to a web object (a slice or a hotspot). If the area being used as an AIR event doesn’t require a rollover, you can use a hotspot. If you do need a rollover effect (as is the case with our Close button), you’ve got to use a slice to enable image swapping. You will add hotspots and mouse events to various parts of the console so users can drag the prototype around on their desktop. You will also add a mouse event to the Close button.

You will now add an AIR mouse event to the Close button.

1.
Choose the home page from the Pages panel.

2.
Click Show Slices And Hotspots in the Tools panel if the slices and hotspots are not visible.

3.
Select the slice that covers the Close button (the pictogram of the hikers).

4.
Choose Commands > AIR Mouse Events > Close.

Nothing changes in the slice, but if you look down to the Properties panel, you will see that some JavaScript has been added, along with some alt text.

This AIR event has already been added to the other pages, using a shared Web layer.

5.
Switch to the sites page, and select the slice over the Close button. The Properties panel displays the same JavaScript code and alt text.

6.
Expand the Web layer in the Layers panel.

7.
Expand the common web sublayer. It stores the slices for both the close and home slices.

The common sublayer was not shared to the home page because there was no need to have a home link on that page.

8.
Select the main Web layer in the Layers panel again.

9.
Choose New Sub Layer from the Layers panel menu.

10.
Name this new Web layer drag events. Note that even web sublayers are shared across states.

11.
Right-click (Windows) or Control-click (Mac) on the squirrel illustration, and choose Insert Hotspot.

12.
Use the Pointer tool to resize the hotspot so it doesn’t overlap the Close button.

13.
Check the Layers panel. The new hotspot might not be nested in the drag events sublayer. If the hotspot is not in the sublayer, move it there now by cutting and pasting the hotspot or by dragging the layer to the correct position in the Layers panel.

Not inside the drag events layer

Inside the drag events layer

14.
Make sure the new hotspot is selected. This will force additional hotspots to be created above the current one, but they will still be nested in the drag events sublayer.

15.
On the canvas, draw a rectangular hotspot around the Camp Sites sign, without overlapping the squirrel.

16.
Draw one more hotspot, covering the entire console from the left corner to just before the tree rollover slices.

17.
Select all three hotspots, and then choose Commands > AIR Mouse Events > Drag.

18.
Right-click (or Control-click) on the drag events sublayer, and choose Share Layer To All Pages, as we want this shared with every page in our mockup.

19.
Save the file.

AIR mouse events

You can attach specific mouse events to hotspots or slices in your AIR mockup. Select the web element (slice or hotspot), and then choose Commands > AIR Mouse Events. You can choose from four options:

  • Close. Closes the application.

  • Drag. Applied to a web object, this option lets the user drag the application around the desktop.

  • Maximize. Maximizes the application.

  • Minimize. Minimizes the application.

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
Trailers Game
- The Banner Saga 2 [PS4/XOne/PC] PC Launch Trailer
- Welkin Road [PC] Early Access Trailer
- 7th Dragon III Code: VFD [3DS] Character Creation Trailer
- Human: Fall Flat [PS4/XOne/PC] Coming Soon Trailer
- Battlefleet Gothic: Armada [PC] Eldar Trailer
- Neon Chrome [PS4/XOne/PC] PC Release Date Trailer
- Rocketbirds 2: Evolution [Vita/PS4] Launch Trailer
- Battleborn [PS4/XOne/PC] 12 Min Gameplay Trailer
- 7 Days to Die [PS4/XOne/PC] Console Trailer
- Total War: Warhammer [PC] The Empire vs Chaos Warriors Gameplay Trailer
- Umbrella Corps [PS4/PC] Mercenary Customization Trailer
- Niten [PC] Debut Trailer
- Stellaris [PC] Aiming for the Stars - Dev. Diary Trailer #1
- LawBreakers [PC] Dev Diary #4: Concept Art Evolutions
programming4us programming4us
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 windows Phone 7 windows Phone 8
programming4us programming4us
 
programming4us
Natural Miscarriage
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Game Trailer