Creating Object Interactivity in Adobe Fireworks. Creating Object Interactivity in Adobe Fireworks One of the fun things about using Fireworks is creating interactive graphics and objects to use in your documents. These let you cut an image into smaller pieces. The Hide Slices and Hotspot button is located below the hotspot tools. This hides slices and hotspots. The Show Slices and Hotspots button is located below the slice tools. It makes slices and hotspots visible. NOTE: You can hover your mouse over any tool in the Tools panel to learn the name of the tool. I am using ASP.NET Rectangle in order to specify a hotspot in the image. I am struggling with determining the coordinates. So is there any tool that helps me in.Creating Slices. A slice is a portion of an image or design that you will export as a graphic. If you export a slice as HTML And Images, the slices can include hyperlinks, rollovers, and other interactive features. Once you create a slice, the slice is added to the Web layer of the document. This is James and this is my tutorial showing you how to use the Hotspot tool in Adobe Fireworks, this tool is used to create clickable links in an image. There are three different options for the type of slice that you create. The slice has three main parts: 1. You can rename the slice in the Properties panel. Optimizing Slices. To optimize a slice, make sure the slice is selected in the Layers panel. Next, go to the Tools panel and click Hide Slices and Hotspots, then click the Preview button in the document area. Optimize the sliced part of the image as you did a single- file image. You can use 2- Up to compare the original with the optimized version. Add more slices if you want, then optimize each one. Creating a Hotspot. A hotspot makes part of an image or page interactive. Working with the Line Tool. The Line tool lets you draw lines by dragging from one point in the active document and releasing in another. An online guide to creating image maps in dreamweaver. We are just going to use the rectangle hotspot. Click on the rectangle hotspot tool. Client-side image maps store the hypertext. Select the circle tool and drag the pointer over the image to create a circular hotspot. Select the rectangle tool. Display the Web toolbar and choose the Hotspot Rectangle, Hotspot Circle, or Hotspot Polygon. Use the tool to draw a hotspot. You can use hotspots to create web links within sliced objects. We are going to add a hotspot to the chart in the slice below. To do this, select the Rectangle Hotspot tool. Press the Shift key and draw a rectangle around the area that you want to turn into a hotspot. The hotspot has a blue tint to it. Now, take a look at the Properties panel. Type a URL in the Link field. In the target field, specify what you want to happen when the link is clicked on. Click and hold down the Rectangle Hotspot tool to see that you have a choice of creating a rectangular, circular, or polygon hotspot. Creating a polygonal hotspot. What do you if your image is not rectangular or circular shaped and you wanted to create a hotspot? For irregular shaped images, you can. Slice tool and Slice select tool. The slice tools in Photoshop are particularly useful for Web designer’s as these allow them to divide an image up into. We've selected the rectangle pictured below. Next, go to the States panel and create a duplicate state as we learned to do earlier in this article. The duplicate state should come after the existing state. Change the appearance of the new, duplicate state so that it's different from the original state. We are going to change the fill color. Now that we have our two states for our rollover, we need to use slices and behaviors to produce the actual rollover effect. To insert a slice, make sure the second rectangle is still selected. Go to Edit> Insert> Rectangular Slice. Next, go to the Behaviors panel. You should see the different states. Using a Slice to Create a Hover State Now we are going to show you how to use them to create hover states. To create the hover state, define the area for the slice. This will become the hover area. This must be an area that already has more than one state. Click on the Pointer tool in the Tools panel. Drag the behavior handle in the center of the slice to the left then up toward the name of the slice. You will see the blue line shown below, along with the swap image dialogue box. We have selected State 2. Click OK. When you preview in your browser, you will notice the sliced area changes from one state to another when your mouse hovers over it. Creating an Animated GIF Using States. Creating an animated GIF using the states panel is easy. To start out with, add a shape or object to a new document, as we've done below. Create a new state or a duplicate state, then change the shape or object. We are going to enlarge the star. We enlarged the star in the second state by clicking on the Pointer tool in the Tools panel, then dragging on the blue handles. Next, create as many more states as you need. We are going to create two more in order to make the star pulsate. Now click the Menu Options button in the upper right hand corner of the States panel. Select Properties. Enter a duration for each state. The larger the number, the longer the duration for each state. We are going to set ours to 2. You will need to set the state duration for each state. What you are doing is tying the states together. When you are finished, go to the Web area of the Tools panel. Click on the Slice tool. It looks like this: Drag the slice tool over your shape or object. Next, go to the Optimize Panel. Make sure your settings match the ones in the next snapshot. When you are finished in the Optimize panel, go back to your document and right click on the slice. Select Export Selected Slice. Now you can save your animated GIF to a location on your computer. You can now open it in Internet Explorer or any photo viewing program that supports animated GIFs. About Prototypes. Fireworks is an excellent prototyping tool that you can use to create mock- ups of web pages, mobile apps, and other user interfaces. By using the Pages panel, the Layers panel, symbols, and other aspects such as hotspots, you can test different designs and figure out existing issues. A prototype is defined as a mock- up or a demo of what an app or website will look like. A prototype can be something as similar as a sketch you've done on paper, and it can be as complex as a clickable HTML prototype. The workflow for a prototype is typically: 1. For example, is it an app, a game, or a website? Wireframes can be hand- drawn and are made up of lines that define a site's structure. For the purpose of this article, we are going to create a prototype for a very basic website. In fact, you can compare it to the very first draft of a report – you're just getting the main ideas down. Our wireframe is pictured below. We have not imported it into Fireworks yet. Now that we have our wireframe sketched out, we are going to open Fireworks and create a new project. Make sure you set the proper dimensions for your project when you create the new document. To start designing our prototype in Fireworks, we first need to go to the Layers panel and create two layers. We are going to rename the first layer Wireframe, as shown below. We name the second layer Wireframe Sketch. Once that is finished, we are ready to import our wireframe. Click on the Wireframe Sketch layer, then go to File> Import. Locate your wireframe sketch and import it. Take a look at the Layers panel again. You can see our sketch appears in the Wireframe Sketch layer. Perfect! We are going to use the sketch to create a wireframe in Fireworks. To do this, we are going to use guides to mark where we will draw shapes. Use the sketch to determine where you need to place guides. You can see the guides on our document below. Next, with the layer named Wireframe active, we are going to draw the shapes on our document using the vector shapes tools. Now, go to the Layers panel. Lock the Wireframe Sketch Layer, then click the eye icon to the left of it to make it invisible. It should like likes ours does in the snapshot below. We have highlighted it to make it easier for you to see. When you are finished, go back to your document. Add text to the shapes and label what each shape represents. If you haven't already, take the time to name the shapes in the Layers panel so you know what each one is. If you look at the Layers panel in the snapshot above, you'll see icons in the lower right corner of each object that lets you know the type of object it represents. So far, we have text and shapes. When you're finished, your wireframe in Fireworks will look something like this: Now you can start adding design elements to the page, such as the banner. Make sure the new layer is active as we move forward. About Wireframe Symbols. If you go to the Common Library, you can see some wireframe symbols created for you by Fireworks. If you are creating a prototype of a website, you will need to create every page in your prototype. If you are creating an application, every state of the application will need a page in Fireworks. In the snapshot below, we have started to add graphics and filler text to our prototype. You can still see our wireframe beneath the graphics we have added. However, we are going to hide the wireframe layer for now by clicking on the eye icon to the left of the layer. Now go to the Pages panel. If you want to create a master page, right click on the page, then select Set As Master Page. For our prototype, we are only going to have two pages. To add another page, right click on the existing page, then select New Page. You can then name your pages. The first page should be named . In other words, focus on the visual aspect of the prototype for the time being and get all the pages finished in that regard. Once you have all of that ready, you're ready to move forward. Creating States The next step is states to different design elements. You can add hover states to navigation elements. You may also want to add hover states to dropdown menus, tooltips, and links. Remember, to create a hover effect, all you need to do is change the look or appearance of the object for the second state. Use the States panel to do this. Slices and Hotspots. Once you have everything else placed in your prototype, you can start adding slices and hotspots. You can use slices to define interactive regions such as hover states and hotspots to create areas for hyperlinks. Most websites will use the logo area as a hotspot. Clicking on the logo will take you to a page in the website. This page is usually the home – or index – page. In the snapshot below, we are going to turn the logo area into a hotspot by clicking on the Rectangle Hotspot tool and dragging it over the logo. To add the hyperlink, we go to the Properties panel. Type in the URL in the Link field, then alternate text in the Alt field. To test the hotspot in a browser window, go to File> Preview in browser, then select your browser. Linking Pages Together. Creating hotspots in your prototype and linking them to external websites is easy, but you also need to link the pages of your website together. Now you just need to link your pages. You can do this by creating hotspots if you don't want to add hover effects. This should be the name of the page as it appears in the Pages panel.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2016
Categories |