Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex

Adobe Flex: Article

Fireworks Flash Buttons in a Flash

Fireworks Flash Buttons in a Flash

It ever ceases to amaze me, whenever I am speaking at a conference or hanging out with the "Flashies" at various user groups, to hear them tell me how they create their really "cool" buttons in that behemoth from a company named after a building material. When I ask them if they have the Studio, the answer is an inevitable: "Well 'duh,' of course I do!" Somehow, it seems, the message still hasn't gotten out that Fireworks MX 2004 is one serious "button creating behemoth" when it comes to Flash.

Here's how to create a button in Fireworks MX 2004 that also functions as a button in Flash MX 2004.

A Simple 3-State Button

  1. Open a new Fireworks MX 2004 document.
  2. Select the rounded rectangle tool from the Fireworks Tool bar and draw a rectangle that is 100 pixels wide by 40 pixels high. You can also enter these dimensions in the Fireworks Property inspector.
  3. Select the object and, using the Property inspector, change the Fill color of the button. I used #CCCC99.
  4. Select the text tool and add some text to the button. Group the text and the button object (see Figure 1).
  5. Select the object on the canvas and press the F8 key which opens the Symbol Properties box (see Figure 2). Coincidentally, this is the same key you would press in Flash to convert a selected object to a Symbol.
  6. Name the symbol and select the "Button" property. Click OK.

    The button will now appear behind a green Slice Guide (see Figure 3). Don't worry about it, but it is critical to this technique so don't remove it.

  7. Double-click the target on the Slice Guide to open the Button Symbol Editor.
  8. Click the "Up" tab, select both objects, and select Effects>Bevel and Emboss> Inner Bevel on the Property inspector.
  9. Change the flatness setting from 10 to 5 as shown in Figure 4.
  10. Click the Over tab and when the blank screen appears, click the "Copy Up Graphic" button. Select the object in this window, and click the "i" symbol beside the Live Effect in the Property inspector. Select Inset from the button presets at the bottom of the Inner Bevel dialog box that will open (see Figure 5).
  11. Repeat the previous step for the "Down" button, but select "Inverted" from the button presets. Click "Done" when you are finished. You will return to the Fireworks canvas.
Though I am showing a basic button here, don't forget you can apply textures and other effects to the button. If you have Alien Skin's "Eye Candy 4000" or "Splat" you can create some amazing effects, such as a button that looks like a "squashed bottle cap." Apply a texture to a circle, apply an Inner bevel, and then apply Splat's Edges filter and Eye Candy's Shadowlab. The techniques are the same, but the creativity I'll leave to you.

Fireworks-to-Flash in a Flash
Importing Fireworks images into Flash MX 2004 can be somewhat complicated and requires a number of decisions. It doesn't have to be, though. You can "end run" the entire process and still have the same results. Here's how:

  1. Leave Fireworks open but open a new Flash document.
  2. Return to Fireworks.
  3. Click and drag the green Slice Guide from Fireworks onto the Flash stage. When you see a dotted outline of the button beside your mouse on the Flash stage, release the mouse.
  4. The "button" will appear on the Flash stage. In actual fact it isn't the "button". It is a flattened bitmap of the button.
  5. Open the Flash Library and you will see:
    - Six bitmaps - Three for the button shape and three for the text, and
    - One folder named Fireworks Objects containing a Movie Clip and a Button Symbol
  6. Delete the bitmap on the Flash stage and feel free to delete the Movie Clip in the Fireworks Objects Folder. You don't need either one (see Figure 6).
  7. Drag the Button symbol onto the Flash stage and, if you select Control> Enable Simple buttons, you will discover your Fireworks button functions exactly like a Flash button.
For those of you wondering if six bitmaps is a lot of baggage to be bringing into Flash, you can cut it back. Simply create the three-buttons states in Fireworks and then, before leaving the Fireworks Button editor, click the state tab, select the button, and "Flatten" it by selecting "Flatten Selection" from the Fireworks Layer Options pop-down menu. When you drop the Layer slice into Flash, you will get three bitmaps - one for each state - instead of six.

The movie clip arrives because Flash automatically creates one for .png images - the native Fireworks file format- brought into Flash.

There you have it. Create the button, drag the Fireworks Slice Guide into Flash and the button is automatically added to the Flash Library. That's how you build Flash buttons in Fireworks.

You don't have to be conservative. Figure 7 is a Fireworks button that squashes the image when the cursor rolls over it.

More Stories By Tom Green

Tom Green describes himself as 'teacher, author, chief cook and bottle washer.' He is an instructor at Humber College's School of Media Studies in Toronto, and is also the author of 'Building Web Sites with Macromedia Studio MX' and 'Building Dynamic Web Sites with Macromedia Studio MX 2004,' both published by New Riders.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

@ThingsExpo Stories
DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.
DXWorldEXPO LLC announced today that "Miami Blockchain Event by FinTechEXPO" has announced that its Call for Papers is now open. The two-day event will present 20 top Blockchain experts. All speaking inquiries which covers the following information can be submitted by email to [email protected] Financial enterprises in New York City, London, Singapore, and other world financial capitals are embracing a new generation of smart, automated FinTech that eliminates many cumbersome, slow, and expe...
DXWorldEXPO | CloudEXPO are the world's most influential, independent events where Cloud Computing was coined and where technology buyers and vendors meet to experience and discuss the big picture of Digital Transformation and all of the strategies, tactics, and tools they need to realize their goals. Sponsors of DXWorldEXPO | CloudEXPO benefit from unmatched branding, profile building and lead generation opportunities.
The best way to leverage your Cloud Expo presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering Cloud Expo and @ThingsExpo will have access to these releases and will amplify your news announcements. More than two dozen Cloud companies either set deals at our shows or have announced their mergers and acquisitions at Cloud Expo. Product announcements during our show provide your company with the most reach through our targeted audiences.
DevOpsSummit New York 2018, colocated with CloudEXPO | DXWorldEXPO New York 2018 will be held November 11-13, 2018, in New York City. Digital Transformation (DX) is a major focus with the introduction of DXWorldEXPO within the program. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of bus...
With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, @CloudEXPO and DXWorldEXPO are two of the most important technology events of the year. Since its launch over eight years ago, @CloudEXPO and DXWorldEXPO have presented a rock star faculty as well as showcased hundreds of sponsors and exhibitors! In this blog post, we provide 7 tips on how, as part of our world-class faculty, you can deliver one of the most popular sessions at our events. But before reading...
Cloud Expo | DXWorld Expo have announced the conference tracks for Cloud Expo 2018. Cloud Expo will be held June 5-7, 2018, at the Javits Center in New York City, and November 6-8, 2018, at the Santa Clara Convention Center, Santa Clara, CA. Digital Transformation (DX) is a major focus with the introduction of DX Expo within the program. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive ov...
As IoT continues to increase momentum, so does the associated risk. Secure Device Lifecycle Management (DLM) is ranked as one of the most important technology areas of IoT. Driving this trend is the realization that secure support for IoT devices provides companies the ability to deliver high-quality, reliable, secure offerings faster, create new revenue streams, and reduce support costs, all while building a competitive advantage in their markets. In this session, we will use customer use cases...
DXWorldEXPO LLC announced today that ICOHOLDER named "Media Sponsor" of Miami Blockchain Event by FinTechEXPO. ICOHOLDER give you detailed information and help the community to invest in the trusty projects. Miami Blockchain Event by FinTechEXPO has opened its Call for Papers. The two-day event will present 20 top Blockchain experts. All speaking inquiries which covers the following information can be submitted by email to [email protected] Miami Blockchain Event by FinTechEXPO also offers s...
With tough new regulations coming to Europe on data privacy in May 2018, Calligo will explain why in reality the effect is global and transforms how you consider critical data. EU GDPR fundamentally rewrites the rules for cloud, Big Data and IoT. In his session at 21st Cloud Expo, Adam Ryan, Vice President and General Manager EMEA at Calligo, examined the regulations and provided insight on how it affects technology, challenges the established rules and will usher in new levels of diligence arou...
Dion Hinchcliffe is an internationally recognized digital expert, bestselling book author, frequent keynote speaker, analyst, futurist, and transformation expert based in Washington, DC. He is currently Chief Strategy Officer at the industry-leading digital strategy and online community solutions firm, 7Summits.
Digital Transformation and Disruption, Amazon Style - What You Can Learn. Chris Kocher is a co-founder of Grey Heron, a management and strategic marketing consulting firm. He has 25+ years in both strategic and hands-on operating experience helping executives and investors build revenues and shareholder value. He has consulted with over 130 companies on innovating with new business models, product strategies and monetization. Chris has held management positions at HP and Symantec in addition to ...
Cloud-enabled transformation has evolved from cost saving measure to business innovation strategy -- one that combines the cloud with cognitive capabilities to drive market disruption. Learn how you can achieve the insight and agility you need to gain a competitive advantage. Industry-acclaimed CTO and cloud expert, Shankar Kalyana presents. Only the most exceptional IBMers are appointed with the rare distinction of IBM Fellow, the highest technical honor in the company. Shankar has also receive...
Enterprises have taken advantage of IoT to achieve important revenue and cost advantages. What is less apparent is how incumbent enterprises operating at scale have, following success with IoT, built analytic, operations management and software development capabilities - ranging from autonomous vehicles to manageable robotics installations. They have embraced these capabilities as if they were Silicon Valley startups.
Internet-of-Things discussions can end up either going down the consumer gadget rabbit hole or focused on the sort of data logging that industrial manufacturers have been doing forever. However, in fact, companies today are already using IoT data both to optimize their operational technology and to improve the experience of customer interactions in novel ways. In his session at @ThingsExpo, Gordon Haff, Red Hat Technology Evangelist, shared examples from a wide range of industries – including en...
The standardization of container runtimes and images has sparked the creation of an almost overwhelming number of new open source projects that build on and otherwise work with these specifications. Of course, there's Kubernetes, which orchestrates and manages collections of containers. It was one of the first and best-known examples of projects that make containers truly useful for production use. However, more recently, the container ecosystem has truly exploded. A service mesh like Istio addr...
Rodrigo Coutinho is part of OutSystems' founders' team and currently the Head of Product Design. He provides a cross-functional role where he supports Product Management in defining the positioning and direction of the Agile Platform, while at the same time promoting model-based development and new techniques to deliver applications in the cloud.
Predicting the future has never been more challenging - not because of the lack of data but because of the flood of ungoverned and risk laden information. Microsoft states that 2.5 exabytes of data are created every day. Expectations and reliance on data are being pushed to the limits, as demands around hybrid options continue to grow.
Business professionals no longer wonder if they'll migrate to the cloud; it's now a matter of when. The cloud environment has proved to be a major force in transitioning to an agile business model that enables quick decisions and fast implementation that solidify customer relationships. And when the cloud is combined with the power of cognitive computing, it drives innovation and transformation that achieves astounding competitive advantage.
Poor data quality and analytics drive down business value. In fact, Gartner estimated that the average financial impact of poor data quality on organizations is $9.7 million per year. But bad data is much more than a cost center. By eroding trust in information, analytics and the business decisions based on these, it is a serious impediment to digital transformation.