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
     
     
     
     
     
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.
4. The listed controls are categorized as "AI Detected Controls" and "Available Controls".
   
5. 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.


Press the [ Apply ] button for the Gauge control listedfrom underControl "AI Detected Controls".list.

• 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.
  
  

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
  LayerSelect Mapping[Select layers] from the pull-down menu and set as follows. After selecting the image, check [Pivot Point].

  BackgroundImage
  

  Scala kmh
  

  Gauge Background
  

  BackgroundImage
  

  BackgroundImage
  

  　　Control Bitmaps and Customize
  BackgroundImage

  NeedleImage

  Center

  NeedleImage

  Basic Properties
  

  Name
  

  InputMax
  RotationMax
  

  SpeedGauge
  

  240
  225
  

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

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
  LayerSelect mapping[Select layers] from the pull-down menu and set as follows. After selecting the image, check [Pivot Point].
  	Scala kmhBackgroundImage Gauge Background	BackgroundImage Scala rpm BackgroundImage Gauge Background

  　　Control Bitmaps and Customize
  BackgroundImage

  NeedleImage

  central

  NeedleImage

  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.
     
     
     
     
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.
     
     
     
     
     
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.