Global

The snippet makes 2 changes to the draggable movie clip:

1. automatically adds an invisible rectangle to the draggable movie clip as the hit area
   based on the nominal bounds. If the draggable is text, you need to add a shape to the movie clip
   with either a background color or alpha = 0, so Animate CC will calculate the desired nominal bounds.
2. adds an onclick handler which calls evt.preventDefault, so mousing/touching down on the draggable does not
   trigger the default slate click-out

The coordinates of the line are based on the cross-hairs (registration point) of the
draggable movieclip. These are the values x and y draggable as viewed in it's parent object.

Pass in an optional callback function in the options object with the key "dragUpdate"
The dragUpdate function will be called at each mousemovement at maximum of 16 ms (60 fps)
The dragUpdate function is called back with this object:

  {fraction: distance of draggable from line.a,
   event: raw Event object,
   dx: change in x position in coordinates of parent,
   dy: change in y position in coordinates of parent}

Pass in an optional callback function in the options object with the key "dragEnd"
The dragEnd function will be called when the "panend" event is fired (end of drag).
The dragEnd function is called back with this object:

  {fraction: distance of draggable from line.a,
   event: raw Event object}

Pass in an optional releaseTolerance (between 0 and 1), which allows draggable to catch up to mouse/touch
position. Default value is 0.1. Tolerance in pixels is releaseTolerance * canvas width

Inertia Options:

• inertiaOnMobile defaults to true
• inertiaOnDesktop defaults to false
• inertiaMs defaults to 500 (0.5 seconds)
• inertiaInitialFactor defaults to 2, input smaller value for greater inertiaMs
• inertiaDeltaFactor defaults to 0.9, max = 0.99, input smaller value for shorter inertiaMs
• inertiaThresholdVelocity defaults to 0.1, input smaller value to allow a slower movement

Returns: {
  removeEventHandlers<function>,
  restoreEventHandlers<function>
}

Internal functions are also returned for unit testing.

Required Parameters:

options.draggable = Movie Clip to be dragged

Notes:

1. If the draggable movie clip does not already have it's hitArea set, it will be added
   automatically here.
2. The draggable onclick handler function is set here to evt.preventDefault(), so the slate
   click-out is not triggered when the object is dragged. You can still add other onclick handlers
   if there is other custom actions you need when the object is released (click event fired).

Optional Parameters:

• options.dragUpdate = function which is called at each drag update with an object containing
  the Movie Clip's x, y and raw event {x: Number, y: Number, event: object}
• options.dragEnd = function which is called at the end of drag gesture with an object containing
  the Movie Clip's x, y and raw event {x: Number, y: Number, event: object}
• options.container = Movie Clip defining bounds that draggable can be moved. If container is
  not specified, then the parent movie clip of the draggable is used
• options.draggable.bounds = bounds object defining edges of draggable that is bounded

The bounds object is a hotspot based on fractional units of the object's width & height.
Each bound direction (left, right, top, bottom) represents the fraction of the width or height
that the boundary is from the center.

To constrain the draggable object within the container, so the center (0,0) of the draggable object
cannot move outside the container:

  draggable.bounds = {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
  }

To constrain the draggable object within the container, so the outside edges of the draggable object cannot
move outside the container:

  draggable.bounds = {
    left: -1,
    right: -1,
    top: -1,
    bottom: -1
  }

To constrain the draggable object within the container, so the inside edges of the draggable object cannot
move outside the container:

  draggable.bounds = {
    left: 1,
    right: 1,
    top: 1,
    bottom: 1
  }

Returns: {removeEventHandlers<function>}

Internal functions are also returned for unit testing.

If you add a mouse/touch event to a movie clip, it requires that the hitArea be set for it to fire.

Note: the nominal bounds of a movie clip is the area encompassing all the displayObjects (shapes, bitmaps, etc)
added to the movie clip using the GUI (i.e. does not include programmatically added displayObjects).
Animate CC automatically calculates the encompassing area and adds it to the movie clip object when the project
is published.

The .vtt file must be in the directory /src/sounds
Center the container Movie Clip at the desired location of the subtitles, and set
the alpha of the shape in the container to zero.

Set options.showWhenMuted to true if you only want the subtitles displayed
when the video is muted. This cannot detect if the entire browser tab is muted.

Set optional styling parameters for the text and background shape.

Required parameters:

Note: This function should only be called after the user has engaged with the ad as it will be loading additional assets.

Options Object:

• eventLabel:

  • Type: string
  • Requirements: Required
  • Description: string prepended to event names

• container:

  • Type: Movie Clip
  • Requirements: Required
  • Description: The movie clip that will contain your sprite animation sequence.
  • Notes: The sprite animation sequence will be scaled to fit the size of this container movie clip.

• spritesheet:

  • Type: String
  • Requirements: Required
  • Description: The path to the spritesheet image.

• json:

  • Type: String
  • Requirements: Optional
  • Description: The path to the JSON that accompanies your spritesheet image.
  • Note: Having JSON is required, however the property is optional. If no opts.json path is specified, the animationSequence function will automatically assume that you have created a JSON file in the src/json directory and have given it the same filename as your sprite sheet image.

• framerate

  • Type: Integer
  • Requirements: Optional
  • Default: 24
  • Description: The framerate for the animation. Set this value to change how fast the animation sequence plays. Should be a non-zero integer (whole-number).

• loop:

  • Type: Boolean
  • Requirements: Optional
  • Default: True
  • Description: If true, the animation sequence will play in a loop, restarting and playing thru each time it completes.

• autoplay:

  • Type: Boolean
  • Default: True
  • Requirements: Optional
  • Description: If true, the animtion sequence will begin playing automatically, as soon as it is ready.

Returns an object with a play and pause function:

{
  play: function, (play or resume the animation)
  pause: function (pause the animation)
}

The following event names are emitted:

  eventLabel + '-ANIMATION_SEQUENCE_COMPLETE'
  eventLabel + '-ANIMATION_SEQUENCE_PROGRESS'
  eventLabel + '-ANIMATION_SEQUENCE_ERROR'
  eventLabel + '-ANIMATION_SEQUENCE_SPRITESHEET_ERROR'
  eventLabel + '-ANIMATION_SEQUENCE_JSON_ERROR'

Sample Usage:

var here = this
var animation = window.$b.snippets.animationSequence({
  eventLabel: 'KiaSedan',
  spritesheet: 'images/s.png',
  json: 'json/spritesheet.json',
  container: here.slateDesign.imageContainer,
  framerate: 48,
  autoplay: false,
  loop: true
})
var completeFunction = function (evt) {
  here.slateDesign.playBtn.addEventListener('click', function () {
    animation.play()
  })
  here.slateDesign.pauseBtn.addEventListener('click', function () {
    animation.pause()
  })
}
window.$b.on('KiaSedan-ANIMATION_SEQUENCE_COMPLETE, completeFunction)

Example of how to set up a poll:

1. Create a poll
   https://pterodactylus.tremorvideodsp.com/poll/new
2. View the poll JSON by going to the pterodactylus Poll List page and clicking the JSON button
3. Copy the poll JSON and set it to a javascript variable:

   var poll = {
   "prefix": "2018/08",
   "puid": "OMB1s5",
   "cu": "CU00002",
   "title": "Are you hungry or just sad?",
   "quantity": 2,
   "answers": [
   {
     "auid": "ANuH2k",
     "text": "Hungry.",
     "votes": 0
   },
   {
     "auid": "LeuAM9",
     "text": "Just sad.",
     "votes": 0
   }
   ],
   "createdDate": "2018-08-29T21:46:49.590Z"
   }

4. Set the answer chosen and call the function:

   var answerChosen = 0
   window.$b.snippets.castUserVote({
   cu: poll.cu,
   puid: poll.puid,
   auid: poll.answers[answerChosen]
   })

Example of how to receive results:

window.$b.on('POLL_RESULTS', function (data) {
  data.answers.forEach(function (answer) {
    console.log(answer.votes + ' votes for: "' + answer.text + '"')
   })
})

Required parameters:

Typically, all maskableMovieClips will have the same parent, so they can be masked with
the same object.

For full documentation, check out the:
Dynamic Image Gallery Wiki Page

This function returns an object with an imageArray property. The array is initially empty,
but will be populated with each image specified in the input parameters opts.manifest and opts.src
after they are loaded.

All contents of imageContainer will be automatically removed after the images are loaded, before the
complete event is emitted. After that, the only children of imageContainer are the movieClips of each image.

Required Parameters:
opts.eventLabel is a string prepended to event names
opts.manifest is an array of objects, where each object must contain a key "src"
opts.imageContainer is a movie clip which will (eventually) contain all of the image movie clips once they have all loaded

Returns:
{imageArray: array}

Note:

• you can store other key on each item in the manifest array, such as a "caption", which may be
  useful when you display your images
• the imageContainer will be emptied just before the complete event is emitted

The following event names are emitted:

  eventLabel + '-IMAGE_GALLERY_COMPLETE'
  eventLabel + '-IMAGE_GALLERY_ERROR'
  eventLabel + '-IMAGE_GALLERY_PROGRESS'
  eventLabel + '-IMAGE_GALLERY_FILE_LOAD'

The COMPLETE event is called with these 2 arguments

  (evt, imageArray)

The other events only pass the single parameter evt.

Sample Usage:

 var myImages = window.$b.snippets.createImageGallery({
   eventLabel: 'KiaSedan',
   manifest: [{src: 'images/01.jpg'}, {src: 'images/02.jpg'}],
   imageContainer: this.container, (or whatever you named the instance of the movie clip)
 }).imageArray
 var completeFunction = function (evt, imageArray) {
   // Do stuff with imageArray like imageArray[0].visible = false, imageArray[1].visible = true
 }
 window.$b.on('KiaSedan-IMAGE_GALLERY_COMPLETE', completeFunction)

Used by function convertToMask or can also be used independently
Returned shape has alpha set to zero

Uses the zip code in the Ad Parameters (adParameters.geoInfo.postalCode) to

1. Get the Lat/Lon from pterodactlyus (or raptor) centered on the zip code
2. Make an asynchronous call to API.WEATHER.GOV for the current weather at the closest station returning data
3. Emits an event 'CURRENT_WEATHER_RESULTS' when the data is received
4. Returns a JavaScript Promise when can be used as an alternative way to receive data or catch an error
5. The zip code from the Ad Parameters can be superceded by passing in options.zipCode

Example Usage:

window.$b.snippets.getCurrentWeather()
window.$b.on('CURRENT_WEATHER_RESULTS', function (data) {
  console.log(data.textDescription)
}

Example of data object returned:

{
  "@id": "https://api.weather.gov/stations/KOAK/observations/2018-09-06T18:53:00+00:00",
  "@type": "wx:ObservationStation",
  "elevation": {
    "value": 3,
    "unitCode": "unit:m"
  },
  "station": "https://api.weather.gov/stations/KOAK",
  "timestamp": "2018-09-06T18:53:00+00:00",
  "rawMessage": "KOAK 061853Z 29008KT 10SM BKN010 16/13 A3010 RMK AO2 SLP191 T01610128",
  "textDescription": "Mostly Cloudy",
  "icon": "https://api.weather.gov/icons/land/day/bkn?size=medium",
  "presentWeather": [],
  "temperature": {
    "value": 16.100000000000023,
    "unitCode": "unit:degC",
    "qualityControl": "qc:V"
  },
  "dewpoint": {
    "value": 12.800000000000011,
    "unitCode": "unit:degC",
    "qualityControl": "qc:V"
  },
  "windDirection": {
    "value": 290,
    "unitCode": "unit:degree_(angle)",
    "qualityControl": "qc:V"
  },
  "windSpeed": {
    "value": 4.1,
    "unitCode": "unit:m_s-1",
    "qualityControl": "qc:V"
  },
  "windGust": {
    "value": null,
    "unitCode": "unit:m_s-1",
    "qualityControl": "qc:Z"
  },
  "barometricPressure": {
    "value": 101930,
    "unitCode": "unit:Pa",
    "qualityControl": "qc:V"
  },
  "seaLevelPressure": {
    "value": 101910,
    "unitCode": "unit:Pa",
    "qualityControl": "qc:V"
  },
  "visibility": {
    "value": 16090,
    "unitCode": "unit:m",
    "qualityControl": "qc:C"
  },
  "maxTemperatureLast24Hours": {
    "value": null,
    "unitCode": "unit:degC",
    "qualityControl": null
  },
  "minTemperatureLast24Hours": {
    "value": null,
    "unitCode": "unit:degC",
    "qualityControl": null
  },
  "precipitationLastHour": {
    "value": null,
    "unitCode": "unit:m",
    "qualityControl": "qc:Z"
  },
  "precipitationLast3Hours": {
    "value": null,
    "unitCode": "unit:m",
    "qualityControl": "qc:Z"
  },
  "precipitationLast6Hours": {
    "value": null,
    "unitCode": "unit:m",
    "qualityControl": "qc:Z"
  },
  "relativeHumidity": {
    "value": 80.79823362700911,
    "unitCode": "unit:percent",
    "qualityControl": "qc:C"
  },
  "windChill": {
    "value": null,
    "unitCode": "unit:degC",
    "qualityControl": "qc:V"
  },
  "heatIndex": {
    "value": null,
    "unitCode": "unit:degC",
    "qualityControl": "qc:V"
  },
  "cloudLayers": [
    {
      "base": {
        "value": 300,
        "unitCode": "unit:m"
      },
      "amount": "BKN"
    }
  ],
  "geometry": {
    "type": "Point",
    "coordinates": [
      -122.22,
      37.72
    ]
  }
}

If target is not specified, then the MovieClip's parent is used.

Works with shapes created by the Animate CC editor creates shapes or shapes created by users with a draw command.

Options Object:

• zipCode:

  • Type: number
  • Requirements: Optional
  • Description: The zip code to get the UV index for.

• timeout:

  • Type: number
  • Requirements: Optional
  • Description: Amount of time (in seconds) to wait for the UV index API to return results before timing out. (default 3 seconds)

Events:
Success: Listen for the 'UV_INDEX_RESULTS' event using window.$b.on('UV_INDEX_RESULTS', callback) to run callback function when results are returned.
Error: Listen for the 'UV_INDEX_ERROR' event using window.$b.on('UV_INDEX_ERROR', callback) to run callback function when an error occurrs.

Example Usage:

window.$b.snippets.getUVIndex()
window.$b.on('UV_INDEX_RESULTS', function (data) {
  console.log(data.zipCode)
  console.log(data.uvIndex)
  console.log(data.uvExpCat)
  console.log(data.uvAlert)
})

Uses the zip code in the Ad Parameters (adParameters.geoInfo.postalCode) to

1. Get the Lat/Lon from pterodactlyus (or raptor) centered on the zip code
2. Make an asynchronous call to API.WEATHER.GOV for the weather forecast at the LAT/LON
3. Emits an event 'WEATHER_FORECAST_RESULTS' when the data is received
4. Returns a JavaScript Promise when can be used as an alternative way to receive data or catch an error
5. The zip code from the Ad Parameters can be superceded by passing in options.zipCode

Example Usage:

window.$b.snippets.getWeatherForecast()
window.$b.on('WEATHER_FORECAST_RESULTS', function (data) {
  if (data.periods) {
    data.periods.forEach(function (period) {
      console.log(period.name + ': ' + period.shortForecast)
      console.log(period.detailedForecast)
    })
  }
}

Example of data object returned:

{
  "updated": "2018-09-06T23:47:02+00:00",
  "units": "us",
  "forecastGenerator": "BaselineForecastGenerator",
  "generatedAt": "2018-09-07T01:30:36+00:00",
  "updateTime": "2018-09-06T23:47:02+00:00",
  "validTimes": "2018-09-06T17:00:00+00:00/P7DT20H",
  "elevation": {
    "value": 39.9288,
    "unitCode": "unit:m"
  },
  "periods": [
    {
      "number": 1,
      "name": "Tonight",
      "startTime": "2018-09-06T18:00:00-07:00",
      "endTime": "2018-09-07T06:00:00-07:00",
      "isDaytime": false,
      "temperature": 54,
      "temperatureUnit": "F",
      "temperatureTrend": null,
      "windSpeed": "7 to 18 mph",
      "windDirection": "WSW",
      "icon": "https://api.weather.gov/icons/land/night/bkn?size=medium",
      "shortForecast": "Mostly Cloudy",
      "detailedForecast": "Mostly cloudy, with a low around 54. West southwest wind 7 to 18 mph, with gusts as high as 24 mph."
    },
    {
      "number": 2,
      "name": "Friday",
      "startTime": "2018-09-07T06:00:00-07:00",
      "endTime": "2018-09-07T18:00:00-07:00",
      "isDaytime": true,
      "temperature": 70,
      "temperatureUnit": "F",
      "temperatureTrend": "falling",
      "windSpeed": "7 to 18 mph",
      "windDirection": "WSW",
      "icon": "https://api.weather.gov/icons/land/day/sct?size=medium",
      "shortForecast": "Mostly Sunny",
      "detailedForecast": "Mostly sunny. High near 70, with temperatures falling to around 65 in the afternoon. West southwest wind 7 to 18 mph, with gusts as high as 25 mph."
    },
    {
      "number": 3,
      "name": "Friday Night",
      "startTime": "2018-09-07T18:00:00-07:00",
      "endTime": "2018-09-08T06:00:00-07:00",
      "isDaytime": false,
      "temperature": 55,
      "temperatureUnit": "F",
      "temperatureTrend": null,
      "windSpeed": "9 to 18 mph",
      "windDirection": "WSW",
      "icon": "https://api.weather.gov/icons/land/night/bkn?size=medium",
      "shortForecast": "Mostly Cloudy",
      "detailedForecast": "Mostly cloudy, with a low around 55. West southwest wind 9 to 18 mph, with gusts as high as 24 mph."
    },
    {
      "number": 4,
      "name": "Saturday",
      "startTime": "2018-09-08T06:00:00-07:00",
      "endTime": "2018-09-08T18:00:00-07:00",
      "isDaytime": true,
      "temperature": 68,
      "temperatureUnit": "F",
      "temperatureTrend": null,
      "windSpeed": "9 to 16 mph",
      "windDirection": "WSW",
      "icon": "https://api.weather.gov/icons/land/day/sct?size=medium",
      "shortForecast": "Mostly Sunny",
      "detailedForecast": "Mostly sunny, with a high near 68. West southwest wind 9 to 16 mph, with gusts as high as 22 mph."
    },
    {
      "number": 5,
      "name": "Saturday Night",
      "startTime": "2018-09-08T18:00:00-07:00",
      "endTime": "2018-09-09T06:00:00-07:00",
      "isDaytime": false,
      "temperature": 54,
      "temperatureUnit": "F",
      "temperatureTrend": null,
      "windSpeed": "5 to 16 mph",
      "windDirection": "WSW",
      "icon": "https://api.weather.gov/icons/land/night/bkn?size=medium",
      "shortForecast": "Mostly Cloudy",
      "detailedForecast": "Mostly cloudy, with a low around 54. West southwest wind 5 to 16 mph, with gusts as high as 22 mph."
    },
    {
      "number": 6,
      "name": "Sunday",
      "startTime": "2018-09-09T06:00:00-07:00",
      "endTime": "2018-09-09T18:00:00-07:00",
      "isDaytime": true,
      "temperature": 66,
      "temperatureUnit": "F",
      "temperatureTrend": null,
      "windSpeed": "5 to 14 mph",
      "windDirection": "W",
      "icon": "https://api.weather.gov/icons/land/day/sct?size=medium",
      "shortForecast": "Mostly Sunny",
      "detailedForecast": "Mostly sunny, with a high near 66."
    },
    {
      "number": 7,
      "name": "Sunday Night",
      "startTime": "2018-09-09T18:00:00-07:00",
      "endTime": "2018-09-10T06:00:00-07:00",
      "isDaytime": false,
      "temperature": 54,
      "temperatureUnit": "F",
      "temperatureTrend": null,
      "windSpeed": "8 to 14 mph",
      "windDirection": "W",
      "icon": "https://api.weather.gov/icons/land/night/sct?size=medium",
      "shortForecast": "Partly Cloudy",
      "detailedForecast": "Partly cloudy, with a low around 54."
    },
    {
      "number": 8,
      "name": "Monday",
      "startTime": "2018-09-10T06:00:00-07:00",
      "endTime": "2018-09-10T18:00:00-07:00",
      "isDaytime": true,
      "temperature": 66,
      "temperatureUnit": "F",
      "temperatureTrend": null,
      "windSpeed": "8 to 14 mph",
      "windDirection": "W",
      "icon": "https://api.weather.gov/icons/land/day/sct?size=medium",
      "shortForecast": "Mostly Sunny",
      "detailedForecast": "Mostly sunny, with a high near 66."
    },
    {
      "number": 9,
      "name": "Monday Night",
      "startTime": "2018-09-10T18:00:00-07:00",
      "endTime": "2018-09-11T06:00:00-07:00",
      "isDaytime": false,
      "temperature": 55,
      "temperatureUnit": "F",
      "temperatureTrend": null,
      "windSpeed": "9 to 14 mph",
      "windDirection": "WNW",
      "icon": "https://api.weather.gov/icons/land/night/sct?size=medium",
      "shortForecast": "Partly Cloudy",
      "detailedForecast": "Partly cloudy, with a low around 55."
    },
    {
      "number": 10,
      "name": "Tuesday",
      "startTime": "2018-09-11T06:00:00-07:00",
      "endTime": "2018-09-11T18:00:00-07:00",
      "isDaytime": true,
      "temperature": 65,
      "temperatureUnit": "F",
      "temperatureTrend": null,
      "windSpeed": "9 to 16 mph",
      "windDirection": "WNW",
      "icon": "https://api.weather.gov/icons/land/day/sct?size=medium",
      "shortForecast": "Mostly Sunny",
      "detailedForecast": "Mostly sunny, with a high near 65."
    },
    {
      "number": 11,
      "name": "Tuesday Night",
      "startTime": "2018-09-11T18:00:00-07:00",
      "endTime": "2018-09-12T06:00:00-07:00",
      "isDaytime": false,
      "temperature": 55,
      "temperatureUnit": "F",
      "temperatureTrend": null,
      "windSpeed": "10 to 16 mph",
      "windDirection": "WNW",
      "icon": "https://api.weather.gov/icons/land/night/sct?size=medium",
      "shortForecast": "Partly Cloudy",
      "detailedForecast": "Partly cloudy, with a low around 55."
    },
    {
      "number": 12,
      "name": "Wednesday",
      "startTime": "2018-09-12T06:00:00-07:00",
      "endTime": "2018-09-12T18:00:00-07:00",
      "isDaytime": true,
      "temperature": 65,
      "temperatureUnit": "F",
      "temperatureTrend": null,
      "windSpeed": "12 to 15 mph",
      "windDirection": "W",
      "icon": "https://api.weather.gov/icons/land/day/sct?size=medium",
      "shortForecast": "Mostly Sunny",
      "detailedForecast": "Mostly sunny, with a high near 65."
    },
    {
      "number": 13,
      "name": "Wednesday Night",
      "startTime": "2018-09-12T18:00:00-07:00",
      "endTime": "2018-09-13T06:00:00-07:00",
      "isDaytime": false,
      "temperature": 56,
      "temperatureUnit": "F",
      "temperatureTrend": null,
      "windSpeed": "8 to 15 mph",
      "windDirection": "W",
      "icon": "https://api.weather.gov/icons/land/night/few?size=medium",
      "shortForecast": "Mostly Clear",
      "detailedForecast": "Mostly clear, with a low around 56."
    },
    {
      "number": 14,
      "name": "Thursday",
      "startTime": "2018-09-13T06:00:00-07:00",
      "endTime": "2018-09-13T18:00:00-07:00",
      "isDaytime": true,
      "temperature": 66,
      "temperatureUnit": "F",
      "temperatureTrend": null,
      "windSpeed": "7 to 13 mph",
      "windDirection": "W",
      "icon": "https://api.weather.gov/icons/land/day/few?size=medium",
      "shortForecast": "Sunny",
      "detailedForecast": "Sunny, with a high near 66."
    }
  ],
  "geometry": {
    "type": "GeometryCollection",
    "geometries": [
      {
        "type": "Point",
        "coordinates": [
          -122.4097848,
          37.7725663
        ]
      },
      {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -122.4263966,
              37.7812349
            ],
            [
              -122.42073930000001,
              37.759429600000004
            ],
            [
              -122.39317570000001,
              37.76389580000001
            ],
            [
              -122.39882750000001,
              37.78570150000001
            ],
            [
              -122.4263966,
              37.7812349
            ]
          ]
        ]
      }
    ]
  }
}

Options Object:

• filename:

  • Type: string
  • Requirements: Required
  • Description: The JSON file to load.

• eventLabel:

  • Type: string
  • Requirements: Required
  • Description: The label for the events that will be emitted when JSON is loaded successfully or when an error occurs during loading.
  • Note: Events will use the following structure...
  • • Success: _RESULTS
  • • Error: _ERROR

• root:

  • Type: string
  • Requirements: Optional
  • Description: Should you need to load JSON that is not hosted on tremorvideodsp.com, this is the full path to the JSON (minus the actual filename)

• timeout:

  • Type: number
  • Requirements: Optional
  • Description: Amount of time (in seconds) to wait for the JSON results. (default 3 seconds)

For full documentation read the Wiki Post

This function returns an object with the key "sounds", which is initially an empty object, but
will be the augmented with each sound specified in the input parameters opts.manifest and opts.src
after they are loaded.

Required Parameters:

• eventLabel:

  • Type: string
  • Requirements: Required
  • Description: string prepended to event names

• opts.manifest is an array of objects, where each object must contain a key "id" and a key "src"

Optional Parameters:

• opts.root: prefix for absolute or relative URL each src.
  Note: If you wish to load sounds from multiple different absolute sources, provide opts.root = '' and provide full absolute paths in each sound src in the manifest.

Returns:
{sounds: object}

Note:
you should check that the sound.id exists before trying to call .play() on it
you can store other key on each item in the manifest array, such as a "description", which may be useful
when you play your sounds

The following event names are emitted:

  eventLabel + '-LOAD_SOUNDS_COMPLETE'
  eventLabel + '-LOAD_SOUNDS_ERROR'
  eventLabel + '-LOAD_SOUNDS_PROGRESS'
  eventLabel + '-LOAD_SOUNDS_FILE_LOAD'

Sample Usage:

  // in Movie Clip CreativeMain
  var here = this
  var soundsObj = window.$b.snippets.loadSounds({
    eventLabel: 'wahSound',
    manifest: [
     {id: 'wah', src: 'sounds/WAH WAH WAH FAIL.mp3'}
    ]
  }).sounds
  window.$b.on('wahSound-LOAD_SOUNDS_COMPLETE', function (evt) {
    here.slateDesign.playBtn.addEventListener('click', function() {
      if (soundsObj.wah) {
        soundsObj.wah.play()
      }
    })
  })

Note: Only designed to work on desktop currently.

Required Parameters:

• width:
  • Type: Number
  • Requirements: Required
  • Description: width to display image on print image page
    Notes: can be set larger or smaller than original image width if needed
• height:
  • Type: Number
  • Requirements: Required
  • Description: height to display image on print image page
    • Notes: can be set larger or smaller than original image height if needed

Optional Parameters:

• image:
  • Type: String
  • If not specified, you must specify a fullPath (the next option param).
  • Description: filename of image file in images folder
• fullPath:
  • Type: String
  • If not specified, you must speciy a image (the previous option param)
  • Description: full path to a separately hosted image file
    Should be full image path, including image file name + extension
  • Example:

    {fullPath: "https://tremorvideodsp.com/assets/imgs/web_logo.png"} // (Tremor Video DSP Logo)

• top:
  • Type: Number
  • Description: This is the y-axis (vertical) position that the new print image window will be displayed at.
    • Notes: Default is center (Probably leave this at the default, center of the screen)
• left:
  • Type: Number
  • Requirements: Optional (See Notes Below)
  • Description: This is the x-axis (horizontal) position that the new print image window will be displayed at.
    • Note: Default is center (You should probably leave this at the default, center of the screen)
    • Chrome Bug: There is a bug in Chrome (Still Existing in Version 66.0.3359.181).
      • On Multi-Monitor setup, the window will display the new window flush left, regardless of the left position when opened on secondary, tertiary monitors.
        • This bug has gone un-resolved for several years. It is uknown at this time when it will be resolved.
        • Note this bug does not exist on primary monitor, only monitor 2, 3+.
• delay: amount of time before print is called. Default is 1000. This allows the user time to see the image to be printed when the new window opens, before the print dialog box comes up.

The mousewheel also scrolls the movie clip on all desktop browsers except Microsoft Edge.

The scrollable movie clip's endpoints for movement are the most inward of either:

1. the edge of the initial position of the scrollable movie clip, or
2. the edge of the mask

You must include the Initialize Gestures and Constrained Drag snippets in your FLA.

Required Parameters:

• draggable the Movie Clip instance to be made scrollable

Optional Parameters:

• clickableArray

  • is an optional array of MovieClips that will be repositioned as the draggable is scrolled.
  • You need to add the event handlers outside of this snippet, to handle actions (clicks, mouseover,
    mouseleave, etc) on the clickables.
  • The clickables must in a layer or layers LOWER than the draggable.
  • If the goal is to make certain regions of an image clickable, then the clickables can simply be movie clips
    that contain a rectangle. The rectangle can have an alpha of 0.

• mask

  • If mask is specified, this Movie Clip will be used to create a mask.
  • The mask Movie Clip will be made transparent, so you can use any color you want in the Animate CC editor.
  • The mask is also used to create a shape under the draggable which will capture clicks and not transmit the
    click events to lower layers.

• margin

  • If options.margin is provided, additional padding will be added (or subtracted if negative)
    from the scrolling boundaries.
  • The units of the margin are those of the parent MovieClip.
  • If the margins cause the current position of the draggable to be outside the boundaries,
    it will be immediately positioned to the closest edge.

• dragUpdate
  function will be called at each dragUpdate and passed an object with a key "fraction"

Requires snippets:

• Initialize Gestures
• Constrained Drag
• Get Movie Clip Bounds (if there is a ClickableArray)
• Point In Bounds (if there is a ClickableArray)

Returns

{
  removeEventHandlers<function>,
  restoreEventHandlers<function>,
  moveToFraction<function({fraction: number}>,
  moveByDelta<function({deltaX: number, deltaY: number}>,
  startAutoScroll<function>,
  stopAutoScroll<function>
}

The function moveToFraction allows the position of the draggable to be easily changed outside this snippet.

Required parameters:

• options.draggable Movie Clip to be made scrollable
• options.scrollBarContainer Movie Clip for the scroll bar
• options.scrollBarKnob Movie Clip for the scroll knob which is a child of scrollBarContainer

Optional parameters:

• options.mask optional Movie Clip to use as a mask for draggable
  this is the display area of the scrollable movie clip, so it should always be passed in
• options.clickableArray optional array of Movie Clips
• options.doVerticalScroll defaults to true
• options.dragUpdate function called after each drag update
• options.dragEnd function called at end of each drag

Requires snippets:

• Initialize Gestures
• Constrained Drag
• Scrollable Movie Clip
• Get Movie Clip Bounds (if there is a ClickableArray)
• Point In Bounds (if there is a ClickableArray)