GG's Flash Blog

Google Chrome now has extensions, and GG now want to have create some Google Chrome extensions ^^

By referring to the Getting Started tutorial and samples on Google Code Labs, I've created my first Google Chrome "Hello, World!" extension. It was much easier than expected.

Steps:

1) Create a folder called mygc_ext01.

2) Create a text file called manifest.json inside mygc_ext01 folder, contains code:

{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"http://api.flickr.com/"
]
}

3) Prepare an PNG icon called icon.png put into the same folder.
I've tested it with .ico file in my Windows 7, it works.
If we use a .ico icon, we should also change the value for default_icon to our .ico filename (e.g. filename.ico).

4)Now load the extension into Google Chrome.
Click on Tools menu and choose Extensions.
Enable Developer Mode.
Click Load unpacked extension...
Browse for the mygc_ext01 folder, and press OK.
My icon successfully displayed as an extension button on Google Chrome .

5) Edit manifest.json, add popup parameter below default_icon

...
"browser_action": {
"default_icon": "icon.png",
"popup": "mypage.html"
},
...

6) Create a new file called "mypage.html" put into the same folder.
Display something in the html page body.

7) On Google Chrome Extensions Developer Mode, press the Reload link behind My First Extension. And now if I click on my extension button, mypage.html will be displayed in a popup.

I'm planning to create some Google Chrome extension, but for now still need to sort my bunch of idea.

Below is an working example mygc_ext01 where mypage.html contains code to retrieve and display some picture from flickr.

Download:
Google Chrome extension sample code

Reference:
http://code.google.com/chrome/extensions/getstarted.html

Due to an unknown reason, the latest version of GG Commands MXP file takes 4 months to online.
I've got some negative comments regarding this problem.
Sorry for any inconvenience caused. It was unintended.

Below is the submission log:

22/05/2009
Submitted the MXP file to Adobe Exchange. Status: Pending Admin Review.

30/06/2009
More than 6 weeks MXP submitted, still pending admin review, contacted Adobe.

23/07/2009
Adobe Exchange feedback that previous submitted MXP file was unsuccessfully uploaded.
Uploaded the MXP again. Status: In QA Process.

20/09/2009
It has been almost 2 months the new MXP file in QA Process, but it is still not approved. Contacted Adobe again.

22/09/2009
The GG Commands v2 MXP file has finally been approved by Adobe Exchange, and released.

The newest MXP file is now can be downloaded from Adobe Exchange.
For those who has downloaded it previously, please download it again. GG Command v2

More free Flash extension

GG Commands is a free JSFL commands extension package, it makes jobs easier in Flash. After you download and install the GG Commands v2, you can access it from Commands menu.

The current version includes 7 useful commands below:
- Distribute to Keyframes
- Duplicate Selection
- Frames Selection Report
- Insert Multiple
- Resize Text
- Scale to Stage
- Slice Bitmap Instance

After you download and install the GG Commands v2, you can access it from Commands menu (screenshot).

Distribute to Keyframes
- Distributes selected text fields and symbol instances to keyframes.

Duplicate Selection
- Duplicate selected elements with specified quantity, scale, and rotation.

Frames Selection Report
- Generates report for number of selected frames in timeline

Insert Multiple
- Insert multiple frames, keyframes, blank keyframes, or layers.

Resize Text
- Resize selected text field to user defined width and height.

Scale To Stage
- Scale selected shape/instance to the stage size, or with margin.

Slice Bitmap Instance
- Slice selected bitmap instance to rows and columns.

Warning: Slice Bitmap Instance command still has a unstablity problem causing the Flash IDE to quit or not responding. Please remember to save your document before slice.

Issue:

• Only can see video when full screen mode activated (StageDisplayState.FULL_SCREEN).
• Other content not visible when full screen.

Reason:

• Flash Player uses hardware acceleration to scale the video file, rather than scaling it through software.
• By hardware acceleration for full-screen, FLVPlayback component instance take over whole full screen area by default.

Solution:
Set the fullScreenTakeOver parameter to false.

• FLVPlaybackInstance.fullScreenTakeOver = false;

Information:
Using the FLVPlayback component with Flash Player 9 Update 3

Issue:

• Text in dynamic/input text field not displayed.
• Text missing after scale, screw, or rotate the text field.
• Text problem when masking or tweening.

Reason:
Flash does not embed the entire font with all the characters. By default, only used glyphs embeded for static text fields, and no glyphs embeded for dynamic and input text field.

Solution:
Embed the required font glyphs to your Flash document.

Firstly, make sure that the fonts that you want to embed has already been installed in your local machine.

To embed a font thru Property Inspector

1. Create a dynamic text field on your stage


2. From the Property Inspector select 'Embed...' (or 'character' for older version of Flash software).


3. Choose the character ranges that you want to embed.


4. Press OK

Note: Make sure that you choose all the range of characters that may appear in the textfield
For Flash 5, you can embed the font thru the Text Options panel (Window>Panel>Character).

To embed a font in ActionScript

1. Emmbed the font to the library of your Flash document
   - Open Library (Ctrl-L).
   - Click on the Library options button, select New Font.
   - In Font Symbol Properties dialog, select font, style, and size, set the value for name (e.g. my_font), then press OK.


2. Set linkage for the font symbol
   - Right click on the font symbol in Library, select Linkage...
   - In Linkage Properties dialog, enable the Export for Actionscript option, then press OK.


3. Create text field
   - Create a dynamic or input text field on your stage
   - In Property Inspector, set the font (my_font*), and set the style and size same value with step 1
   - Set the instance name for the text field, (e.g. my_txt)



4. Add ActionScript
   - In Action Panel, add the following script

   • For ActionScript 2
   • var myFormat:TextFormat = new TextFormat();
     myFormat.font = "my_font";
     myFormat.size = 24;
     my_txt.autoSize = "left";
     my_txt.embedFonts = true;
     my_txt.setTextFormat(myFormat);
   • For ActionScript 3
   • var myFont:Font = new my_font();
     var myFormat:TextFormat = new TextFormat();
     myFormat.font = myFont.fontName;
     myFormat.size = 24;
     var myTextField:TextField = new TextField();
     myTextField.autoSize = TextFieldAutoSize.LEFT;
     myTextField.defaultTextFormat = myFormat;
     myTextField.embedFonts = true;

With the font embeded in your Flash document, you can dynamically set the font style, format, rotation, alpha, & etc. and allows mask, tween, and skew of a dynamic text field while gives a consistent, predictable viewing of fonts in your swf. However, embeding a font will increase your SWF file size.

Font embedding in other software
Flash is not the only software which require manual embedding font into published document.

In Microsoft PowerPoint, we need to embed fonts in Save As dialog, Save Options,
choose Embed TrueType fonts for PowerPoint 2003 or below, or choose Embed fonts in the file for PowerPoint 2007.

For web application, we can embed font by converting the font to Portable Font Resources (.pfr) and Embeddable Open Type (.eot) format, and then using <link> and <style> html tag to embed the font.

• <link rel="fontdef" src="yourfont.pfr">
  <style type="text/css">
  <--!
  @font-face {
  src:url(fonts/yourfont.eot);
  }
  -->
  </style>

Additional Information:

LiveDocs:
Embedding fonts

Flash Quick Start:
Embedding fonts