Components Photo 360
Animate CC component that allows viewing images in 3D space.
Using the component (End-User)
When the add starts, the panorama viewer will load. This may not be immediately visible if the component was nested inside another element on the canvas that is not initally visible (i.e. Slate). The image will automatically display in the viewer if the autoload parameter was true, otherwise the user will click on the component where prompted. Once the image is showing, the user can use their cursor to drag on the component, effectively panning around in 3D space. Scrolling the mouse wheel will zoom in and out. Zoom is also controlled by the buttons in the upper left corner of the component.
Designing with the component
Placement
First, ensure the Components panel is showing in Animate CC (Winow > Components). Expand the Blink Components folder and drag the Photo360 component onto the canvas. Multiple can be placed on the same canvas. The components can be repositioned by clicking and dragging.
Instance Name
To adjust the properties of the component, ensure the desired Photo360 component is selected and open the Properties panel (Window > Properties). Each component can be designated a unique instance name if preferred. Otherwise, the instance name will be the component name + the number of components already placed (e.g. Photo3600, Photo3601, Photo3602).
Size and Position
The position and size can be manipulated on the canvas or through the properties pane. Note: clicking the link icon next to the size properties will lock the aspect ratio. It is advised to choose an aspect ratio corresponding to the aspect ratio of the image.
Parameters
Under the Component Parameters heading are a list of configurable parameters for the select component.
Source
The image source is set via the source parameter by clicking the pencil icon to the right. Two options exist. A url to a hosted image can be entered in the text field or the user can browse to an image saved locally. For the second option, animate CC will copy the image to the images folder of the creative. Do NOT manually place the image in the images folder and then link to it.
Style
The style parameter field will take a string of css properties to be applied to the root element. The styles are entered as a string of key value pairs, separated by semicolons (e.g. font-family:Helvetica;font-size:12px;color:blue). Note: this parameter may be removed in a future update.
Alt
the alt parameter sets the alt attribute text for the image for accessibility purposes.
Visible
the visible parameter controls whether the component is visible. It takes a boolean value set with checkbox. Note: this parameter may be removed in a future update.
Class
Additional classes can be added to the root element of the component using the class parameter. Classes are entered as a comma-separated string (e.g. class1, class2, class3).
Autoload
The autoload parameter controls whether the image will be automattically loaded into the pannellum viewer on ad start. It is defaulted to true. If false, the user viewing the ad must click on the component to load the image.
Development
This component uses the Pannellum library (https://pannellum.org). The pannellum scripts are hosted on the Tremor CDN.
https://s.tremorvideodsp.com/bcv/pannellum/v2.3.2/pannellum.js
https://s.tremorvideodsp.com/bcv/pannellum/v2.3.2/pannellum.css
The latest version will be downloaded with npm install and uploaded to the cdn when the changes are pushed to the upstream repository.
Component Methods
getCreateString defines the root element to be a 'div’, which is assigned to this._$this. This element will be passed to the pannellum viewer in the attach method to fill in the div with the elements needed for a functioning panorama viewer.
The update method is fired every frame to apply property changes to the root element. It also dispatches a resize event when the screen resolution changes to fix the component size.
Helper Methods
The component utilizes a couple helper methods from a utility file. getMovieClip will return the movieclip element on the canvas that corresponds to the root dom element of the component. transferProps will calculate the display properties of the movieclip and use these to set the visibility and opacity css properties of the corresponding dom element of the component. This allows the component to show and hide when placed in the Slate.