New Component: Callouts with Images

1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 3.67 out of 5)
Loading ... Loading ...

Callouts are those speech bubbles (or thought clouds) that you often see in cartoons. SWiSH Max2 provided a number of these shapes as components so that you could superimpose your own text over them. SWiSH Max3 (from version 20090924) has extended these components and added image versions. These allow you to add your own images to the callout shapes. As with the previous callouts, the inner and outer shadows can be configured to your choice of color.

The callout image components can be found in the components panel under Shapes | 2D | Callouts. They can be configured via the Parameters panel once they have been dragged into the movie. If the Parameters panel is not visible, it can be opened using Window | Parameters.

Example Description

For those that are interested, the source .swi can be downloaded from this .zip file.

The Combo_silver component is used to select which of the callouts is to be made visible. This is done via the Events function in the main movie:

function Events(n,v) {
   if ("Combo_silver" == n) {
      hideall();
      this[v]._visible = true;
   }
}

As the names of the callout objects are used as the combo option List values, the event function parameter ‘v’ can be used to set the selected object visible via the script:

this[v]._visible = true;

The other objects are set invisible using the function hideall() which is shown below:

function hideall() {
   Callout_thought_ellipse_image._visible = false;
   Callout_thought_cloud_image._visible = false;
   Callout_speech_square_image._visible = false;
   Callout_speech_rectangle_image._visible = false;
   Callout_speech_ellipse_image._visible = false;
   Callout_speech_cloud_image._visible = false;
   Callout_scream_image._visible = false;
}

The background image was obtained from openphoto.net. The conditions of use require that we credit the site. To do this html text was used. The text was then placed inside a GlowFilter component so that the background immediately surrounding the text could be forced black thus improving the text readability.

The image was resized to 300×400 to reduce the original 559kB image less than 50kB. This was done in an external application (eg Paint). Once imported into the movie, the containing shape was altered to 350×420 in the properties panel. The fill transform was then altered as follows:

x=-10, y=20, horizontal scale = 100%, vertical scale = 100%.

This changes the image so that image is not distorted but has extra space above and to the right of the image. This additional space was needed to allow correct positioning of the callouts.

Enjoy!

Tags: ,

Comments are closed.