Image Upload Known Issues...3. Implementing the Block...4. Using Adobe SWC files...4. Configuring in Flash...5

Size: px

Start display at page:

Download "Image Upload... 2. Known Issues...3. Implementing the Block...4. Using Adobe SWC files...4. Configuring in Flash...5"

Shona Roberts
10 years ago
Views:

2 Image Upload... 2 Known Issues...3 Implementing the Block...4 Using Adobe SWC files...4 Configuring in Flash...5 Setting Up in the Sizmek MDX Platform...8

3 Image Upload The Image Upload Block enables advertisers to engage users with the brand, by letting them upload and display their own images to the ad. After the user uploads the image to the banner, it can be resized, rotated, and panned before being merged with the creative. If users want to share their images, they can download the final images and send them to friends by . Benefits

4 Use Case Let s say you want to create an ad where users can place a picture of themselves near the advertiser s brand mascot and share it with their friends. With the Image Upload block, users can upload their own picture and adjust the size and orientation of the image to fit the image in the ad, for example, Raffaello Sanzio's painting of a cherub. Users can upload a picture with a face and scale and reposition it so that the face appears within the cutout of the painting. Users can then the finished picture. Demos/Downloads To view a technical demo in AS3: click here ( - Upload). To download this block and start using it now, click here ( 6036). Known Issues If you receive this error when publishing the FLA, you need to update your Workshop for Flash (MXP). Click here ( to download the latest MXP.

5 Implementing the Block Before you Begin Make sure you have the following resources available: Notes: The template and Block are only compatible with CS5, ActionScript 3.0, and Flash Player 10 or higher. Using Adobe SWC files An Adobe SWC file is an archive of pre-compiled Flash symbols, ActionScript code, and other assets that allows a Flash or Flex developer to distribute components and assets easily in a single packaged file. SWCs are sometimes referred to as class libraries because they are typically used to package all the assets used by a class, such as ActionScript code and graphics. They cannot be directly executed by the Flash Player. Instead, they must be added to a Flash project s library path. Blocks that use SWCs have the SWC file in the root folder of the downloaded files. You can choose to add them on the application level, where Flash will automatically recognize them for use in any project, or to add them on the document level, where only your current Flash project will recognize them. 1. Copy the SWC file to your Flash components folder. The file path is typically: Windows XP: Primary Disk\Documents and Settings\user\Local Settings\Application Data\Adobe\ Flash Version\language\Configuration\Components Windows Vista: Primary Disk\Users\user\Local Settings\Application Data\Adobe\ Flash Version\language\Configuration\Components Windows 7: Primary Disk\Users\user\AppData\Local\Adobe\Flash Version\language\Configuration\Components Macintosh: Primary Disk\Users\user\Library\Application Support\Adobe\Flash Version\language\Configuration\Components Note: Primary Disk, user, Flash Version, and language vary depending on your Flash installation. 2. If you had Flash open during the previous step, then restart Flash. 3. In the Flash project s ActionScript, import the classes as normal with the #import directive. Refer to the proprietary documentation for the correct class names and usage.

6 1. Open your Flash project. 2. In the menu bar, go to File > Publish Settings Click ActionScript Settings or the icon. Note: The actual UI text and graphics may vary by Flash and ActionScript version. 4. In the Library path tab, click to add a new path. 5. Click the new path to select it, and then click to browse to the location of the SWC file. 6. Click OK to confirm. 7. In the Flash project s ActionScript, import the classes as normal with the #import directive. Refer to the proprietary documentation for the correct class names and usage. Configuring in Flash Graphic Elements In Image_Upload_AS3.fla, there are graphic elements in mc_main that can be edited to customize the creative. You can edit the graphic elements as necessary to customize your creative's look and feel. 1. Go to the graphics layer in the second key frame of the timeline. 2. Find the mc_main movie clip and edit the following objects as required: Objects in mc_main

7 Instance Name Description Screen capture mainerror_mc mc_controls mc_upload_btn mc_send_btn mc_back_btn mc_save_btn mc_mainpostcard This movie clip displays error messages The UI for rotating, zooming and panning the uploaded image The button that opens the upload dialog for selecting the image to upload The button that displays the movie clip mc_ that allows sending the image by The button that resets the feature, allowing the user to upload a new image The button that saves the image on the user's machine Inside this movie clip, you ll find the mc_postcardfront movie clip. The content of the mc_postcardfront can be replaced by the relevant advertiser creative. The content should contain a hole in the creative; the creative will display the user's uploaded image through this hole.

8 mc_ This movie clip contains the Send form. The three input fields and the submit button must remain and keep their instance names, but you can change the colors, positions. etc., as needed. You can also customize the content and add graphic elements. mc_thankyou This movie clip is displayed after the user has sent or saved the image. You can add and modify the content according to your creative needs. Code Implementation In the code, you can configure the text displayed upon certain messages and the name of the Data Capture form. 1. In the as layer, in the third key frame of the timeline, open the Actions panel. 2. In lines 19 29, you can edit the labels for messages displayed to the user as follows:

9 3. In line 760, you can change the name of the Data Capture component form as follows: Setting Up in the Sizmek MDX Platform The Data Capture form needs to be set up when using the Upload Image Block. For a more detailed guide on the DataCapture component: click here ( During the ad creation process, you will receive notification that your asset contains a Data Capture component. A wizard will guide you through the set-up process. 1. Upload the ad to the Sizmek MDX platform. 2. When the platform detects the Data Capture component in the ad assets, click Yes to confirm the dialog. 3. When the Sizmek MDX platform asks you to select a form:

10 If there is already an ad in the same campaign with the same form name, then choose Selecting a form that already exists in the account.

11 If you are creating a new form, choose Creating a New Form and do not edit the fields. 4. Expand the Outgoing Settings section and enter the following information: Address: The advertiser s address as it will appear in the recipient's inbox (e.g., "noreply@<advertizer>.com"). Displayed name: The sender's name as it will appear in the recipient's inbox. Subject: The subject.

12 Body > HTML format: Paste the content of the file DataCapture_Content\ _for_datacapture.txt in this field. This is the content of the that the recipient will receive. This is an HTML template. The content is dynamic and can be edited. The uses HTML that implements the form fields and embeds the image edited by the user. As long as the HTML structure and names of the variables are kept, you can modify the content by adding HTML tags (fonts, alignment, colors, etc.).

13 Note: The sent will be opened by the recipient client. There may be differences in the interpretation of the HTML according to the client, therefore it is recommended to test it by opening the with different clients. 5. Click Save.

Polling Banner... 2. Known Issues... 2. Implementing the Block... 3. Configuring in Flash... 3 AS2... 3 AS3... 8

Polling Banner... 2. Known Issues... 2. Implementing the Block... 3. Configuring in Flash... 3 AS2... 3 AS3... 8 Polling Banner... 2 Known Issues... 2 Implementing the Block... 3 Configuring in Flash... 3 AS2... 3 AS3... 8 Setting Up in the Sizmek MDX Platform... 12 Polling Banner The Polling Banner Block allows