Navigation

    CreatiCode Scratch Forum

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode

    Image Widgets

    2D Blocks
    1
    1
    166
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • info-creaticode
      CreatiCode last edited by admin

      Introduction

      There are quite a few ways for you to add images to your project. You can either add an image widget directly onto the stage, or attach an image to another widget. The source of the image can be a costume or the URL of an image shared online.

       
       

      Add Image from Costume

      To add any costume image to the stage as a widget by itself, you can use the following block:

      088fa25d-0a47-4052-8d9f-d86f5cecbe01-image.png

       

      • Costume Selection: The first input lists all the costumes in this sprite for you to choose from
      • X and Y: The position of the center point of the image widget. To place the image at the center of the stage, you can set both X and Y to 0.
      • Width and Height: The size of the image widget.
      • Aspect Ratio Type: The image from the costume will be scaled up or down to fit into the given width and height. But you can control its aspect ratio (ratio between width and height). If “keep” is selected, the image will keep its aspect ratio, so the image will look normal, but the image may not fully occupy the rectangle area. If “stretch” is selected, the image will occupy the entire rectangle area, but it may be stretched horizontally or vertically.
      • Name: The last input is the name of the image widget.

       
       

      Example

      This example shows the difference between the 2 aspect ratio types using 2 costume images. The image widget is a square shape that is 300 by 300, but the 2 costume images are not square, so we see a difference between ‘keep’ and ‘stretch’ options:

      d5.gif

       
       

      Update Image Widget Background

      You can still update the background of the image if it has transparent areas:

      4aa2aa73-b383-4710-b91a-c1654a05126a-image.png

       
      75b1f384-5fae-490e-9b9e-2b683bafb88d-image.png

       
       

      Image from URL

      If you have the URL of an image online, you can add it directly using the following block:

      ae3c8d6f-80c0-4b70-8384-e38839213e29-image.png

       
      The first input has to be the URL of an image, such as ,.

      All the other inputs are the same as the previous block.

       
       

      Attaching a Costume Image to A Widget

      Sometimes we may need to attach one or multiple images to another widget, such as a label or a button. You can use the “add image to widget” block:

      62cfef46-54d3-444f-81c0-7ed0c585d865-image.png

       

      • Costume: The first input is the costume to use
      • Parent Widget: The second input is an existing widget, such as a label or button, that will be used as the parent of the image we are adding.
      • X and Y: These are the position of the image relative to the parent widget. For example, if X=0 and Y=0, the image will be added at the center of the parent widget.

       
      Note that you can not set the width and height of the widget. It will be scaled to fit the height of the parent widget.

       
       

      Example

      In this example, we add a label first, then set its text style to make sure the text “Coddy” appears on the left. Then we attach the costume image to the right side of the label.

      98e37f1c-82fc-4325-a5ed-14f97f6fb52b-image.png

       
      This is what we get:

      6eb7ec43-2e71-4eed-b8d6-7e38abcccf2d-image.png

       
       

      Attach An Online Image Using Its URL

      You can also attach an online image to a parent widget like this:

      4ece48b9-5d85-427d-be62-9508a59fc28e-image.png

       
      This is what you get:

      de48dd99-ef2b-4c04-b3d8-227d3864834f-image.png

      1 Reply Last reply Reply Quote 0
      • First post
        Last post