Skip to main content

Importing resources (Smart Importer)

Import contents into each scene in the solution using the Smart Importer, which uses AI to analyze Photoshop files to detect, suggest, and create controls for the Scene Composer solution. This step describes the operation of assigning appropriate controls to images on a resource using the Smart Importer.

Gauge Control

  1. From the menu bar, select "Import" and then "Smart Importer > From Local File..." and select the resource to be imported.
    • A file selection dialog will appear.
      • If you have not saved the solution yet, a dialog will appear prompting you to save the file first.
    • In this tutorial, "Car_Cluster.psd" saved in the following folder is used.
      \cgi_studio_content\2D\PSD
      drawing-4-1714387557.png


  2. The Smart Importer dialog box appears.
    • For more information on the Smart Importer dialog box, click here.
    • The [ OK ] button at the bottom of the Smart Importer dialog box is pressed when all settings are complete and performing import.

  3. Expand "Cluster" in the Layer tree of the Smart Importer dialog and select "Gauge Left".
    • A control list appears on the right side of the dialog, listing the available controls.
    • The listed controls are categorized as "AI Detected Controls" and "Available Controls".
    • The number displayed to the right of each control indicates the detection rate by the AI.
    • If you select a control with a low detection rate, a dialog box will appear asking you to confirm the execution of the application.
      drawing-5-1726817579.png


  4. Press the [ Apply ] button for the Gauge control listed under "AI Detected Controls".
    • The Gauge control is assigned to "Gauge Left" on the layer tree ("Gauge Left" text color changes to blue).
    • The Appearance tab will automatically select on the right side of the dialog.

  5. Set the following settings in [ Appearance ] and [ Basic Properties ] of "Gauge Left".
    • Note that if "BackgroundImage" is not set for layer mapping, the standard background of the Gauge control is used instead of the image on the Photoshop file.
      Gauge left
      Target Tab Target Item Setting Value
      Appearance
      		 
      　　Layer Mapping

      Scala kmh

      Gauge Background

      BackgroundImage

      BackgroundImage
      　　Control Bitmaps and Customize

      		BackgroundImage Center
      Basic Properties

      Name

      InputMax
      RotationMax

      SpeedGauge

      240
      225
  6. Apply the control "Text Value" to the Text in the "Gauge Left" and set the following.
    Gauge left
    Target Tab Target Item Setting Value
    Basic properties

    Name

    SpeedValue
  7. Perform the step 2 through step 6 above for the "Gauge Right" as well.
    • The settings for the Gauge and Text Value controls are shown in the table below.
      Gauge Control
      Target Tab Target Item Setting Value
      Appearance
      		 
      　　Layer mapping

      Scala kmh

      Gauge Background

      BackgroundImage

      BackgroundImage
      　　Control Bitmaps and Customize

      		BackgroundImage central
      Basic Properties

      Name

      InputMax

      RPMGauge
      8000
      Text Value control
      Basic Properties

      Name

      RPMValue

Duplicate and set up scenes

Transitions between scenes are made using State Machine Editor function described below. In this section, duplicate the "Car_Cluster" to which the controls have been applied up to the previous section and create a separate scene. The following operations are performed on the right side of the Smart Importer dialog box, [ Import Settings ] tab.

  1. Select Car_Cluster in [ Scene Name ] and choose [ Duplicate Scene... ] from the context menu.
    • The [ Clone Scene... ] dialog appears.
      drawing-4-1707873213.png

  2. Enter "Car_Status" as the name of the scene to be duplicated and press [ OK ] button.
    • A scene named "Car_Status" is created and displayed in the Layer Tree and Preview.

  3. With the "Car_Status" scene selected, expand "Middle" from the Layer Tree.
    • The check is in place on the "Car".

  4. Uncheck "Car" and check "Car Status".
    • The center of the image displayed in the Preview section changes.
      drawing-4-1714388079.png


  5. Repeat operations 1 through 4 above, this time adding an "Incoming Call" scene.
    • In step 4, check the "Incoming Call" checkbox.

The resource preparation work is completed. Click the [ OK ] button in the Smart Importer dialog box to perform the import.

Back to top