CyberFlair use cookies.    For information, please see our privacy policy
  www.cyberflair.com
Keep in Touch
Contact Us CyberFlair on Facebook CyberFlair on Twitter CyberFlair on LinkedIn CyberFlair RSS Feed
  
banner bottom
Home Products Support News Company
 Help Contents
  
Skip Navigation Links
Contents
Introduction
Studio Editor Topics
Studio Templates
Studio Tutorials
Playback Overview
Screen Saver Topics
Movie Creation Topics
Playlist Topics
Licensing
Terminology
Get More Help...

Report above advert?
      

3D Impressions Tutorial - Adding a Picture

View Product »

Step 1 - Select 2D Square Object

First, ensure that your scene contains a standard, 2D square object and is now selected ready for modification.  This can be achieved by following the 'Adding 2D Object Tutorial'.

By selecting the 'Material' ribbon category, (see point 1 below), your studio editor should look something like this:

UI - Single 2D Square Point 1 Point 2 Point 3 Object Context Menu Point 4

 

Areas of note that are highlighted above include:

  1. The 'Material' ribbon category gives quick access to changing the object's appearance.
  2. Object's 'Picture' properties can be changed on the 'Material' context ribbon category.
  3. Selecting the 'Material Properties' tool window gives you access to all values that affect an object's outward appearance.
  4. Right-clicking the selected object displays the context menu that also offers access to 'Base Material Picture'.

Step 2 - Selecting a Picture File

To display the window for selecting the picture file, click any of the following:

  • The 'Picture' button on the 'Material' context ribbon.  (Marked as '2' on the diagram above.)
  • The 'Edit...' from the drop-down select control available by clicking the 'Picture' property within the 'Material Properties' tool window.  (Marked as '3' on the diagram above.)
  • The 'Base Material Picture...' from the object's right-click context menu.  (Marked as '4' on the diagram above.)

Doing so will display the following dialog box:

UI - Object Material Picture dialog box Step 1 Step 2 Step 3

 

To identify the picture you wish to use, you can either:

  1. Enter the pictures full path name.  For example, C:\Windows\Web\Wallpaper\Windows\img0.jpg
  2. Clicking the folder icon allows you to browse your storage drives for a picture file.
    This will also only show you which types of picture files are supported by the product.
  3. Clicking the 'Gallery' button shows you the collection of pictures and images supplied with the product. 
    By using the button options triangle you can also quickly access other collections of pictures on your computer or visit the CyberFlair 3D Impressions Online Galleries.

If later you decide to not have a picture placed upon the object, simply select the 'None' option.

You will notice that there are also options for 'URL' and 'Album'.  For information on these, see 'Picture Sources'.


For this tutorial, click the 'Gallery...' button and select the file Examples \ Product2.png

Once you have selected the picture, click 'OK' to confirm.

To see how this looks in the 3D Player, click the PreviewPreview button available within the 'Home' ribbon category.

Step 3 - Stretching the Picture

By using the gallery picture Product2.png, you'll see that the clock in the middle of the picture is not a perfect circle, but instead it is squashed thinner.  This is because we have chosen a rectangular picture that is wider than its height and placed it on a perfectly square object.

To correct this, pictures can be scaled by different dimensions.

If you look at the 'Picture Scale By' in the Material Properties window, you'll see that this property is set to 'Object'.  Hence, the picture is resized to fit 100% of the object's width and height.

To change the settings that affect the pictures scaling, you can either use the Material Properties window or select the 'Picture Properties' tab of the 'Material Picture' dialog box, (shown below).

UI - Object Material Picture Properties dialog box Step 1

To have the picture stretched differently to the object, try the other 'Picture Scale By' settings:

  • Screen with Overscan
    This stretches the picture to match the shape of your screen.  As this is usually wider than taller, the picture should now be stretched more so horizontally.  And, the reference to Overscan means that the picture will be stretched to fill and possibly overflow in the direction where the screen's dimension is larger than the object's.
  • Screen with Tiling
    This too stretches the picture to match the shape of your screen.  However, the reference to Tiling means that the picture will be stretched to ensure the whole of the picture is displayed.  If the screen is not the same shape as the object, then that area will be blank, but is available as either a border or space for the picture to be repeated or tiled.
  • Picture with Overscan
    This stretches the picture to match the shape of the original picture file.  Here, the reference to Overscan means that the picture will be stretched to fill and possibly overflow in the direction where the picture file's dimension is larger than the object's.
  • Picture with Tiling
    This too stretches the picture to match the shape of the original picture file.  However, the reference to Tiling means that the picture will be stretched to ensure the whole of the picture is displayed.  If the picture is not the same shape as the object, then that area will be blank, but is available as either a border or space for the picture to be repeated or tiled.

» Tip › 

The see how these affect the picture, try the 3D Player in a window by using the Preview in WindowPreview in Window option.  This is available by clicking the down-arrow of the Preview button on the 'Home' ribbon category.  This window is resizable so that you can see how your design looks on different shaped screens.

For examples and more information see the 'Picture Scaling & Tiling' help topic.

In addition to changing how the picture is scaled to the object, you can also set whether the picture is to be magnified or made smaller by using the 'Picture Scale X %' and 'Picture Scale Y %' properties.

Step 4 - Positioning & Border Color

If the picture does not entirely fill the object's area, you may want to centralize it.  This can be done through the use of the 'Picture Center' property.

Additionally, the areas of the object that are not covered by the picture can be colorized.  This can be done by selecting the desired value for the 'Picture Border Color' property.

To increase the size of any border, simple decrease the size of the picture by using the 'Picture Scale' properties.

Step 5 - Tiling

Suitable for creating textured looking objects, you can choose to repeat the chosen picture to create a tiled area.

This is achieved by using the 'Picture Tiling X' and 'Picture Tiling Y' properties.

Each of these properties offers independent styles of tiling the picture.  These include:

  • No
    This is where the picture is only shown once and not repeated.
  • Wrap
    This is where the picture is continuously repeated.
  • Mirror
    This is where the picture is continuously repeated, but every other one is a mirror image.
  • Mirror Once
    This is where the picture is shown twice with the other being its mirror image.

For examples and more information see the 'Picture Scaling & Tiling' help topic.


 « Back to Tutorials 

 Next Tutorial » 

Report above advert?
 
 
 
Home - Products - Support - News - Company
 
 
Terms of UseTerms Acceptable Use PolicyA.U.P. Privacy Policy & CookiesPrivacy Contact Us Site Map flair
flair