![]() You can use the nodes, or little squares, on the sides and corners of the shape to resize your dynamic panel List of widgets than the image and placeholder widgets, so scroll down to find it.Ĭlick and drag the Dynamic Panel symbol onto the page where you want your image. In Axure RP the dynamic panel widget can be found in the widgets library (see figure 1). ![]() That the image is added to as a background, not as an element on the page in its own right. Edit the width and height of the image Task 3 : Add an image using the dynamic panel widgetĪ dynamic panel acts differently to an image or placeholder widget. Note how the aspect ratio is now incorrect compared to the original image in figure 3.Īt the end of this task you should be able to: Without resizing the image widget (please note: if the aspect ratio is wrong then the image will be squashed).įigure 4. Image loaded with yellow handles so that the image widget resizes.ĭouble-click on the image resize handles and they will turn white (see figure 4). If you add the image at this stage the widget will resize (seeįigure 3. You can prevent thisįrom happening by double-clicking on the image resize handles.īy default the image resize handles are yellow. If you load an image that is larger than the image widget you can resize it while maintaining the aspect ratio byĬlicking and dragging on the resize handles while holding down the Shift key on your keyboard.Īs mentioned previously, the image widget will resize to match your image dimensions. The image on the right has the aspect ratio locked, as indicated with a blue bar. The image on the left does not have the aspect ratio locked. The width and height values in the Inspector pane. This means that the aspect ratio will be maintained if you alter the height or theįigure 2. The image on the right has the aspect ratio locked, as indicated with a blue bar.īlue bar added (see figure 2). If the blue bar is not there then you can edit the height and width separately.įigure 5. This means that the aspect ratio will be maintained if you alter the height or the If you click on it you will see aīlue bar added (see figure 5). The grey, broken rectangle between the W and the H indicates the aspect ratio. You can edit the height and width of a placeholder image in the Inspector panel. Height to match the image you are importing to the design. Make sure you ensure your widgets have the correct width and The original image, the image will be distorted. ![]() Unfortunately this means that if the widget has a different height and width to You can now double-click on the widget to load a picture. On the left is a placeholder widget with a grey circle, on the right is the same widget converted into an image widget with a yellow triangle. ![]() Now an image widget because the grey circle has change to a yellow triangle above it to the left-hand side (seeįigure 4. The placeholder widget previously had a grey circle above it to the right-hand side. Right-mouse-button (RMB) click on the placeholder widget.įigure 3. When you are ready to add an image to replace the placeholder symbol you need to convert your placeholderġ. If you double click on the placeholder on your page a cursor will appear, allowing you to type text on top of the You can use the nodes, or little squares, on the sides and corners of the shape to resize your placeholder. In Axure RP the placeholder widget can be found in the widgets library (see figure 2).Ĭlick and drag the Placeholder symbol onto the page where you want your placeholder widget. The focus is on layout and functionality, or it might be added because the final images are yet to be sourced. It might be used at a wireframing stage when The same location in the document, with the same dimensions. Week 2 Task 1: Add an image using the placeholder widgetĪ placeholder symbol (see figure 1) lets the designer or developer know that an image needs to be placed at
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |